{"_id":"@aofl/picture","_rev":"130-6d5232136a71906be8307dcbe577baa9","name":"@aofl/picture","dist-tags":{"beta":"3.5.0-beta.22","alpha":"4.0.0-alpha.45","latest":"3.14.1"},"versions":{"3.0.0-beta.3":{"name":"@aofl/picture","version":"3.0.0-beta.3","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.3","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"a799d0c0691dceedef58b43bb80619b688c900b8","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.3.tgz","fileCount":9,"integrity":"sha512-MudrDqV/rbnXEhEBsaLTRaw/PUSczb4d4XIbyz06kctySZHF/6n5fsQo6jZz7eGgcvFwoFTyZodBczVfeH9Hsg==","signatures":[{"sig":"MEYCIQDZ6Lo2SAFmXZmyGRvfdh4spzyFNjW+31+FT60mMF56ggIhANAbnHXQwLMB6IlY6vPo+IREw15YzScrM7SAmQAOep5X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdma2NCRA9TVsSAnZWagAA130P/3M6CVeXx5khinJ6OOfe\nWBaNTKZoKH2xwEd3462Xq9tj4gla0q6YzPi/8724we48lyPK4DoQo4sNKPBg\nL7tpe4uJzgSFVvGrhM1vvnSptHwv4nBIBDmeqkTp5HK2lr4FfgOp1KFhKWtf\nQZfZr9P0RubVaw7qAy+b23ramJ8tcq+JC5blcbAW3MCc2a6WycyfZNvZhkfx\nv+z0v6pZ1QpbybOdLQPfZBi/GPp6mR4O+VD1f5g214jilZvCKDx4a5Hcf35t\n75H8xeXhHAkMiH8JceLfl4CgxNFCMbvsUB3Z62CtfVACaWeXUncEG/qzcId3\ndwPd78bKQH/n5Pg5z2cHG0fvtZn6UGXNi32FUeZ+WQOORABZYzBAh/3cZWXo\nzCorrWnfHi++5+sBMFEB5a2kJ/05jTEDKYakKf3hX4WwobFmMVAnNZ0kVaAq\nwPQQ368WGjoT/NMQJ9k3tLXU/tqQSpJjq2uYTrhxcze+R8GVhdjwmZFGvRyA\nZmRtlZKE2LuqJvPPloym4VbGoMd7Ti7Dpu22LPU1PRfuwNleMBlLSZzA11Oz\nhHliK4w6ecsuVkVkwfXzkO+P5UmztzXe3+A5BvpCDuanSWraY5cpMsYM1BHA\nSECL6kFkTA/wfafGbmR9sbL7lyV+FMAeNzkrwNlNGEyjEbHrF+KrkuPeLEdp\nsHLw\r\n=qzkR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublish":"npm run build"},"_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.11.3","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"devDependencies":{"@aofl/cli":"^3.0.0-beta.3","cross-env":"^6.0.3","@aofl/element":"^3.0.0-beta.3","@aofl/component-utils":"^3.0.0-beta.1"},"peerDependencies":{"@aofl/element":"0.0.0","@aofl/component-utils":">2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.3_1570352525158_0.39127560211751633","host":"s3://npm-registry-packages"}},"3.0.0-beta.5":{"name":"@aofl/picture","version":"3.0.0-beta.5","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.5","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"84f57eec6495d6f8aee468f44266925787a217a9","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.5.tgz","fileCount":12,"integrity":"sha512-CST7WryqW5nyRl7ePG6A7jtRRNNpTUWd0LpaewO0s+8B6GmrsDL2veDul4Icg0ZeLGqNMXaiyWS0qSooH5IEnw==","signatures":[{"sig":"MEUCIEOm5av38HDjFxHDycY+5i2bswT7fUSOgx+fj2m/fnDdAiEAsAmmmAjUM6pPyY5oTtsWoeXZaKLBEXcFFeUF9uYzxrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmbxZCRA9TVsSAnZWagAAf7UP+wSTRlWt2JLioEXnaoOu\nIYAPjt8E8qT9fGIb5N5VwSoKkDx8Ue3RyERF2BoUhmEIz1NUHOObyzhf3kVn\nONhFJMih20wM887BHfudjPiVNVWGsW+wwJI1eYYQ8VQCB3j1OBe5Rcf8hx4W\nlbRh2IF9qfKbnjNqe6EV4hF9Ev2Q8xWj2uzzd0U86VHVvgtJ0tLOfZfjnpKQ\n+tvtoOHlduChbUEr0WEFRrKnTg4p/IFRXsNr7uBfoGcBDMcQlTg+eA2BEnjp\ndv0mBcLpb3kCMRoOkgS+D4/MAJjZ/y+We0euEGXdI0ZtwL7iYJAivjV3ym+h\nrfCSr8+g4b4LRxqPvotKFUx9r3W9aYzG4T64h0HLVCwiKXkMHwlR/+paUHSw\nsCIOqRg/45q+n7pb6/by/95ISYplUN9r34E8y1i3TVL4xWgNRLnKc0nhA894\nrupn4Xe0co0L71vVIOLUoCEVvS6PiVqty8tbPpjisonwCsYbkjx/L1pBZmgU\n5S1iaPeEpluutCHo/Kl0sXBMfCbJPnWnEgMGpSCwo316WAtZHikxWEEsSAZx\nrj8owMux2PXGzvIRC1uE5LFouaFUo7C1xw7KG7t8m5NDxsbck4BzALjPHPSt\nh5QRIey3zoyVRfDNi/rXckIBWMXatYABiM8NAOxdRL0iirbdZ0DrtnrldrX8\nMjM4\r\n=KA01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"6eab96d111f1ebe9e5c5cff00cf108d46ac4ee19","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublish":"npm run build"},"_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@aofl/cli":"^3.0.0-beta.3","cross-env":"^6.0.3","@aofl/element":"^3.0.0-beta.5","@aofl/component-utils":"^3.0.0-beta.1"},"peerDependencies":{"@aofl/element":"0.0.0","@aofl/component-utils":">2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.5_1570356313164_0.39046173583979127","host":"s3://npm-registry-packages"}},"3.0.0-beta.6":{"name":"@aofl/picture","version":"3.0.0-beta.6","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.6","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"32aa3736150822a3c9c233e5223986d8b8f86207","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.6.tgz","fileCount":12,"integrity":"sha512-P9cOpJUCusq/6VueQat743ytvgH6JgnOBdVv366AXh9TWIBQDVoP4LC6HAt8hz7kHKGNQfnFGMMQskJC1c3BAg==","signatures":[{"sig":"MEQCIDMYza5R7S5+S97dfSkqE2GXSpvz/laQQv2CWUGzFni4AiBp8uWOGHdf6YNEh2qiU+YQkG1UDHF1QnlxgwdyRPhdpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnBVpCRA9TVsSAnZWagAA9zAP/2PTW1+xlwyhMcx3E0N2\n253fpNrj2Ruj+aJh73B7AHU9vDlStnY6LljonTIR2qbsqzS/8VugpjvmqIRR\nvSTaYQL8FiDsQK+H8V4Pob6tbHjh/9qmdOzt8gOKIn4ngdQINzNA5avg7wSR\n/7bvO3wxlQjtc9MHmHG3i4wltJio2QD9+Fzrov8za3jRp+4DRkNsnXeXzXVd\nXKKTNsuT8EEjiRbSXckux2uXmmfgTCph6X/vGXAk8wZKqABPl6bV83lJhS0s\n0R7f14jao1HLnqjpL0xAMwRE4MDN/61oP3oZA0uFnrXdFIv9oaSN2PY9FS5g\nsb834ldHluKL29L8FASUv2VXzopgte0RVBGzGEOTBMgcndVPAa92+6KEQiZZ\nwq1cgTloWN/H6vx5XUxiOXR8oYJ5/+siLmH8+t03Q+0vYgMwYXl6lYg1492Y\n/PhZ8yBOkGFj58/9KBRPNmWkSLNOCPq57B9z+4ENy0HDghQykZeaOzB84iIO\nry1/Dv2G7nze9PfxVR+7QWCCdp51lvIM4sbLF3QrcqpzJsIfVvtbLAodUPIN\nxOsTmG+lTry3Aql7BPNhewTg1JQDQgxd3KMeWxQsrdCKP0dWreUhUnI874yu\ndjbSt37pPxIQfvxv9lR22Ot0u+4DeFwmXYWJGreioyCwy4rA3xlOQRHttAZj\nLLY0\r\n=payd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"23e8e9dd00e515c9305baf320436e43f51d7edd3","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build"},"_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@aofl/cli":"^3.0.0-beta.6","cross-env":"^6.0.3","@aofl/element":"^3.0.0-beta.6","@aofl/component-utils":"^3.0.0-beta.6"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.6_1570510184610_0.0008774538577080992","host":"s3://npm-registry-packages"}},"3.0.0-beta.7":{"name":"@aofl/picture","version":"3.0.0-beta.7","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.7","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"2bfcccacec480cfda2e4abefa5298ecceae36b30","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.7.tgz","fileCount":12,"integrity":"sha512-O40SHzG5Yftv01KvDfhhVWWw/Qs6/bOu64aGU+N7MoRCoNdQkJVSAu5WvmSHznI+qV/oXsZtDkvXESzou+M0XQ==","signatures":[{"sig":"MEYCIQC+uOkdmZ3LX71jAM3NcSuUO9FKHCdP6Aen9Dubwq4WrwIhANk7xVlc419LeP6wSl+WSdU9wZVowyIX7NFbM571Wl+u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnBz1CRA9TVsSAnZWagAATaMP/Ap5ef/tivXyodC8G6Um\nt5TMbiwrIrwsFH5HuK00pCPKG8UNxzTxb56mcpSFKPfUuH994DgCaWtCGULQ\ndfQJPLU9EemZJSZBV8cEaSvfe6acEZTPnG2aDVyAFo2IMgOxepFjdU04ozR5\nO1aveO19u6MulSX0W0VnT3NFMunV3IiSugrp/wNnyXHmIseylBQ4U1f0fpoX\nLGVNDjE8w3bWJbWoWxXi/lRMMZO1/ORZ1l4IMOuo7zLyj0+hwBhU2EYBUqXV\nr4TAtn2sNfozJgTLg/vuK75W39yd6nRQvM+MI4SnKit/7KEQuu5jwZuehX7v\n/KXacQX6nkbEDY8DOSZ+/EWHNXk5/DZm/CP9N+quo/ljodXjE8fSWCiId7Lg\ntLl3dXoSYyRASLxXvBdNi4VvlG0QHfwX0N8GiZrjEa+Ss+nEH6HOykCUwU+U\nY0QqqNrLEvn30L91+BJSkovoXRvU/1cASt08y29CQ5zqqgZBc8da3vP3rOH9\nE+I1oE4lxsUuL+rqPJzUM95njGENTiqbNu2ZX/flpN7tVgXJkzvhruF/lbpP\niEe8OWLxGoJMdvyO0ZPT3WDpXUxlsmRabZZgEVJdEbu7FvisZNGqwcZCazaH\n9y5j9bFV9Ur4+uyUqB6lLrWPF3AH756hJnCD92XQk6FGwAH54EO61OzhbgLd\n/Ii4\r\n=T5dm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"935c64ab2670b83a177719b549692acf9b6fe2e1","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build"},"_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@aofl/cli":"^3.0.0-beta.6","cross-env":"^6.0.3","@aofl/element":"^3.0.0-beta.7","@aofl/component-utils":"^3.0.0-beta.6"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.7_1570512116919_0.5256881524461532","host":"s3://npm-registry-packages"}},"3.0.0-beta.8":{"name":"@aofl/picture","version":"3.0.0-beta.8","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.8","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"2fd689b0f619eb1edabeaab1e9244e9d4a553696","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.8.tgz","fileCount":12,"integrity":"sha512-pCcxh4Ed5QhFKfcH4mt8vHBx2kIkgd9T9xrtNTihFBoYqeEPYpGwbqc4X37a3QRa/TuP4HSnteb/bnUr9v2FHA==","signatures":[{"sig":"MEUCIDd6q3Xadzv0+vrIUJ7kzbyrRF3qLmW8gOhfJ2QHJsL0AiEAmxCJkcM3edckf95eaEL6gzc9bfk41Hud3GIqmkNRZik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":43419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnCMiCRA9TVsSAnZWagAAZTgP/0v3X4XCZ7vmToE2M3S3\nJWbL1irZ/dXkFXXU9WOwcetVqSKPOCYp1uqOQ6o4t0bKRCmg0LytHR2fnf2X\n8BxySbmwRlYs4beyts+x3ln+7R7cZhy6OjRNQKKRSdk947w9K/t+27fX3bi6\no4/bf8UBahx/k0YAG6SPIfR2M/FodQQfWkeTOYNATO94WArtafDQM0JBhCIp\n8NCF1Bd7M0QAT0ATl0Ih8bPScOMRYyDvR1Z0wMhIR3wucV7hQ3Q+XfVPgd1U\n2fZkTyfH6pebb/nEHlDM270UlNfcnRtSG1BJY8T7Mmp48wnJMgPOBajEBJ2D\nXhbtQMmhOOx1oWfvcJi7l+R+xDXwUENnAfWu0hTtTX6orutGKIOh6jzd1er6\nymMvc70eIKnuwRYJ1TNW8g1Qwzs5gZf6HUAjYAbqC+XDiD7cIGX9eCyy9KhW\nlW5z9Jhe/h7/KmcbGihATkuciauQdzhPSDNICCuHq/SCaDbijdS6VjuvD5QK\ne8rbvY6w+uC28ntuxQR+PEFlguRNqqu3GlDFytmWZtYKSYVPfDsqdRcD2orN\n+2g9gp03Ge97tUJuHCjn6NT8LfnSjeBUvGK+/Qh870nwgj+KYMviNEsbtft5\nsZMi6QzmXO38iPlsYxjbefoMIu69SCmc9Xhl7jTVjU4XZcSGnavPh0f71xwu\n+U44\r\n=UNOU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"31f766f3cf621147bfa1530b863757cb08e5fc10","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build"},"_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@aofl/cli":"^3.0.0-beta.6","cross-env":"^6.0.3","@aofl/element":"^3.0.0-beta.8","@aofl/component-utils":"^3.0.0-beta.8"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.8_1570513697785_0.23779903076116016","host":"s3://npm-registry-packages"}},"3.0.0-beta.9":{"name":"@aofl/picture","version":"3.0.0-beta.9","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.9","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"45598509da3d3da0eb9f5dfdc3e0a7b67ddd8c2d","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.9.tgz","fileCount":12,"integrity":"sha512-LaHIGpjkNtsl4qgnmAyFP0F6Ro8FQ/Eo18NsFJoZyWLKfH2Z4ZMHedQ5wO+mZvmRAaDVm8mmGi0Xy5p5Nxhncw==","signatures":[{"sig":"MEQCIDmXZev6mP4c7jMHTsQ8kMbEZPWsrCd/7rrQUSx1B1uyAiABWtRLN72inkcZdlBf0Vf2HlSQdnv+xmA5DrQo6+0m4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnCiiCRA9TVsSAnZWagAAU/EP/j0Oet+b8hgejRqEsylj\n5bF+Y83nNViT1nWuma0KqmNqxhrSI801EoXVzg4+sNiNaPY16x/Ie1l3HMry\nqZFRKRo+xHi+3AmolrZ2ri5YF8NB2l53pkati8bdA27GgrU7apR+e/oqYacS\nsI36HbGFDbwFPWA+Xmtc2OKl+l+g/vEdm73i+c3kdkmHWz6QSKJcST1ZK736\n6cz/HT84VqYHCJyfy3mt13n0R0927vaWWWp9IqJa2fHviHNn9JhSOTUORFls\nPMwbO43bJdJfJ8SuaWQihQMubKUpwv0md49U/h5daOxqSvF4bmxRJSyByuhp\nIY06RvHCGzCigpLZTk4zDJdXBLf3THn+pI3KI8ZFysFCCREMIxcthWYGk+Cv\nbbr2/CcK3WqhnrWneU8ztPfmzr1rfN1XRXX5LbXpcJ9at6Pcj/6EJ54JvDgi\ntok3awsiKRPldvWWc2FN/TKnSFETUS5xvLOJ08fr5+O3r1uF78JCyXP8Gsdy\nECsPgg1YpJ97UfUtfXjhOPLH+z4FgThW196AL4i3OHCVXBrH44RNrLcdfGlU\nAOvwV+ZomFfOM7KNwYesMiPHThw+Hv29CwBEnNJBpibcwbknsbDjnWlD/3pr\nBO4cHIMIBxfg4SpELf7f6UFQWWoEQcM757Otc6RYmFzpEHKs7GUx4JppY40C\ngWKx\r\n=kwmb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"e9e6bf24a51611b9b997dc99e770d43466ba063d","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build"},"_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@aofl/cli":"^3.0.0-beta.6","cross-env":"^6.0.3","@aofl/element":"^3.0.0-beta.9","@aofl/component-utils":"^3.0.0-beta.9"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.9_1570515105528_0.2132575165987758","host":"s3://npm-registry-packages"}},"3.0.0-beta.11":{"name":"@aofl/picture","version":"3.0.0-beta.11","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.11","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"8a8c2b4b7aa4aeb5666ab0bdcbfbda32e717afa8","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.11.tgz","fileCount":14,"integrity":"sha512-aH4qJ1VpkpAVB3OdjntWxMbhZA9fYfZBh2Okkv1IvJDHEgcHBFp3Rz6bDyAUIyvO9nmwoXQTyeRnzR/+avzzHA==","signatures":[{"sig":"MEUCIQCqOPloDZPU/w1oPh0LTAJmQrH3vOcXTD97Vmis6ZGQ1AIgdkY9swhW+YZy5RBt9qXaUriN5/L6R+zcpz6RTULOZBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnFofCRA9TVsSAnZWagAAUIgP/iyBW2Pi0Wqf916c9Y4y\nHrYp8XFg+ErxiYZ32+GGM3vsJm4u9Mm4Zjsm1D3Y2EuFZXnHyPkoDD2Zsw5O\nG7Bhx9rk+GwbswP4mMNIp9euDdRDb+iNmzq09EyuiJMKqk1t2WMhIbRlqr0h\n79QZ7+51vPGRRXHdeMShNd64KhctF2nuNIAwt4GzTH0THx1xhmk2CQfks+Ya\nO+NQHF1HPVzDdS2JO9jkOSihUhZx2OMv6HMiM1BdYeUWpx+vQ5/CwIf4mKCL\nOkB8XXyMdP6k76KoZqgYx7c9gnCihcCIm3XjtSgZxWEKOfV3yAdKYwH+EPRf\nmQWBZ1BiCECLf42DYqmGcM4MRdm8tmec+4USZGlBLccMZpoDAc+cYfYwnYxd\nZcL014F2tTz3qoojL5rCL21r4J0ZB7Q+jR3sdFtsNdHSDxBAth1QiDrG8vRR\nKYsBW7towJr6CnK/hBiHHD2EoCQzyZnXdkUVS88sUvfjPnfm3w+MNfWu+gfy\nC0nNfb/dz8znFBxHOnLEOxlLaf/Qm2gYl/K0uUvPbJ0KyY+/E2VejMGIHpf1\n7u+eRzm7cuded2bwOw7MZ5SsP1mwO9V1VIb5wAAwAW+Ln92iGtwYpjkYIe3M\nYuLM5wRme5LIWHHiWvG8l4A5/ElWiKXOwDc6To1VFUcdfHJ/GXZZf5W6YZPX\nP+aa\r\n=mpp1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"ad7cdc30523ea031f8d1bf5c62440f80f75a7308","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.10","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.11","@aofl/component-utils":"^3.0.0-beta.11"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.11_1570527775193_0.5764004080224159","host":"s3://npm-registry-packages"}},"3.0.0-beta.12":{"name":"@aofl/picture","version":"3.0.0-beta.12","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.12","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"aad664d88ad14ee27db6aaa716db8d13137d399f","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.12.tgz","fileCount":14,"integrity":"sha512-oUCE8+mo+SwS13FgwHF9jK+9iolqBqGkB5XGaT0iYoihyeglSuDzMnBW0kE+znOzjBAKlk48lxPvAn1ZnyvrrQ==","signatures":[{"sig":"MEUCIHo+RZoDbKkqpCHsFec6e7R3ZOtwWIBfOBHRMltXsC4CAiEA+okWJKOSXNPyEYQl9m8HYPjFhM4ebA1KKQx3d9Ya43E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnFyuCRA9TVsSAnZWagAAK1sP/0fXJzwvPC0Uv8Ra6II2\nbgs8Je7wbzX7aTXjcEcP+Mq6JKXUoysjvpqv3iS7A6qOXXDdJYi/OMzpOWRL\nwm8p06u72x08/4N/pflolujM4T4372Rc4rQD7l0Jm5Ur41lKogwHgtckI6AY\ng3jsGzKRaC1O0Hn/WrOMJyBbeMIWszrX4XjwgYpuOHlpFlDLXJjtjObBq8Xx\not5c6bueiQtMEOrqKHj0GGyROTLi+NMHf3J5I2cEFspYw5GaYSKePeDZLlyA\nRAejy1oJG9GdJfu8UKy7bAB4ZssdMwt/2UpcLq4wrbbCYzkiRsKomK8pWHZ4\nDvJq8YXC4ZK8tCbYtjGM9yTBCiigRntxrX6a4H63DcvvOiI7b87VvNuXlU4k\nMp2fYnPttNNTfkMp5OH7tC+lmPWqe8TY3SbVCLCqx/axCQyrTML137x51aXj\nE7sfqrx3gIAAhtK+UZRlJUQcnX6G1dgj0DvHA8hqEpS0aYdQclPfKocHbbjp\n/Ns9acS4AGwpouTN9KtCPYWvQX7AOr4V8ilD//BDMw0tfq/EqFqA27Tg4Aaq\nLXePrutrtUYd5dTXzZhZ9Gpgp5V4wCwXpuwshtKRQfHoaPqzXSDuPvBQMutC\nRR3nBfDTWh81JkIbggkT5qAuM+xAn5F35Bh6g0p3t/rxOVpF84LyLRlW083d\n+4im\r\n=I+Dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"7fefe74af1885e7b807b6ed3522d9ae661e52645","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.10","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.12","@aofl/component-utils":"^3.0.0-beta.12"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.12_1570528423089_0.06215024522471535","host":"s3://npm-registry-packages"}},"3.0.0-beta.13":{"name":"@aofl/picture","version":"3.0.0-beta.13","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.13","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"fa61453d503c1b06aabb64238e35f42d493ca6e0","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.13.tgz","fileCount":14,"integrity":"sha512-UJxsQ7R+Vrrg5tXjFaurBJlDEB/s5pQ4H4AW+ASH362wWVUjp3k0wITbLH+3obnNv0Pw+jtleolsRz0Cx9GZtQ==","signatures":[{"sig":"MEQCICvjT7oA3Ccd1tZPqsiWAWPQX88XBS8692Ynn3cKgv/vAiB1X4G/+hA8N+LSrJNQl5sar9zK/A2OihvO3cURdQrmoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnV5pCRA9TVsSAnZWagAAucwQAJv3WFCBJI8v318x7KB+\nn5+pZp1cD6Xhub3YX4ImeSsfFxsQIz29YzCAmOTg+5Nf3NfQ4efNAu2iuKqe\n+xVDsoQigzC+0r7a0KSHS27eDQY+QHmmCO7hdAz0vC5tUW0o+EMivenWBAP+\nhXfo6yNcyCd/5V6h7t+qH1YhOmBCHVfkC1RM//xLjN4hnwenwDA0m5fgVvyU\nPq0k9lZn4XbZzV1J8uLqFB3bJBq+khpIVKitjXd+FP8AW0PsctSvc/ubLmld\nDXZZ+CwxGCDyvIXhufKnh4e3iEqW0N7B7QoVq9WULv153jNWK1uProYcGzHC\nF3ul3PJKAcsGhhN3ky2zDNKjGy/hEVavJ43llrkH+puuF9MdRozXKUNYIBxG\n5o0r3/FU+5ZuUYpRXl5B2266XY3VbK8VG2G36xMzM/3hFs/G8HXhOdaKoFrU\nNjwljMibdQHbzGsI6ZT+zdOQThlvBABoKACmAXYgRQMiXs7i9WWZHWKzhJ+5\norZ9l0MXI0LqioufmCs/1VpZ+womTWj+41TfM2DreFAaxaKADWLvNyVGRsjv\ndKXmLuJ2RhBOXwpZKUpiG44xFw1asst0LKxx1YYnvr6hs+Hg7H+StT8itDDH\nrrM1X6gAzFTLbCM/1NY51djYRmdRTSU9my5PIjajH9yXm00TWxm+QEsbFJa5\nSVPO\r\n=EoiC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","gitHead":"aa2e52c46ae9451fde097de4734398430f2127a7","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.13","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.13","@aofl/component-utils":"^3.0.0-beta.13"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.13_1570594408518_0.8662374598526434","host":"s3://npm-registry-packages"}},"3.0.0-beta.14":{"name":"@aofl/picture","version":"3.0.0-beta.14","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.14","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"15856d3d551e30450aab1802d5534235ab785903","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.14.tgz","fileCount":14,"integrity":"sha512-bDkC/S35KSOTG5qFDsf44yH9hRwJJMU5kujO2fVfAaRiT71a/T+Na3Mpl8w5JIWLGViOmBnEF6tMHJsQfxZKBQ==","signatures":[{"sig":"MEYCIQC0yZJl1ozUHwmIDjB7VAt7s+OhsXRZvZBzyNLWfjtCdwIhAPruCyKH68+T9Gnnd8GoHUIpjJ/FfHR5dK9cY9iBbipJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnWMGCRA9TVsSAnZWagAAdUsP/35WcPJEnnhUS+OnB8Fl\nVxy5bmY+33I5o5uiAQu40IG2CwXqrWTkDlpCUJHfgoKfU1MCEN35aHPz1F3Z\n+48UfDpIT8Zner9VC+vjLtKs3JK1ZVv2QftCqrCvzrT+3Xte+Bb0ndsM5zHs\n4c4MLkCfSEI52OHXTAvN6xmtj81o9n5rLXeilrBtvIpRAiMcmO3/54k+0ju4\nBtAYxE+VfmFEf7n56fyD8AjqLucVrX41YKjJbbC/dbarzoYWRjBq+JO5YyVa\naiNdlqNd+wZzLN+2zYz/jOZpyz+Heuu+10hA8CtEycjwPwK1jqceNQ9MpYEt\n8ns+gnC8EfosHG6OMf6S2belTx8BQjmMOtuxrJEWHQuGviZIv+MX1Oh1UQ4Y\npXLTooWf6Sok/bkUkDT9eON1f5+lLtLJ32YkjK2SMF9gOeDNHgnEtbkzeLxk\nOEOTobz/OiHkKTk/h4z6S4Hr+NKtAFdm2S4qwAwkxFd8zBm4WubprsFZBT/k\n9L8G8Yfo/I2vZ0ygy5Z+8QSVLSdiiomYWOUw93K6TrqzuDIfZokdMol6+UgW\nj4UnwbUIrUYXnjBRy9wbegDhS2Jm57lsfI0Z2BoZ+Nl4Qhz+sCqN/hqp1bYQ\npOQpsZDIKevUxXErfCSozdhq7pE5tL4oF0nZFhvfTKtaRgZcGMfWBahAfAAv\nP65D\r\n=b0bU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"80c0c882f3af67f4584dc8d38de8a62ca5632c94","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.14","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.14","@aofl/component-utils":"^3.0.0-beta.14"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.14_1570595589313_0.36336348411855734","host":"s3://npm-registry-packages"}},"3.0.0-beta.15":{"name":"@aofl/picture","version":"3.0.0-beta.15","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.15","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"c2ad7f1a495ac9018eae043e603c8bf5ea9c4a52","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.15.tgz","fileCount":14,"integrity":"sha512-5Gn5Ycd8+vAOgVaF9pZwgjQSxl5ve5SRb5DLzGeZYblkZQucrvSZUN+JEU3rQmgM0+L0IBtcg5Zs0AqVqJqApA==","signatures":[{"sig":"MEUCIDKPxB1BCvW36SO6XUDOFMX8T27iciVb+ETv8R46b7R1AiEAoelZf/ysdrG4+nK5JVKryRdgefOm5J14/MiLJnWMu1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnWcoCRA9TVsSAnZWagAAUbAP/j9vacetU9YdwkV2UJT7\nr49dllY49dyAO3vhblJRhQrKQkuH8qNgfABFvI+r4Ca6TiC0qaq7oF0Yxiik\nw+XzkWsIHnh7+XTre6aTpRdD8qfHIxXU8IkoySp9pgt1+CObH7h7lBKrq66M\njbeW/zgmUPylMWaQtN6KbCF871Goub0bl5MMH6y5nCLNK/Pv4fVpmzLJW472\nimN4vH3Spr645oF3EWxgqU52t8zIDnJNuP3nQvq8UL0cTnTXV5AO5xuSKjof\nHmFzHThsIm5EYqErydR97aKWfiLLALo4GPpjZV1VEmhLZKOXAoWPfIw/8roW\nGC/zqCrzdPS+6opXJBOci4l0m8ojwhvLcGLah+PMn99Um/emV6z/LQcwKfew\nFBe0oCqkp73ISyRN7ud71K4judWj4NhNbEOROnKoOOVpAGR7LgUyQV9OflXs\nHdaUIvCJzlXtSJAT6fke1wvAUk5iLKn6SmW699O7NErKYmpEJoiy781b14jT\nGN5YczIhNg+/X3EeYAATGmjFZKN6Jxf5Sm9sd2LSGLtIQKOo76CDlG6TxFlV\nlzpAds/QlddUjwPr9tJzofiCklZuS+gwCN94DGohnsHFHKys8G4YEbBHvdRs\nqB6awMn8CyUmarj1ZaW8x2p7GH9EB/eGjjC6XQWOXB5Qw6EmyOth0m7uRPs7\nk0/P\r\n=m9e6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"0fab45fd3f4a1789a3683dbaece87d579e9de597","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.15","@aofl/component-utils":"^3.0.0-beta.15"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.15_1570596647934_0.6619284304323616","host":"s3://npm-registry-packages"}},"3.0.0-beta.16":{"name":"@aofl/picture","version":"3.0.0-beta.16","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.16","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"fcabe972fbabaac3ebc39a1675cca9d27304bfee","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.16.tgz","fileCount":15,"integrity":"sha512-LSI0h+PbpZB+G7gYGETu9f7Eb9poVitk8KoBD+NWC99eW8LgV+4wM+XD13Y+/dtjWRzCTc/jDlCM64boOORGnw==","signatures":[{"sig":"MEUCIQCMsQVWpa1fvTTuC2+Q0W7LgahuBlkf5/MECSA+l+QcSAIgbU680TRJGCA4G74kv1v6hePekswVNZXrZikKCDt75/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnWq+CRA9TVsSAnZWagAA1A4P/1EytWJIvRFwOTglmHKw\n+H+HCRHUBT2gBgy3Fxbk/FmmUqX3BbVLqh0dkRtaMHt1+7Y6GE6hC8jKRZv6\njcbcswT2PQ6u/W9wkPQ7lQw5iqJsQl6MT9qL4r6uggptLaveRLx33eFzlggN\nid5tIl4Ghir1GzSIWua8SdwCbtMsAft2YqalC9jTwgvX10rQtevbpJGyDUum\nuK4W4UDH9QUfLTokDFb/AjpH72Ss1QRNRM+teSrNZMwwbtfWOgflCXfqN792\nqKZfqvqcMVXyB2RYSmOf9/uL+Oc4Edo4vD9LncZ8xFcSl0HDRZ5BELrhVIRk\nl6Ou01YpIKOAjwlyAUK1031P6uadtXpts8PJTtUsVt5dTjSxgiXHaat/024U\nO0DVpM+sUaM7RXaynSj32DYQpZCc09523C0r6xCTKbNlfvhwgGU15dDNdWfg\n1mUSf90d91CqZKqi/zwOl/ZFuLpzwwpre753D1/9v1Wv66GtZD+4/l+b8Q3y\nfmpdcUkP9bRhof8pPlnO3wwJUW61f2o7isTc7Ph3vnWaKbKleGfyEth0/lRZ\nv1UaHZmBzqTS8YlrM+uqebeMXy1MEa2k0Vq154Clls4HEVAcXlNRhmZSrBt+\ng1ttyisSyvBsnJFGJhV86U6Y3tDf+N5oDktkN3LQ+xCpHFbEgtu3EAr9xBJg\nbq6U\r\n=bYYK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"32c2f889b64c30fba2458f8704f7c135b47c5b95","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.16","@aofl/component-utils":"^3.0.0-beta.16"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.16_1570597565861_0.7992700871600609","host":"s3://npm-registry-packages"}},"3.0.0-beta.17":{"name":"@aofl/picture","version":"3.0.0-beta.17","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.17","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"f9ecb1b59b515082e054f2faeeaf49690baf0898","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.17.tgz","fileCount":15,"integrity":"sha512-a7DJRNLaU7XaZNGGMS+1jxYpDUzHQBjxOo+mDOCfO9e8IQ1UKPBcrj1xnuLJ5myZ+4xqe0BkbdMACef1X6aLzQ==","signatures":[{"sig":"MEUCIQDgLqz6yv2mZ7Z7lOmTyOrtdzTqS6pNiLSFByT0Vb8LSQIga/zT6sJCV1tuuh9wP6xomHdlBoIXhEUuSGCast8SMJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnW8wCRA9TVsSAnZWagAAh6sQAKOxucC3S8xdH2RLPC6m\nPNzwuDP3uoiKQhPh+j75XfUiUDpYxH+VD+JfTzv8ocDEROWpp4/ayyqQ04MH\neVIdjL4UCINsP2Wh4zuXEStZyjKwXnTy2YikXrt1V97vnq0NxtzDSuvaldZT\nV75jPDLloVOm7KJG9hXBytZAJm0htT+H0HMZ1zry6Mz3nq875R3657KRNUnV\ntBI4QMGm4pdP/kqQraTLrJnDThtGYBYkvBYyatePbdm+Vx7g+Dqhq9U5ufbZ\nSCRKvzmA3j/ClvbQZPz4Un8PLfXWP8acYvmY0YzQJx80tdgLgA6EEZDsu5cI\nqvcGjV1y7HR8vW/IlMKmqUc/+lFZWEdCkaKK6Ia9yhXhxSGSucYmgu2i6zSB\naWwSqZg/ESSZnYpgq/1rKpKJritQVLKvWLOvJgbJ9N92HpOCs4kue8Lm7wUL\nxSNYZ201dC+zzFG291yG4t9CqA0VlzN6fMRPCLyu1O4c4Gldt5dL55F1PAXG\nqQX8qHahz389AOlTd44S4/htdt+mHfXnM1oslgw044RRfdTw9KWlyP0BuWi/\nXNEE99rMKn7AJVhlVILP/nf7VY53i4qXtNXyfW6ZhzO8Qlg9HFR9mJMO5Ves\nIuh2bS7UT8zAy3gEzyJSfy32WgAHcu/U4cxHn3hZ3d+wC4zcl3iQC7Al9pZp\nfYUb\r\n=flLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"1a9a0010d531b8a6ab7287dee07687c312379976","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.17","@aofl/component-utils":"^3.0.0-beta.16"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.17_1570598704225_0.27195942240957205","host":"s3://npm-registry-packages"}},"3.0.0-beta.18":{"name":"@aofl/picture","version":"3.0.0-beta.18","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.18","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"b3d4be375a8fa6259caaac412cf9ccca70d6fb2b","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.18.tgz","fileCount":15,"integrity":"sha512-xfj39rbVTbh5GdqBDHQnHek4QHmZQuw94dn5d8pFUbBkhnE0jKOtsPBM7kZhW6QZ7jh3DjbRIOMgwhd7PnSLcA==","signatures":[{"sig":"MEQCIF4WEbWyIg31P33yVTgusPT3L5WAOLU9kXB4yXG/qshdAiAPBXgBSgicNKbdTbVvIzg4isJ73ckafCJ2dXbXUDvIXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnZo5CRA9TVsSAnZWagAA+QAQAKRY9wc6Pm/T6gFHEjzG\n8z0uJnffrXGadV/B0VFEqHz9YKSaKLhKOn8MFrNb3w3cae7cj33ULnx8I9GE\nEpPijcxsmmYwHPqpcP6mJ77nl7UXaqpxUBBGzlcH9AOIr3YYMr5k+Nn7+qGY\nzsnSWDS6eQa+5/6GnbTxQOPSYNU3T5edOTNxmHuj96P7jDISurvTSu+xTJuH\nt3yTAioIjEFwvLNLV76YE6f+Rfa7zHkWcJ5UyagDzwxzKq9PL7n6x01a0o/c\nDwDohcpPn8HD8392X7CWAFfJ2N8OCo3JHmWfF7leQNw6BmviZ6fzqJkc6P4k\nqv07R7G9Rbt0jUeGm1BV7E07X1o8agomtUMG5XIy2ZlNmDmUxpdzoXbG3n2F\noupb3enk4klRIfj0hJDtu4/OMxXKOWme8LqoE6gtsHQXAvDi4g6rYXBioHwY\nvu35+gsZ5ubfLmnULhhldMqheY0Y1vodsE79f/Rlo2stdb8YpmM57QJhxKG2\nzh54cwqOnbp70qDZ70QLPMYfNK9z9c/U/6yz2sBsUECDblVhxHpnv4SU6fAE\nrssa2q1RZ3us/xXgcOMRANLZJm9kg0/2IJtNZrmj75bKuRRbERU2xfREoYh4\nOJfndgBWTV281aI6plcD1C+CqYZE32p+x4J54fgXoWG+oCSqAmDNSvO312nZ\nspIh\r\n=qArT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"ab2dfef9429103078acc848e0e35e4dd927fe6b8","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.18","@aofl/component-utils":"^3.0.0-beta.16"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.18_1570609720701_0.5258754825129353","host":"s3://npm-registry-packages"}},"3.0.0-beta.19":{"name":"@aofl/picture","version":"3.0.0-beta.19","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.19","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"9189d588607ee80a496654107ed9c2b3c3fd19fe","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.19.tgz","fileCount":15,"integrity":"sha512-TsJrk4xvgmRsaGvgCYeJ0iNMEC+s3M30pzqSRRO5XPvxkJVzdfEnFp9dzso+bDs1J9mX3j+0RQX6OTMh1nURSQ==","signatures":[{"sig":"MEUCIQCBk4RJczQWAj/LjG+xDJ/uM1uAXIVvcHpOu+oUX2d+OwIgFcjZmPCgEc4dw7atyVTW5bYE5Rnu/aKSXdKqEhiWJoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnuPdCRA9TVsSAnZWagAADXcP/AjjBk+uUPWeB22JLQcZ\n6XAVuxP2F3mVSDQvS+FgtQkd6HXdCv9i9wZ9MgmQKXiyjwWnzTKXIH/yCuMy\nLmGSQdGtlFhUgfuiqGxd4mtk1XVA1HqA7eADaXq8/AQr1TU4G3uHRHJ3IxiA\nm11mSoHJQhGWTZhy6sTz0YJyXRpwGWDQICx9UiPwrPwGQpGl3JA9wsi+ZG70\n39DZCKt4y2NECpKb3o+ud73xqEL9EyaLb9fTKcA2M6p7qYBibJ+WaXzDO0P9\nw0dLQLBbptE/qlbiYM1h1w78Q793BJDoqFiWoHGrpzPAj2H/ylEXmAtjyR7E\neo13bRybePS4O/Jhxe4Bpb6PeENnW0xv+MEb87cUOmEWRPgFaKIv3BjJhkw7\nzEdv3/OB0fxkU3eiJlFoen/5zEkKVwmtiZ+08bWPGAWQBhpKkpaY2dF5EMq4\nIjDoxUq5wSlsXAnrqFCyzR9WeLu5y7OPAp1GY8N/aQ0rgRRdMHBcyOLkTpAr\nZYU0PAi6Ac//BHHE7Idp3hJL6QTPSwYPDNfSxU2FU89h/1l37u48EJAWtlIG\nDViSw869uE4zGsFZTvDSV+Y4CCtea8BQ8AySPXmP7c6WLEbCjJdqvCvNOZqw\nm5wZnufzsYx5cJ3zHT97L5JdmP9tAmDwB4hS3vFCakI44LJK4NBtI93hSUZV\n2J8t\r\n=0TwL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"8b0406693e6cc6402e5fcebbd569807f2806d66f","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.19","@aofl/component-utils":"^3.0.0-beta.16"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.19_1570694109206_0.6420997323377082","host":"s3://npm-registry-packages"}},"3.0.0-beta.20":{"name":"@aofl/picture","version":"3.0.0-beta.20","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.20","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"ac729bcb760fa9e0410b204a239103428ea5a41d","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.20.tgz","fileCount":15,"integrity":"sha512-EA/B/++NATgrRdjJMjrXRPpulgMTmCy3/QCkloRGonsONKDj6jKo9RJIknbxEy+3vEaKY4S/qI/YkW+WTG6zvA==","signatures":[{"sig":"MEQCICPXpJN8GOhJH0KTbImDjO3+3rC524LREILu0gt9L+NwAiBv7gAG6T7jIvMiMb3ISjTeMlgcdRg7Rz28WrgwpGb5aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnvToCRA9TVsSAnZWagAA6ccP/R2yQbP6wJOLgoFJTup0\nn/aUOi8xhskyDtvaG5Y0XoYRdMESMVxvqBoaLiGi8E69rnJnXYAvxcKS4aeJ\nzuD5UDtA9+EyXxvpt5piInThtHjzBKA4xkYJ9k2b98sbTZH2IctWx2FF0llD\nB3Kyw4twRJn9zJcGQyHOPWI5/r4XhC1vQGp3fQ28x4m76mPfBcP3mLy8VAja\n3JIUErNvOKbeGBMJIt07I4IIrkvgrxul9wBe1/vTz28ZfCWf7yukPZHYVXuD\nEu809oh1c7gxMFVqy0aWm1IfmFtHHtlIIednu+AaDKdDJipV9WxwiyDmLwC1\nlXk2O+3rtPEATHb9KkX5butd3+e2Fr6ngBv3mVM7LvOF8lQPW07uJyr+gmAP\nlKGDQWPoNHEK49j5546ObWVQagToH1aDmCb8y8eJKn/+numGIXl8Xt9vMONl\nZSqaTPcqvGQp92LU7GJWJ519+QMSr60dSgldQ1aSB8wwqsYxXUsCw5mCLXLg\nJ0b5zZSVWvzs73rG6SxkmEdWMvWJQezp+rs1MMP28stvUkVXeqMatsHZ9eIb\njbA1legmZ6l2boC0Nu7cLdkb2FIBAGYndl3i4BpY4d2Hr6a5OTlN4lMYtAmu\nfn9OxksNSGlhPQfGpv170L0o70ISu3CumywSdLeEdbEj8rMRFbQCxUWgOoq8\nSuZc\r\n=hPHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"91658d059c444309728ee73174105d2f30f4e6a2","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.20","@aofl/component-utils":"^3.0.0-beta.16"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.20_1570698471792_0.5822539658546804","host":"s3://npm-registry-packages"}},"3.0.0-beta.21":{"name":"@aofl/picture","version":"3.0.0-beta.21","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.21","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"004f2a5f246bb3a9863cb2940ef549771a9a1102","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.21.tgz","fileCount":15,"integrity":"sha512-Ca7bTGLNSEM0m0RPgRNSq36OsQ+phlfXaoV4AVg0f81QN9Q6bk9RKmIldm6sJyecQj2wtT5p5MTvvY+oPk5rBw==","signatures":[{"sig":"MEYCIQDoI305fO5lnFd8wy062uT2uaz2TTFxGyLy0657oimLzQIhAJvfXXTCWrWfMojstzCNc7PDUSzbj7c8j7oTgiwWjtOx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnvqaCRA9TVsSAnZWagAA9XEP/18Lxn2K6GRHHyBYuXz/\nVZhdwFXKHBaUo9jBF+R8THeoM4p+Ik1ExRZgT+bdIYLeeyU4kUcFeN+V22Tl\nBWlF8OPd8SvUBVaf6JoJ7iWyNcLrN7t6QVV3HywEg/TASCvqitW5VCJ6eqZ8\nZ9H8H4iwOKLUJqAAEQM8E/8HyfIFAXMB0bPjdmf2vqn7WeDbnuELCrbtSI8g\nTOLdZyQRVnnrv7fsh3yA3m3qo9C4LEQxI0fTVnUhoTfU+xUbsyL09MFl2gpy\n+FuhzW57YHdXhYzmgKykfVATmdhYZLC25004svU0l+hrLsu/0KHzZ/IabeYr\nXXARg/QABop/5Ahetwm+DAMXIRiEhqjSBSEE4nyxGyOO8DH18EBHysLsbWHk\nnahujlyzremuusuuQ8DjpnywBRv/JAAjmxmgoo0ouXotn8rJvj9Kr5HduAWV\ndbEI/zjQURqeIlEexqrTH1PLr/kL7YAzzEzP/Sq1VhPoLU1IrQ1IoExaqaht\ncfCrw8TFkCKKAukqsPPrUQJZztSJy18y9ofvR/TUaiyw+mZ5U2AeSl5UslRE\nAFsUMkhaFaGes5O7AIre6FgZJ5JN/N76YT0gcf7jBwAgDLOP9YIjXKRTta6+\nqClU1kBtPy2RCJIrqdylHu/W1gogKD46jrsR2fDneUbUfFdkkK8NbmXk5IBM\ngjsG\r\n=In6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"bffb15ccbde7ba9677f7d906ef636093b5094969","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.21","@aofl/component-utils":"^3.0.0-beta.16"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.21_1570699929472_0.4854874456056042","host":"s3://npm-registry-packages"}},"3.0.0-beta.22":{"name":"@aofl/picture","version":"3.0.0-beta.22","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.22","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"8e4674c15eb2dbc5a86c3363679650b350b62e10","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.22.tgz","fileCount":15,"integrity":"sha512-Aw/3NX1YZhFjDNiYpnLo80OtnyAvYjnc0+4Ft48OIxoXmVo6v1rzdIc4+BD2svU8ke3w0jHcmYJUTGtmmlu5Nw==","signatures":[{"sig":"MEUCIHfw4KGkRhfD5sfKEMEuV2IEBT9zZq5Qw3wyzcZJ+58hAiEAjvr43XygJqQYDkUZXtO6YCke85p8S4+taZYNxocSVi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoAfWCRA9TVsSAnZWagAA5S8QAI8fvOGGGyC1YVCv9PvT\n4q1yRUyc7zdax6hTgD/i9VniSA76WD71FRzdqdkCtAgdbKcP9Xebm1kJpDaV\nTZBPKdlkISGS1i1PeUa1p5RZNUMV7pfSDs/s5NXAtXmhaSrq5V/m16xcjyht\nNoIBxEvsN9MKJcdvzalANjuER6pSVybvCrouWJnXC2DnG8oMUDmfEoxqPDru\nUEbHRUJid4bqcnbTs5/YNtvha/Um91JtgtuDCm2x9I8rOHafGht+sZUq6Og7\nBJ8GT8aKI2a06xKp9rgbzh1yglorI/Kkm98TMBg10eE2w2f+bT1Ea0OnXB24\nCpXqZjm0iXYJOdA5na2Gbfn83VYmXn/j5oTL9Vr4cQ8CAL1XUQvAMy0OHTRf\ngOwWyJzmIcReiTHr9bKseFfqA02wTnO3dAtOcN82zB/X6/5IZNjPm/cLn6rh\n79m0EyyVuKC3IEv+ejFGJ7MVIj80Jm6DoJkmmJYdF2CQM7thUBvS2+40x2o0\nWGIb9IfPKOIx6yWXHIy//OY+C17OFEfJziFL0gvlJ6dEKTCSNiJ0JpbSxLa4\n8vSySJGns6kSBijd2+2SJBlih0zK29Tv1dVdS3xF+fmdVgPKx7Il2ssNGzdv\nkcAtkMz1iAV0dsy/RQytt3dgtmI1Pq1EdhmOTVCXx4l/TtqbD2NCEFjmoqKx\nhpFt\r\n=ATm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"6009b3c38f31f159b65265ddbc3653c0087909be","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.22","@aofl/component-utils":"^3.0.0-beta.22"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.22_1570768853951_0.9158022410859876","host":"s3://npm-registry-packages"}},"3.0.0-beta.23":{"name":"@aofl/picture","version":"3.0.0-beta.23","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.23","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"6e427cd51735c980fd4651ad9bbf4fdbd4934e00","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.23.tgz","fileCount":15,"integrity":"sha512-UcmmZcm86bVcyri+MP21NSrlotVGkliPaPTfW5fg/oHpBHBU1V2zYF2iXhh2NghG7cqXLjUAHraNw7ra7UuDHA==","signatures":[{"sig":"MEUCIHYMVi3ay4wDjTS2O9gdfOWOiC7EYS7Gp4qEYZ4fyF4pAiEAok9YgiwyBZZLAancF4K5ppFeTcTH+n8qLvHdFJElYZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoBWxCRA9TVsSAnZWagAA6MsQAIpagkVX57hjgcmAvXkT\n6IOhgtMnHyA4+lWi6p1k2zLWVZzSgq06oP6iIyRmsDmFWfZ/ThvOmYU5L+NT\n7daWbu0USn/vIeBUU1CW6LiH+hoH1Ky/FKlDU0YkHzUisHG1wjb6OorfLp3A\nWVtiwTDJONBnKQqFFm9SowZ3bzb1yue1ec4jIeDAbuYy4zMiqw2s6Ut0ki29\ngNx6ZrZ6SD7xcw10ugAzB7Csm/yBOt/NWJtF+USAkFRu04xdGtolNg7jfPiB\nHF0Gx2D/PCLfgklp7YoTJQug60Su+BuKcPeezdbj4W/M4KRV1lcOrOC7yPxa\n29L9rjsd8R714+WTI3GhSVjz5rJYtSAnA6J64lXuhUk0lROedtotXwLzPbTz\nVbiryr5fLmd40bO2DQsOhrFiY1wnEO5gXYDhOn/I2nkLkcRyGFUyrkzyjMwZ\nvvHcq7N8gy9hbfG6dWvlC2FVdPnVal+YYFAGqfFyALV606fxBDyi9QFJEokZ\nTERy1g92t3oliJ3qFeZxeBQftQ0FJOz8fsjPWtETOeC9KTe8tRKNyHARSg5S\n5ofmMmV3HgSJr0XhbZRzC921eZKIhbcaqaTW4KAr1PXB8B6PCyDa0wTw3SW3\nx9y42js/bDM21GaB7+R+Wok6OjUDuPKAfzcRXs4WvKDFpv21RTJvAhybFYY8\nMYzD\r\n=E4IQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"35327a525c0190a3c1ee36be061e25eeab73ed33","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.23","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.23","@aofl/component-utils":"^3.0.0-beta.23"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.23_1570772400786_0.17281405076563394","host":"s3://npm-registry-packages"}},"3.0.0-beta.24":{"name":"@aofl/picture","version":"3.0.0-beta.24","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.24","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"0e9372be6e719871f16d1f882766c5ed7ead5b5f","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.24.tgz","fileCount":15,"integrity":"sha512-5dxwBROX0pbmjmdgmTj0oFWREzXpe0UZ5+XWQ+ztp1gLLBRZyYX855FNmAzFVK0ymkMvCOu4ES+E+u3QGapUoA==","signatures":[{"sig":"MEQCIDw10QVjT51oCt4gvAbKrtLEGqABdo10YiFJ6SjeCg6gAiA3ieTAhRbFSGGgYvIrGJ6b2FkAU/KOo0H650JZZJCHRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoCKKCRA9TVsSAnZWagAAVNgP+QDY0qvREMpYecyKs3y2\niQxdICi1lE8PD9LxExBCZUzely9xlvEN6QBU0M7E54ekfl5EE6/QFOt3pTPw\ncJ+PyVaK8osvOiETIql0E5u3zcFO4ZMkVEavxuHMY5M+ioLldqKNjtgGhVYt\nS4msWyZJ11EVCllX/tIBmizAsMt6gTmoOf8lmm5I50NF0Xr4lq2VFgx1jm5G\n2zvQS7kB8c0iGH0+FykKv4VyW46Q1gs4DBeRdEBs4jlt0G5v3ZXmPrvKHEfw\n4rudLA0JB1wpDi+3971866iqWPsYfQSdZ7LxzcuioXGKylGBr5M1xOMFsDvt\nyMVGKE1o9X9kRrqp8H7s02bd0ZJYf0HPVWewcMqOT0HGeGuVDUE4Dp4RoQxe\n1f5zuRqwVL8tCk0n+lfiEuhPvAfIbz+cCoW70X3E6z278wkaFpbAuwlOuf/n\nyCUb9UVlYkoF2r1Px90caQpzrGnZQVrUVMI47hj4Ly8SmcZzmnzGY6TM6ZBL\nO/vR8gHjob+huVDhuwsbaFsAPhercJSOFDiSbLP/jN8S+eMJFrxPcf5S9mGj\nlyANbifpHcWt2uy+izdCgSXzE6UuVU85JXNIvsa0AG7Yd/EKVW33P13tIUdn\nX0C9Hme813eM5CVAx9BPGFPunBYYfZn0btWuPd6kM0ROkbOgCAiBoIw+zWzz\nBz4q\r\n=YPW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"be81016959caf66748582258c92f8c73471a9f67","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.24","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.24","@aofl/component-utils":"^3.0.0-beta.24"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.24_1570775690308_0.47960143045658943","host":"s3://npm-registry-packages"}},"3.0.0-beta.25":{"name":"@aofl/picture","version":"3.0.0-beta.25","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.25","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"fd93a636a0e77180aa3d1c0dacccf2407b28e40d","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.25.tgz","fileCount":15,"integrity":"sha512-8kPBPMojf7aGYkyxCN2Qi4H/MhEbLAau2flLmuwR3bf3GQlRDFh2f9VGC912fWU+DMfAgwthh4NqlwQQdJW0+g==","signatures":[{"sig":"MEUCIQCCY9wd5cQKIwg6BX62jVqdNfl2VQSlmoxU39Wp91LkkwIgFhTABPbKLJ333QfCR4jFCF4OfwEC5NzWTvUGAgo9NYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoDCcCRA9TVsSAnZWagAAKwUP/RSQNWSFPBczsNLy1WAQ\niQ6wkeGENjyKgENj1NJMnXPD7iuhBwtFunlrfRVXKbhAmQ9qigvsVpbc1UZL\nWPOkh6diP7W5T6iNVGoARhUMhpQEU22KUJD/jnTV+Iuego7vo65eAvh7eFX3\nPQNi+XdqP02nEjXD67MpasL21G9z+akXyytr72iQ8n3PQ3bpjdSgkEfhP84z\nTB0uq7NpUwYIiS0kGy4GwuoIxh4AB63yTYrOBRaI541WZQXpo3CpX5YOjFml\nQS5KqMYhvg7BytGfM3c5ryqlOOptecvviafaFVfOkZC5acfkn7XzMM4q0LN0\noIy7be+MJ6wlft+divkqn5WCob+o1QAgg8eOCZwBlSGfUe9lEM1RePUQ2lcx\nVaCIHIV/zSipQQqrc082xSuU6Tk/SbnYRM55+bDPEQZec5a9EAb754k4b1Jh\nOBgno5uq1dFRsWiellOAcTEAWhA+Yx1yHk72ZwnfrHSbxKOnPB1ul4Tk5RNy\nqFZBdN9WNeoo0zFkAnK0/ZFmaBWUiZ4DF6jyINsrEox9nu9vusvUlny1LwhD\nha1m3xSPNq0AQTxA7sbuGktZJ2KXthwIxAtsMmR3Vqt9+mrydikORDfPJxSD\nSmnESOQCXw+t6UclOMRmMJAcE830GV2uLcD84CTG1d82hVOG0cNQNmEjGEeN\nyfIC\r\n=VSzn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"658a5f60a694ddcc2ddc62e8db80688cc6b71c68","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.25","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.25","@aofl/component-utils":"^3.0.0-beta.25"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.25_1570779292193_0.6121573440740957","host":"s3://npm-registry-packages"}},"3.0.0-beta.26":{"name":"@aofl/picture","version":"3.0.0-beta.26","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.26","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"54fb66e01d69c97eb37c4dd2025563932f727ac0","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.26.tgz","fileCount":15,"integrity":"sha512-5fbyMNZTLEH0V7Le/k6Xunfqg1CuS0ngSAn96uUgd6uv+FZvahZwXOdg8pOtzNnlHwF3BuQynqCwl+mgTPG7Ug==","signatures":[{"sig":"MEQCIBeww8N8q7aSw7OLODt1hoTMdh2s6q+i4Uz3w19gXmPfAiBl6OuY7TWHrdINePgeN4F82um/veylEJHlbvewdNOi6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoDP6CRA9TVsSAnZWagAABCYQAKMYSLKbFu0nodL6acqs\nkONtWgalOpZpM1nsVYmYjUUOL4tQo9eTnGeJPbJor8kiTip+3K4km/tK/uQc\nodUiPLc7BG+/Jp6W6mczLhlsRKgppAhDfCbcwlD+LY4Q/ReBD9XX46UcdRZ7\n+MowZgg5byMBVL5Z8bzarZjoN2dvXTAR1HoVIVumGDCA1fDhDgUNPwWN2OS/\nOGy6cxyHcxn27bynU2oFYPZT9nTxq+XP1uzfhiJYZ79EIPKEQMNWEkoUtWV4\nIuU5xHqag+bHajoeUyHevTSsdAjtHQPRqUBdV6i+UiE10l1rxUiFg0F/8+qE\niqKPHbbbNpShMWVIyA5eDPFgHMYgKpOYHXWTOxPq5oKRCx9VbGcU+yFeg6g7\nA+sgYhkKVm/+EtLd+31aNCv2k1lNoDGXyp1/Yn0nwoQ7tZ2SURxsZzkbeGzw\nJLi5t+P7uK38+cQ8ZBZdWxxMJgccNO5+/p5J6GJz30dBpHQAFY+5ZY/3gfMC\nwgjgPc0ojYf2OnYQQasUHU4e4O6l52XqpuzztK//XrfT1XYgbajIdOt9RkEy\nNsdmAYggIrG/oAcH1ZZL+g3prUZR3fwmFoTp5USPfbAJKe8iuU5XsVTU/IOF\nEdwOniPRYaRS9yJEczEudwmlDLOWPbqUr6GYhZ1/PjJ6rwhYPCxYNfyySVNm\nqHII\r\n=QS4x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"12fa62b6d27f95d1517f1ec4707c284b865a7081","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.26","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.26","@aofl/component-utils":"^3.0.0-beta.26"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.26_1570780153930_0.2325599757119845","host":"s3://npm-registry-packages"}},"3.0.0-beta.27":{"name":"@aofl/picture","version":"3.0.0-beta.27","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.27","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"17e816eae091b1d43f5de966ce4fffe05197a9e7","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.27.tgz","fileCount":15,"integrity":"sha512-YWi/EUM1btxiJsVr/4ymkwYfeZAt1l9EPhhnHapc1CXvqOaKVoQabqZe4gbwTwFPZ+TbDUxxsLt3EODZCYiMtA==","signatures":[{"sig":"MEYCIQDz9qcu2MCIeiKuHdlWp7mKfwQmJD8nf3TwxiNsXJjiGQIhAJTf72wIq7PyP+LoMaakxFTlzXMU8/XPimZz74GKvYlj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoDUeCRA9TVsSAnZWagAAi98P/iZxJ1h6OaUbLz5/lfl+\nNGuY3HgqUK5CUhD6JOMTbiPt72EOo/WibzLGzGElUFxCCg1xS5nn2tzNlDGL\nCOsrayi4vjvFvF9rGFfg5WG9Ve6xN8z/1NwXvvjnYjBBvl+ZzNlg7lmnYzgv\n/M1ew3nbmgMDS4wVtij975eifaisu4CvtaNH9CGcZ2d0fnjxPz4wpyjwzVgI\nOjnIJHpTGQ0QIFKSoJ1vUPrhjaQBCQu/1wJHcV2LOSAIXWwkAsh7bWcbRKa+\nubzPVHb1YUx69/ZzV00XfqXEkLjEn+vkJ7tp3UkUbKal4K6fAmjHxMQ+q2yy\nKEVTNHgo9eAKLy4/3sSewatj6wC/TyFQ6kkRKM/AmqLrdAcKRM+HbhbTImOQ\n6o3dIEX3FVhuIqd7GHgp+gVAck/RM+JKNNlmLcb2NOJ1mIRTxPtuAoRoUx7M\n0E5UP01NYpUjfrU0QOngE+MPlpFfc2F6V35N1vDrLgN+K++0YifobxQb4DL2\nI/J95y9uqp5+H1puUrGlwQHN9sJZpg7TI7d8ZAuRLu8Q/gembR+K5UyQ2KDG\nYgp131+DRmhauwheTl8haAeik6MCwMvz5uZytuPmm4yWGnJ0uuR/CzfYvKiU\ncAOHl2rHuVTwnxz9mbGmHI4Z8zitDtjbglmay7PpGQMALOgT0fvW71R8MLgw\nY9lv\r\n=4Y9n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"de2f0be87aaadfa43212214d4f491d68930b2495","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.27","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.27","@aofl/component-utils":"^3.0.0-beta.27"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.27_1570780446316_0.8544626417735255","host":"s3://npm-registry-packages"}},"3.0.0-beta.28":{"name":"@aofl/picture","version":"3.0.0-beta.28","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.28","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"0c7e230d49055a40e6698e7d8164af2fed80ee07","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.28.tgz","fileCount":15,"integrity":"sha512-w7wxpJhy6W90Bka1bdZs3jlVF1CAI+joNiAMGIk5UdN6kEqDGfuTRWMza137sfu1fKo7a2BjTijBkoidCkbjiw==","signatures":[{"sig":"MEUCIHXglvI+ellPyU9qXg0y+zRmGVQJ2aismpJMzLzJo2q8AiEAnAtpGnUmTPOv9l0MUiO9fleBtuI6odsJSiPBRB6LYlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoDbFCRA9TVsSAnZWagAAfUUP/2KhItV4EEBDb4ZL++Kt\nH+tjvrmTqtEIoYyyN8j/NV3PlOnRGGyjDo5MLONH1tPkKoCmv6hyNEsv3Exe\ntQSAkIRFa4hgmvu5p1nQBe86yr+D2HcH901nIejJDFmlEDHqnG1045yv6rZQ\nNnrQ4MyCNO81rOMl6goUFvcDFN5j+/sssajE0DIidJAyBjLcSDwYr3/MGMEO\nRhYAMHWAWQu9Q4GdJnlqz0Kf/W5Jbr+wlhQSlwjkz94asYb59fx6IPuUOomP\nS1R3MUKtBHZ0oZJN+NTcr09gwEIJcu7iYlnSZCwEzvvM9cWKaAwtF8QYApa0\nM3Bhh453/XESio5MO9fjQyEU8e3oSt5yRrh5Ax8YHQwOeTZyxMXDAHL3amny\neKDK9AhkCEKhpsb8SKS0KVjlZ746Ey3yEG8laz4s4aw4VYMU0thORZW65WMy\nKrIHHOQBPiAqiz/3FbYJhn3HE1mEBJb1WrXIiqtvpWLPArHDC3aS+EfL1LoF\nxTWLtrn+1GTmcv6nrqgT1Sx0U1KEQt5mH/05qNoF/pJLw67IRecTH4sEVlqg\nYV71taDDLAUlKW2Bt3BAqfl2aHt3DNba7mFwSUgpNO8v9AfRgGE4ge2T9zB/\nNmdF7DlLLwXczYmaKJt6iZWyFQxwhPOvWVR66ESgjJ8HlC42ZiRweBflXVgC\no2/H\r\n=amyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"dbd14b0bd931ea76999d514d051dcd0a3ef6a8c0","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.28","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.28","@aofl/component-utils":"^3.0.0-beta.28"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.28_1570780869269_0.19545097982513226","host":"s3://npm-registry-packages"}},"3.0.0-beta.30":{"name":"@aofl/picture","version":"3.0.0-beta.30","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.30","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"87c9a23203b89e438b2aafaac1390d8100a275b8","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.30.tgz","fileCount":15,"integrity":"sha512-cmNO3wUuNfANEMm1OBDOwL3WEVUW4KDvB+Ze89PtOCqJXHc5R2KVFvy7YxNCGusQDFqSeJKaFlarm1F8TYEGvA==","signatures":[{"sig":"MEUCIGfT6oKM3IMFOWMj7N/vCAD0uPyzQctf6+xSh88dCBGuAiEAwPeuOkgEpETKTey9zF+WWq3NjsO+V/mITe5RS2cj/Ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoQkpCRA9TVsSAnZWagAAILAP/RgGJq8oS90LE7C3kBGA\nvHt76Wt7aMnAbW3gPAcOkQE8PpjWENV6bOkGQBcu0MbZ0NFExQ1ow7kWsUxq\nOY91txKrHfUluw5VyjKASBS26E7hVx4l35B/2ZUjchPcjT/KCWvwv3jALqVu\n57v71tW96Vo9JlF/yjK/XMWPcD+fDS+YS5f70P1z6+Do/kDT1pyD3asiMnXb\nc0cbA0P0cdYE+wZGkkb8ueyKZ715ca2TlLb8TkD7TZT/FD2Myayk64p+O4ot\nwtgx0WD2xoVRGL25hayK6Jt6TvGampsJgWSV37oMZ00geT+LuXg6clA8gC3D\nKRDcCeSrVEaZxfrhBnOXF4kfEwnywXLh2CNdbslmdMEtnLd7YHcmutd1Bw3Z\nPGJeI4Cu7cAlHuQDVdkUFkpU2wpJIM7r4CadWinjOK4SeSgAU5LppYWMWDc1\n+aM4F544b9b5SdGkvIDSILEiUVVGGl8/hFHMCYllmZOebUpwY8DCP6NSST4H\nVuFM4H7hzwaCYiUmra180SJET8/P7R79u+QZbGvu14kDF0aVO84higsyDeOy\ne1nIVPnmjGo7M5Z6q7+CybB5Etq1qT2DVOW9L9/aaOn0fY1Yxuk4wE6W0n/3\nV7gBRfJhp5YLFTXhR9qEgmF2ZE2LwDbmKfM4pYGrtgYqp/9KXQgzr6+2dEe+\nLMoa\r\n=OVMn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"7bb6b9b6e2c1d77cf7e65680aeb6a4c60e0300f4","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.17.0/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.30","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.30","@aofl/component-utils":"^3.0.0-beta.30"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.30_1570834728706_0.11672858326565061","host":"s3://npm-registry-packages"}},"3.0.0-beta.31":{"name":"@aofl/picture","version":"3.0.0-beta.31","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.31","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"64271a0cffd27b3fc892504cd34e72a1a14f11c7","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.31.tgz","fileCount":15,"integrity":"sha512-e81S+Nkapb9qwebByc5/CS1xO3vPCbycEaeiT/jyRfTfNQhQdx9kvtjIChc5AIxj6/xsnvRqzZ8PaeoDgz0Ztg==","signatures":[{"sig":"MEUCIFCsigdMYNc8232Yxk0TXiLCdv69z62QMY1rb8+Kw2AkAiEAyZUjd5aIDnZvK3vdSrEjdYbStIPxIUyThQmjfUIcaOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoQx5CRA9TVsSAnZWagAA1eQP/3MCUb1A/f9SWRV6Pw6C\nuPhPjt3qqurMHt5W+FewZXlJhaDm4c5rt4xc7BQ+S00CpEPs3Y2zstxh1At/\nnIZ1HfJgfvixBjRNgyCZzB+GBLh/lxUvF8RK/YH9Z1opCuaeFSRbWxbzqUcI\nNpKap11u55Or6EJzTtI72J8aP5kPO7Sn39jzTah8DdhMusV5NwLEc9fMFixD\nDD57QvCP1qDLPQBH72JkoQxP8thVvbZA4wcktp8te0dJDmJCzPIHvM9WQ+wI\nW8K2+lCc1dnuQ+BxTpGcm5kYj5aeQAyUbfZ8I40glj1lgSK00s3GmBIGkYMh\nMn/Jg0Vn9m6rg03BSfJs1pxDtPGilO7oFZr0LhnwNw4VByXPd86YMct0x5Vl\n5MIgwWFnRqQ2WmERkRPgXbENwTYbuAho8r5kzaLMhisX7jJu0d/CCtw5db9P\n7877EdsDxfzQrGO2onWEdNM2fmOsgItnrJ2qgBpV33ZRXyfbJ992W/2Gi0nu\nHroO94KH5qgDbUG8yitNJD2MgcHxTD/2q4Lnhb9Hq19k8P1nS/DrWqywLSKs\nJzr6saV0+ZAblI6XSaAgfXOSiWONAfwFE/t0uYx7wcnWohGlBzYGUDLR3rde\nyQJX96wU9Mmya8RJMLjjYjCp0RpswJVRokYJijU5E7p8tw68Md5uU7F5AVgJ\n2HfX\r\n=ROPF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"9210399f4527d13336cca428a2c6b4ec87434076","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.17.0/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.30","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.31","@aofl/component-utils":"^3.0.0-beta.30"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.31_1570835576609_0.5432964708981385","host":"s3://npm-registry-packages"}},"3.0.0-beta.32":{"name":"@aofl/picture","version":"3.0.0-beta.32","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.32","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"4b39826f1aa842007960aea5e965927eedb81b49","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.32.tgz","fileCount":16,"integrity":"sha512-GK0Ve8jCQmh65jBr5IbEmM0/Uiz195xJ4jODUFHweGxU0V0tK0SAJ7xNEzEdhJDnzHTjTkURd7mqZ3jsXIg/OQ==","signatures":[{"sig":"MEUCIQCzVu8e/ho24+hj0VEMhYjzBIJ053HYEIZlzarm7MmjDgIgew/55qXDj01pulWAh79qErXzSSuaXw49FApHlw1k+Q8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdo8pkCRA9TVsSAnZWagAAxbEQAJhmYgk4g5m5gh1stDf3\npKU19FFQKMYw64aFEOZdkiwpvRU+2Fq7WbtmL5UmqCHdcWahqx6FN/Prp9H4\n+56n+B9sVx76TD6oWR7+uCxebax9o1jYBOQyZXKJU2xTK2baoD5LhCryWcwi\n+Bh2ALlRlumGtHHx95OCeuzZ9Ob+6Y5b2WiD4n56iYyZoS3C5vyUNeC8/J8V\n9k3vuPDWL3gvXNnrr4tkcpSnTvydqT/WWANfM9duN65eFPC0tst09CY2+bc8\niUnErmD75x86j3T56tmNGKg3Ww+IqkmJe1ze4D4QuAAHLXQntI3AOe7FiwiF\nL9yKd4eOEkdmEIH1Dq0A1OTEQ6hgRpzyol6zr/n1dngtMrDs6EaQ3VyG9eZM\nZBX5rt/s/lYdGgWaU2zBfVMITts2pUE4EoeL6HuuGUtu7ulg0fmIWh2Y5okz\nnkSw1PN60sF4tLiGHXMX38vNmgMkdrbsAxZ/qSxyKN2+S4w/zEP01gSq108k\n+f9zX657oemNzR6TJsg5y4VoubufNkvckhgHNxI+ocaWD4ew/8j60u84ErhM\n1316SzmF7aOa+Vo8KDbtJ2EkwrKaNULctK8opPp+cRdtq+WKdA/E1+Byl9ot\nLdtk04XEEWC41CMWuByjbbKhXOvzz8m2ShLDLxHcedKWpWf6OX7ZWHbxuQU7\nPFKn\r\n=+FTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.11.3","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.32","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.32","@aofl/component-utils":"^3.0.0-beta.32"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.32_1571015268177_0.2884452454250579","host":"s3://npm-registry-packages"}},"3.0.0-beta.33":{"name":"@aofl/picture","version":"3.0.0-beta.33","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.33","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"9f90315cfc0d098e7f64515c75e2d67f34e36eb9","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.33.tgz","fileCount":17,"integrity":"sha512-ZBIvtpIEFpWJ22lke0LKIPGz9veEG0E9EK5+Yi/nIa7bVASPD8sExn2x45EB/bILhkKxmTJGMClzNsEAS+Hz5Q==","signatures":[{"sig":"MEYCIQDO5nfIRP9yMV96qqF9uf4tJoYUVbn6O9m/MX2qfk64qAIhAIPhWA1iW3Egbhb2gsMbPrtVkJybT17bXhlhxOzbp6dh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdo9dKCRA9TVsSAnZWagAAA8UP/2xqOjqLOBcnsLgMaZoL\nSjBwietWbnfwKhfL96sMzdaa3rO5jLppNIrl50C4bcOMtqMCPMKVEIut/RAr\n9YCmx9uV4S/MbFAWW70hQOU1wuAlisjqMmH/5RtmsdWFnAfQYcWwY6FcHFyi\n+me6aQ+4WpdGN0sd56QeH4GhTurwGwd14o5QTsXdB/4jTuqSlNI1rv5TukuD\n2xehSvuc9V8aHGqOebfFObLNFzQKwgFYr/6blmDjg95pwhihhsWC5a4ijS39\nDVmz0r5qMDuPH8p+zfvsf4j30/8bMQPvETtMQMKdGF2hSIwPrnNrG+gGXZug\nRphQCs6l+M2e9rDWGtWUrKtv7aU8HdwNSSSsnAogZRzLgIs6j7wLLHs8VSD/\noA6KrhoH+o9XyPZtvauyF+coNYmRs+9vZfR5iYAtRCKCW20oQCMdvtGQpsOU\n95f4WiUDJe5C0lw0ySwwQjF2cc70KAlYEFbGdTiyUKdaB7cFEeqUUNFbcE/P\ngfxnPqzUmeB7gBEtimH3dJkpzH9aaY592ZwyKSTCrN/lEbcDhsdGzWKAEhaz\nTF42O5LUirxniKqd8GRKNbad2iBqpwDtmqMrJtQ3W+7vdbfUjGYVzZzklhKC\nDYFat4hVrlpUbWfhIuw/3hdeYvye0Kfx8ibjuGrhFIWY8x6SQhv8pt9zPDoy\ngtKx\r\n=DK2P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"5f71eb18e06fc34494b1887635cfae83ce63d205","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.17.0/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.32","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.32","@aofl/component-utils":"^3.0.0-beta.32"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.33_1571018569831_0.10829031454263727","host":"s3://npm-registry-packages"}},"3.0.0-beta.34":{"name":"@aofl/picture","version":"3.0.0-beta.34","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.34","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"5ed61589fc8bb36b3f3f0c186ebfad5218e90bb5","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.34.tgz","fileCount":17,"integrity":"sha512-Oi/T/LvN0AN6VUFRmWl937xK/VsOxYAWtCceyOoSVU7yf5T2cxielp85tLmlXWWleF5zAqEqSAoEpskECty12Q==","signatures":[{"sig":"MEQCID4CaotAVzvTqk5shyyja6nBGkv5BfPqwXp8LgjUk8smAiAM4O3TO87nA1+twRPB7G7p5CRVA1+Lkljj15g2PkGfGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpCWgCRA9TVsSAnZWagAAhIQP/0hio83SOZD7LliZvPNH\nZSRn1A95M0m1zuIEN7+P2grwkFX/oWGYGeOde9i4nS3YES+zZKz2+rTMrCQU\n7L9Vc4Dw4j1eEFXayT3a6crxUKhERRFDAchwIFGsxQs9HXa1qalw6pqM9eHN\nlcXpf9+rmOHC9+exSWUcAha9MBS7yBOiZyGNoTXNbIJ1KXuYLC43RPCE2lZR\ncj5NABeH3iqQixuZdkbcsdJTq3P3tltMqXKd97IvCV0Caay09feFVffcS4sE\nG06MTRyhJjTjtdBZCQMPwSGa5FIzkNB140hEmLTr3bOQgyoMAm8HNUKI6yTY\nebUof8TWlcnqyNgYhAeIEQwJZdpEzJyYj8BZ+Bjl6CUc1l/PxhYHTZbdf+xE\nFwh2mjw5dCeXwjOEtBEAr5t+RbWa4xGVQ9stHBBn6j3ukEokBM+ikkY9t3Pu\nYppYhY/sIhg2BtYLrBwrBCwKH1l2fDaW47ZmJQFMCzlf9EZPCLWes9Kve+7A\ngKTXhhM4B6TsvGhDxiLXZmY47Y+KUJNRaS9Jx7UrzuieIMuJ4BiWFs/vi1hR\npq9/GuwjLOjUCfx8gK3RNIvS95+yYNKEOmQDtR+75JU/74FJNrIMGRMqXoTK\ni8BGK8hdzbC59wIbIFOVoqqTzoG9vOGWt1A532eP956kTCK78AHB+3+sRGgV\nyqLV\r\n=DOK1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"4cb990815f59483bc2ba6051e55cb593245567e2","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.17.0/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.32","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.34","@aofl/component-utils":"^3.0.0-beta.32"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.34_1571038624030_0.6551022584231592","host":"s3://npm-registry-packages"}},"3.0.0-beta.35":{"name":"@aofl/picture","version":"3.0.0-beta.35","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.35","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"2bbaeac81661ac4e80c791ac299da786d234d008","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.35.tgz","fileCount":17,"integrity":"sha512-UhVHH+mPjK1+rMbRG6ImID2vg95k2Ft4kZpO9EsnHAyln67gyyZAYT0feObmYijRuEPQYC7ZCLfONSMMo3UGzg==","signatures":[{"sig":"MEUCIQC7gmtm9VXj+L9fPRCMuYvSpjaTqhuc21d0U/IMXYWj5wIgVMmDuwxe+O5ZmCBFbmPS5ZiBWnvCh/Xah8ynk/XfE38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqWLFCRA9TVsSAnZWagAAigcP/3ihbhhzWywpbUxhMtr5\n7LEjoEiy29mt2WH0LDBiY4Tuyd1036Joz9YxxuRfBnGH73pLUrxuq9FJLvUW\n+pxpPYhqafZuSx/NWYLcf9UiDEazDwHxJZkuMXQvF92MLybtMUDjf2wP2HI0\nmEEy1ie4Q/U+Aww21++6n3anYUla10b8MaeWmizwpOgvWfTiZvACJAcMKM4D\nHhNClwv+5ocFImCsilcraFZxEXM/XF5ROb1fNGXFynbm25KfO/lOZF4rM777\nYZIpkkaSUlIaeSM45MhHqZGCkyre9bLhkz9EJ2ovppCsQkt3sQtuqCB9mxE0\nre2eM1I0HeSGI5or4zQtBWmuVbQQdRT1u/sJwIZj9FZw+3LDUkw/FV8fcyOc\nYb+8j1POpqlZBzJtwELcnBhP4ZYxU0gx8o29qRnPjkn5mUxpHZ/DZbRZPxLw\n/SefO1IAu0bALZaPEA5jHRtOvIcL6hzEMOQCNmDamMlJ4yUO+ZVDj/LDg0Pv\nClZcqvc5Jzj7WcYw2oSICH3uoHJcxTyrrlwJDcwNiikdvRDupPkhJzbZMm1I\nASNnmurMU1BBZmh5+iCi3+ajel7+kSy+RrjEQsfCpmO9sKbJauPkAVhzbNd3\nRexd5g6LjEKPdACZXzbHFy1Gcvjdtaue79Kp0bgNiZaGgTxXoM1QWkBYnyL6\nkgOH\r\n=2T2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"6506e91bedeb6cd9a30c22f437603e14e02a3ca3","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.1/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","@aofl/cli":"^3.0.0-beta.35","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.35","@aofl/component-utils":"^3.0.0-beta.35"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.35_1571381956981_0.3485890294790166","host":"s3://npm-registry-packages"}},"3.0.0-beta.36":{"name":"@aofl/picture","version":"3.0.0-beta.36","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.36","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"b3d0f6961014563b04e5f1b4631ea43ecb06b571","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.36.tgz","fileCount":18,"integrity":"sha512-Rv2p2NPVxV2w2yXPC6Czyz4Hir0iFOHLdex5lMTXJQ9ZKiyIKXC6r4lqSOs6QXSQPUNkhxKlc2v6nlZxhsWdZQ==","signatures":[{"sig":"MEUCIQD6ZeB/UZgT2ihev7vBaMvy+IIjExHXF7QRYA8ZCtYGrgIgfZcYVxsL+i/GRNdtYho5F/vBKz4KyiAX70OSKknNqjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqulmCRA9TVsSAnZWagAArX8P/jrmLwutmWIugEbJq4ab\nJRom3FzkTFXv2o8+R8ZQg1zA/ycL0RfCMM1VRv2bKh7l3UdJbYYEsWorgG5V\nVKbYC/7XK/uq2VOcfS9i958gDYkXbC1E27V69tvjvb6IiTQ1ZojSAQU9UKlE\nQ0v6Yz4oSEJ7SId/eCrz/YU0EdaSLa78v8db1jX4hwV+1zn9VPDwkDl8o7y1\n0OVzuedQk7pJsksifulyUv7NHj4242gUzMit3GQ7Yk7vDtky3mo54Tguy+fh\n+fMdwW9fb55x5mX6YTRFaRq7hr2d2Wnbuk+xfTBDXX0sGJhXi/GtLbpxlcGH\nV7Qd2J5xxFuqxbGAWmEAMUE1CeNq4CDbb8BTwzBkPimAsUGTT6dh6xbBjsId\nAawseecUVfABDHJ5rea74eSof3gPxPBM7iz6xC8gyicZc/N2Pv8UzmUdeMmQ\noJtsHUXn5pC89eypWbk3fnlCgca/175BDGwftlBqLqDEFIYouVls05Ygf3Hx\nzdRBRcvdISjXCslp3qWPppOFyvi2Ux6gCTbYsf1HfwA0IJG+owkRrMiQauEn\n/00NPrZyveuO7dQ+UELAYn3rE59SYdtunYmLFhFqG/k3j3O4ACRGI62WdbYF\nUytHvTlugBfZMsbit8+5Y60sXaiGudCBGYUvskgqxxGsKZWlcHnDnLZOcj/H\nDAt7\r\n=zf1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"9eae9fc87437b61f0019ffedccbc3df7c8e02a78","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.1/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.36","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.36","@aofl/component-utils":"^3.0.0-beta.36"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.36_1571481957705_0.9778272236145926","host":"s3://npm-registry-packages"}},"3.0.0-beta.37":{"name":"@aofl/picture","version":"3.0.0-beta.37","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.37","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"954801abb5df6a7851a21d4e139583449a71bea1","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.37.tgz","fileCount":18,"integrity":"sha512-afoKVv3BlFuc3o6MnFK5+9+nLDAYeFMMjfMrt9fDZ6Tt1ASDJ54IOyC78h/ADw4x/pA+Bk83lpfzuQCAESkTSQ==","signatures":[{"sig":"MEYCIQCP4YJo4mIQYxmcbObZ8GbVul/Abzsq9Ejajii1Eyj5RQIhANH3U+qBRyCeZFLccUCXSNE5l8onS2pssuQ87gtz4nF0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsT+/CRA9TVsSAnZWagAAs5YP/i3BWRtGYVS9EOPSQ++f\nseqilhqNPfU+cKff+h8EISnYlXDyZdVFaZJZRFvE9OImlqGceDIcNDov7XCQ\nAGMRMjLE+9yU9ShpWldC5DTxnZHRQSgU/y/wgM7X7Ja3DzNcCjuNYfbNQ5Jo\nDhU2o3Va2fch7rS2QN1MKk43nPnSQA9HUV/JzThTxr2Ml0bZcTT66/dWHAzi\nDaS/0wUIiHTFkJPP6GfPt54UpkuMuSTiEdQZvOml52vLRGJDsoKQnQMWUaSJ\nnM3zksw/MkfRZSYgawg/YnGNZUGb3Oyy0IiT7TXryQJYQgVEXo+vKdPhDwVv\nxmNqF03e/HtSTyE0kCrKfafblJpeXcHmNeaRcpwvJyUvLUiaixk6zmV5rzh1\nldvJvwnTGrsAnG6MCij94Hz/BpifjhrPYrifYQ67BpJo6NnUMHZTYOx4HgEy\n3bJyeoyLiWODlT1ptp7zA6ozkVP5Tmog1QZWBVEDRtd7oeJbx4dNXFhdEQwe\nUpQFkagS8SreP2atgKTeGERVMAmMl+l5FcVLdUJNAzT25O4m1J75BIuqW7A+\nIldWEMYpPjDztZfV8rLVaOxXZJ5CauKsVSI52LFTtUyhVLbapvc3HORzdacM\nWA6nQwX4Nah9AqaytFe7KpT9dUWNGZIBppUvxoU0OTcBPT93aj0GFxMaDo5M\n2h/n\r\n=vktg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"90abdfa3f72b91bd0c98e09afbd59c21621fe846","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.17.0/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.37","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.37","@aofl/component-utils":"^3.0.0-beta.37"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.37_1571897278909_0.5322972252087357","host":"s3://npm-registry-packages"}},"3.0.0-beta.38":{"name":"@aofl/picture","version":"3.0.0-beta.38","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.38","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"bbec969b9c3fc3347c607a9a8f266001c9b1eb5b","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.38.tgz","fileCount":18,"integrity":"sha512-RIYT3ve3LqvxkPGSGw10L/ySMoYEzWs9DXyNKmTaq9rQg0pOKJwOYsFiMI2nvgYIswr+8d52EE2/d+rXqDmkNw==","signatures":[{"sig":"MEYCIQCKmOU2Tt7ZEf11DL3hzSxiv5MpMuvvudI8kK7ueHHQ6wIhAKsMPUJaZ+iveRV/n9NdC7lEP01oZqMCN/TOfFHr2bbf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduhQsCRA9TVsSAnZWagAAdBEP/iG9aGw1ggIedlpe+NAw\n58gaiJWEjISifl5HbZgIjen3LzDhIAcXT5juWNA/u8UfOxGunLRtfp6rP44+\n1jrYoA/tmaCkrLWLzTxid1JrZVfc1AreJ7HQoetx7Cv1AUz+IvkeDFwbDXLt\nU3I5YCOlQLBgNTTB+MMDwWLaBJeplnlvHY7OSV6k7FVa+osZOWhyMhnRugQl\nLIxxbqpvK1wk/H1xfEHCquzLuu3i7Jlx6Eh6VqURvLmZ1yt+WLDP/Zi0ejdG\nFoSXGCM5gOHOF5BBllplNql7DqclTjFR4FD+nOOZ86f3SZzqIF99iRPg91x6\nhdyInvIB+wvzVF3KCUQeZrsE+Fv9afgJXuNY7VwmpQSDVT7xTjayap7MwIOC\nmfm/NZnWFFS1i1Qx0WCaK4TZv501m1rfe9Ya8NGMGjrWeFdHl6mE5FxMDZ0k\nYu7fu8+YlBAWitRSl2BwmNFqG89l9aULtL2SfCbkBF7F2EUhr2tm9BlE7FaK\nHJWMppRgjXY7+QwVkXKNbAolHd0PcFE0wKdUAqSmjMH266rz1dljnQjHkQac\nr7Y5HhDKrmdwtD3trpk6+2LnH/vE21oa4+JN962ISzDUT3czimM8UcGP++xJ\nh1s7BgzU7en3M3e06a2+dQBjzGCNiUlVJm458INzc21fXspXBQCuF4rmKcav\nzp7N\r\n=HCbA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"9fff03a99453d439b551d48a69e5d642b9957854","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.17.0/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.38","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.38","@aofl/component-utils":"^3.0.0-beta.38"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.38_1572475948139_0.4530015450784284","host":"s3://npm-registry-packages"}},"3.0.0-beta.39":{"name":"@aofl/picture","version":"3.0.0-beta.39","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.39","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"b591f9a502961e6167e591333de5703eaa0ffc2d","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.39.tgz","fileCount":18,"integrity":"sha512-8+sHkh7YwvDP51Qf421Mweb1MaNv34yfZjMVL4Sk7L6TvWVookscwuHguNBVO+nFWp/RMX2smjrd7L/B93LFsA==","signatures":[{"sig":"MEUCIQCJ161vYKk7Ukg7UUcMuuyikt2uTen38IebakCRO8UokQIgLbOFAYP56hTEJU64+4GQcpSFm5cqtMd+1IHX3YvItLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdujP0CRA9TVsSAnZWagAAwvgP/Az+cdjIX9nUNXy+K0P2\npR+HR8UHfESp8a88jhEJSgNBwEeGy59uSRIaI55Ed043sUtNe4vfQh2ohEjU\n3eJ0R9Llvy8ezle2rUr4mFZTxAO9gG60aCoPr8tKmi9gZqICwz9T/eUr3nPI\nIWHRGHB9q/10EL3P8yQyiMV52MUYskGwWeaLSP6VMT73oG0FlMGbmVcMSFLm\n2wUnG/QAwxz1i3/cjHxOUrjjzvCkZ/wNJNGnxuqyj9Rj0taEpKRayhMfaNoM\nmVOwst2ZimKmToNNqjCycnCvvLjREPZWRPIWpIVVLzt23VhR/3R9yrrSofrC\n3/pAD1CwJQhX1uC7iPLSvSOJfL9cpLR3IrH6yaR1RAcaectBz7LurtwaT7I0\n5Chn654nqwPoucC0ExkjPZ8F+3DaFSlK/U0eR2rToNfsHSbqjFMYRzihniVY\nc1c2JLV5YCOD0igqPLVpBOgsrw4+Mlv8HifQWhWZigWgK0r5osU/SYd0Td5K\nxrzE878B7eAoHPQXke0Gq81G1srcwxZ6I28nfy4yqzGJhDyuDbftQdzaCu/b\nVjMt9V/Lk2q1Vkl724ojy+9CsGE7xDQPwQGmR29vl4I3pZOup8oqRd4yUmOi\n/otBFLhE7XPhs7ee1GmaQORSvCzkxPl0lY7gL+aJcR84hK+aNqg7n+fAoX+p\nKxK2\r\n=2h02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"34d49dff4ba970447c184bbe8809a533b1146a27","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.17.0/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.38","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.39","@aofl/component-utils":"^3.0.0-beta.39"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.39_1572484083602_0.36336719549793517","host":"s3://npm-registry-packages"}},"3.0.0-beta.40":{"name":"@aofl/picture","version":"3.0.0-beta.40","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.40","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"b342a40e62f3efd2bf26de8d9cf067e5a5487ad2","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.40.tgz","fileCount":18,"integrity":"sha512-DfAHUiKxgEKmrSGuf6A8hpJEklidsKJF5lHsDTcWWYa4IKX9lJgNnFuq8Zn8NzSnepDjY3UEJkUc24iUF1jGgQ==","signatures":[{"sig":"MEYCIQDQwfELUrlExl3udBEz37Za6vHbbGnauV4h5M0YqEK/IAIhAOyN0EWBCN1J81v4nBslokBqQVCUDY7aDptF2a2man5e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyeE7CRA9TVsSAnZWagAAlLgP/i5QMMz2OpEeh2rKYP7N\nBuJJRxAFCVGqEab0BlwVtD168Y5+DtoHlkiFzP2tt1TDIYGT5RUcf4v20ErA\nvo3TkF6nkR58hKdZP8FY+O4MpSfwBWIS2LZFmaeSx1UtbSUVpu5cPQeBpeLU\n7gP1zxl9MIz96IwthopDxAhsZA5ZZO3YYyiYVTXap3K0TQnEN71Gk4LikzBs\n0PnavMnFCmsqyXws8/5TWbTjSG+Vgiamov99gbEX/GvVh0XK7oN9cCSutAoD\nqOtlKxJHdmafgsw3yJLe/8isoBbSY0zryVjfk42iRbevAS6plgnylucr0T5X\n25wX/7cHHEedQNY+IsCCdRNV1KWwq67FhsJQ/7nS3xJM+LeO+oHaQu2WON7D\nHHzFDDymLEo30Eiznadm4JzNWY3TQJv/fbRStUrq5No7XEhJrpXucopIdVqc\nXnnYi82MoiJ+TEuBNlDHn3jHWMF9pBJG6BggncW2FodyXYzxwIlkwtPyX0mW\nHDKuvoOpxSZkePxXIOKID8Ht0Bgf8jdHMee3o9UsP9zyJvTzBPQ4XD44nY6m\nypKM0TF95bzp0awwC1ulIYt26+ySX0VVpX8BPFiXrwqMQm9kJsWONDhESEkP\nqm+vriWHLRCveGCTZZ9ynJ4t7WCgzDE4wCp12M4N87SFYiI8pbZ6XSwwDHvg\nEGHS\r\n=wnJa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"0bfdc05f0d4406219d0b432a55fe53ab1726f4c0","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.3/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.40","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.40","@aofl/component-utils":"^3.0.0-beta.40"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.40_1573511483364_0.45258166595137683","host":"s3://npm-registry-packages"}},"3.0.0-beta.41":{"name":"@aofl/picture","version":"3.0.0-beta.41","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.41","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"18348c8cdc67cf84a053f2c44cd317c6250ce88c","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.41.tgz","fileCount":18,"integrity":"sha512-MODANPf0wwOGXtA164leoTMP12e5KYDAMk7lX96PPIpdvTO5szkhRNirwfG88iPHHC+5ksqYYuQvMY6jvgYplw==","signatures":[{"sig":"MEQCICCM1bDGoLpiFXIm1x0SJPEjvzr1vChPJUQq44XDsAaRAiBxqGqI+jxERj/ELQz173fwJxaSR+oxfz6goHNqFQuw+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyjtPCRA9TVsSAnZWagAA+dsP/3TLezQK/UYLhtLXdUkG\nzFPXu5GbkYTHsKy2g2iGvMDF+o02Uf/Y3UYwqbAocCp5V0I9cASIDVhgwsv5\n6ZJeb/LCaRnunFUe7EgIJV78mIZzrAmM1WEZH0fofCN8wFqdU/BZ9EJLRdAe\nk4HjtezjIcUhCbKc25v4COXIFU3kpvwmbstAlaY5A09IIjejnWD3YGrR7OAE\n2pVJ+GsDLze2l5CsogdAy988HwNOt05PU4fD7KnbsBdF+QFz/FQgqD6UC7zz\nlz9T+RW8qDodNsgkIvW4AT1ZeNkOB5QVjhCkBZ3Z6FU7jKzxbARMDaIGwt8T\n3Bu0KlDNa8q9kE+EIEjQw+1FT+QXn7nTvrNiBqscODJ+jYUYPfisPCltr91b\nJRyj/H00YEX+flQD7CH3m/Y0MR1spa6FjaiZwowePbsS+cC5kenRRQrxoFuI\nBK3FppGyJ0E1usHJ5+UA7+VkDfl989dtVG5ga39bUx6l4PCd8GcZ9Ulip+kf\nFvSSeFbmXX990anMAPz9JZDrmPkk+9cc2KFdgMEPtcSTJekmsc02EnvPYCeE\nJl+y+HK+a7tAO/uK4VoBnpdgQZpqBpShhrqHrFtQXCAl0PePz3cVT9RJqyYf\ng7V4bxI3/hr2n9Y1l+z6bLJqK+Qg0dPhcs47UWnP4hCcFpsKLLHj+Gr5jO6t\nANOl\r\n=pkQm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"212bc663acbda22a9679fadb2aa64484e35dc068","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.41","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.41","@aofl/component-utils":"^3.0.0-beta.41"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.41_1573534542962_0.4956016338757103","host":"s3://npm-registry-packages"}},"3.0.0-beta.42":{"name":"@aofl/picture","version":"3.0.0-beta.42","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.42","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"3f6e8f9ef0d19f819a1ede32acb9ca1f3d71ed1b","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.42.tgz","fileCount":18,"integrity":"sha512-wCld0aixjBnnRdcMD+fZqPIpGEhd9SFKQxibF90csBiulWgBEzdH008gA274Jbvl1vuxe1MLqH5RJiPOrHQ6Vg==","signatures":[{"sig":"MEUCIHDo3l17IRy8ZxBG7RdN7+nGlUq+EnDI9T0TbnwPDb++AiEAxS5T3hLaRLBDoE08ZSqvWBaxmW9YpwC/sb+bqW3MQKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdykjuCRA9TVsSAnZWagAAxJQQAIndZho74yHEqkRkZRjJ\ndanqVIWSesWxwZarbNp7PUZipFyEZqW0njIc+QaxF+TqtnpHkbZBJxaD7xah\ng7IRa8bcrg/YgOOVDCARrhMh0kiVTfkkVzxO3BXbqvzV/+ePG+TpKeM1XRwH\nwVzb1qexO4I6uiscHKI1BpDe+927Quv58bqZovj9SqFc13cX8fZ6XI0DnhRs\nPfIgf/K2whmV9RaXH3nv/HrLA/KZZ5DI2kO1L8YVj1afZjsfM84rqhDOmC6G\n9CYHR+HjavJ9Yz44Nq+Bog1ecq6kqvNjBGHDI0Xac6tY5pr/7EdAmSH9yuuh\nlstuARskD5z5R42CexTEXnytlVSZJqg7deCoXUSFbLqVS95dCyB5yE1HhjSd\nW0cneatkoCqF5lbBf8R+QHYNeGhGvIHB8Z8Ek2Uy7luq+4KWscmZgSfK/s+z\nOaYR3nWxIQD8795D1oH0PRy1OUtYViYTE0jNm8gx0YdZjWk9HbeWPIedN2nX\ncg1lyJd+5a5GWaJ8dpIU5Zz1z3wh4lwgo4qrWehGDOnY4fj50NcQO5bHhUbU\nYEXa6XWK30vmfg2zi01awIiQ5UeQi14PKaJVw5loNbNL9ZbNRp7r/iU2dKXz\nf1PSKLhnANwVCNTUARntaBHOt5ok8oKKOjS2EDHErb2qQCPbt1pdvLMuXMYd\n3+tY\r\n=oBb4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"699b13b7bf651fa15a25ee2873b72d9fa1ef14a1","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.42","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.42","@aofl/component-utils":"^3.0.0-beta.42"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.42_1573538030579_0.22554068432532648","host":"s3://npm-registry-packages"}},"3.0.0-beta.46":{"name":"@aofl/picture","version":"3.0.0-beta.46","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.46","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"ba4680f901de98825d6dac91611648d4c57c20e1","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.46.tgz","fileCount":18,"integrity":"sha512-Y9g7LBhE5YhrqlFNxXFz+5ZoBZ5bX+66c0eJtL33K9c35Gzf7QSTSnoDK2tRBAl5BwGNrqEfgZz0TQzC1LpKuA==","signatures":[{"sig":"MEYCIQCK3MRdGyM9UsbQHJjGERdypwZ92FZCP3ttzImjhrMl4QIhAPiOs7G4iSy6fR1K25LEJFGvuTF77vHFg5D3aGhupN7M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzc38CRA9TVsSAnZWagAA46QQAIjM5D3UMFsfkQ/xANel\nP+96Y8eI2Qa3UTmEKwp3ltALUTEztwboFr9GMhjBzeUra6fFVHVF8/NjSt+w\n+UfKapFcTSUiYinq+jah6o6JDArqdFj77BGEzcTTXveu7RK4+yGyXttthFtm\nBcg2AMTshHgspVSq2GrckexQ41sfT9/GtCy/D6+4dxcHJovUBznHusYtYO7Q\nKoAuJgsGNaNsGEFFgeyObjqIAqp2mj7NfKlMMq+VCYT1DQd2Yl7wRYkG8wAx\n4BfTMVvgCKywd2v/RF5CHs/LlNKV+Zd0txbPpBTmI8Kos8kUFR0KN+agu+eG\nxui5ZZMeCoBJCFGp7M4AtJgLRUVS9lyin6yVI0aEH7u/UmyL3UU9FP6ppH+l\nChbZ2h2vyS7wWxn+1mSLxz0oYT/JAjpg6dkpaIaa9PHhtAS3LucgwKTsibAF\n1R8HTfrWLJYGiP8wm3Z9LPNi9rIOi+n1zVPjQMXb8Knxc0GAUtaZvkhd2Ni8\ndGKkQISpO1evEI2jgZX8e8VSxpx/9e06QCcyZBedeZSVY8d2ZJkfE017v5Rz\noHOHIRVgjcCGRebfQyc5fGqb4PyhUj5VsSfDdgPbmOD0jfBzD+ejatJ2k4z7\nCF4c0AMcJ9014j7obkO0YXxXHRA6w1XQWosDSp8epBrk13Xlwx9PQe6QPa7E\n0A8P\r\n=yrm2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"4d18597a6b3e63324cc8b2f401d986dff832a62f","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.46","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.46","@aofl/component-utils":"^3.0.0-beta.46"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.46_1573768699981_0.06695854998110162","host":"s3://npm-registry-packages"}},"3.0.0-beta.47":{"name":"@aofl/picture","version":"3.0.0-beta.47","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.47","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"0ce9e67b5ec0271b7eb9e7c7bc23289853b172eb","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.47.tgz","fileCount":15,"integrity":"sha512-zFxRlRHoyp3KvVTO/FKrvsaZUb9PTElsMiTawmPvbUdq7tB7LyjAfZkD2gcmX85KMEF+MwusHqlH4xFD+nLeBQ==","signatures":[{"sig":"MEQCIC7GKip+0sYe8JB4uEf0LRpPtApLnPMTtTRvFEeU1MVTAiBYoo4TGNnHCsJQhm04PKcv66QWSW8FHT1pclWS0Dk84Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfX2CRA9TVsSAnZWagAAGLQP/RPzlFPYvHcUsFXbFCT0\n0EjWQF+m9TECRyqGij2kURQGj7dP0UQbTM54Zm/BiYekMWOel9KIAMQDI+Zs\nJZ2me/UOJ1WbAHahoXk6RSWg+g8h3buKRR95RUE1fXIWNhOOX2eus/C3zC7w\nMZDPMpXhfI3rQGt/UvDiUM8e+CTo/As9mhCkkIXEc+yBvaMwGHH1Pf4FbLBz\nno/omw7gdQw+/NuvzdZ84EtgjkyOBvKXRhbb6NKrRHuvsSn/ouFvs7oKproq\nFE8YgkB+ipgGFoX3zbARrPy9EYyj2fp19CmOcGXDghXDJ9ZaT9+rbDx6wfqA\nhVPXzdU9yoGgzANu3isqcnWHB2YlA8hhdEMmnGPkBw64GZTQM2UVcbAoYfAU\nvnLaVRy1vxwL5hGOyapcxgQP8e6+chj46tnjmpw0q70Egt2XHY9pl0B99sSl\nWqS73rCXTH0QdE1zNVeV58aYIeLxrlruEmRihWyy9CMdAZCt3+VdGj/nXeVC\nTmdJVuv2MjMLzs2oND1jIRZnXTaLk5sWMdHscsmurDN+8X+NJzOGxIvqRf1l\n0CKLnUcAuIHvciil779fTcE6O8r/iqK56100+s/cfFzj4bAHE0USBQPa+Fy+\nAvnEqmmXwK8vg3dSaXaRlEG7SjzySTyk44FZbDlfjmA1cGo2E625KhVTIVPG\ngqjw\r\n=/3WY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"11344382e361206a6f67f05f4904149ead37c1ed","scripts":{"docs":"jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.46","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.47","@aofl/component-utils":"^3.0.0-beta.47"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.47_1573778933648_0.0958088244990627","host":"s3://npm-registry-packages"}},"3.0.0-beta.48":{"name":"@aofl/picture","version":"3.0.0-beta.48","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.48","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"9301464c3651831de452208d9a574c163c4758c3","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.48.tgz","fileCount":15,"integrity":"sha512-yAufk5GSKEZh+KHl9mqT6TXhrJV2vQmsHZcmFToLs5YThw3uJMMEZpzEEdCXniKdcDBx53E8w+u+/9OtZO2cNg==","signatures":[{"sig":"MEYCIQDnfxZdCW8IkmWva6v9leUhDzKYVfngKR80LBk542eHRQIhAP6etBXgFkv3sG5vm3/HWHl60bbemJLfP03oszQPUWnO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0IfmCRA9TVsSAnZWagAALmsP/RGkj5auBiONJqqQeWD+\nj6e6zkbAYClF5AjNuSfRr0tl2cE5CLe/Aa4PzCn3k1bw3X1so3c7PdmeTXvW\nbLezGEhVVEMfIoHQG1YTpIRhDdLy0/ZxpDkt/oXUfANL405DEm8ZAbK9wQkc\nXClzOlLs3DS0k/QgNjhldLcP7BCCOwlxHUewPn1NJqCX66JA+majIBvkC3i4\nM/ctmWgGL4gTLja2uTrG1iimB6K1E/0e4n8Kd5fOYDd+Xn0059wP1byWc14e\nhanyV+1HRdlEoA3VoYL/sp/Ca0zNt8MLTO9do0mPIEwnhf/m50VAXCgq0hl8\n0lkJNTGu1bqy2D8Q9Yo8aE2Z8nu8wXLRkqP/aeDZgUgH9cs5FezeZT8DzedG\n6tfY/S7KcPOZNcDeJ/jWJmfyAxPxqzGN0nvczuLB2G8Ut+Y9KNVlghYigedd\nwZtRJB+ON0aDWDlrLLYFV0wDDtrlQ1TfQnsdkTL48ay72lpAmQWl3fnqL/DV\nU4CF/Yud9UsebtCxdUovK/IC0sDP+efw3EJw7dZ1tt3f64rm9qzLWFQCCQr1\naZdf0oCFzdQBxCzgAkot1urIB1xo6SNYb9Z2wEGebouDa06zjCiIr3l0DVLK\n8B0k4zejZ2aSdcLhKSeiQwmvfAgbuoTyKkxZfBzQ4EK89iNfiMNQvdMtYDFa\nSsIq\r\n=71V/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"d77a51a21b591d1ac0032de47395878116e8566a","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.48","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","jsdoc-babel":"^0.5.0","@aofl/element":"^3.0.0-beta.48","@aofl/component-utils":"^3.0.0-beta.48"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.48_1573947366190_0.5855256726359734","host":"s3://npm-registry-packages"}},"3.0.0-beta.49":{"name":"@aofl/picture","version":"3.0.0-beta.49","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0-beta.49","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"61b45fb535be25dba682899ef6b0669526b9169e","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0-beta.49.tgz","fileCount":15,"integrity":"sha512-Fx2mWclh1FABvuTI2mNCY1+qHxS63qPQFqHFaMr6fUGuWEg5B9mUlc7WIEmVcu/4bUCaZKUVTk0Q0IiaVkiFLA==","signatures":[{"sig":"MEUCIQCyABaD6+TYVAtMzScY2NVpoJDe34hB+KsX8I2PXbd7vAIgKgpYQd1lIZN3+T+pWbfL4oiBIgEywl+MyaSAhGrYNW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0MCZCRA9TVsSAnZWagAA1Y0P/0HCS9FK0WDLFPrry5j4\n+T/rsv76t/YnILj95IlN50vaGLg2HjZBcQMeazcLR5m1CcZ1zFhG34m9JtdW\nZFNYkxz5Pq2t0A1dZibd/dsVhc3/qk0fC7k5iJ3P129qw39zw5HR1R9pt5Yn\nRUkmxxR0Hur9Fr622VYrROBFEQqKfMM0jhqUq8UNUtrYBcsSGiO5qjpbwhrS\nMhgs/Z5vYkOp8pYIS2FCyCJt/c8Ta4lu+UoTxrFbxn0hSKfFzbQUYuutR8zB\nBGxwn1lWTRfmmSQN8dOcD+KBzSLEra3TSSdkzaF68LJ/MR5ZN5aujvbgA+Bc\n1R42MY6gBLjXkKupSxKF5xBjTPblKGus9yhJpUFrTEt6eP+9cdcASmb7h+dC\nnTvSROi09RdLxlNgJRF/D7lhIAEtastU5VPTJaqWMgd6leE/89Go8WycEEWx\nB2HQKf5UFAV/U9FWyRP9KVsihu6rq3VI/iweKXeevHOdjCBMGweTtXoZJ2DH\nOwv/ADMUKXdtudUfbBIBthIj7ZWecs6P3xEJJqE9NYYKwlFe2ifrG75Ghb7P\nCd/MjviHm7pZtlekQMHkIHdoEIUvIjFy6BAVZiGph04lmxCOd6axPbjgvj5k\nGaZSHiA1vsUoEVh8pTnDCzviqr07e4AQdrT5Enx8qGfdMOiSFPSm5DX7VmkP\nuUbF\r\n=kn9r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"a2642ff8dd100adac8db3d609f63e2bc6a2247f5","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0-beta.49","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.0.0-beta.49","@aofl/component-utils":"^3.0.0-beta.49"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0-beta.49_1573961881043_0.6910131140043494","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@aofl/picture","version":"3.0.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.0.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"0946c92f85657f9981d6e7277d99fa06d4198421","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.0.0.tgz","fileCount":15,"integrity":"sha512-PvXE0qHyNpPrs9BucGEZuIjCxHboio32onyIuPad5GQGwR42MrdZGBKgo8gdtUQR7+7ap7WPI9BDXfqoNT0jrw==","signatures":[{"sig":"MEYCIQD/tF6RODJZXsnSoplSsrX6aJGB6QWXo+2eLsdZZkgEkQIhAPoqDNu4x6Olr2JnM/DK/+7qKmBOFUQDxtmD6XtdiO40","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0PFnCRA9TVsSAnZWagAAIBAP/1i/o1WveddL/82Tdglw\nsa6pDX6tgp5wfwVW2ceL1/A6SzU0guA/ZX/krBOV46sl5k1bl9E/fYQw0783\nOI7YXXoAApfmggZOXqfLcX/G35gAs8KM6eUHUnKoHbV26qSG/vya0N33X0WG\nwCJNIZySt4judlGIQKkr5qfOPSDNb2hyGSQcazvd1qA0ZFsj3OEewVnvPKCG\n4Su/mzBcQDsdoadSEv526qmRTG8nVzwEHjHg800NtHZFFGRxhT1dGbp1bjGp\nI+EgqVKzNmm1rYubOZBq6tzKYdkJdAD9ukUF5AHbYdlrS+OSdA3hE14YS6DC\nWKcJPJFk1pJwc/wwgYgbK7qLAEjfXUN3XsIWCL7PxsShQYjvdBhsNqR3Hgpu\nE+F1wZp5fmrMgYD2pIIP00ajldtDyaw+s/WMx7fy7fV3yLF2YgB/56yKn7zZ\nz+Q7qN5qJPCsLRmQ3x1+jSL/DlCGoiabkhp97oBCfXxevIIOIX0NspIIl0fa\nT5AX9gbSAd6eA4FkfT2QB1FlvCEOMRMy11I1fOzrr4lOexRV9v3xjzdm4yZ+\nbZv5F+BAmz0DV2FF0a7jZjQQIRzkqQdjeOtL0I0BbJA22WgCS8VZLsrCbe7L\nHqogaXfFrde65lcrylwhwqUcmWkkazBM7NNTSkseVGISOMgxrLpKPPYbobyy\nko5E\r\n=GBUg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","gitHead":"bd783440a25a2c579fbb506b92d90bf4fb7e0289","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.3","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.0.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.0.0","@aofl/component-utils":"^3.0.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.0.0_1573974374765_0.32684404435169956","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@aofl/picture","version":"3.1.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.1.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"d4d560623f566d7c7f282ddb6c94b224db570fb6","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.1.0.tgz","fileCount":15,"integrity":"sha512-2Tf5Ii7AtMqmxhzWDATsRagm4und1BPT7XE8uHWXLmSvG4J51uagXYHOKF1MTlg27FjXeWdWFmEYiZtcRlc2+A==","signatures":[{"sig":"MEQCICCRy00zuveJBuUMV7mZJcoga5TwZ8dtHkhRGUCo4975AiATVO5WTQpJt00xE9ZFaleEa6EEV80ctSyYLWVGRHtpFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd11XTCRA9TVsSAnZWagAAUmwP/jlcLc8zE5cTwyUNWBOa\nS8g9i1vLVGZY/FJc+jkAuwpUlBP0bSiNOlQL5fxjaxsqJrh1klPX8A0T0XBS\nYW3WN+6JPhghTIpzn6pyLprDXFzj7C6eJfLOoic5AhAV4gyfyUfzz8wIrOwQ\nonq+ClU6RSVL9HwfVoXRuVEbRbIi7f6KSJH+puCKh0ikpvRN6uUoGd+L8Q5K\n1FNEtC7JDGYBZnjfPf7ehWpBijG6MLkeJlz/z7RodCWn6ykISnU0vqahAGND\n81HFEgyf1qezHUOgK4tVh2NNaBeeOmNhuTTbaE/LK/RVEm9SkKBtr36r1OFm\nytv51DGFK4OXW9CxH0QRVnNb+yOnIEC8v8+QIat3FtEA9WqLiKPQP4IjzwSF\nJIMJkrFEJwsPU3XlBhwZYAaoyNRJdpE7UhSHeIM7TetQBogCtRKvZC2BAggB\nFRduX8gRAguyfHDIQ2BTGUjdKLAtYZt789VhUJZ3EGf2H4T++WnWpcFdXNS+\npk5fCBH+c7LFv0/E65pMOcpzWfoUyoM2ZOrrVYBR1P/7SnPbYu998m45rj54\n9Lk93Q10jMqfJxZGzGPBQVKx9gnVisvnnGPQld+umzT8vzLE5XOOZwsyfgcl\niWxtk/hjxp/9H004H9E5polDKVdqczubSy21EMSBAwWIVBL6C2QBWjIE4Yzp\n2jOC\r\n=2ttw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","gitHead":"cb7c610ce117e6fe41168dcb3e2758d12900b277","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.1.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.1.0","@aofl/component-utils":"^3.1.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.1.0_1574393298793_0.4111260130217711","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@aofl/picture","version":"3.2.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.2.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"7798eb85111b98cdd9be3e68e7ec519abca19a7c","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.2.0.tgz","fileCount":15,"integrity":"sha512-GSS8A4YUISf9LAbxGEEvrxzDY1TJsAWkag/m1zLSFMAqIaJ2a3g3dvNC6mtcA5q9Aq2URIIZi7J9ahyrXzh/1Q==","signatures":[{"sig":"MEYCIQDPopVGYQFyskMbfQ2iKw0I3d4n8NOm6aoREe8CvzKk0wIhALqG2dWzmmRMeKzBXWL/XVEz4kLVSIlCTtj56iG16CtA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2jKoCRA9TVsSAnZWagAAfeoQAIBIGujNUu9LBQkiZbIr\nNKmLqWqzndHqFJMd18lyVIPFFXApuNL0k15EveADOi75JBOCiFUUX79r0tLc\nplbzktsF7UCUxQaGBdPjK1UdOP6B5AJ3m8ez/fGThzGuxZMDSoca8GimyBcE\nPaXbDg12IJOvofM9aX+Jgx0EXBODiyT5auGplC1h5RrXpmEh4XSxO4CAEQ8y\n3Iai3onRrg60510Hth8QzUFd9xLZU/QsKt5Bf2cURMpvl+ba3Ac8JYfeN8zI\n8Njn0NkZV5AjkTDBWp14Ww0dq6/+tMhUj9f2PumGyv69rF959yxm0+U54ktL\nazoNUt+L7fcIZNNb9Ozu6ijA7FjbJQvw+RRehbp5qalxahmT6AgT1x2ZNR51\ny2f4V1eUOmALA08MG+P+P6uME/sZK+rjClPII3BBrcC5EnAhUr8ZPfSEAMhk\n7j0ATw3nQZsJ/KxyWV6CYOhpBfcy833/cg5+N9odW+6TLWxyVqzQcPs+Khv2\nrhRekP5fsGCvztbyzMkZbYbaxkGeU2cn47nNniDxl2GGDePVtthx7sYPDbAB\nXccjm9aZUlos2p8ZJS5L+NJ378h8SPjXptVa8gz+p6/fxQ+kyssHDyISlitk\nmGOD1whfNi4bBdnJG4UAoCuyyLsiLdW9c8JncSupy4eMiO1MYBGSvwwOMaJc\n64Di\r\n=ZiEq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","gitHead":"8275111725390a8f797467a12e045c905a78623b","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.2.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.2.0","@aofl/component-utils":"^3.2.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.2.0_1574580903634_0.6019716426972646","host":"s3://npm-registry-packages"}},"3.2.1":{"name":"@aofl/picture","version":"3.2.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.2.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"1138a64460215bf7623ddb14108e33be55d537a6","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.2.1.tgz","fileCount":15,"integrity":"sha512-Lvf0ZRA+zAfZOsMakQiRRtemLmbry+XtOk8O4kKCWdHihhriQ91s5hV15gENnNkMmWuzngl9g8wqn65QWy8pHg==","signatures":[{"sig":"MEQCIF2rnySd4e9hDaxhMktDkyDHqOZCsH7N68sTqk8+ZNKKAiBz2Ef3pF59bhOdLDvuxHqAZPCKqJqghenZrLjEY2Mwtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2jlrCRA9TVsSAnZWagAA+DsP/jYjjj5sDJgRuIUiCSWr\ncn6bmGy5jRc1x4UTT5yja/TP6UDhdvBVVkrEMmHih/K22SEQA/yUYTLER9Ul\nVII+Y4ntbPOdetcoTa261fBC5+F2IyzjAa934dEf89sxaP7UyPSaRzm0MajE\nVuaERO4l5BXY7ygdqKmk+m7a7LOPgmGH7zkY037X/5kYNkDqq8mF2LrJbI75\ngkmk6UPJ8C6TxmK6VPW+0d14cnslExhDElJ7PY87FTHsZ7gZCbeEIRK/NT+n\nmbdFL4L2OVS3QA2fatr1C+IXJ4yntAVXjAlSIN62a3xqEErler6RC6dYJfhX\n7Zyx4fm2xuKwyPp0icXVV40lKjAbKvSjoadPmFyHIL3XGtReCdRog8ETWfnr\nZKP5l9f+UqkF4yi7EZprqU+LI5GXal/Vi3lzPA7wowNTlQf/m+NEH7LBsAUv\nEwYNSrXDTC5DTI+fZ7pV4ZV/VVDNFypBm4JPuof1w2LROSXMkwwDA05DIOcN\nKeU6dP6PstmRFFM33Ow9wxu+yWCK+P4/SQ9hV847RZf6rvkFqCVVldkapXPE\nsyooVl1pfqE/CM6z80h0g8+FHTKZydTJPAPORp9IRb3swrkod2idCGsBNrEA\nEd2Bnf6G9VZ+qSyfvdBaEwSaBScFaLbTYsto3dAW5uXrDGGdvPFTTCbDmd6Y\nCFUa\r\n=eagQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","gitHead":"a3a91753b98e4423d9fa5bc05d8cc8f8754fd040","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.18.4/node@v10.16.0+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"10.16.0","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.2.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.2.1","@aofl/component-utils":"^3.2.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.2.1_1574582635111_0.43657777315685475","host":"s3://npm-registry-packages"}},"3.2.2-alpha.2":{"name":"@aofl/picture","version":"3.2.2-alpha.2","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.2.2-alpha.2","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"423572c55cf52d0d01b257b03610fc953ebc0dde","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.2.2-alpha.2.tgz","fileCount":14,"integrity":"sha512-zjk5Gs0tsDscQNfygT+y8iFIuRJ6JUreP52A3wP2qNGxJNlbCd0LxH8N45LYQeDKNPhAHslmvlmOwyquMo5RrQ==","signatures":[{"sig":"MEQCIQDOf1JKSTduhw8tHpZD/ZZH34l7NkINqHmcTreN6myVlwIfHCsg9r7jEBkPyzX27eH8Fj2ASpbTIJFg29RgX8aWEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHiRVCRA9TVsSAnZWagAA7dIP/3sBJN/OqtATwJQR/67+\n2h+mP7/oDItuw0+EsFW9uJw440U+1vE9hPT5YWbD8ColFRjh4B0KI1y3PQ/L\nF8ztsX5k5xvYy3ZJY866zSQkPzx6YDSFhg7uXt0asXltK5LEUxWeEJwKI0oF\nLTn0Z9bRlGMtuQTse+u8TD6ORdn2vgzg4PxM3HkmSDOSkGTxUWRoz8EDzCtn\npbgoW7g/GxXg1xf8tfjciZ5QFLFIysLt1jXCSQVS8nXtAV/aMhHzeGZ2INCP\nYr3DBwrXpzq3zPtP0g+rK7tDw3FhaAhhYjAKkbzLwAnRLT5tuey2AGTuYe8P\nk9m7rGBgARLPVMhoCgf/VJait+aiPiuYDfSTYpq9CWy8yzUKLXpbYV98+7rR\nWT6sPVx8lPvOfkaYLB20Fhh0aOliOvR1FZnB/WeP0I7PMmQgD3+BkYiNkKyr\nk3Fed2PznCqVxi97dnlDLvfFlZTQUTszfrjpLmkCCthHbzsD6JO2fuImbrtl\nNrioBLcJu0b2nJh52BtLI5vm8P9LusQD2y0WPIw+jkdo3ZaszhpcBSTXxNeu\nQNgZqJkIlTwVAEtgzkfvV5oxJ9OeuxZsqUOXzMtQh1FOYnpvtMiQWBhWX0gL\ndFTwKJ3DbfBW9mikELAn9BDrcWOzAuKdCrWKUqFCWoDBljmoSHOT4kmQYi4g\nln7T\r\n=I3bz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.2.2-alpha.2","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.2.2-alpha.2","@aofl/component-utils":"^3.2.2-alpha.2"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.2.2-alpha.2_1579033685185_0.7585879668762701","host":"s3://npm-registry-packages"}},"3.2.2-alpha.3":{"name":"@aofl/picture","version":"3.2.2-alpha.3","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.2.2-alpha.3","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"6596636788828d4b3dc8cf7c760ae51101ebe2bb","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.2.2-alpha.3.tgz","fileCount":14,"integrity":"sha512-EEwLqr0toFciDe3jKSrmgmq5+eTvz8ypQrEeO42kuHWjQStyIykcLL2QecnHL89KXEVqbkCOQ6WzzdZSF38s0A==","signatures":[{"sig":"MEUCIQCDcv3UnGGL+kyti05dcj6MAzCEeWuDZ0COIOlXdOytHgIgavl9FNwIFbPfR25gWavGzRlt9BCOBWaRGqz2sZ08mec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHi75CRA9TVsSAnZWagAAKooP/1xy08SBcQ9fDcuaDJ38\nB2KcFMy3w9qHrNGcL0hSv/Iq0yaKYjEb+Pi2xoa4zW2qkm5ypHaPDRuU0qSm\nbQaJBieQXLjHd9EY3+OXz8Bq5OextgaGgKaZUb5+45Fc3IZBsw8wacWhPR/h\nAWA3Sjk78Xu95kcvVmlAksCGlRQOR34O4CWGnuUi4tk4CVFSPCu1tMpTUWBM\n+cVhsZtNST1n4Y8ZIW1fLfI6GF1LYyp0zn4FOGS3CPiMemngalEeQaNuizdx\nbff8EMdFBIJH0XRvoPqpDXk4zVOr4cyFyvaCtX7cvpHTDKgWKxZVBwwzRIAX\nDsb2uC7ii6bl/MVqflN1r1T/LlOAcwY2GxQV59sTkKNAb60nK/i8q1IuCM1t\n+uHRPKVG9xXf1S+NhWhcHt7BLzWKbapqQPdYSGnz+ciVBhzq95DBDKo6Y/5z\nrm3I1ES0M2VUo3nxn6FYF4goBYwkTvnc4XPkYTSZOr6wmBG5WFgO1CDE/vOq\nkOIq2QZ84BUTDL6J5xkKjeOiy2TtW184POY0nxSkeOapInapSD3V7wU9YZXV\n20QT6B8vTo/TlSOn2bBsFzR71GalaB4qx4GhiyLnhEch0esWMUAo+ez8tNmX\nA08v/psmDYMSrKvINGqftZHDGd6qB4EEkgfDO2v9DzuhTgBH6H9k9lUtyKG7\n7h5k\r\n=NgPS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.2.2-alpha.3","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.2.2-alpha.3","@aofl/component-utils":"^3.2.2-alpha.3"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.2.2-alpha.3_1579036409043_0.524377124475218","host":"s3://npm-registry-packages"}},"3.3.0":{"name":"@aofl/picture","version":"3.3.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.3.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"424d5ec178c1372b4174cd5846a8d38d29d8d330","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.3.0.tgz","fileCount":14,"integrity":"sha512-nIGFjChjWzXZk2A8C01ZXrlbGuN/MK6Vv4nED22mvGp4BWNzRZHsaF2C1iOCvmlGOT/Js+/ie/j/DUC+TZQupA==","signatures":[{"sig":"MEUCIQD+TSn9W6pmsF16Kl9Z45CV/rOSiYCGj1tAlgYl4aptZAIgbZoLFu+nE6lwyZt7rWc2CqK0Yv1HcA59lWBf2s3petw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNteCRA9TVsSAnZWagAAIH4P/0J+CNtWAao/XsJwgpjX\nMMHT+GrfGrdhkmIxjVYAAJwChLQKhRJi1ysCxXbX5MLb09LM3L1zlJFayZvc\nqHKZp8vuW3kwnkLnz8+JGsQJTJzOf2k8VMhGfCsisa63Y5FLzFZ5VMZRbg68\nHvPwcBY/MVj1s2hoJLpnNm1LvHQTWVXmT09XLgFgj5bGuT+tI94WguoWxzo7\nJjE0y9IF7wgriOxVTco9N1zNi9RfA/1I/Xh+ksF+Uft8Jls3adQko0SoRsA6\nhk1oZLGDlhS/NTAAGrDGuE1Yn69ffIhLGGdAj2tQ+Jh8mTOnVWhRjSgj0HrL\njNcAHzr65G1PZWij6HOpD0jyA6DoSqKKsjseuf3114uPqdeVZMlSABc9XXQW\nIBp3QmrHMQ/G29NJgmUvqeT24kXLPQcjwWQOINz/wX86jgjnQ38w28HCqgXp\nE7XwDhvP8cP5mV+lDbEQ08aH1mTT/B5dML+k4EUoqGy7E6YeHRTYgUfIb6MY\n4mykUE+p2HhBhuqHUqGaH9EmyMGYmEFzoeREokVdg8H7amAkmpWRtRv/OIKV\nG76PiiWesFMlw+2fgHVmH/29FiDcQpznz/0HYKrpDliRbVOgVgypF7aovzNU\nHEgWmmyFM0FI1Tx9WRJcNZsaLD10xgvs/v+cOV0r/GLgXOKoRNRWhVzCAqVF\nJJY8\r\n=msSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.3.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.3.0","@aofl/component-utils":"^3.3.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.3.0_1579735902461_0.01449938707222942","host":"s3://npm-registry-packages"}},"3.4.0-alpha.0":{"name":"@aofl/picture","version":"3.4.0-alpha.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.4.0-alpha.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"a1399a3cbfcd64560d46b4704324257c899892e7","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.4.0-alpha.0.tgz","fileCount":14,"integrity":"sha512-/5nJgQmdPMWOI2jgn0QJItegPNjSDK/GvaPq850Dl9e1j/bLNzxL51knT7It2+zXy2nszOEkLbPYJ9VzTkXGWQ==","signatures":[{"sig":"MEUCIHT0hFtm+Cy+D7/kGXiDDmxg26bl+4LTKhJ/6SU4/d+eAiEAhnfqnfVhsPswI+q3lvg70rGAyJDUixm9XfLL3LXN12I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeL3UHCRA9TVsSAnZWagAAdUIQAIlfK7Pb8KtMJTAy6hkU\nw2H4I3sjXcfEoNZz9+VJGGTpoLImXQdOsRTdJ0tFEOAHgN1bRhEoiIL2gxR7\nBOSmZp0IbpTCFdpBDwvS9+dKH0lcF2oqvTMrEYc5QwQ6n31ou5tZmJB6gUIW\nNpotu7QUt7+qfm9z1STFCfZk+gSUclHB8WB8Gj5XBArTK9zyRw11cswnAxoI\n0HlB3FtO4dqMmvBVFCj19lu1R3jspZ2Pus9vHSXebC5K27kRXDZIX0AKFCA3\n/4qfOk8w9GHJi4/+amA+4qr0TjVxrFWtKh/lCMNBjQ3FrlT+2C1vGs3w5wfO\nMlW0pDvK9DRLEUOOYB2VzLZJFLy6SbppR3D6JA6pN5yyw/LL7aFDCTG7ZRKS\ntjIpW0HKkwa9jLM8s2rpSdf8AkMuaMp/iGX99vTL9OYG1SVDzSImOCQcc+eE\niZi0lK/LA7z3G4dfJcxO37nurAzqsZ3NFawgAzmERMZgdDctxd28cwOUmnCY\nbBCCBPhf8r9fDvchYpS+r9RHzuafMJGjAXqUyLnGRydRWLqkDHOVV2SPI9SX\nIJz3CDh3cJ4t5yIjvsUVdQfZeQrId3vWGIznq+055Rt0ta3Xf2RwgrgRH1dD\ncCuK3JlPOdRvTrPnMnuor2kqpqTtDENguc17SBKBip6Nomg3P22a85+2KxHa\n8w80\r\n=fX00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.3.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.3.0","@aofl/component-utils":"^3.3.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.4.0-alpha.0_1580168455491_0.04692872081704191","host":"s3://npm-registry-packages"}},"3.4.0-alpha.1":{"name":"@aofl/picture","version":"3.4.0-alpha.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.4.0-alpha.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"29af3640d2649b0fbf21903bdea15fde036be30d","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.4.0-alpha.1.tgz","fileCount":14,"integrity":"sha512-rpzoBYwcQDCeVPMAs3bbfDNXl9lKRPclKErmiB8k8AzxT9yWfnYeJcgxR4sHSBurEByM4jVM/neGu5WbWAtjUA==","signatures":[{"sig":"MEQCIAChywAOBifkAGpdfjP9fKHG/pyi8e0QCYFY19gbv81IAiB4nEVxGMPgfbzTTg8OGSdpRyDg20CwXiH5QkBElRsyig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeL3fNCRA9TVsSAnZWagAAlJsP/2aLKiCS4e+V+VhS0SnG\ncB/9aZ1+bzTOemO2QuZUDV9REqBV23VP76/5iQDFVYz9ICj2/IsQ4jl0LaKP\nCYnFvXFK1bnNKSL9yvLLZL+9DlZhVWC7i6zXJbJO8hUVNiz2ADmNcax4r0DL\naKafu68bt4EBItVH2hJrsw/bkl2db0nBzUS697kr+kSUIh5/mkGG1cwbcrAh\nUZHQEffFFPbobaDhEp63JM1+C7YenIBGPg+42EnSrsRLcR4AjdcVyU0QmG7e\nfZWZlb3402ym63a98yWYmUK0V7fwdezaMRMLBpfqgB1KchLe25CMqx/B0LwW\nk4fu9haljtduauG9Ho10Fc+Ec8FpFL64KbkUyQzZNeO7myk69bRXDnLG1MKz\nex9xdO+nnH8upXh+5lu3BjGesx4ABhrINZE3URAu/QqbP+yX9yxg8OB8qOVS\n/KqTPgflUaJcjwK6yI+LSOuyWYKZCJk1A2wLiEoqjwgxptikxjzZPJTA85yY\nAvuNH7M1SsJ6MBFTLHeR2dpk4nVpjZogDOT4chP8k6l87T86Oj9YQsjiNUdd\n/nVH+8wGQDfo4VrMzaatNS7fmWRCwVL6Xw5iQiNbQejGzfJeHGAxvuzy5u9V\n7pF7QEPxzoz0z55tNi10Iu8war1hwwBcBUroYIb5gIzmWnRZCEuQThbM9aCU\nwqyR\r\n=odP2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.3.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.3.0","@aofl/component-utils":"^3.3.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.4.0-alpha.1_1580169165078_0.3225303126812511","host":"s3://npm-registry-packages"}},"3.4.0":{"name":"@aofl/picture","version":"3.4.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.4.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"a55d1520347dc02834a5d97e93b8cdf51ffd09f8","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.4.0.tgz","fileCount":14,"integrity":"sha512-nk+NDKGBZ+0c875YNpSPbcoT4VRT8ualFGe93rlq3DUnrxXEKe03uQn0ZdrLn2mpu7nB2EjZd+qoNlw+Ve0rIg==","signatures":[{"sig":"MEUCIQCrfgiOXVIgjMzh++fFcxnQuu2NTcPhS3PgHjoCnN8YhwIgPMWAWudkfXi43fb6xfB4JD6QQcr2diBIttPCYzzxCrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeL3n6CRA9TVsSAnZWagAArBQP/2p9W0wiAyT9tU8jyPmR\nNUh3qAI3f+CU8LAsvkQJFGa5r78rdqRQuyYzW3ag9Roz08m9tdG3vuYa8n3k\n1jjL371UmbOIu9Hn3PgFvHbX+J6Lj5RuK1ndh52UCcrveIaz5zXFQvSgRTtm\nTnU1zpP5MpQqL9YnJU2LJqnonLpcSPNTKsQi/UfvWvjD1K4nLcrEt/3xZsnn\naoMQjJYLYDAJ3xwEnmC1DtvezxIq34jLU1pWKaje9VVoau5uoDhOnpdMnh/r\nIieLH9ZaFKKVD/v/iQbD4smiIgYDM+yuEQx08hyUEYe7qa5PVwRTrWqqv15a\n2q/9YrC7QzUcoVB/2HslkG286UITtgDKPvFKkM1ytpUUmkyv4sgY+wpeD2Az\nmktsSqu8yG4vWJWO1eXRa6zN9GvoP2gHfpzefcTIlUC+CWqFDhmoYdJdkA0X\nxs0pii6DdnVYBb5lwf/85Ueqz+Mdd9na1+PkCqeSkPsvoaUXA1AoVQ4nwtuV\nVrdoQcgmmf6PLQE3Ak3ug8zELSOB/ks0hBxNNwXe7+5ghKMzkbX3+OPjzx1u\n0/eT0IHAIM6Rr9qec2F6d6THXGojKaTrrPDXXkGiFFo6PkdG1EICkpE+s14L\nrGpvmf6r4DvwI6oztix758z3x543NquqUpd3+s35w+ib5YLnE2UAWwjK3r6m\nqXpn\r\n=8O54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.3.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.3.0","@aofl/component-utils":"^3.3.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.4.0_1580169722002_0.7269954953821292","host":"s3://npm-registry-packages"}},"3.5.0-beta.1":{"name":"@aofl/picture","version":"3.5.0-beta.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"9a3e48fc7d88d7d22512fd3978b986bf9c2e942a","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.1.tgz","fileCount":11,"integrity":"sha512-1wyaxPWquq9QoU0YXQm4P7YDxPJl9yydC0gjWJ0uSJGqXKMYuhc06E1gXG32OliR6RhCJURgmvYNsTbzeh0meg==","signatures":[{"sig":"MEUCIApoRuSADIq5B+xiOVtzWp8EDVKTEsZk92cykpGY/OS0AiEA5VIcyUZx/WlOEHrmj45oj7VLn2xtNTKMqkCusxUzXFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUbjICRA9TVsSAnZWagAAKN4P/iINKlACIGLL+Y/F/ZE3\nuxSa9J51cyz4Vqfd+5y3KUojjsHhxbIHD2m0J2AUUraJh6XHeGkBIeKIOBtl\n8MUopFAGs56fZjK3WBE+Iyei/HcTYQmedWa5M14DiWVsplYhehQqrMf9CQ4i\nEF9JeKnmXO3B2Mthei5KbPzPh/VrCQwH4A8r1EPtmfocHGE4VVRyzMGb/cVZ\nyTEtr6UYf6PaWIrYfin5QJX1naiGqEOZOZkhMmK2GUP89KlklUAoN1YKgfBS\nxBqeb066aVScVBJNEndmaJAhtk12Y5bxeny5T+G6lYIQh2pVpXjZI3ADE6Cb\n4OxoaWMYLxQSY6uw/5nZCDmerDhX8hGOqwqYcWXGR07jLPw+vla6XzcVv2LZ\nhhRg7cCCtWBSb2z36a/iOO5Kf5u0VqrpPZJh4PJPfXfwqn0hskn3XceZCRhE\nKoNYD3sqgu63I0bl7wzaXZb0bf0vV5RfTkGtaJVToP4HhwHQpTIqS+TWhXif\naHOk/3/OquBbKXRX6RWZVPv24iT/ptwtjL1ptBeEGlwM1QllR3Nee8ciuaZv\n9py/1UgNdH7gNTSfncSX7nNdQ4CIXsPGCa6iUJ8zsqLK3k+SD8OMdWSUT5m3\nn+EVMFvog9UTP5XXNhOQa8+BO/X1VMAHWnRE2mYNU2mmDmF0jG0Swiy/sZ3p\nklQR\r\n=F3Hv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.1","@aofl/component-utils":"^3.5.0-beta.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.1_1582414024224_0.6934472131395533","host":"s3://npm-registry-packages"}},"3.5.0-beta.2":{"name":"@aofl/picture","version":"3.5.0-beta.2","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.2","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"c81382c3a43604aa765f116b3d63d76771375abd","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.2.tgz","fileCount":11,"integrity":"sha512-4Tw+TfixlwAgZj4YN8F+Sc4sFI2+lrUZvyu/JQnZeNzroq7dmYSG1xVz8W4lLM/Bf4eY6TbN+0l9F3QTw0Cu7w==","signatures":[{"sig":"MEUCIQC9tvP0ij6iKQyMQ7XbrhVPWalB4xgyuRjC7tLeql7qYgIgOFeM7rT7wP7+LDIOvGzd2Woym9ODDcpT6VhsZOe76Is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUb7mCRA9TVsSAnZWagAAUJkP/Ro8yn3hBPdp/yq/IAXP\nhi++9SV/TBwkZkGVyXP5ttCkl4ZNb/VIStvqHIgMftJH64xdsZfBC1WPRy7c\nGrvzY+CnrkmPQQxtgdHsmZgy+NFniQjDe5/9jZq1gwmC1ULXWWk+S5GiVqco\n5EgqRJPJNWeNWFFjLIWHKWX4Vt/k5vHLED8wAFh7OOJDhCY+4Iei1sD+q70m\niEgscT8L+if4JZ5TZ1ZQcvtaJ18DYvAALwvdWMxlV685lRrdS1thWJjnayJN\nfb9px3LK3sVmaEh47B9NNHPTvDfkFjkhg73r1FwCfOo/aNydfhRqp1g+P80a\nH7k1uIzuRg8bDNx5VA1GlUtomgmKpJSBnweIHhty+z3zvqJLFO4U3nEs8AV4\nNt50NVhkmRoG/z98/bFqkznkOQMSzOaBPrAUAeMlG2TlmzFUgGydh6wbOQrG\n+F/NFCQfkTmTXUM0B/+Rd5pvUjDTmx/5X/uYyaTkKNiM2ud7PS+opnMPEzeo\ncauRusFEF7NbuBFKtwpv7ZGccCIS3xG42wcshOo5Aqded3euprX5aUAXkcor\nyH7+g+hZwT4JyVREV9gvoyX/iDzSzBfrdfwfZn6YaY/BCEfKYQLD9hsL8FEV\n4FiY/0zRYDY4Z729eQI3YT2BTK7rscxELfeFWx4bl7FGD7meGeyob1Qfy/oh\nhgKp\r\n=TLse\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.2","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.2","@aofl/component-utils":"^3.5.0-beta.2"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.2_1582415590460_0.6521297184683714","host":"s3://npm-registry-packages"}},"3.5.0-beta.3":{"name":"@aofl/picture","version":"3.5.0-beta.3","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.3","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"5b38b11a065755a4309745c7d60953a953e8968e","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.3.tgz","fileCount":11,"integrity":"sha512-lS5AN+IiofT7RPoARBU/XTNWUM7T+VLtAFj4GlJwMPbbgVT3RCrbCKIOoReFriiYjEXM3ALEn5sw1eyl39vyXA==","signatures":[{"sig":"MEQCIB64I19Is+Kxew7NS6M2apZ4KDU3X12aLVpNRn3EaxrcAiBWzjGlfj63066Q70h0AKz4eiJ3pget9msZGj8fM4pMeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUcJZCRA9TVsSAnZWagAAQCQP/34CrBaC29v6jW8JQBWD\nhkeXz9KTYmmvJmQ3h4LDJ0lbNH9gWYDi++2t5LZQI/eX8bgb5nSbrygx/Vxi\nDoQ1RKU/NlFHmvtI3eV/8vqxqOkijs2QjIrupgUVh9ZQwcUWAKVr4HyiKmO9\n1rO09v4M8uorjuP7uIyXKT/ymgLha85BIS1lUFVfy0eVV+FCDknTo7Vrs1U6\nSYSaVJ5H7KZyTGfGvzvJcUuHQX+lTlZDcvEbEjPzZ1cLDuPdRWAhLtgfOy9B\nMXs6LVFzTq422nhdcONeaDCmlzJET+Hct7O1eYWSxxfbxr2K1XBBc4YBqh35\nepzggmBfLahudeVietVCvNWAKCmUWfuW0m6m5mhtJhwn/i6DSf3o43Na3ed0\nimryG50L5iACRhwgGDzg+/Se9oAthgO5q3aYcCHpJNjJaYlle7nZXCADi2OO\n/DckAWBRjSQVa1klqPiswtmh3FP8mGeLPRPCzjSJiOg/bo/vTV4s/1rGNwtn\ng6JHC5DRoE7phtMP1mE+0he9ZTwfz6ZPs9hVjoPnEc8VNl2DA+BokOTD75HW\n+KDF+mcyJf3yVEJxD6gG8ROmMCfWbzWD89KMSIvgYtNN74t2NzSpV6vb7e0l\nU7vMAW2/qk4I1YSjJVlrpyGn7j03InWx4DIMvoeuuYetclPanoXyTLXrlBS/\nf3IN\r\n=ls/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.3","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.3","@aofl/component-utils":"^3.5.0-beta.3"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.3_1582416473426_0.5432157035401388","host":"s3://npm-registry-packages"}},"3.5.0-beta.4":{"name":"@aofl/picture","version":"3.5.0-beta.4","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.4","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"61f6109ca2882ce6805077955c8193543412106d","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.4.tgz","fileCount":11,"integrity":"sha512-U4gkjFf4X5S2AJcJ8cXZ/G9mft5xot9eghcucGU+Ks24VkQM/ca+C6VAPS3DEIGLCTftQESxf2SdHxor5sGkPw==","signatures":[{"sig":"MEQCIHgzgiuivrkoGlfSfY68bifBu4TaDcu7W2ZovKOznz91AiADsrNb0L9mJab5n61pQwG5WHbZaBprEWoDjmMjduyaXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUdwqCRA9TVsSAnZWagAAu0wP/jE4+0aQPqjvPZY8EbeZ\n4sVNi2S2Vs2oifc3mGLv873qt3vnOcPxYzWoZoYeX/8rW+wv+/vbptQRwPsa\naO9g9Uedy1vu6nRbEJgdMfige9JXskhG/mnXbPAk03zkyPB0CpUXxpnp3DVT\n7See9CE6ksQEqp/9jqu2JH7A9+W4fhTFvgIK1HodUmPavbK/vkcEAQ+ccpv2\np8GSM/B+D5z6KtEuyC//UdDrj+bgxjR0Eqoht5rmgMCNwqmoSSAyrKo/N2dF\nyM/Bi2ySO4eueHSKx9mCZKKnh8elUonBzpGTlhnLCWZbk1ZLevw2kAZton6d\nxH5OmjqB4IMjcqd3KmqEjZ8r5xmtCOfz8qtbF3zBh+jwCqAnSbYuxIdEk1+j\nz/i2usdriHXMZhTMT7bpIB74wOgR2gtl8punxwT6ZwgHkkzUWsG9mYEj4csp\nsd/QyfV2A02/V0+VNOIBmCuHnP9ADqw8d/rRRa0maf/HAEgrqvyU/lQu9mHf\nmIHwZLpg/k0k5qlSWkqkQ5/dYLEOvU/g12WNzlEoomSYlOOto3IzD0FozLHZ\n/IKlALpJr3TeyxlR6uVitJnm81bmOZI0K5Fdk6Gc8XFX+mapLwnSHBdtmkN3\nk0n1UTqCHE81wVcRDJU91jOB4YlWNhS7vst5YOLtbswkCUtB83UX8hasXE8r\nuALX\r\n=a0Rm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.4","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.4","@aofl/component-utils":"^3.5.0-beta.4"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.4_1582423081545_0.8497850415691777","host":"s3://npm-registry-packages"}},"3.5.0-beta.5":{"name":"@aofl/picture","version":"3.5.0-beta.5","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.5","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"dc174676d6553c495107cbb7005e0393d120bbd2","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.5.tgz","fileCount":11,"integrity":"sha512-/om5qUtOxUaFDfladKOvy6FtRtsg5UcCHsI/Es3ChxYwIzwgJErPnDOuNxSd0xUtd5cu3c7duKmRGgkl0a9QMA==","signatures":[{"sig":"MEQCIA6wj/Oyr590xvcwGFzWgbuDBfdVKslavGELZfBwkNhiAiAECnJ1qk01Sn22hWakD1cBL2uaNRVeHeb+mkBqPt61Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUe0qCRA9TVsSAnZWagAAEgcQAJa9zBDukIHIDLTjlpAS\nO7bqCZiacF8LQCjL/gtp77IdU35N5d+19opRPBDm1WAurr8VdD8Lr6fL046W\n8f1EeTMjlPcQ+3mTVON2Hh3SwUsHE+b8E/bNXbSWNkkPJ0xjALLBizWzZzpf\n89IOHP2xWT4QPj/ffnaw4TmJn6f2pLD4xdPfLqg5xYT9DQaCFKyrwyc+gKZq\nzKEg6GgYOTRmoWMxg17dyCtuxgHQ7HRA6xHkQl0EQOyCJEB36OegqNuV5BAS\ncsIHzbzGOiciWzu1eb1KnWQ7bO6V25Cjsrik4rTHwlnPzYwHUUK8xgc+q5am\nfjkZsgA7TGjBM9+vn8UpWmA9emelqrj0uNaheVk3Fn0nH+0T9EjO+QHqbE//\ne5qZnkaYfMj9SSRTSyyvi+4PS0+r9JubkM+3DuoZKHpcepkdBYf7aa+Kq6Gu\nT/CyOhrzUHhlOwAYbzDiGapg3Dc+Dv5qy2su+wNEy0yZs5iqEf/9nRjA4Gxa\nlFuPec8QdZ87A8sDJA3quZkD5vyKjGLtG2BfBjrdoIHA29WfXFX3gTuNIdx7\noq+eSsaVWd1tmFp05FRNFoS3q4FUUpPZy+t3nWsayRaOB6dYxwTqiMO9sfk1\n5UmkpubX2ZCDcMN3vp62GqNob6MtjeFRJgsxyaXiBJ7/17os8Yfjwckzjmn8\nTvZb\r\n=rbb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.5","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.5","@aofl/component-utils":"^3.5.0-beta.5"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.5_1582427434601_0.2715513587653555","host":"s3://npm-registry-packages"}},"3.5.0-beta.6":{"name":"@aofl/picture","version":"3.5.0-beta.6","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.6","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"006d60a0f5723995974e8903a182944e53cce2fd","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.6.tgz","fileCount":11,"integrity":"sha512-DVbKyWyODsbkHmzOntDRtwbgYBzTeo/SMW0hHqCxscd1y6nOsBsVvzRxLxeKkIRPP/eKZfgaOMgNNuFBP9Sb7g==","signatures":[{"sig":"MEYCIQCgT/o/3OZmq59kC7Ivqp6iyIxf329Iq2uJ6s2sLLhyjwIhAKN3boYBQet3V9NvVLub+k0rMiaJe7nBgJ9++v0AM+F8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUe75CRA9TVsSAnZWagAAeuIP/2VOT6nKXtzBEiV9IxMH\nCquV+oFt9py9wFN94ftZYruVApS9vFUHIaR+M8ylY09YJVPj37Sd1vuKLBNO\nOTLIRY+cUdVrYByvGBJNep6aLw54yNjdLCB7vm4+Ko5a1ELQUp+vDvmya5Rk\no6OWlC4ncO7vCVhtWOChXvA8cMwib3/rRWYCrbLKw8PgIlzUkybpqgEHvXCg\nNO3rDz0Fqrs/7HIYBTljXyARChQT+MMDbdXF+Pa1dMT+UQ4aMp4gSpNqbPbU\nCALlqacv7wlK2CopYQoJsm6mrZEbZLNSlMPOSiFYc9O7XkIe7V4KRMgFXNav\nkCrJ0r3+99oClvZ+PC6E2z4ODShInV/RSfcuWDoAwJ5whHCOYrueA0PIKNOm\nQsg9CyoMHgu4pxPBtIaUdp1ojg4fJ9QdEA2QwWLgLPYs4ceoIWZAiYGvED0Z\nGKGcQSQmaFWHQJFovd0pMtClFX8TnabWRe9xvdOU0ahV46xbvfLfsFDi6IXB\nvTGrU8SlW/SljOYzJjOIT5aOdsgP7sbp2TDqMhTYRrNCyx72k+DVhqlKAhsu\n575Bb6wlZTJeQgpg8SdQfNm+t7lDWpmeYesohEHO81dFx6FJmzGLFdju7CyL\npDjyfW4Th56DlmaF9oEJ5nJU0pH7yWWjml2t+la+jtjeFO3jt1tbeU1fWS/F\nRIL4\r\n=CEhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.6","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.6","@aofl/component-utils":"^3.5.0-beta.6"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.6_1582427897478_0.531345505135759","host":"s3://npm-registry-packages"}},"3.5.0-beta.7":{"name":"@aofl/picture","version":"3.5.0-beta.7","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.7","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"003e5ccefd05e934b84c38b605968e35913ed0d2","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.7.tgz","fileCount":11,"integrity":"sha512-+GQHFH4FMEDht460YkHbhqu/MG9+47ODoGp8JeCkkH4hS4SCzg1PR9w+IeAto36nDLCxm32dO6oIOud5hmjOsA==","signatures":[{"sig":"MEUCIElHxxzN7fvTmlJOaVfY911mAtnDnM0NQXGSOeP66nyYAiEAkloyyul3afK95uNo7WWbB37x/RFYyXqr4MKHLDbLGvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUgg5CRA9TVsSAnZWagAA4e4P/3M/ts71Slo3IOQg87ML\nbPHU5LUCgNVtCq8s9dW9afyMiYN979LjUr+wW2nQzy+B8uCKOhsJ7MJNnhIr\nq119cK5pgNEHmjiJIIoqGbzXMLCqJD3Zod63N7QrI68JJP3XMEJpPlubrVgt\n8VPNBEl3oCdLslDinI7OJZqssiPFVmEHW2RHqhjb3Xag9A3Oz6m/r6O5jJzy\nbWLgozkGtNo0XneekCoRsE3VXbi+qZsybPFEn3mwg82mOyXS0V8f3Os9AQ0W\nljae+Chf08hHYagjnNo+q4IkYce+do/DdqUlxQrmpSVxCrG4yn5R2lS0ZquU\nv8Kc8TNWVKP9noMFrWSxifQTT9EnKiWfFpI90Ebv3FfHk98onqLUaxJdxo2I\nsYLqUfCf51LtEr4ZLzQ1RViM+yA6Xj1lJ1fuUK9D09UmqGx/BDaoQbEnIMoe\nlp/Eb12cbuBrFV3lmxE7qiynFMVp54NmPiKGdB68gziv5vdWxhYseqVq2IFg\n98nh6z2Pyhz/tuubCvFwYIVZZbuJT7lYF4YotAqdRh5j/HihjaY85l8f6roR\nRgQGsZxOW2RDX4nRPlMfjQb+7B2fwBhIuua3pTJ81I0JAFBimP7JbsUqNIB2\nXe7au2hBKBKz9s+kPujO0SSDr91lDNe/xbHf4t9pEwaG+WHqQo0vgt9lGcIW\nXrAF\r\n=ehW1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.7","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.7","@aofl/component-utils":"^3.5.0-beta.7"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.7_1582434360864_0.13059837872175106","host":"s3://npm-registry-packages"}},"3.5.0-beta.8":{"name":"@aofl/picture","version":"3.5.0-beta.8","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.8","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"b293fe9fa071c493c2cc4697dcb6159a2818346f","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.8.tgz","fileCount":11,"integrity":"sha512-0+uruOFKqCaYtO4WW2FI2kT7IVqhPHng4u6HNQK6fZCedmc2eYdSvTHgqgSvHbB9oB5cHg6nNm+IOFwaQokfnw==","signatures":[{"sig":"MEUCIQCpSLImGPSUrX5pHIFaLWUoFX+2x+yDI7lSKDtKJKperAIgMbYrXBJr2y8P2L2/SDWM3kuUxfvel6amFVIFWWoumYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUgj5CRA9TVsSAnZWagAAoCwQAIfDvjBWxX6KV949Edsx\nTLYMru0xxdM3BEcO6k+OJuKDvBXwWPtRhrUTlzsNGN+xheDwUR5G0dJvGAwG\n77PxlZb9OOQ35Cd+AATMpsQmFhM3Y4rlMxDqfrh2Tw6pwjKHkpHQfnPb/xfP\nwlzt3ILDMNoXRMp4f3SGO/hnxZSaimJJfYwsvRimmSpX7U7PcE/+J+vnYJPY\novlIK4DjaEAV3nmNFhDnpbKgVugeX+W8+d+xRLnOQcbWqqkX0eYVdgpu3ePf\nULYf8KRx4H8UHMGj4T8Ygc3oSkJH6xaVQylwYznm342YtNyPFoKTx+IdO1xw\n+hbFQqmn6sMExCMIVbovyP5gcCfkOKrV8oDf/XyEc6KifH05848B36Fskzv1\ncrnp1wYAUoObYkMEySQ+SQiPDDFaEdPhdMRq71k0SqZnNeZ7rXH124PdJaXS\nOk2YQpVA13WcA9X8HmA2dVLLKPbEP/AXSJI40iO10YdVXdur2bBooO7VbH2v\na09dYGZyeizW1kzueZ9QEzcaXlhvKFsxgWHQRsW7GV0JKR3GP43wwjyFIYF2\nynct7tI0/Xf3rC4nuV/X4Wyx/f1sPK9GFShlBWyadE7ZFRnRZOjzsbIBvGpx\nLxm30EYPvSp0Ic9S/4W6WdEfUa7pboF4mJUODgOYRLrQmsiojn6o5bIP6JE7\n2jVq\r\n=7LpU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.8","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.8","@aofl/component-utils":"^3.5.0-beta.8"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.8_1582434553054_0.40695638387381283","host":"s3://npm-registry-packages"}},"3.5.0-beta.9":{"name":"@aofl/picture","version":"3.5.0-beta.9","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.9","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"7b501ea3ac7f053dd3574c4fa76142b81675beb1","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.9.tgz","fileCount":11,"integrity":"sha512-QcOLHnhnwS4HBZct7AtxOpEnrsyUzSCpfIKqLiokx4UsW+4u2yTbP51cEyMnaAU/WUaIJQW5wx3y2lZhfhn6/Q==","signatures":[{"sig":"MEUCIActZQx09KFCs0ZUqbVO/4cr8xp2iwGjyHdshE6Nk450AiEA5G+rpM16kqyqwNb5WZ95koxueRqJ5aM9dCLl1AqUDyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUg6xCRA9TVsSAnZWagAAlXEQAI8RJ98iaztasWUSpqBw\nfHMlMZTEE9Sy4YGUX+mjhFxLoUP1o+VmabK7BRinoP+IqW4/+fa5yBPXFtY2\n0UCaHg37TInGXOB1inM2+QWu0ngMN4lCmi4MghfJAL8uOd3YpmSIaApC/yk7\n4+qXPcgNXz/8Si+DTnEKOl6Dcq2aWRb2gpG1+5Lq+rOWz25LgASfwXlyibWW\nyuDZghCd/pQu5JXfSIStOj4I6WNvvrp9lf2oZWjvLACgn4T7v4+ddzHb6D+5\nIQxksUS4fUrvkG+qwiyAh2P40q2H25PO3xj2xqJW8KxEfJp3d1T3pVloFkkm\ngaCJYWrKQqL9t+dJi9KnSDLESagakINyGdzbrzos6ikl6+R26TzQytkT6v4s\nNxSMLr7IQOzyBIOra9yjAo8EJnTgN6VZblFIflDNxa6pyGEp3tPCETYiW8f2\nzdXzxJBeXHTbkprN2EUt8T3yI7PLh+g+6eDp6DnxHb2oub+tLRZzHrIacXRO\n2c3wvPwJZPTGUOboSWP5ktEkT8YTb2tqB0caPvkVbWoCapj7yt0FoUogSO3q\n1QkTIBnNmwxEbiUPU4Kd2Nd3ok/0+5I+M+hcRhZbHxbtlDW/naqyblFXU1ug\nH2KpYavc7KbzIzU2XE6tKI71VzLScj/Db5DT3GCD4aauoie4nsd7R/5p2tLK\nI8mh\r\n=rfeJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.9","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.9","@aofl/component-utils":"^3.5.0-beta.9"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.9_1582436017355_0.0466048686099747","host":"s3://npm-registry-packages"}},"3.5.0-beta.10":{"name":"@aofl/picture","version":"3.5.0-beta.10","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.10","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"c7568e1204c9e620827e0ffe6e2ceed9b10f9738","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.10.tgz","fileCount":11,"integrity":"sha512-qJGTGHcDN8oFQdT6SIOkfD9tMdpsGEilRmO30YXJD2EX57oLJO6xXvurdXw8s+vr+uJbT189rKMHhL9qt2Jkvg==","signatures":[{"sig":"MEUCIG15TqmsqGAZXdKFfjm1d6MSInWNw/nHjQipkmcr293IAiEAnYR7+geqb/lOh7h49TDpE7NZSlFqc1jihGBNj2sBOao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUhLECRA9TVsSAnZWagAA1mEP/2r9Vu2eEhvimS/16UFT\n6ptSUVFPxspDLEBUVNZaVAvd1Q6EEGXuF1I8GRDy74lpbe6jpKjlLMu3gp4r\nWnnSfhCs0VNs4MFbQA49xRzjxeJChWYFjGL5L6bp9g7Vi969k4dHa4PYC1nx\n1EkYAkWSs0JgyYCdMvedUMs9hDktbx5Q/8a6NISlYH5o26zjE2cGzoUX1MHW\nCvtOZ4bqALTM7TSDBMn/S0w8O5J2kO8XebARn1kR/BMJXbtBLZPjLqvX/s1c\nzz0WJYlCfu7Rwy/DJIvR5zx3NYjhVBQmD5FdqlZJ+6NC9Xc1zY/XhPhLfr42\n2hUslgFd7Bsb0Si3mSjDGPpYFku6q/x6RsEIVdcihpszHIkEOXrmVsD0pff7\nSk8FpNsf7cEZBsgv2u5PIjVWn9Nyj0fYOeqFxl5Aog1IiIfYB7klPas1dxdt\njVauF/Yu7SnrVNN0riF0hOsFOkDOEaiJD18r4FyxrJOM6HmBeD1NOvSOaSS4\niQHGtoilxaAdy6zwle0bNjfL0zQSsZAL4lwkU3bxx6TPZ7Fy2pUjeJvFicqf\n0l/QcxLtQQHs8LW7+jyVPhRagsm14mPWR/S8/LuZCeXLGhpl1kKZ0w0BtRSC\njkIAHJmS1RiLBrmNAXmlmCqNCxzXzLrsDuc9oAjdH/P5ctklt3QFISx2GN+L\nMTht\r\n=0vpW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.10","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.10","@aofl/component-utils":"^3.5.0-beta.10"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.10_1582437059901_0.5598414067306547","host":"s3://npm-registry-packages"}},"3.5.0-beta.11":{"name":"@aofl/picture","version":"3.5.0-beta.11","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.11","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"c7f386697f5214c6b42a6050cea41c95749566c7","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.11.tgz","fileCount":11,"integrity":"sha512-QE9zqtrewq3JZgwINoc0TwKGw/okQiwQJPOWdOeyzIBuxZsBoTha3hAyrMW73dpDFPljzCRHucZr2AtaRaIk0g==","signatures":[{"sig":"MEUCIQDwMnOsStIQPfN4Is4diiMEePkMIDqfOn4pde1tl09XfgIgFMXnpIG9LVK8WgOUOD1aGWm+iS8gZib1GpO6mF28heg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUivHCRA9TVsSAnZWagAAvdwQAJYI+StjXdN2fL/DgcHa\n9IZo78tibZY8kWlQS2A24zisR9EdBJWVk9W3tP2owmFIHBagoZXFThAFdad7\nr4BbkouTKHYKKlrS0LDAX4sw+RkEVOqgSxZYnO01MKSUeItD9K3TZn+e1f13\neT+yg0Dtec0CT+a3KM8gCNw8Cm/LVBkiz4R46Ok9ZJM0fecbwQFSXc381rVo\nUHinyr03PPXlZFP6IS+O8IOIEqvjrkdCAPHs6UXUQ4QUCtbKD3WwmsQYaOdR\n0ajKOn+huVlf1xJlYoQR0gecsv9irQ+s3O0l+W24HhvPLprXQfzTcW5uk6LC\nz+O/ASUjAIfPnIbSoeOKKPDnPoLqG/KMzm5Jxb6CzjIYCAjGnVPOeK+oPnBh\nC07N5oDQLtRNkTkCP2F1KhXiPnQPhkGjEB5Ry9KBFQzXLefJljyjIOQaWAyU\nJaRWJv1OEXLtr1XLoZAz/LtFpSWAPq91HvOUA2nzh5+omQ+ik1MloUSh/oMJ\nTnkxyjVLYdSecOO6xegOqlwVVddwmM6uETTa8tz3OIt+W+Km2U6yKxmr1Jzu\nZGBVE3k0pOCgnXPF//X+5iBl+q5PwAa6cC6TmDNCC5VWwQLTaSgcrCucgcPx\n6EUs1Fsy/JiZM3JMtcWbC7Vx5JoOPEPshzpO0jdCR5SWRV5s5oNi0iKlwLck\nKsNO\r\n=VUo6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.11","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.11","@aofl/component-utils":"^3.5.0-beta.11"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.11_1582443462814_0.9543735521276564","host":"s3://npm-registry-packages"}},"3.5.0-beta.12":{"name":"@aofl/picture","version":"3.5.0-beta.12","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.12","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"d64ab7879ae8d259566b010e2a812afbc5b6425a","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.12.tgz","fileCount":11,"integrity":"sha512-Drk9zQTr+6z+gERVahUz0glmSe3L7nwibtTr6rMDsVEjPHqfFBk54VAoi7uDsHk6KB6xnbRWtQniApnlyj3xeQ==","signatures":[{"sig":"MEYCIQDDRq8qv4wdyATmliuEMFeyVI9X9PovHGTiFX1iV0bJmAIhAK1z4M1HjuRuWgabICxJZJ0/5x9fy5uhOZucevu5Dolh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUj84CRA9TVsSAnZWagAA6CgP/28eR6URiQhRhZSDh4DL\n8HczcCS7MWOtZtbXlvmJClz2cMdmCG6SrPG5U/fVTzCR+PKK5wvbPUdeeMxs\n+Ug6lQIz0bnIuOlSq5NRCkw1xwMQiyBgrBEnSOeUWiV9Hks2d9XYWAxFGKAm\nYUB/K9a7CF1VUlniCfQHxr/uC+2Vrwh64t2cM7md+2B4kiAyaxIzFi+VjbAb\npXn8Fw+J1hW1RqdhcTU3vhwl1b8L9DRca6udHJOIxBh38LFTIqx9mwNit2QR\nOS3hJfChR7tj9lROkOnbnPAtY5AUbteCSNZwAkT7q13NG3raeKP5OswFFd29\nn+i5CyQ3WEF7QCmnmErV31KoAvI60vfYroP5Rb1C6KKhJokBhNiw0881mvLd\nEFX2vD1K0x2boOYOK/HTb5hEGDenBW4fBUFlSrSaaRfYrnG7SKOT/BGsukHX\nLtf3xYJ2COrwbFTbre7OmG+YNrIAbanzls153OQdIeyUEtta7ioZz+ryQnx0\n4pnPGagU9qnpjO6n5wSOQ5rEHjk3Fb9V7w+/d8X0pazWBbjIneEuXMZ7mUaf\nL8LOrfG0HdTtvCwgRUzwwF1VuHCeIe9q8PI8bARHOuOKk1qjWEfZ8X3My0qp\n0UOrRaY8IwjQBpA3KnH3jLkFIStLFBgbZM4S956PNreIqZOqLbCqLWC8gOCK\nQOQx\r\n=fLGF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.12","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.12","@aofl/component-utils":"^3.5.0-beta.12"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.12_1582448439897_0.29207412470945804","host":"s3://npm-registry-packages"}},"3.5.0-beta.13":{"name":"@aofl/picture","version":"3.5.0-beta.13","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.13","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"debac9adf4b95f3b4823673989141b8ecc71b7b1","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.13.tgz","fileCount":11,"integrity":"sha512-CSxYMHykc0451cM3tv4giudpnJR7dDPu9Z7Ij6CfvNMs9KFpD+8t5CLQ/O9yeAP6D2b3Na0YALLh7CixSUD7/Q==","signatures":[{"sig":"MEUCIQDhLuN+TWNEuuQySQ68OrO++dln0xcxSQj7ZD9IzV3rPQIge2jniduDwmTiwdv7/vrT1kdTNI5sKGNweBzJUngrI/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUj+rCRA9TVsSAnZWagAAHZ4P/AzSR9pO2WvWZDbYfS7z\nyPuc9DX0qab9ysPRLWW/nyPDFdeLFjvaCsFNpcztBNozlYeKp+fRSv0Z0AyL\nbIA7UIq86Nm57t9FXB5VAjJ68In87UGihxzdi5myXYECEn/uR5+KOvEYKKNQ\nRMFuGspf1ri/8xmU1lsSY3b+Ty3shMLS9N/HGKcJKQM4nu6t8rtSduoVMHj1\n+H48rHd3SqiwaFTwnOurn0mjy906C1GTIfgXa/I/eodi+eeUSmYSgb5UEub+\n0AIWq/Vo1LXdQvsYa8Bv67omFNZjs9O3fikSeJiyr6bpgW1Hf33cICc2dq9r\nvoGF8Yz7jPnZ3aQIEsBPthO1OB1nncZrX8Swb9Fsoh6zwbYO+55p2Y1HdSNd\nmYK/lTuijLNXLLma8ldo8Z2BCqkBjWBX7GoWVVma13D+owWm9PYvVQ8iWakU\nrf7rk4O4EIMC9589fmYJhJ8ESTsM1T/Lw8abd4MrJeDPB9UuCuDYod/1fAq8\nOjz8KAKocC9J/qxjGOHhWQi1S0E2Hy7nD8A1OOoH3aECi8ec9KqpIo1LTlJU\nauneER5sgxpqir4b+jQFcwdZZFsvDTNFUZqtV7LEiw5JyU0mSnegm1MHniuJ\nIX/ZgWycEp/pEnUrld+5Aa9UxSFiR3HY3Ihq2unlt4M/v97SLWkDBx3nPwKF\n6Vqz\r\n=C57T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.13","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.13","@aofl/component-utils":"^3.5.0-beta.13"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.13_1582448555568_0.6097201128183909","host":"s3://npm-registry-packages"}},"3.5.0-beta.14":{"name":"@aofl/picture","version":"3.5.0-beta.14","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.14","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"7345da6bbd99b77c1787eedf093469721a2ef4de","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.14.tgz","fileCount":11,"integrity":"sha512-xuIXrh2vLel4n6BRRHdm6ENAMJtzmn86dBkuqsmfzqFC65k8GbcWUB3eUv21Mo7Vo6IbJK4qeXylNVJHzxnxyQ==","signatures":[{"sig":"MEUCIHFzrP1jhlsz75f0y7EQqGxuVcQAk6pZ7NUYYW1Mo2cqAiEAspvMLQFPt5WvGCQjx3vnMP/H9KzNTuIoHEo7sCRRGGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUk1HCRA9TVsSAnZWagAAEsgP/2V+LNhYKwVGy5xs2RPZ\nDWPJo4HYxSodAVL/a5TRTMpFMj/J2o6rg6r1KlCM7pvKEOQLRq9rJB2VGyhp\nqJwro6EdhEaQs8D8SkRBhKYlP+1y8ZT/uW9Cfu1VtnGEzeL1Sa5mL5NXtTme\nKy14fxkn+Ec6KLiMJgtLMvuyLzwUAWlYumJ8AEUHnrL65mjm3U7pP5cJgMoX\n7CzE0hefocXjXavEKVrWX4zv+dQxZBhtY9y2R5ImNcQjfkdgH/vWN+DnNYtq\n2Pb+OYLqMmF36EOew5PuWMooqN2zYAFEjw/UmE31NN45isjDDgZobu7QcA08\n9Itfs8iHwJ1qWWYK/Sr8s3PD2Ow8QNN9UBM5OILdlpAddfYgZXTNZtwn1zAP\n1rruAGlFQINBWerdMG0mKKMOXNxJOb80MqTZ1wHTtLItOsRgvljJE+XFP/jX\nS0d2rVUcNyYsTKysr9d3q1r0JEtYpBrq88X0xPgtSTVts8AlJ3rt+0h+xsD0\nYJ4++dT3hHvSTU80FwgOhQm6BHA8eJ5J7nhGRaFc1AjqXOftX5eRXuNNnA0J\ny/dXdU8Q/s+2DXyW1OLpynBLi7MW9UaZYg8bbhmr7oYNl0rt1h9IEZarXhWr\nJfG2B5vxga9hWrn59GfFOpRaFjF1E4lbFMOSXB3/hHFL9Ob0wn8NfiRFTJB4\n0bN4\r\n=KQkb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.14","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.14","@aofl/component-utils":"^3.5.0-beta.14"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.14_1582452039000_0.08367554063490501","host":"s3://npm-registry-packages"}},"3.5.0-beta.15":{"name":"@aofl/picture","version":"3.5.0-beta.15","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.15","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"40eb3f996aa6c40ac35e6050b1e38fd960646109","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.15.tgz","fileCount":11,"integrity":"sha512-ukqWzvy80TZp7k3BRSj1o/omr245CsPY2x90pYBzmdOrJO4wEAGNlLwCXtqECPpDU8jWtyhs+KUZluyz3JF8wQ==","signatures":[{"sig":"MEQCIF+wGZrGTWpWPAjSaA19bu1uIA/90gJspfxjEQvffO3xAiBYRIk6/DYeJ6Y5ZOUsUfMiSSyn83H1Z4z0A4odL4Tmyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUmbbCRA9TVsSAnZWagAAxvoQAID12xUScJOVRdJ8ZgC8\n7AbRrUnL3mqbVvea7OqNVWw+uUv2t7jLctoY16HWZBUAagA2WXdw0vL3AQNc\nmTPocj9yZv3v6CLV2kDEa9T790wuOFDOa+BaeGMZmQVcILsL+eFsrSvYDkOO\n4dsaPkSlvvoH7l/mM4gcrn8mrxiyWkPAQwGxaOzsNtBkp4O9wPkcPIobwtoC\nQyBzxZ6KYokb6yIdsCZoapEGxVBvVPiKXZakzq3Jna7fvQKJsuPGYY5S9Q49\nKRPme1yY1fdiKo5jhIx2V5ihiC0WxHbIcdt4W8qZZb2h6hkzldrJTF0ru8+s\nWWv5PZgaUPL6HyCbS3DfNwbSCAGU+dCdZfuhehxio0jmOdg4xv95vFTjw4CH\nyLvwthgRcdLHIWIHTiF9utnNtRSvBltiIkH0Ly5H0cBnsrd3itW/DhS4+CzR\nBu0VvYtvaiDDza34nZZk1AGpeT5cuZRuk9wCLj/kDBy7oq57+jAa96zRHv4P\nO/9//gkgxFXTK+QaGksmnoBLcEhYGsgzAMwN9MlRpxcWDHo20tlzqTRlx0Az\nLKPDo+4I+G49qsr6ERMQfdgF/sWM1xjhTyr9LltI0MdW6CPtu+HxbYiOEzIx\nliRBaYQWghwFjJwNQcUicbDeSwQzXvdecxLQ7DStjnCfM7xNhxhHgSXrJdc4\nBzxe\r\n=963t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.15","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.15","@aofl/component-utils":"^3.5.0-beta.15"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.15_1582458587051_0.9330154626378726","host":"s3://npm-registry-packages"}},"3.5.0-beta.16":{"name":"@aofl/picture","version":"3.5.0-beta.16","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.16","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"5b69db529ddd5b4bb90e8f691729a6bcd07c1c56","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.16.tgz","fileCount":11,"integrity":"sha512-hWOaCECyj5RyASd2p/1+MneoXpKxExYI9RD3ZUN/ZqUilcwE97TXge77C+ve25pJKLNVTXkmlWHID/EHZSKwZA==","signatures":[{"sig":"MEMCH28Bm/5PXy+fDl3EmJE4H0PfjEIYkp/NNuv6n10S/fQCICrbCgwt0DlENHDkic02qKcuA4pqHVECEfA+K8z7G9aL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUmkcCRA9TVsSAnZWagAAv7EP/joDDiQ6kVtqKty2JjcM\n4d0CBgtekP/1bzvsjD5bChCWkyySWd/liI330gx5zGH+hhI+L/0+Ff0atl3Z\nyCYs1FiSReij3czNntTbi4WoYT6UF1/7zeUeI4F4SqETAGEieE+WyDhK+ylG\n/1mL9NDZV2RfxjcSSOGZyQVhdQOruNEsKg7sM6ZW2QhArw5a/eIZkLEQDjkW\nJmCll+eK+bw5SgmDxZi/MADVCDQ+X9+jzFUPrUqdeX0BP2YuYlaEesKIrDTE\ngP0Vl7lwT4aFMf6nltZve1MzK6G07iIFaY4xmtxCinJPk5CG1YQp1FaEY5EG\niXkUKaocGhEjhWIxh0sDuniNJK7uFcXhYAcehkqbqx/1cb7TQAm3u1b3gzan\nJngrobjHrnY6FaSqcUKjfvSqUKisg0kLecFnEL262OiN3AAKHbeDyAPtCzXg\nclsmSTm/UlfPW2AdbQe1Gz90q2EaJtByfAqTs24TTwcUXu1GRaV6yjLCzPt9\nzJ9WnRi3XAZk0pt2Gb969d9QAFrP6ml7GEff6BTzGljo+bocntFmo+HaFDSq\njw14Ul8DWhoM2AbjTXXAMh4PhQ7EvMAm++aQAuH7zcHrDewpqoytgfG7nN2+\nGQNpxYSO8ZegEbSw0jra/ITHbSsr+Ft0llhGlAhHh+LODUhbNJhLaBvKGTQm\nautq\r\n=7tOB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.16","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.16","@aofl/component-utils":"^3.5.0-beta.16"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.16_1582459164085_0.7682598535678862","host":"s3://npm-registry-packages"}},"3.5.0-beta.17":{"name":"@aofl/picture","version":"3.5.0-beta.17","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.17","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"9267176515824be04282021c261458776859cd05","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.17.tgz","fileCount":11,"integrity":"sha512-GOgvQ7PBr9Wd9D6FaAmJ9JUqAIksNRDiC5vStpvK3Ys0Mk/6OjSRM1/a2BHUZPiuhhrLOm2b90f5mOBE3GuOiw==","signatures":[{"sig":"MEUCIHBoDYc6SlqKqoVeCTf/OmRs46fEpyJ9uMLEfor3M9A3AiEAsQN6RzLleRv9Gq981Ulx7n/IEdA5j5LsmXBerRddgG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUmzDCRA9TVsSAnZWagAATjUP/0Exjlg+H4wT0YHyEUpb\nnpQZ8sPJIsOFtQSQYULTO0fh8YzNoglax391VfAYp0DKT5ZwFEHCkofib5Eh\nMuXas8t01UYvDMyeH7gwTKACXuBfe5PH+UfV9yMPKaTA2Osi52nqu7TmMh7a\nEIOXMmchsSdpa3Xs09K4lkAXAZ5U4Aqu0aDs6JJlLCnNxopBkONVrR2i5S2Y\nDB3HuaCiqS29UtLzmBO91/+OZySQg9j/K/WwKLIjjmKn/EqnW5IBFn7sbQqg\nQYRrjJn6qhpmJjdoi4jjkXAKHAITJlv4VQ1aH4hV59g1/8YUEA8iesR9XWRV\nbFNbjz/vXIg4fNxEpBd/uPi+t4+1nPtJEefYzfmMmfbGcehlnw2ZzxGTOOYp\ncuFat/9dU9NgTvxMvmsjo8pT5EywQ2p5PrOuQyP/rKBkK2wbdXeWAO8vQSq1\nOIqx+c2NkKKeXDRo4uoWBeZhAhdij1VP8/zgylZApx9hjtVSzB64dSByJHW4\nRbT5uH9N4HCBkLCHcL5ybYPoL42NWIj29w6ShcyiEdxpbus+dVNNP5W8/zhy\nuPSdy28SHcKrYGyHYrje6CBua1uv7/r/ukR9jANUKuzIYj1yt9ghFfjQuytU\nvoqQaP1wnPxJ3pUC1maShz4cYap5YncB7gxcfdD8roLb0NVPuiBfacejsJ7D\n+T3D\r\n=T1sl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.17","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.17","@aofl/component-utils":"^3.5.0-beta.17"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.17_1582460099207_0.4219331375769051","host":"s3://npm-registry-packages"}},"3.5.0-beta.18":{"name":"@aofl/picture","version":"3.5.0-beta.18","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.18","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"c31f98a4ec87b410813ee751cb9d27221f517a30","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.18.tgz","fileCount":11,"integrity":"sha512-TGGUdKf1vL4zi2yOa/iEITb1Ad7TOE/4MOJiMMSV7ZAob+YQ28d0wH1sO3n6V+CjSkgXxEcR8P2q1gMWt2ADBw==","signatures":[{"sig":"MEQCIA2AJlY4zaTw5yKAjCwxyS77djZuYUGdfgvc2Ai8laZzAiAjH84xcSFb+/AcyG6nQKiTZ0ktV5ZsF1V9UDv78E/bIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVJvFCRA9TVsSAnZWagAAVQQQAKPg6fd64BaweqzxQaIb\nUaiq7XqA++MIIktS7ppd/AUTjX60ZZGXuW2eMxBkhom+W/5TdCGjXPwt56fU\nsza5BvQrfZvkzGuIEURajUWwICHFGOx2Ixz7O3nQ2/8vk7cyyDUHIjlc2Kpz\nyZq926iBjlgDUPUp7ApM2YAxv1trm20GeqR/p1QMQsTXa2sNGo73+hXFkG2l\njTuDM1VfuhvSZOiGZxWPSv606GjO7bRbJOLcWsqroXpsP9RXQDEwJYon6p0+\nPjkfOKHsylddsz0LbuGCtMiHBv8xKN2Fyj+WrqKkfBkMEi+hEOpoXZtMBoJl\naUek6Z4rekI0lr/1MgP1OzvAfeqNiYuE+dBhoMNn5LbzSnNNzCsUwMvhzirY\nbuHd57HOMm1q76WOPrtn6/uPp9LRXYSPY4/jA1Wxx8IzfiAmPYhmHKK7qyqU\n0SAiQdumsNRJGdyrlsKLfSwsj0H7EurcSGgb+fsrY4CMtbs9Bl8cl6nQutp3\nzayJjlhR5LWkXN7aoUGzRBci58X7u3pDC32mjiZFXAaJie/0JQigMge/H2ZI\nh+cpJ+eBDSFDbciYrqo/JrxTWGBsaSKkOuOHmcPRDXSsPew6HQmn1kL0c6UB\nUsqGohnemhMwm3WcSzn1B+tpRh9SkaQys9nWT+Fo1MQ+gG5j03eZQMHMUV++\n32fo\r\n=5KWn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.18","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.18","@aofl/component-utils":"^3.5.0-beta.18"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.18_1582603204758_0.5182181948054698","host":"s3://npm-registry-packages"}},"3.5.0-beta.19":{"name":"@aofl/picture","version":"3.5.0-beta.19","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.19","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"04b0c7dbcfd2937ddedc931dfe8a39a25862df65","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.19.tgz","fileCount":11,"integrity":"sha512-Vu2dOBBLGwBBJQFqkxe1lq/WLBSuYJnV4PvvVggbkOhKojhnDiBMs1micDebMxuJIeC+k1MOBxOsuuwvJcPp4A==","signatures":[{"sig":"MEYCIQCKQZcHOvSZctrXJSDC7FcJVmWUBPGi3bhNm+s23EWn2QIhALuFrcTSwsVnRyhW4zv392jGknbEm+nBeqPhEu2u1t1c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVbRyCRA9TVsSAnZWagAAjO0P/AyQeSaFRu8yVPwRMzKd\nX5kTmY4uVP7VbLL16tYKmmZu5Au4KeC4bDq/okg+CUucQjYXv682fGm/G9DC\ntYX47VMwa6HLcmh2sGzNpQ0CRmc1U/bTHUJU+ErPWQ6d3Urm3liYRkTjUA67\n/QhCXQrjX24pMesHbcVJS288tTKf+B6DX49zsBCPMqjRpa7MlY3Rpc+ggmMQ\nF6GaddkjXlDsYKC/n27fhrcJufxHNB0oZCOVyxj4ydhyuxShNRacZxNvW+ta\n5JiV/NZOJBQcTwE95Hz5B+WIW8gpxjGDsVqWYG7JloJmEhV+JCH9JkFf5zGj\nMWb/lVMP3EIF8EIFhV4jDnz41PENpfMlSh4M9DJvvZEzZmFoumeJGdrGmEK+\nnxZqfypxUkSsue9cssNviBR5RV317umw/kklqa3KFhu1Gnh3kb5WyxJNHGFE\ns47njrcJvAXe3VOjkeQW9Ch5O7VZ0NCEvzSwVSqlR39p0yIsn8PZjfbRcK8V\nZXorzWbIPHQOxbTFfgwKzkntj1YhyLydZ9cjdglG2stn/ojH9/0KuRKkkxVw\nQ75XgtiRTAlMf2rMOVGk3dJHs77tZ8mCYBouUDGPjZGZD5yDF7SDnspH+P2b\nbCQysHPOXzb1cWlPPmrGcxC+4POd6/w96jO7zwnnacP+f5DZaqKR1tVbbj0P\nPKaK\r\n=4Tln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.19","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.19","@aofl/component-utils":"^3.5.0-beta.19"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.19_1582675058493_0.8826125177682647","host":"s3://npm-registry-packages"}},"3.5.0-beta.20":{"name":"@aofl/picture","version":"3.5.0-beta.20","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.20","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"c1a056146dab9075d866af2addca9c4160b3e86a","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.20.tgz","fileCount":11,"integrity":"sha512-ig/38saxmtG50xGCBF2+AVqeiejR+wWQBzroKDIGPyhwsq84pVIMjth+kJVVhbUf5BE+p8itPdmgTCsXgJfvLA==","signatures":[{"sig":"MEUCIQCSj/ASEm2hisK4P0F+TH/TGwuaS3k0coFRynoGcmALIgIgGVf0Nak2LjY8DDatcCRKK53/ui8SIvpYXxMZVB0m3yE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXZVhCRA9TVsSAnZWagAAT40QAJP665vzAgAFBDqO5U5i\nynRW6vPxuNmEiWSF1owtjx5mcTj+gHEEWuX/WiO/CMrlczeAa+8tqtMxtvxD\n7PcGDx9uLGqlEXc5st31chfPgSFhWUcOV+s3LfrVO4FbNcTbUI1abNo1tEu5\nEsoRZ/ZxdLGJYdzn4V/Bqj4zuu9/hnOF50MpR4dxzREUzGH1ub6hSn8E1FCC\n+ERi65JK0MlLSu13r7IaPrF6P9f384htnCeO56HUnDz2pSAdSKRNtEhuwIn8\nob8GyhHhXF+uo+m+bKh/eT4Op0PgY1rpErU97mbAodtVZy8WjYWo60K4L0jA\n6rQj1imBXE2szZyGPVTm37beQGQOSnpZLRDiGMWeAIyuqEsFimJ3+ol6Ej/D\nsTbWVFZhn4vSMuIEjK9iFReMQacrYOfT1VyrC/hPRTLzB5UXftnsEUwYxuWz\n6xFO+vzujZZ2uJE+SfCh/JOfc3yJFPI8uIC2cQb960BinLqOxIzQRWuXME7C\nvCZ1CeCx+sub8IeUHut5AJNvS0fIBDH5x5F9RmXV+BWVPP9DrBYAFXIIM1+q\nLo1tRbGPQJw8THQ2KHY4khFtzgrCHpwps99YCKVjmbKKwn3JqnNG3RCb4Bum\nSHeiVZl858YCrpNTHzRcXFthsKouU92JPCi39cxQ3sXKkXGTJMjWRsYiFMlE\nmejl\r\n=JFCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.20","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.20","@aofl/component-utils":"^3.5.0-beta.20"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.20_1583191392828_0.09358614116776032","host":"s3://npm-registry-packages"}},"3.5.0-beta.21":{"name":"@aofl/picture","version":"3.5.0-beta.21","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.21","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"d0d0bf9493668613f7f2ebf93b0aa14a312c92f8","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.21.tgz","fileCount":11,"integrity":"sha512-QfeTa1uYWiBtR02CrO8LueDGiYcKPrjUnlF1YoGTg8HO47/mGRKtzEn9Z333smrxVTSM2dlR15WObF5R6JpMdw==","signatures":[{"sig":"MEYCIQCLDpZWJ2YwwiTWrb/tF66CFY9qb+FVXigPE8NAvrqdfAIhALxInbPMy9AkyFde/jlzkO3m9+3UBnbsLr6gYzmQ+GCf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXZZjCRA9TVsSAnZWagAAlDwP/1m7l44t+MnD84rswZ2x\nCSfsRPYT+87T2bHPt2uFhdXm+u1K9Kr43a3zJiEVjjPAE5McTDzogsR8vyP0\nbvcaxzHUhofI6Ap3MIzZkcdPEU9Eb6Gk+0j4cx70nYwyzy8sHqEpdOrX6bQK\nfW6rVxRj1xkpqhPReeTleM+Edl6iIaEX0Iba+aLcW6961+Yd7uiUsSs/v8t7\nnL+9z+AlEAHbCQclbj5C9egq80leRlyvXU67XjFvHMlIK6jjvxT9AsbI+5RT\nj4xyif7Foalgi1Wy2FDXQvA6zqxoPLydt2L3GTIciLRnvipILWCpkp6/didU\nGiHAklwCrQfdKQCDdiKwl/j3Ebf/H7wvXYe5lIq/Vi+qj9WBAABZIcd48XcK\nkejirL9hKPPAQNI7FU9HOndQq2bPnFtG/cn5JmIXprBrJEVRBTaTe/oqo/2f\nhBuXVqMYqAQejL1OOMEka0W3mhBKcJA4TuB4ny+Y8G5AA08AFsEA71hF3oU3\nq+TL6kgxJxWu3EHtL6d+LsrgNKBxizP8MNIOho54XZajNh8GTiFyn2z1oqe+\nFjSgfCUvHTUlIwosB1y7Xjep1UX6A5f0SF741NDfg6N0QK2i2LwyXK8MQgen\nkipoc6eOrp7g/KbVFG8OMINy1JHmeCvPDEM668PGNuX7NKCA1fizkMiNuwXu\nC8gi\r\n=skEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.21","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.21","@aofl/component-utils":"^3.5.0-beta.21"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.21_1583191651385_0.03483435163728266","host":"s3://npm-registry-packages"}},"3.5.0-beta.22":{"name":"@aofl/picture","version":"3.5.0-beta.22","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0-beta.22","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"54c34c6301f295b670e45901195262e499735fbe","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0-beta.22.tgz","fileCount":11,"integrity":"sha512-TEg3XX+3tgEMmvUgZemsO/hkzDyOwEAgIpxzPL5pRwKiVLm3nZ4yXwTLGebe2wtZaEePnLT/pTTG9eYQ0tjsxg==","signatures":[{"sig":"MEUCIHmI5+oJHLuU6lVS4oA4QooE6D/oLrIqMo4xrKLbtYcCAiEAzRBxpj6AnSdsqPKaAqAikaWvHZ4ZtOa0TxMVkyO6ytc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXZnzCRA9TVsSAnZWagAABpwQAITU65LqPAGpDhFeWED/\nYz2OaJj3iEu3CgAxQQK3MTDk3oXu86a6c3tddjPP4yu+WEjMISji1cKMpWJH\n3AhSE+qUc/6tSViKz9GXMJ7334yUmggnGMnCfSgPIbHHDXExbfvzGOfpbNpe\nLvqWrg69mTv0klfTY5Qo5NrZRv8zXVM9PTV9A4Xj8cDaHmaA+Ao6RIdNh4Un\nya4ueGiPV8rwSWWtNdPfGta5pkSUVbclLB/ML6mRhDL4IJ3Aj2XC6vGUM3sd\nAIRfnl9DlqTm4G6asVwhI6gxIDGhVjHDHtUf2p6cv+1iKuqe9Or6JTBHQvk/\nql8xEBg+hFdxBrijebTMAI/Rq91CGH5jbiXoMWNWRT6VO0rFNs5oEr4+bioa\nrCeSpzWwnbn+Bagn++f+z825Vqb14XTGcTczszRplXwHOPffUJ602V0YVeq3\nXyUWH9DBrZ6ucsTGXwR+jnwXbnWo/hR2qwtIu3nehhFYz5e+3rSt4bTDcWad\nNtP9+2xXSzKb15bNbw252Q04MvHO/28zG0c0PhAs8jKEJzsLu+3cIu/tx8z2\nFBk6JMYe6H3dNKujQDDNKR1pvvyr5piDcxmVlyGXlkyZ0E0DSWV4vp7qVDQC\nz1CVgXrq5hmrd3Z4u52BJaM+guVH24JcjzgeH8DphU9LBgIqvc6uFEVZ8dmG\n0N+/\r\n=lSbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0-beta.22","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0-beta.22","@aofl/component-utils":"^3.5.0-beta.22"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0-beta.22_1583192563380_0.3617943295441608","host":"s3://npm-registry-packages"}},"3.5.0":{"name":"@aofl/picture","version":"3.5.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.5.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"55c0ef5434d2e780f8ddf255db77a8426e08ba13","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.5.0.tgz","fileCount":11,"integrity":"sha512-kaBnu51/6A6w/TkvOHah46IFWPnEnRmSBiWwb3mPBWMKB41TeeIOQnYgQjjw8p3SXWZ56BI1uG3C8EVzqX85AA==","signatures":[{"sig":"MEUCIQDjwxK8y2Rrl973ybDhyi6qO4IGOsZq7pWVo1IigWpIwwIgBRiSFVmaN2kRFs8iBLIOrIXD8Vjii+RnTSbrwP+I1gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXZ7ZCRA9TVsSAnZWagAA4McP/joEkGIgi6LTWwpAdXag\n+mk8xH1AxVgEgDkhmJ2o2ChExUvTEON50oWZiOVgYg3bIepwLzd9KmPmXg+b\ny7kyEkl932vF4jPbqRG/X/+zjZE2BArepGRcB0fKPCmC3BBIxrWl5gfJQOcw\nAg3T6N27EUaGL+hmZYVfLfdhz1pD1HtWFKIglVxZAMekXlyLHPDXEZ7o5pAZ\nferfsBViRab43t2wp8TESRnQ90dcbvb4twqjI0T33ze6p4LLNyu2rBvM+vkg\nIrqc8yOImLdyRikiTu25ldjNwZcCif4q1+KVrp919vHFIpU4aZvOFFMjX8dx\n/HDMzqcVw7tW+ZCwhh6i2Vwp8aSHd1lO1czCTJZxR+YilfcHSN98gmM6iUQj\ne2OJIyx6/TzIUAhfBumIzdSrOT0ML/cA/wgFlsh2lFQnhdSr2ZO+3l4e+OHF\nfldjnFOZcp/eqURmVSINTOFYAHm63WDCel2g0QvuGLvQ5YvrMLnrEltcSe9c\nRycAvhdKSnYdVpBk8OMSj2yH9vMfhoMlURBkojSblQq6zfBG9q5959odYfhW\nxLDylw/W3zVHMd5aHgpCjCjfQ7KsKSZ9QBa17+bZ0xbXRuG0OFOLzai22MjU\ncJ1YBKpZFdRaVq8ZzRIPrwQf5e2v8nbZUublRh4UE1+WdkPan0Thxu5XmFzx\nQSmd\r\n=T3nZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0","@aofl/component-utils":"^3.5.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.5.0_1583193816630_0.6849341929302728","host":"s3://npm-registry-packages"}},"3.7.0-alpha.0":{"name":"@aofl/picture","version":"3.7.0-alpha.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.7.0-alpha.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"5ee201bc4bf5fb16f591030c62a93994ae3364f1","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.7.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-JCTgA8hi5kL3veov6E/kRu19Q7FlVwQVN2C14XRAb4U4W2y6+Hob4hzAMHw+a+7sbSGD2jtyVgcyIXlrM+hepg==","signatures":[{"sig":"MEUCIDaHHLHQxFDIq8yhGv/Rd1CQNeUyvFceWa86Lwf1sreXAiEAjhWScbxgui4xab/vFCKmadkazjC4pWPmLUsdYOIipd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZreACRA9TVsSAnZWagAAY0sP/A+/E7nZnkGroU7TQK81\nYiX5D1PYwVUR/MXO2MxyQEeH3lQVCidLYL1mrG2rwlY9W7uNS7xaQbK6jw1A\npznz4W/pjOKKuR97LMbrEPfh2SiMR0yg+ayD/m73rfO47gLgqHy9XJtqAxAy\nCAsIjQzhCnE6nyJXAgMRlMa0ZZkGQyEzQKp7XZ8Cy3Nm0MyRuMCrId77IFKd\nPo6bPewMjYjhaF+nLfzseh8zWf/CY52g8M2axY64jyPBfIIaHu8sbHhToT5Q\nFfUCia4SiCE+irCGCYcEa6/gg0Aa00fY3p8EbCKzjpXc69XU0zJRcAEN1PqP\njchkGhXWCg0dsNzyhMsGsdmiVTH3wIHwjm6L6kAUaVKco3YZZdvO7udnsnFb\nu3nXA2oXYZckscZXFy0AjrkobyTolt/YkqssFO6Jp34JwVJInhK0VGPnM8jK\n90EuRDVZ92AkzxguiU9UVO2HBUw7vQ2cDAWe16hnKHYdb0ChhGMR0wVwFYsA\nhG87acwrvTu+Az4PUL5ZVDqn3KqcCslYde55FFRYoMA+sJf68TRAuYGFmoov\nvqEOV/oxjgJArAs+aMQdb5i+IPte6IdKHeuw79+VrmSns6mmSF2aSRo2DhPs\nRBTPbhtPhvBehvfu8uCGDDqRvwBFk+Yaw3mrjRdDL2l/p1O4hP9AbFzpvZa0\nCcbm\r\n=aJJ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.5.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.5.0","@aofl/component-utils":"^3.5.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.7.0-alpha.0_1583789952370_0.0831910047506712","host":"s3://npm-registry-packages"}},"3.6.1":{"name":"@aofl/picture","version":"3.6.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.6.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"11992888e365c0f96af17904f0f0e3f351043628","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.6.1.tgz","fileCount":11,"integrity":"sha512-q+ChNpri3+GeJ1a1fr12u6NgV/9V4lFlcNh17hEzw/9mFObGJeAhveH4NTuBZLkiSgG/RSqfOQ4aDcejYlRnbA==","signatures":[{"sig":"MEUCICgJ9sLBskjn5jJVHo9ReXQjxhsVXozIbEvpHegmnZpSAiEAnvD5J9cO2xsiwdGiXxgidpMtuuBen+FyQ7XTMm6XJ+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ9/MCRA9TVsSAnZWagAA67MP/0kuz1v49JHGTcQcv/fF\nqQTPOcYQVO6EahVmf2CbihGan2zFbN27ahkGZV8lS+mK1n9ka4vfYtfzKoI0\n0xoAPp2XEVd6kJaBY69F7vDMqnTCZhDlyJakgLjGysons03jc/xCQ81zMjpN\n4mzMO4VUptnJ7H5upFaLQkZ1dqfRgLWEq/lJNpYpOucmRQsya7CH3siXUBh1\nFzhBQuO5A4OuGVw2zClEnk6DOM3Vru4JKJFh2MJZteShddXSL1IgxYXqCKWs\nw0PrljtOn4ChR7uCtQrG4qQWKhQR/q8B8xIy+9wiDAq42XheE46oDzO6DTq0\ntzicLT+BGVBREmHqos+Xtgtx8A3gZ8TvvqCg30lCodB9kTJ5ZcBkMYHF+bsK\nztN4yUPJBNagxjYMWfUqMpWpGyWGEv/HPgpGdvQdU4saH7b080HbUwdLQvz6\nIvwuSXqRPeNEJNoXyLuTz6s8goCUySoF5frLaAu2SxrXgzNhXNgUy58lm0a8\nTF4gbrPhYctjE68USkV3SRpoaq+2+pZBsHeEO4JjVtxCe9+SOQvqpWJcF56Y\nlAG15SaGPrpv817buX3kFkCQ7BY215grhU7KxNv9QZL8M9hyYu12KLrgpXwn\n9eG3TkEgplB+sohDEPJwrYv0FXj9OVa/CNEml/8EQno5Iw0Yp63qgH3BWEuE\nifxS\r\n=ubJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.6.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.6.1","@aofl/component-utils":"^3.6.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.6.1_1583865804383_0.3094977366160201","host":"s3://npm-registry-packages"}},"3.7.0":{"name":"@aofl/picture","version":"3.7.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.7.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"be46c4b77962639f4f6becf16fe0235203491942","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.7.0.tgz","fileCount":11,"integrity":"sha512-cDzGdS04BzH1jz9snE6Fa47zMsl35LVDY1/LL5xCkJZifxHFl0X/zSBdcMfmegewbUoiNGzwkpDU1q3EFsFjSQ==","signatures":[{"sig":"MEUCIH1uOyrFgvbOY/o4dPzClg7zU64S8LHxvhszJeorrXaiAiEAq9X25aOk7//1OKIX4+4LTCMZyWB5zp5UMvMxY4JVoXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea9XECRA9TVsSAnZWagAAV+EQAKQB3dlL61VZ8ZusT919\n+3xxw4Sd+8bPPcCKybyqVoKg3OHh7+1IbPnc67BQqphnWCvF1OLuF+f//ICx\nHnKnDeqUCxz9Z4PKV44VpUgclOyvYjXNay4IMgjk9PzjdBH6dunBziOToior\ntGKlDGxvsp+D2d9SUuuvp3v1tc+m2c4+u8uoUWvHpfzzC7X5QAa7mBzJkFul\nRzOhzl7xKFRBxrY5k/nGuXQfhPxupo9I2cTnaddjCr1X16Y9tvZx2AaMCM3e\nSCRy72eGGvr4IVapEE5m0tdAhOEfefSoSz+FIfygIv5v6jS6dHHdzedRwSsr\nuEJhdr740jSZT/lK5nbdXicGq6A49s4tbnAFXFbNJTWAjY5iWl42qVMgoskv\nnrCC+8f8b+AeIWKqZHJYsfQ+TedyYsyQfwMnAnNLMcVmorOsnfUD07wTD3Bo\nb/YUlPKyaE4wsRnIMK46BKU8her6+opYHkbst6y5f18xQdfdazbsOTPQjtxj\nweCoqzkb1hX78l3V4JDRkiz0FhG6VE+CSsA2BMPe9I4+NSkiMIk/g8ubUFG8\nwRuXCAKVj9rLi8jAQI13yzADr8nEWpApnURZNFjd4WCz5lTs7qd9o2U4yVW7\ne+G4uzphN9ZwmHl9e5iEgwGKeRRLSExrlWX99gURsZdYOsvpVUmYX620TA3N\ngXSf\r\n=jEzT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.12.1","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.13.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.6.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.6.1","@aofl/component-utils":"^3.6.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.7.0_1584125380266_0.040905956806410515","host":"s3://npm-registry-packages"}},"3.7.1-alpha.0":{"name":"@aofl/picture","version":"3.7.1-alpha.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.7.1-alpha.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"9e66d7ef23f868a7768b69fe1a69ca1841b4408f","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.7.1-alpha.0.tgz","fileCount":11,"integrity":"sha512-QB8HXCBbFVP1VvjwYgxTKxn8thDzMGUToCgckJBkfRMD4jT9+bngLXNKP7ZmHz9sSAHp0IOqv1uoWRORlxL6gQ==","signatures":[{"sig":"MEUCIB90tu5c4w+qxUxvkmP6Y+3q7nhpQOAB30Jo6vB/LcTSAiEAjmTGw/xmgu6/mmrqik5CBSY/XKEqVgxPhcxcZcXdUCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenTdUCRA9TVsSAnZWagAAUWoP/Rdcp6Xe22X8q7o4E2x3\nT/aMTFYwhuagZEKsAQlmnEeawxlUKGi/G8UAl4nVKZUrALJSyBVjStcn2Qfs\nZWaUzF4SycmBZxM0tLzjMksOQ3VKirp48Wdk9sr8VASsnanZ+y60cJ3pFJT7\nqS3qLKX81g2ce++qh0Et2XDCMQUr2Dtlv4gL/RDQr1CWQQmPuQtvwL52AFSY\nii/s012/k6z3sTJlEBUgYpxWF+nroQ09bXxzWAw1C2e7tDrpTDpdME4sEGFI\nPnMGLv/GNzv7bQFSQpKeb7X2WPy2ymfwIUbbYV9+rgJmiXYInrr3UsbGmGbt\nsZSIsNTHLyeHE0Dp+AH26QJX8SM/xbXFQYiIk1kdGwg2p8lMiGn2F4VIO8ZL\nmLm41UoKRnmgfYmUgrSrv0qkLj179EoMC7z3iNlKOWKzlqb8m8eqqT+tU6Ch\nr1JjJyLPVifGCNJDRL6uOfRzZ5oHzVM9O1tovJBDUG1REeafuCCIuc8Du98m\nyzMdk9a5cytKYlhkYy2vjUvx67vARtHSIKdPkQYbxKQ+8WOQ2F8S9xR/eAXt\nry6A43h0WiGzKlPMeZrCJu9uzZC6ScBwiJRt/X4LDMWLTgPESgS4iTlc3P+n\n01k7ObZmmCLlhQGz3S1U32JQDXsXzT7mwSuwwQ5UUoc/W2ihYw3kVfIYPdoL\n0cr7\r\n=nMQz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.4","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.16.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.6.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.6.1","@aofl/component-utils":"^3.6.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.7.1-alpha.0_1587361620427_0.23833755848972293","host":"s3://npm-registry-packages"}},"3.8.0":{"name":"@aofl/picture","version":"3.8.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.8.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"f40e1fc21a8327411df75340e908dc4f1070fd28","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.8.0.tgz","fileCount":11,"integrity":"sha512-hWADUb3f82gHEx9WdhDSepM05epH9+1TXbZN+AHU9F8otBF+qK2R/aGTpnMdOfLlgVPt3TMEq64gwzMuGdd7ug==","signatures":[{"sig":"MEUCICg0O23twLkB1+kpb/WgrufAFJpuX+KgbJctLug/zmqEAiEAqFuTRhEIaa2bZt1FgrsI7Bhr3PeX+Xz8/azFT3q0DkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuvbcCRA9TVsSAnZWagAATW4P/0Xk9hIZeuQBvmZNK/LN\nWZIuHj9/f8YNBw3NEvHJACUsA9+xD6DTsFgn4bZIVpxvczL4BdCRwQtzLOOi\nUwkbMWMOyOkiZ9s3ykAVbEQD/qf88cuVa5SywHUJ7qem5DmCNwzLiuRLMJC7\nbyi94M0lZ+n05hyv/3dZtONkqaI24IHYZJZbhkTTclBWxeXd3o8/7mjlJhgy\ncsgtfT110i/duQx8/P20iAtF8HvOjOJdcY5/QCfH32SkNgH+mY7+SJHd/Fgu\n8703CUFXfbRmnVn+FjrkPbJ8ehi94zPvt3Yiqc8zEBSS5Q3liwy+DvCrAYSd\n1riVgIWinTzf74qm2t5DG1BeeEqXneY3eNCPCPFMblg/0ciAEkAK2w5v44EN\nBC2GppIfvLPnrnSUBu8ap7RmCmgQpszpoyg/Esv1ZhWlDMbfjy/Jwd2mCR+N\nl04GyA/QxK0XlD+EsppZqhpGwBs/8G5Fcefezb7U/JQQvNxtS9TpUBjAcLYi\nfJLcDfzCbiEAjdr8inni4V8wnSoAol/oa0N/Fki8zJ02eDKnoCuEzZGQzTNZ\nMe0eQ0BZeuhMVnttyU+WyZb0M3XQeArQwN80Vk9rZ/a9g7OYHTrAoP+EMinm\n8hHsp4e7zcNF4pMFZpIGe79laQWDhhpXM0Ysce14uHUtf/lX+lXpgyJJqvvp\ndbea\r\n=nqsv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.5","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.8.0","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.8.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.8.0","@aofl/component-utils":"^3.8.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.8.0_1589311196224_0.18950080138566827","host":"s3://npm-registry-packages"}},"3.9.0-alpha.0":{"name":"@aofl/picture","version":"3.9.0-alpha.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.9.0-alpha.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"f4727c831c985f83f6579f29be90dde328c59905","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.9.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-QX5mFrmbDC4WaNq0uVOvuUU93Vuyz4ZML/2WckeeFodo399JnIR7km7A5l7amGFBengC3FGbkZnljyrJsmWrYA==","signatures":[{"sig":"MEUCIQD22WROYNAJlB6+kUD7FonbMDP1ISZONiDMFVyOwTe8ugIgDYFetwqvEzOHPT8vW+jLDRIcooiDhpowWeckb9b1dhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuvlYCRA9TVsSAnZWagAAq2oP/3QySvWoYJxNUpBma1do\n8e5/Dj9UjMwjb8F+Mr+tuxMEygNjInT/1Vt5LLIoqKzI7cFruIjA9m4UswH+\nYU42w21jnJfgcB6hber1N1CpvJ0mD5ot1A9Q0c2s8VfHi1dSTzijmO48dM2Y\npu5Bo6D0nj7kB6H3e7ZH6C7dLEwgf0n2AjAev9v+dvtMjyVPaAB1P7l6+0qX\n7WkQI6hJaqyo1lNcn7FteCs2LMRwHDov+SNmvjCG5L14w3U1++L2wzw6iiDq\nRMapyP8q5fovjyktf4wX/w4ocwrMfHgM1YgoylJRAqezD96CiYn5jwhtKF53\nEjDZgfkht4DjS/qJugiSY2mB5Oj9ovu0tAwltHrfeAeaAaq7opGzD8SM+flw\nmS9n3qQD6DC7CxlwdpSQKeYLihYXO0HIRvLDatUoU5z7MBU2LVNfYey87jII\n8HLsIfusCF8LvHdzdgUxf7QoUwz3yLlW4PPIXBhI6pQ1tZDiVw8SyMuSbaUz\nq77YqkzV2Ceinu30hYS93YdYMcYwfIXV/5rIo3Tkoe9hRpPSSvj09umDQzo5\nnsYRISQxBuO8YB83FewIqlYWhUb23LLWFM1rBXySCWQTldxJIlXB9JGz2voX\nXfRw4ohn8Mhfyxy5qn1IEYv9h/KGAOAvStA/QHA4h0bq/en9QORBECCepanf\nvhug\r\n=Pp0B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.5","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.8.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.9.0-alpha.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.9.0-alpha.0","@aofl/component-utils":"^3.9.0-alpha.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.9.0-alpha.0_1589311831637_0.4923418112593452","host":"s3://npm-registry-packages"}},"3.8.1":{"name":"@aofl/picture","version":"3.8.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.8.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"f00e796b9b08d50d62057739577ea0dc3c0bff82","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.8.1.tgz","fileCount":11,"integrity":"sha512-j10AlnOwJnsNIUBx3evz6QsidNd4d1LhGJnfa8jIHgt0001v3WubVlsH6B0JI5PmLd8KjWcQVAzwtfhXid5liQ==","signatures":[{"sig":"MEUCIQCLzViXq+7CAoWm4IU2t2efOl4tIhlpfSlq8YVVubNH7QIgJ/HhSOZ8Nik3CC+rKuh2GywlksYJnc8m12JOM/phQ5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuvviCRA9TVsSAnZWagAAAdYP/iX9pWaaJFu/sKXZpbTK\nxRyCZJFlzpHZ8lwLmr+UDCLEtR9snRgW3eRxcLXcfmTIY/7xsI4SKpFXjTth\nrY7kzx3T0mANqpKcLHsxrjBBP5NFAXnNkat/IrhIZbTZYB/Z5/WSnQMStoZh\n3KaxKR7bgGUzdC+vSLjErLESkndCEl1U0zTky2NIcezHIvwrdsddCR3h+pLR\nXTpCFyYUeJFwjd3ZG38GLK3xOw+LXSntJ5xEObq51s+TbZCCa37GWvxAXdOk\na+VssF+LN4wMahBbpoIAsCeDQ/RLbUhXwqr2XVSLiW3Ze6ACvElDbScrir7Z\nzInp8YCR1INcrfg9GsgDJ527tDgvPi1uh+/FSdiiAdW5cQY+xmooL2j5PXHK\nQWskPlSG4gIWLmOQpKDJDn3yAkUXci8zfFSmDsz3b2H41nwZptd/wffufMh1\nrOjllMJxWUJKgoJwLuPn6Q+Ko8QinxoNKdnUOLn4A69IIqbgbWL9LbIifvLZ\n8ZnZZ1AYBrTuRS0d7sGI6x8dINF9cq4RpJaYg8vDMzUkG9+swRvc/6oA8h0P\n+YwUcG91dVIZmbvbOSq5kF6D+aRG3/7eSVXMsseW7+kW4qG6Opj/bA/EBI9c\n8OK1pikQs3A/BDqjDBtII0mlyATp8crbyZlouxXFvQN3nCFfhgKmJOHs5pSv\nGHt0\r\n=jk2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.5","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.8.0","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.8.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.8.1","@aofl/component-utils":"^3.8.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.8.1_1589312482346_0.8117857836665785","host":"s3://npm-registry-packages"}},"3.9.0":{"name":"@aofl/picture","version":"3.9.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.9.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"4152b52d16a5fad9fdb6c9b6d35855f09b318c76","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.9.0.tgz","fileCount":11,"integrity":"sha512-Nf8xXxl/zng/0trrmzqHuBioZtq9OvEWv/Uw4vq4ZLdUrsJ6XbP5aPVK8CFn/AWFnXt1mJWMBV0Q0H+3rpw8mA==","signatures":[{"sig":"MEUCIQDjcfoeh6+MMPgJxsEhqFl5rtGSNti6j9Gfy0Yy1S68tgIgRiMdCA9FQHchX8GlsS8tT+mFQU8SJJEs8OdEL7YO5ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevthSCRA9TVsSAnZWagAATOMP/1Uak3PPbZfpir0KEGJ6\ng5AAkhastQ8ltC48D9GQh8UjhUYWShVeXls938h6jYReod+WCdQTxJWXxQZt\n5SqMFqCNNekz/+X4vPLlAc3Dyo3Ni6I24VydvfAjIMvy6tvx4Nxbz+jJx8PS\nVlNGTfVOag5cdlo5vTNcRO7gzFobJP5CqDLWLeZIJhDCXM4iQoaUaECEbxt/\neC8W+U4VtsFatpPYTcT+0iRjl/4OOYJvx36Ti6szgRE1efvJ3b/cCpsay96J\np7HEtlgTTF5ERjB0xZA4KvjgYYCyap+MZEvWBPCV2LZ9rK5wPYl0HvOHB4FV\n511nieVxsLOOmt6MyCv89AYWzBDDbCZ6a9t3LEs+EM8Kqq9zQYwfmBmHiqM5\nUwVS0hNCsH5eB/cy871PfGIkzMMFnpF2DtTPZ9DFR0S34igvrFCBG3WvG367\nUfyzELv3jUBoW5Xl7bEq7SHaYRZAQQ6arKkL4wI0PmVazdkpRnLehaXHSUjL\n3x52HbIxmyQPcTcDDBNwOo2ea2twbdsc+kl1b7ApUP1FWunJoTG5tBn5e2bN\nx1dgj8OOPwwjdT7qu8yFRh5rvQohEfrmEwmOyCGsdeHnmkqtymYo0Idp/BCz\n59yhay8wHSOojZy06MSXGmH9+ChIgr8y/d2654zICUYcs62eAHcu13SRMtDP\nL5gJ\r\n=uYTP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.5","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.8.0","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.9.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.9.0","@aofl/component-utils":"^3.9.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.9.0_1589565521663_0.017394380465212356","host":"s3://npm-registry-packages"}},"3.10.0":{"name":"@aofl/picture","version":"3.10.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.10.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"6c18d51fc4ddd1a002fc77fa72decb2f8413836b","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.10.0.tgz","fileCount":11,"integrity":"sha512-PIXhG5XJja0WgR7H591WnABizHL1kMSWYe3TaY9pFYMUwSvlSqTlOmica/WMYdODR5qId8pYdYtWbOfQO/KNWg==","signatures":[{"sig":"MEUCIC/5MIrEvwgONYUb9M2V16TbYL/NS8AxAiIljxg7Y5nSAiEA3NQOAHRhAQUpu6s8Nu7Wb7MEfN5bjo//tRhwGCkws/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevwaQCRA9TVsSAnZWagAAGCYP/ipvbmLjvzPE9Es83N+y\n5YGvJ/nQQ3KCgx4wnKtdmWQzAyQmN31y6Vml08+Fxtt5vf9X7PyrXr7IarZe\nx6P+Jzeyuvbu8qCBaALAHWs0cX9vJWCdQBrf46ge2RNtxsCRuRLrDWBrA0BQ\nNAgxfDxO43Xh6+qmPzCx9DNmEEav/FTPUS0AJAefQXCTBiy4GjDe+6gVB1xp\nF7/qe9pXtVyCM3ogIvL7RpV/TCoEd45mIiL+5sgmjMqf5fRamumpRZKZz9Jp\nn9PePzUmziDnyE6RZCWfJ7ngP6hyFlhgx/CfyVT/0DQKH9MwSOqGKvJ6NM84\nwtaywH11YYWZUMN2EDlmc21Va5IE+BOcAYuAHMlpOOX4rz5bJQm3xkdp21dY\niAvaTBzbSmi70m0dFbSCpHWPxKC1oLKNPhh06Y288tbz2pZNAivQKWHsNzth\neKuw5rCOBy1ex5oUWUNKtmhJZ//lqt7OBqimJipyMbR92Q4bZROeFcB1JxaE\n7Wxdz5im2mxHHZn5TVza7eRgQ+62HNw4rtR9fxmhmw7jsQKBv4GI3o1tURWx\nD6W2E8QoJUa6rLDKOz2OPcN5zXY18Hw8DhnISEQBWl/HUg+xZ/xjoqhxlIjz\njiOlrlgoO1Kk4pqwqQw04+RrnfDj/T+N5Yo7beCwDCzgV8GhU5/rXN6eV/EI\nD5rt\r\n=WhvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.5","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.8.0","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.10.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.10.0","@aofl/component-utils":"^3.10.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.10.0_1589577359834_0.8100736964417359","host":"s3://npm-registry-packages"}},"3.12.0":{"name":"@aofl/picture","version":"3.12.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.12.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"0096eb652d907bf7e768e2cd935362921e0c5942","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.12.0.tgz","fileCount":11,"integrity":"sha512-GVaCnScUTen1t2STTG2FE+WIj69pM3LpUU1lkWjQgVje4EyI+CMoFpfHAXAtIxBl5otjvtv1CbI74tlE49vi4w==","signatures":[{"sig":"MEYCIQDdSUQOARoOqSfFKqdUMz330CKuZN133Ap4NdfYsZguOgIhALtKZcu0NhkfafLJimj9mbipnpl7Oeb1sK0YE4EjsdME","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB3MLCRA9TVsSAnZWagAAlJ0QAILrBl4QlBn6ZQSfK5HE\nYxaFxufOHnWVwtr+1qgPRo646AYAJOAGf1Nd8WE30okXLxu5Zx+sf9/jGQ+w\nwDUMEFMQqsO8jojCqQIbPr+at/YJSx1HWANsjPqRUvRBeidgSSoqVcqs1AzL\naQ+SLHD1j6+qLQrJRYQkdohnILWdZ2eo1iRtKeQUJ11YQvPgqqf0ySsZuMSH\nwLcHuoZEolBez5DuhF26GdQ8ZL5v/PGoxoAsh0OR00AEMViRFKuIvOtxuaE6\nb9ymesPSFNgV/MMws5RSwcShbbD5dbj5NNjmmRhnxdDwfo9fQTbzJAaTMKRq\n/lqN3lH8lGUpfBhkSGRpCZbFewClMzxUrqsr0e1uNzQ81Y0CVhVmYZFYof4X\nSD3R7q/FXWW5u5CqV7nfqejiFdF3AEQI3I+scBVnl5OLBD0PcsNdNaY9vVac\nzkvbwkfa35/Otdr7t5Vpdpi83hqOXwmv0PWRX8pX3dyNTmPzQJCuJigo/1a2\nGYfdSNWknYnCvMX7ML7117msnOKGFIECdPt4HKgVvjxLM7aMdVvHBtKlz3Zt\nlCwisxzEtgzwCimmFca46k6FTeWfgvQRZBtQ0Y49IfaMt6nSwd1JLD/vI6ub\nkKw076lZLs4vF/e6hPrACovlWlkoQbGy/z2dPaQHBv7+xD0CLOpqI230M0RE\n3/ZS\r\n=0+PR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.4","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.16.3","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.12.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.12.0","@aofl/component-utils":"^3.12.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.12.0_1611100938964_0.36250088953441617","host":"s3://npm-registry-packages"}},"3.12.1":{"name":"@aofl/picture","version":"3.12.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.12.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"3d9f8a41e717bd1ca7cf54dd3c7b0ad0c00c99a6","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.12.1.tgz","fileCount":11,"integrity":"sha512-+yb49UHrpjJkEws/MDognfVuzyKbuduiw7hXF3cG8Ipoy+c3aBNYfVMzl1LI7O/9oEXQv7A+WISkr7Yr+xLzhw==","signatures":[{"sig":"MEUCIHp9diHX7tTtZu0+bDAu4B+ijTzwrNq40gQmJHxwIP3WAiEA+hhmuE6SBTFgZ4m3egDlxN+dEX6lDukfXO51xvsBR5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB3WcCRA9TVsSAnZWagAAO0UP/0+rIkdhpvNHqV31WM9m\n3Ofl4OqiNz66qICZoloynfHhqjjCc3UglUGwbKbXKWjvPpHPUIdAY1tmxvmS\nbjHw0dVc6iOU3ELG9Lb1qmA7MCiq6qPaFY0TnHQwx1LLplR/RqYQS0ZptNBw\nmNnvGre7rum6CMnBTytrEdfaM1JzBimfhfkSmShWS/9b/QD0UpoPghvmQJbL\nxB8x44r3LT84amFMMXZPbLojt9xP+11ALXAVDzZbEzV9mPpYvu/q42sT4Mml\n+8+VB8bQRTYHbyTMs7M/+0esIne7K87Wv2WKrKKSu77EnqC2pQd7/SIH6B88\nnxAmwIeQ/m2Sj8cNDN3lfUKvXwMtFpm6sYxZxq+W4DLGw+04X1vI2gTn+dd/\nPwt/U1DqOKkbtNYfPSbK9uu0xU7ykYYV64TxVLUGHNKcEHk1GFTnTKUMzn0r\nAy79pCMS6CKBOkiNgK/UM7gNDlyl/cFGt/0019XS7hVwcXMMT0XxzZ0Ej21u\ncXSAReT9bgl7lDSEo2ucsVX/yyDaRW6pLoOlA4EtCNF+sivCpwJ70DvHMVoU\nqfcdi/T95MPMZpCtyUOhcM7mPdzIhLf/88Lquz/WU1kA8wU20lntZOVc8zGD\nlHX/cNupJlEa7Z/YLRtXUsHlaBF9uex5Qk5l9M1JHket0Zh1y2x77ATueTlS\nCokL\r\n=yXFk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.4","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.16.3","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.12.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.12.1","@aofl/component-utils":"^3.12.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.12.1_1611101595885_0.7537306353621576","host":"s3://npm-registry-packages"}},"4.0.0-alpha.9":{"name":"@aofl/picture","version":"4.0.0-alpha.9","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.9","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"003bab4a9e3fa81d7e0d762235b499a22cbf53ac","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.9.tgz","fileCount":11,"integrity":"sha512-GwcGaNM/6EESXvTclgfx2noRrkDwRiqNrbhnaBsnE33Br6nSUe3tyu/kObVT8znexC4wDJyye/SpITfDJy1b2A==","signatures":[{"sig":"MEUCIFD3WMa1Y3Y6H3URizWUnpy8tbY+8+7yn7hD+50fm5p1AiEAmHhVi9mYHs6Cn5cQQUGiwqe25kCMDoIVrGgJW9+4hUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgD1CRA9TVsSAnZWagAAWqgP/33ZRJetlxqml94WYY21\nmaEA9O9anaN0itcXWCR+y7d5QUwlbY/vo0DPp7yzi4WPEJs4/KN3eibHGqVm\n18hHzTzFCr32FVLc7NiK3lBBNVLqYqmFtyfE5B8ZTpLSfrukJuPCch7Z2TIZ\nRtbvEFEo3Wj1iRzdT+qtBu+6YzH0Df39FfnfNKsQJekobBMZXI0RcK2XxRG4\nGdf6K4zlxoide56rpGXQQawrCJ+7E+b7BrZ0NPSHglFKGBtVjD2+25Wsooxa\nZfwpQm8uLjKJXK8yLuZxzAzdOmVuDn8OfdHD09/W06Zs2RV4bwz3jmDhx4CG\nI/YmNUom98nHjz3imySEG4kt+u0Aww9iv/dEZ37vfBaUz3lenBChetiBJBBo\nADF0bBWNC1fkrO0RCFTj48uxeK2Jqdl0CNAPsqoxbc9BK30OSQ0bO5Jos0i/\nfPYnT1f/i61+VH5mdbaPd9oszTgCrD+4elj379N50cWR8aSPKde2lRlE5hPZ\nnRlX4Nab8qqwda/HEqkySFpezXC6hK4uTEW1ZPxC0jmyh+RGAIuCM9U8mO0y\ns/xtzDFpq8Ec/bGIH8xo3RHj7VXinJIB2xBVnTax2tHZ3D2cYFcaacEF6xmZ\nCEdMFmqBbwLNUY/BhnfrZCZX0iPc9AIjc8VwIN+Cv7HhIrwtYCvn141ncbuA\ngAJ5\r\n=xNvw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx @aofl/cli build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx @aofl/cli build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.5.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.15.4","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.9","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 5.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.9_1612316917416_0.0016066285966986893","host":"s3://npm-registry-packages"}},"4.0.0-alpha.10":{"name":"@aofl/picture","version":"4.0.0-alpha.10","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.10","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"3b8c3d79cf4ed1e5cbbc2f90725a13a459964a86","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.10.tgz","fileCount":11,"integrity":"sha512-ayEZTj3ePcKoInNih+Vnh0bd3St2h38GpDVeXmkslhx+ji7vJlnvHC7/AnxMTSOXGGcKSKc8nYXC1cTaI7lZQw==","signatures":[{"sig":"MEUCIBP8iCJxE95HJsru62LLWVBDwsoUzIheFPkZPjXU/JPYAiEAlmbT7SVXRPEyE8XvBDmKqQ3crJUyWz23Kpi51dw7pyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgLeCRA9TVsSAnZWagAAJUgP/j2rtfp4puSKSFqxy4Sm\nscHyZzViyc/MW4lIVE++BUofKjd8drP3a9Rj9zdJLtZ72dI4GxgBe5vLVk5g\n3v0jFlkS9L4dcqGdHZc4PwNsnHKiTFaSbtuZSIbvfDmHAQ+bNGCNhGFmHjTp\n9bJFgIXaQ2k7XUpji2jm3YuX7ge6qMppkl+oxJforHt1fCy9WgCYP0CQASPq\nkhMBWPZX2C5Oz6hvVwWkyFKUXJgpN+7pzA45dGTLKSWm7nY2bzJL5Mklwzv4\n1DrG7tDF43KIy6LKH9QfFqJVMlSOVAbPUPDj+Gl42SbNMXQcKmKDQlpz68nu\ngwct7NKiaC28wjWpePMmgZCvJosYfkKnUmPOy8ZsD6egt2/V447q++V/tkKD\nvevz0RSu9lyqyT1vWsEXw3S6GZ2n+MhwO7i8lwsOWl+hRy2GTcqLCbdNmQpr\ngJK6aF6nuj24yXP8VY0A3eRJCEcz8UqP6B8tt+5c2UQIndRySdrHEkdRRglk\nJjUIeUJ+26+hV/R2eWwZPATtnA/0VXHGRy81qkkW25KWuMqjQq4vQPXRplp4\n9ftzogywkA6wB3eEPOzVLkw9PXjx9vEDOdml8RyqQ8NH0ECLLQ3iiH9RU0W9\nv6qhL1dozUfgihwu2lkxxhUtdctmq3j10oKXUPh7ejpW73HfpAa7fXQX1dCX\nYmTq\r\n=6ush\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx @aofl/cli build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx @aofl/cli build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.5.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.15.4","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.10","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.10","@aofl/component-utils":"^4.0.0-alpha.10"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.10_1612317406321_0.2125378715348527","host":"s3://npm-registry-packages"}},"4.0.0-alpha.11":{"name":"@aofl/picture","version":"4.0.0-alpha.11","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.11","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"adff1f45f11914600e5d9a11501142b2b5932b41","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.11.tgz","fileCount":11,"integrity":"sha512-QccD3zp9lhiD1wIjl4FvT71og8phv2YxxPC+aA/pO8ept+tvACDcHMMrZnlRWak8b2yBEjNa8XLqY3IRiIiE4w==","signatures":[{"sig":"MEUCIQDijHMAcm+jozxmdrVNNb/JRmVpWBLz5HFBn9mUqVQQGQIgB1qgvjC4HzF/bsb0Wmu46xmnyefqbZDi0fs8b/9Ny3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgluCRA9TVsSAnZWagAA+XkP/09o4h2qIvncKt1vRl6O\nlPvPmcanDc0FGXYv59LD8IIWCQLnNDyhtJCNyFx1Ez1AYQsMJ3UhVlhmK3QU\nLB35saDxkZ8e3ZnBso3EEA7fi8aqED3kidBdcAQ+aPCXzYYmKjgSbf/YSRk5\nqCC0cngtGf3Qsp/v3Th2J3B+XdQTRpqMVy4tgRbn3R6IkQ/YW4GBZGJPecRE\n7beb89CihMqsMAc5s+F59TM2QkZdV2c2MQ/dPVYO7tAsKXOVZkxyGqeV7U4r\no6Sa7Sgm89kOayXEw/H1QlBAuhRIa5jxAEQysezeFSRM6yed8dO8hauNKTt9\ncD+Q0FySJu5PIQpP4i3nlDivWLVjpZJijRiiD5qaPy++nLBBd+0IpRSVaq+Q\nAYlTTdU0wuBSohEHB9FdtC4Ib9qOdxYjeoc53s9xrF5BLQoammCalyJSrTRv\n+ZFOvtHZXobqjWdcNK74y7fRV4DmWvDU0SLN9L2aZtFvLJHERdtb6buQUEqc\nA8hvt+oqOU3fBEe9LDg8z+GJX4w6X+sjADAeNch2p5NA5Wsa5UYvyPAWTV0q\nrSFytOTLZa2r587WVvGDW/nHDZAifV+DTL9Rj/jDJS+JDBUdc6MA6cVc4LdK\nuQzkgxfel8CtuaiG9bFbcgA8QUMQOHPTF5BYvSX/ciwQHSpFlPPmNKpJb3n/\nH1i9\r\n=Jmku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx @aofl/cli build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx @aofl/cli build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.5.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.15.4","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.11","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.11","@aofl/component-utils":"^4.0.0-alpha.11"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.11_1612319085977_0.3319470309742263","host":"s3://npm-registry-packages"}},"3.13.0":{"name":"@aofl/picture","version":"3.13.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.13.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"bde53ca5a47e096906c8a5a054aa43064b719cd5","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.13.0.tgz","fileCount":11,"integrity":"sha512-IHhyTCfgCpSNcd1OQwx5klFkkNZ849fM+byOLWDn0quI8bGTY1MnPMZMYE5smcv2R3flQy1otD4YWE4iHR1Osw==","signatures":[{"sig":"MEYCIQCy8kvL8WSjL9BvbmKTKvBPaJHsH36zMEMnpDR1iJ0pvAIhAKzs0zRukAV1B1GrhtLyAkNhbZkd75lYXadmrQYyd63m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODZCCRA9TVsSAnZWagAAxzEP/3IOUlYNCZkIs/eEmMTC\naNBBocqb+0Np9A8wQwXnOkgIQBQ3zrmVvwJedETo34gV7oPTkG6OahMOGy5m\ndKYNUmNMiONdfKGB/5iBy4H4N3mlV9s6Yq5L2pLdRrlU/kXdPeugOXNhpjFg\nKcYcIgcYDZSqGZQ/Ct3MZHRM3kcMjH5FcdPASEB2Jnjs7mVVYOozBgEItQPx\niL+RaC5Au/BXqMJglUlhL+vQghy9pYd0FS6UODp6Q89BV+OD1ANH1PNRlC4u\nTV585bWJgbf/E0G4NFEHGWoiaEPDsQBg+7TjnrwwjilWWiyQWLQ/nUDLXt1G\nWDquIZaMq01TVWPo+m+OCmeY0ihf8ac2kqhrLPWV6ztzNiCGVWl7Ffeo0GJ7\nOU8LorDa4ADj5qT+jxBYmetHmukQJGUnYNAcU82SmjPwj4oJL2YvxGvk41wV\ncVPY0h+CDamI4oFSca6YhCbjolGlAMfgLXortSmjeEWaC+KiWBOR/HmFecbl\nb0pouktpzHIr+2Yh1roMXoXst+YnvV19/mH+TbY6QxltOfYbRTj6/GQPw3nw\nRJodffhdPBfOZCF0eO52nrCfkg1cfG5cf/ATbtCrPzE68qG7UmAhFx3X6Ymh\n/WbyIn5L+SyHKBY5xatbmP6PHq9z+uDAv3tvA7VzRsy+JyY8P8UYrMgDIH0Q\nlioa\r\n=emvE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.11","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.20.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.13.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.13.0","@aofl/component-utils":"^3.13.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.13.0_1614296641635_0.12244233191075304","host":"s3://npm-registry-packages"}},"3.13.1":{"name":"@aofl/picture","version":"3.13.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.13.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"f8e1378e20524fa42ff4c0f5b65ab8b6c86fbf0a","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.13.1.tgz","fileCount":11,"integrity":"sha512-WMTdMpgLep1zL+YDHULNl5UIpu7svs2RIvQ/9pq0EXAZAaBb9jELKL6rsEfK2QZpGoUMBJiMxpqVe2olFhZ9lQ==","signatures":[{"sig":"MEQCIFmJtTc05MWfAlavu73H+vCFX73kA/PWhUUNEyMGVeoCAiAuLY8r5Hr9LxK6nEjPo1iyhchLjka20+aj4CFbgW4mzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh11qrCRA9TVsSAnZWagAAJnQP+QH5D/MtRVLh5KhpwuAY\nKhDD0+79uPKkqMTLFIMUy6unxmhcH1oogWK1Y/uGol4cHtMsk2Aa9kEuBaSd\nE++0xFOu3GT+KQU1gxMWlfHwP/7L6Mtd80cAfFvTYGqnhg3kcA8Te52nHSsQ\npz0ZkJLlGejTzje8CjG6HSfqlvf9XDLWV6t3zBgiL4gyYZEr7ptmkCg7sTRn\nClywmCfdxtRDtMkNJ4tRXpaBKnNJSVin3+v3YXMw1SzmFbbnZqyjNqyiIcrd\nE4aa6mufkqqfOwsnILg4XJ7qUNSeNdzpyiQeyjzPack4769y5G7c7Uc4/eZ7\n5wNWucwk6HQAzfob6AAz/RjIyqPgq+O5VIyKU1X4T1x/dqw5dh/OiHk3xZI1\nB8lScatrwDjTlmzMhpUYgwJRgl5A7GSPsPY7Ylim0Z8ElYrKvHT23qBKHCf3\nMq2RQqBZTCnv8mOt0ERe8+cW42j1PELJZ7QX9UbG+wguKeLgLnxEncKAddZ8\n207YE8553K71gWYlpwIPlbpDqOWtKVPUW8w3xRkp//oDmKIPsSFAalb1K5HX\n2/rD+hyw3dS0xmFB8qqpZarcsYHDBZqWqtFkLxKuZOa+0V0ReAlHsYbly4Ya\n+TYDNzknTa1VLoDGil2ZcAJU4kVgCgn3f5BaUKDUZ7aYVqFhNwfeNavYMmf0\ngSRa\r\n=+rBr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.11","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.20.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.13.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.13.1","@aofl/component-utils":"^3.13.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.13.1_1623800951577_0.6893866358722092","host":"s3://npm-registry-packages"}},"4.0.0-alpha.13":{"name":"@aofl/picture","version":"4.0.0-alpha.13","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.13","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"96a3945ed8b77692c768c5287afb7ca55cee9336","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.13.tgz","fileCount":11,"integrity":"sha512-cf2IgvmkppFr+pzPmclrgoup9fLT0THr+uWCJ1yCxFkc95peGh1OhwXNSZm9HbtvvE7EqYgFBpDLAdfnorzWmA==","signatures":[{"sig":"MEQCIG4VHqINTohe0m0phd+4B4h84el8th4fXmrVNNJX3GYDAiAQM2gxvrFu8prjhl4rrKHXS9wlKmVY2O++RL4h4/Lzvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45253},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.15","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.13","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.13","@aofl/component-utils":"^4.0.0-alpha.13"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.13_1632439951364_0.7685040741339693","host":"s3://npm-registry-packages"}},"4.0.0-alpha.15":{"name":"@aofl/picture","version":"4.0.0-alpha.15","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.15","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"5c019b21aa4cf4748b02dab981af93f675be2d3c","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.15.tgz","fileCount":11,"integrity":"sha512-FndiVB6T8Ir0Ly3hI91icj2B6rrePHzAadlR5Y0XK1C+okrvb0ZXU1ArXCf2r0/5Ib8WP6uS9pGZpYN/F9GgLQ==","signatures":[{"sig":"MEQCIBgE5suZpCymmG7hORYZ5GEHEnbmYhi2Yde+Hseo7gOZAiBSyfpcMiK16n7RHbB0UbO82C2ZZdQWWkoFtq/AEIjkoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44906},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"7b448cf64b30502883b3422662a9480ea25f2d60","scripts":{},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.15","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.15","@aofl/component-utils":"^4.0.0-alpha.15"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.15_1633539841177_0.8797046124985199","host":"s3://npm-registry-packages"}},"4.0.0-alpha.16":{"name":"@aofl/picture","version":"4.0.0-alpha.16","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.16","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"58c0601f86fe68b6b3e3fc75c7fde9f704c1bf67","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.16.tgz","fileCount":11,"integrity":"sha512-x1lkniPq9pip/+GwrQBe7ZRE3qm7PcNTRGPi3cNQjG0CXjyvhKQzw/qqXN5jGbO7HzDoXD88XA/8rpJmFkPpmQ==","signatures":[{"sig":"MEUCIF/5Dh3MlHsNMqM5eYlar1x0Vxc4/wr3209qK+2lwNGoAiEA+Vu69P4vggLWpLDdjYeo+KLRCps8cWH/xcSmiiIK6i0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44903},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"7b448cf64b30502883b3422662a9480ea25f2d60","scripts":{},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.16","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.16","@aofl/component-utils":"^4.0.0-alpha.16"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.16_1633539916255_0.10115701617256212","host":"s3://npm-registry-packages"}},"4.0.0-alpha.17":{"name":"@aofl/picture","version":"4.0.0-alpha.17","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.17","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"fd530bae1515f7aecd6c6455e3f0b9b2f4e245b3","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.17.tgz","fileCount":11,"integrity":"sha512-ez7xNq2M4FLsPLV+Ew2rQm5ZdrQSGLby7ukoiNnjKyuIZftnxf3IrGQ3IXsrynxbvnuBj/hVsgR5hyxnHm+2KQ==","signatures":[{"sig":"MEYCIQDFQ9uDfcz4BPrTN3524jeUKDziTNos9WZbgO0LjEWVCgIhAMA3CEH5SiwzTL1FIdeRw3gWz1S3owiUCo1V7rmvE7VJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44903},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"c7b3ad6feb17eaf3721a5528e86a31ddfb350ef3","scripts":{},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.17","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.17","@aofl/component-utils":"^4.0.0-alpha.17"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.17_1633546059630_0.23936137191613738","host":"s3://npm-registry-packages"}},"4.0.0-alpha.18":{"name":"@aofl/picture","version":"4.0.0-alpha.18","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.18","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"1dc7ec440e971a5d9b1ac2cca8a85e09447a2565","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.18.tgz","fileCount":11,"integrity":"sha512-lN4rQCB0v/u0Pzmnyom+ro9b+vEUx2fJHbqjJYV+bp5AksqyfGnHIa4RJaT9or9ypyjn4SHEcW+71y1f18N3Ew==","signatures":[{"sig":"MEQCIDoMqTbKPEWSFI8akkP0/mZ8vTduKiZvXEzTDq0pHel7AiAUinyQEj57xYsqIxAgQi3Bt2ZvTuiAVWeaT6PlcRFXKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44903},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"3971875a8be8fc1e4ed7f6c737cc9aa1653e049b","scripts":{},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.18","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.18","@aofl/component-utils":"^4.0.0-alpha.18"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.18_1633563641972_0.06990299675279599","host":"s3://npm-registry-packages"}},"4.0.0-alpha.19":{"name":"@aofl/picture","version":"4.0.0-alpha.19","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.19","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"8e548de12f510af8504ec3eb8352d846210480f6","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.19.tgz","fileCount":11,"integrity":"sha512-FVJPlwxBeRuYkBgNkCEHFFjIZZQ3GadvJw/RKdsegDom6Di10iLVRDZz6c1O8GMGfsCUhrzmCBK0JzH1KjN2Wg==","signatures":[{"sig":"MEUCIHobUZChSMIHlHfpkVciW192aI1B5nNhnCrmv1+czaeMAiEA6y247CZapOqo0J5+91ygHTepll5LYlFag5QhqX8kikU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44903},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"79369e766cd4fe78098059b93d1cbd7bb5dd8830","scripts":{},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.19","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.19","@aofl/component-utils":"^4.0.0-alpha.19"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.19_1633564058325_0.4925938456773873","host":"s3://npm-registry-packages"}},"4.0.0-alpha.20":{"name":"@aofl/picture","version":"4.0.0-alpha.20","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.20","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"a4fdab2b7366688f95e009b4491667ec75435162","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.20.tgz","fileCount":11,"integrity":"sha512-X+71Ek6JtFr1EOJUVXLRWaawXulB3sveaJ0Y3jS6JjM/8YcplCFkYG+oDh5mzV9qxUDqMLw+E8bssawtjv8qmw==","signatures":[{"sig":"MEYCIQDPTNaE5HWoiuCsAfHBlIkbEWgWxMLkesfcZ8Yvfjd1owIhAJ+le1xD65eaBTkfLYXQAvoH9BAC8FXDg8D2wggEwXB6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44903},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"398f195bda4d61023d6d7889598f5688c276f1bf","scripts":{},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.20","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.20","@aofl/component-utils":"^4.0.0-alpha.20"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.20_1633564505306_0.1924835072714426","host":"s3://npm-registry-packages"}},"4.0.0-alpha.21":{"name":"@aofl/picture","version":"4.0.0-alpha.21","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.21","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"a602183ec93af4db4a32b8dacef4f1bbfdbddde3","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.21.tgz","fileCount":11,"integrity":"sha512-Ye020zefPS5a4c5QPaUXKLz6IK6cSrOf7sd733dz2FnyfJxkaTIzylsSl1m4CG8u/4CqU0MnuzvXDbrQWikgJA==","signatures":[{"sig":"MEYCIQC5WxOeCJ+YcMNwTqdWtX2sFxibH3xaYJCdiYWHA3bKkQIhAJiEKBxIJyHY1fUdFmKfHQtlvaOhhjG0hSDZOPE+Rdl7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44903},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"398f195bda4d61023d6d7889598f5688c276f1bf","scripts":{},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","@aofl/cli":"^4.0.0-alpha.21","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0","@aofl/element":"^4.0.0-alpha.21","@aofl/component-utils":"^4.0.0-alpha.21"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.21_1633712771835_0.4503144875155838","host":"s3://npm-registry-packages"}},"4.0.0-alpha.22":{"name":"@aofl/picture","version":"4.0.0-alpha.22","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.22","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"3d9cf39a404d4baa68c16677f936bcedea083e7f","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.22.tgz","fileCount":11,"integrity":"sha512-kbzi8mw5S3J/dXiU3+U3KwW5CVV5NWxE/NHKap+XOO4Jk9tvDozh8xNSPE5YZIXngET/vu9Xu5zu0mO6B6v35Q==","signatures":[{"sig":"MEQCIDwBPxBadSq2mGR8V+mG3FvFJNebtM5qf8EZ5u9kyatMAiA7ksF7vkNGDj/3oyHgPVQgAEYmyPkjg9AhCam3wkmg6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"289b7f60d1cd721d68cff783afc623c3f51cc2cf","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.22_1633984756019_0.9624450026485141","host":"s3://npm-registry-packages"}},"4.0.0-alpha.23":{"name":"@aofl/picture","version":"4.0.0-alpha.23","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.23","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"74d371cdd9bfd1fee68c741945f192469a504cd0","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.23.tgz","fileCount":11,"integrity":"sha512-YMkRr1QSW0Z+Bz/StDMCHhcOfq9DpTx9EY/sfw8a428idLr9LooS+3sbFtyImtloOJjp446pNUF3pu8eDhJR2A==","signatures":[{"sig":"MEYCIQC4S4B8S4/eTl2iZP+e5wVDLd11TWuehOn1/c4K+dTA+QIhANZxDN/DUZepeGexG14gPwbbFeLnLCUCEikww/h/gv+N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"a2829d023883e5cc51126ee549f70629ceae8e8d","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.23_1633986433473_0.18327686794286557","host":"s3://npm-registry-packages"}},"4.0.0-alpha.24":{"name":"@aofl/picture","version":"4.0.0-alpha.24","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.24","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"4be2b36f371022adad3689fa16dadc00d7837bfd","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.24.tgz","fileCount":11,"integrity":"sha512-DasCP7//JM+L0DB3mSZfAjgLhDLMGro++HByFT31QmbmtGLpcrZEVuab8MkhCoS1NB93RiOepZ0uV5z6UnsDQQ==","signatures":[{"sig":"MEUCIQCGOoynKRUdLJNkLsZFnmixyK3dTP1Qd+e5Xm/EXrETNQIgWv0iS7q0f+fCbHwrXnaI2DJWmpIqrSXT5jRLYpGnLR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"a2829d023883e5cc51126ee549f70629ceae8e8d","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.24_1633988803938_0.5387574269120277","host":"s3://npm-registry-packages"}},"4.0.0-alpha.25":{"name":"@aofl/picture","version":"4.0.0-alpha.25","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.25","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"8bfdba786903e4f8c9fec78ac5237ce880a889a1","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.25.tgz","fileCount":11,"integrity":"sha512-TUnH4VbmQpOXzKewo2ES+OMJ/wbMYhhVUvbo+Gd3XWwBbJfSN8jNJ6IpJUZoaVBvW9C4A5AHoYYrCSYdXH8ZMw==","signatures":[{"sig":"MEQCIGsyuNNrJJuMm4qqbvcvUIvnTCZ2Ec71RZ9DTsFbDOy0AiByUpSTLI8cTl23YnGw/rlw/URc/4ogCnXdyDc2+KbtZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"8e4d611be609be11acccb9135091aadd10134e8a","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.25_1634001638122_0.8251786818893478","host":"s3://npm-registry-packages"}},"4.0.0-alpha.26":{"name":"@aofl/picture","version":"4.0.0-alpha.26","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.26","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"0ee354bc0398fa6ee6bab9c693400b97d03760a3","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.26.tgz","fileCount":11,"integrity":"sha512-6PY0cfLvwLPT57/JQt5NWuuRKmGAFMLh5q2DXMOA+JUD9BZjFBpJJLMiXafB1D0tcCrW9DInC+/4kFnOgKN2pw==","signatures":[{"sig":"MEYCIQDYkd5LoX5NP68d9ojgns5YA7SeuA7au8lbk9nHYWX/mwIhAIU0oJlpGsC5W30vZgyLUQsU6Sus3KF924XapotN9RFF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"bdd06521b3653befa1b4c07318cc120a700672b2","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.26_1634002460105_0.34730236195478037","host":"s3://npm-registry-packages"}},"4.0.0-alpha.27":{"name":"@aofl/picture","version":"4.0.0-alpha.27","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.27","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"abfae20522f854c199d9c15a2968f4295ea60674","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.27.tgz","fileCount":11,"integrity":"sha512-qGk7TPQYJ6Puz4U3MLMahoqw0HO5rUuJBdp4N91sMw/tupkWj9QyPoOaB37I/GK6iqVJOzcKcW7CI2DvrCq0qw==","signatures":[{"sig":"MEUCIHSUWSm3CmxGMi8bDS2+A4iXK61fs1eaZXG3hofPNiDIAiEAx+gEgObHOn+cDGhU/kc+PIh/PnOppTyiFz0aZa43qow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"bc755f21b39459dc3a8b57ab25075a22313bc107","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.27_1634151980304_0.10816857670887736","host":"s3://npm-registry-packages"}},"4.0.0-alpha.28":{"name":"@aofl/picture","version":"4.0.0-alpha.28","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.28","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"6dc499393ec378601d9f8a0af15c59ab303b0e05","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.28.tgz","fileCount":11,"integrity":"sha512-LVyt6edUob084ENgl4/eG3cZ3Wz1UghkjNsjSyJCBXGtCOdnzMGLab09h0u1BndTq31LIuMO10Cu3QcWgclb9A==","signatures":[{"sig":"MEQCIExRe2/W0THlcGHSRUzPnUswjsEOtHXEDETb91lM21P3AiBhBvZKmgWjUNscnPV70pvErHXtsLid4UXE7ohcI2hAOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"7dceb248f691c3214f73ba1d048f26b2653bcac1","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.28_1634163492344_0.8459839372803857","host":"s3://npm-registry-packages"}},"4.0.0-alpha.29":{"name":"@aofl/picture","version":"4.0.0-alpha.29","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.29","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"e8f9770f1e92d88415331857e5e15d711c7ccd21","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.29.tgz","fileCount":11,"integrity":"sha512-OONXr/I+mkJuuyhCO3GkA7xqYQRFOCj9xnxVRaOzkegUi9HgPrsmg3RulikS1PyLLSk/OiVvKUg1faxLqniMrQ==","signatures":[{"sig":"MEUCIQCCO/GBkF9u/X8+4CHO34ZbFTWIAQjPbVf2exEbah/DRwIgGjReyNfs6kpIKo7MMwd9Qk48PZM24cJnKp93C0CPqiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.11","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.20.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.29_1634319346134_0.029577798154230894","host":"s3://npm-registry-packages"}},"4.0.0-alpha.30":{"name":"@aofl/picture","version":"4.0.0-alpha.30","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.30","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"ff53028bdac2b7b86c27e3c0d927a580ac75b928","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.30.tgz","fileCount":11,"integrity":"sha512-DREDTjodX4fMvYRvFVq2tDCy8YjvBBQePWM06QTUqEfg8SJsI5IBgYf6mz+IFivPGCiXSqHeLuBK+R03RCS37A==","signatures":[{"sig":"MEUCIEo1tW9vnC8XTyK1LtYXT5jlYjJalFYJdGYulUW5S+7fAiEAm6LgkTf/qtppL9LBd1rWB3T4MzOjg3G4BgesUNsqg2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"13ed83fe4429533b22fd669328dd6c8829dffec0","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.30_1634323852584_0.5182587040958828","host":"s3://npm-registry-packages"}},"4.0.0-alpha.31":{"name":"@aofl/picture","version":"4.0.0-alpha.31","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.31","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"c346a5c91ddbdeaf541790757af0b842fea273f7","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.31.tgz","fileCount":11,"integrity":"sha512-DWh3j/J/y0Hq06uci7AroJ1r8BLP0FXIjio6K3MeeiL2KLMs5GqlAvF/OQe/XEHyWildOKsPVDl17kn6W8RUvw==","signatures":[{"sig":"MEQCIDHCiwg+thb+zj7T6XKFstsBSaHjXOkO+I0OD2p8uguSAiApf7aVsysQBLEuR2SNPHieYeltgwWwt8N981JhiafCrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"5bc1713dfbc60e5029713b6ad88a4a9fd46d3413","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.31_1634324114572_0.6823791406174242","host":"s3://npm-registry-packages"}},"4.0.0-alpha.32":{"name":"@aofl/picture","version":"4.0.0-alpha.32","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.32","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"629f259aab9a747539ac5f48a64275bb6fa8bff4","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.32.tgz","fileCount":11,"integrity":"sha512-Bc+27worRGBLJCgReA6Rwyx5/nAov4iNtfwyTLyuPWYrVoU8Kzjf/MgZVHBe3UE4QlKQyM7NRZ8bMWukM8nrAg==","signatures":[{"sig":"MEUCIQDSM9BuDDKzdHVvF12t/8fwlVvgVvfbNxuAnmOCB4vhaAIgHZXHn02hfP4xhvuHy8E5D9sXIEcI1SD2od+iE8tUGnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"77786a7e5219aff408e59d051e8380ca1a63021d","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.32_1634326777218_0.8182754554049774","host":"s3://npm-registry-packages"}},"4.0.0-alpha.33":{"name":"@aofl/picture","version":"4.0.0-alpha.33","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.33","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"f25d3efc181e5ff6660b4aa762dac0769ccb6e51","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.33.tgz","fileCount":11,"integrity":"sha512-KUz2d0fZEiXjjUHv7zlujGC+Gqv0Mi+sm9e/IqGKb7EOTYTbHYMjowz7q6OoCwhoR+JVoUdVDVIax2whGJlAlA==","signatures":[{"sig":"MEUCIQC6Bm9kaYpeGFmB6iK9de2ef14Wk6zmFzrE2dWyTZiQkgIgBTwDT0wMxUY4iqQdLIyjs+a3BmQtCIBVUq91QdrDnDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"41b432602965620ce989f21e02748f53f69f7ea5","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.33_1634326977833_0.6765710625418593","host":"s3://npm-registry-packages"}},"4.0.0-alpha.34":{"name":"@aofl/picture","version":"4.0.0-alpha.34","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.34","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"4795718fd7b86b41ef4fb2756bb8b00f505364c8","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.34.tgz","fileCount":11,"integrity":"sha512-nswCk/8HSwaEcYunxMglIpaRTS2VCUgfHSPn4lVhl37oaPqcsYsTGniYMrOz/L/uZtbLQd2fLBSCwv9cP0xXdQ==","signatures":[{"sig":"MEUCIDIV8ot97uJBzpmScVKGJCjML9Xcf+bbZqDTPzPozpt7AiEAiM9o3LnqPQbHOD1Yb5R6+5ER/ad+h0BzR/nyJtf1DaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"1b993e65b04444692f40eaecfc3dfbb29d50d98b","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.34_1634327583274_0.26663725813456196","host":"s3://npm-registry-packages"}},"4.0.0-alpha.35":{"name":"@aofl/picture","version":"4.0.0-alpha.35","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.35","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"00f324e62f95033cb8b0426eb24d9f95025a2e23","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.35.tgz","fileCount":11,"integrity":"sha512-lcwg4fYCnzA28eTAyfXW3CFbefOWVxMr1m5cwqmQnZGs02Hql641KNYSPgyVlwINoFyxzmOgPxVgsSk8+0kSzA==","signatures":[{"sig":"MEUCIDuC5zZYiokJuWzc9h4c/btjAKPkkFyq0N2Pa2a8qt79AiEAnEzFCcVX4mVqcjABDz+Z2GPb6jJKXhZ+vsLGksfNYws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"5a6a7f303fc21acc73b55413f38f534ed4bfb714","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.35_1634328005199_0.8934797052674535","host":"s3://npm-registry-packages"}},"4.0.0-alpha.36":{"name":"@aofl/picture","version":"4.0.0-alpha.36","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.36","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"56433ae1ef42fd5922d7346ac727eab8857d3058","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.36.tgz","fileCount":11,"integrity":"sha512-aQ5Rll6XChQWtJ9pWuZKtnZyc/Wy2EniEUeRaxQJ44AC8pJ0WeYmu+SaRkXeSeQWFb3gkyY6kneQxz8zSz+UTg==","signatures":[{"sig":"MEQCIETq6D7Mx0qAlvmYB8BrwNhjSbuQ7Ae0zO8iO+6UQFxYAiBWJV1pK1FyhkjRywfuOlqHQlDM5wnohOELBIJ/DmBuhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"24aeaf86244b6f9f352b26d04fd9976f9430bfe7","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.36_1634328204951_0.1541909687202283","host":"s3://npm-registry-packages"}},"4.0.0-alpha.37":{"name":"@aofl/picture","version":"4.0.0-alpha.37","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.37","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"70ea226cb1f0f7c4d3c1cbd734adee43fd260b5f","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.37.tgz","fileCount":11,"integrity":"sha512-SujuH4tW8eeFe38xIo9g9GZOYeYLSHplqlzvEtkdO0Q0B6jWv/epXtSC4Ey6sKeu2mbDVRcu6/bugt2cCzXlCQ==","signatures":[{"sig":"MEUCIQDzv34wn8z3SP3Bay38Itp5fguaINnYsXS6HXh+fuRKYQIgVQ0Dh9v0KqaL5rar5DEwYirohdIsGUCmzLdEhwzN1yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"d5e9c5a7ef77e315b759fb5bee226aa3bd3aaffb","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.37_1634328379114_0.9591610818284766","host":"s3://npm-registry-packages"}},"4.0.0-alpha.38":{"name":"@aofl/picture","version":"4.0.0-alpha.38","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.38","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"d19c6cf1d49270784471c8f07724e288455cb07b","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.38.tgz","fileCount":11,"integrity":"sha512-912BFtjyxkJ5NXWNhc4IW7+gM6ypwpjrTwWXVsuGyyFo4l/mq/i05gLb+JRImy+1z0PzEyn/rK+KWv1I7sFdDw==","signatures":[{"sig":"MEQCIACC0KRCp60jSCFDLBW+YTyzGyF/Gmtqq57i2vjb9NshAiBQxByyTm6Y6RXeLbVI0Rq96pc6frPOBPL0Hg6AGKg9HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"91457836070b2b300b852a461787c56ec880a85d","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.38_1634330758344_0.21554835556587704","host":"s3://npm-registry-packages"}},"4.0.0-alpha.39":{"name":"@aofl/picture","version":"4.0.0-alpha.39","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.39","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"bb86aee7b275c27a7db317ae114468124ab9068f","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.39.tgz","fileCount":11,"integrity":"sha512-cYOEEisZn74W31uRl3eFWTzRHbSfXloUyRimuXa3Mi+9phiDlMALkbJBmzBoLaes7cVFvj140lo5z7Qla91xiQ==","signatures":[{"sig":"MEYCIQCUZA8VvrpuUJ2k3j1OdUgoLMMGd3UiWS2zGo2cogTW0wIhAKo48qi5EwFeeztSn2xFxj6Es/k/N++ftZZyRqzBHaYe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"f4c22e986eb7eb2e564e469dedb36c65858bf5cc","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.39_1634332196072_0.4218836777407762","host":"s3://npm-registry-packages"}},"4.0.0-alpha.40":{"name":"@aofl/picture","version":"4.0.0-alpha.40","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.40","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"92fd6aaa5a0d4c4605f0e7aa33df6ecf69552403","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.40.tgz","fileCount":11,"integrity":"sha512-FrmhJFuzGY4eS6v9qFx+XehPsTGjGqrlOlIo6otM5HFjS5VRCyxVgd68/KgJlsDq5s+BnQYnZEXUSibdDTq9SA==","signatures":[{"sig":"MEYCIQDmJA1CLQaZkRAR9GUYwN09ppbIguEjhT9fZyjbzsObmAIhANoOSLVforgZ9nk8OlKlYVbfXKzQfPD3CgLiECynV75S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"e93b1f585c2cd94383438abd74737a856ca68a77","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.40_1634332790546_0.0020898253872796424","host":"s3://npm-registry-packages"}},"4.0.0-alpha.41":{"name":"@aofl/picture","version":"4.0.0-alpha.41","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.41","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"881429845a00306d7e2d5efd1acc177081c414b4","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.41.tgz","fileCount":11,"integrity":"sha512-3kEyN74RT1XZDrZi5828hv9vcvJS2CE/MCtgWAjsKkE/mb8jo9FzHH3hFeD46qhZ8LMqE2w3DDBtPWLd0zC+rA==","signatures":[{"sig":"MEUCIQCc4KGsi3bPAbqPWjenqc8HiVHUpBvPyShUSC6/vxyfcQIgGgDA3OsD5Xoot+YwjUwJTS9k5VVI8lBPCEmk4oqXhjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"cbd55bfa3cf5e87bf7b5f27b3d9b6efb34e3ad85","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.41_1634582055327_0.8761572837107363","host":"s3://npm-registry-packages"}},"4.0.0-alpha.42":{"name":"@aofl/picture","version":"4.0.0-alpha.42","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.42","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"1db3c06aa2a5be4ed92bd5eef7f8ea6d2fee3b6c","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.42.tgz","fileCount":11,"integrity":"sha512-NWScUS16/n2+O+66sWj8QbsTAkNPt7MBmzPBCzn+p4emFhKMoidCWjTzHvZQZ5XVcRrm1+xBRwh9uU3Npd1AXg==","signatures":[{"sig":"MEUCIA3OBARFK/qeIM7pmvWwoO3INmqqS1QGWn/GnvNQ1+jqAiEA8yFVXo9D2GNrSlcpnQT9AsjzPk1WkOmnoBEb3ozzrkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"f64d10ec558694ce4c2d4e8b0562d4167f8e28d5","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.42_1634586022387_0.40872154180515574","host":"s3://npm-registry-packages"}},"4.0.0-alpha.43":{"name":"@aofl/picture","version":"4.0.0-alpha.43","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.43","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"09b0c3357baa324819c5d98cded6dc45198627a0","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.43.tgz","fileCount":11,"integrity":"sha512-rYWsu+6i1hgEn7klIRfM2hoZ/627mjp0DrPsuPVpEXt9h/Sfh1fHUmHxy+0Sl+6Yhp/kE+0lcJUh2FPKHVCb/Q==","signatures":[{"sig":"MEUCIFZPhw9okxciewhSaPJIMUZpsYY/pTLtvtAtb4JbkuIOAiEAnUYUz3ok0vecoO5/MRSPgKXWQ0yTZ16iYH2NHtd0YIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","gitHead":"6763365b38cb5be764e669a3b568be9f1cc4cfed","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"7.24.2","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.43_1634586278255_0.9773669632038955","host":"s3://npm-registry-packages"}},"4.0.0-alpha.44":{"name":"@aofl/picture","version":"4.0.0-alpha.44","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.44","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"e5b825ac00e4d1967ca1e505ec7bdf258ec52083","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.44.tgz","fileCount":11,"integrity":"sha512-NqZsevCPGLLBEtTXkGPuTT8km/hoEsh65wybnmPoR4LK89vWeCaCIw5KWwAV8mNPnhVySKWKtwINx+ekTYcKNA==","signatures":[{"sig":"MEYCIQDMIBosBTQ45zHNnpIdiGoc0i50wTN1LWm4X2RpnCOkmQIhAPKnoVG7svFb3sm6xi2dIgRHKzt5slkvCpjj8PIywENB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.11","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.20.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.44_1635874764229_0.7114225398008442","host":"s3://npm-registry-packages"}},"4.0.0-alpha.45":{"name":"@aofl/picture","version":"4.0.0-alpha.45","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@4.0.0-alpha.45","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"9f7858161fef90da1a432e88f5da34dcf160f282","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-4.0.0-alpha.45.tgz","fileCount":11,"integrity":"sha512-5ulzfWBvWuXRwqtF6X7yWvW3arbgoFwjVOXaOnq8/UtWEjQTve5s6Dj9jlCDEx/cXQaq5zI7fDkw4wHTNtzwKg==","signatures":[{"sig":"MEUCIQC0iEb+PwS2a3cZG4piY3tg9uwfdff1iQck8eVOYNy4NQIgBxurxpXWWy/4pvT42ZpE91wS/3ljnJOU7FU/1me9mWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44762},"main":"index.js","module":"index.js","readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","browser":"dist/index.js","typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"6.14.11","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.20.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jsdoc":"^3.6.6","lit-html":"^1.3.0","cross-env":"^7.0.3","tsd-jsdoc":"^2.5.0"},"peerDependencies":{"@aofl/element":"^4.0.0-alpha.9","@aofl/component-utils":"^4.0.0-alpha.9"},"_npmOperationalInternal":{"tmp":"tmp/picture_4.0.0-alpha.45_1635876942924_0.9204426607582266","host":"s3://npm-registry-packages"}},"3.14.0":{"name":"@aofl/picture","version":"3.14.0","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.14.0","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"1a0844273885b44e4f9be939fea65c9df7b068fd","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.14.0.tgz","fileCount":12,"integrity":"sha512-6nUyyDDsREJPZ8HNqk8zIPYJRepIouCBnnML90L7j+mwlv/RFhzZcvY0HjYysnnyU8hL6F3qHJnBRIW9+d/t+g==","signatures":[{"sig":"MEUCIBvD1CebzS6qZJVr37MnNOpFcCGimNuvEEdBBufhb39lAiEA1IVDJXh9fWfk5u7Pw6SmGdtoI82VGy30X2hlQ8UKspw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM8/eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnLA/+MEIB8arX1dthRKNcGnXBQPZUkBiS7UoCQOfBw7FyK/xbBBHB\r\nL4fj1BigYEtkEmpMR4zGSAKqBwTbxaBzDZk7SYpFiTa3GxbNVpAAQXZS8csl\r\nsDJtvFKFZzJtIUkqOkwo5ECuxk82Pv6HUVIPHR8uOtKDlWwDagg/hNqzb5On\r\nW93hTxe0sFrXBHHwPs7J2Rb1Z2i1EYN4jE8ojQvMMl7EbL5hBkIni7y98CNz\r\n0Zl4jRx5jMcV7utj31fI5ZoYL9wQNJdnn/8FhXbtCgAyUrHdTO6eFX5bC8+c\r\nxYUw+R3LcEI12EPt9oaw/CRlwtRFxZEoyA2ZStsNGCEVAwKBFd3scKCJhOnx\r\nabvARVjJdceGe8eHH9tJUQeuCqfKTGI034wcGT/IfMZ9H6LQiEkPRHoncGnA\r\ngOXcJX3+ANp0zos6SIPc/ICYivSb0MUabPP7SUuSJW5zfFzrmPkEeLY54/t6\r\nIeaTBef6vTQUBnmln7jUX3xazpxd/RV+GmW8yLJZvyii7DMXnvpEsvg0WiIr\r\n16rE0pGOQG9WGXE1h5eTUdd6lGXorTBFqNOVG4PAmc827aN52AEjB4axg/Z5\r\nR9+HEsw/QlP1l55LC7Z6TqPw8IzkMNSZandYK6ALbiK+46AJRDo91czqSqtc\r\n9u5zhJPe3d8uz2aNc86qNxYgjDGN8o6fVtM=\r\n=6o+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","gitHead":"01a200342c31c108d1ab1039ee4c972f2ee63fa9","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.20.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.14.0","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.14.0","@aofl/component-utils":"^3.14.0"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.14.0_1647562718835_0.6541333519562276","host":"s3://npm-registry-packages"}},"3.14.1":{"name":"@aofl/picture","version":"3.14.1","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","_id":"@aofl/picture@3.14.1","maintainers":[{"name":"alexdinari","email":"alexdinari@me.com"},{"name":"ariankhosravi","email":"arian@arin.io"}],"homepage":"https://ageoflearning.github.io/aofl/","bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"dist":{"shasum":"17d4182b8f066cfebf573c915918b5010cb78301","tarball":"https://registry.npmjs.org/@aofl/picture/-/picture-3.14.1.tgz","fileCount":12,"integrity":"sha512-DeM5q6rDxt0OxMC5PgJWWWZAbLGUqL9urxxhLjsVPQOEOEIzSlDLMtwooXTG1XgKAd8mpfRPpibMdq1odhijtQ==","signatures":[{"sig":"MEUCIQCWzV96QzUvKV4wnqAAYE2i3iTh65SB1Qajkw0UHPmh/AIgdHMLG1scGBgW287uppMdqtB3kvvvf3ELKvrR3oF2rVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM9bTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6IRAAl1zZdKppfUUGi03cUH1N9UZaQBzQWM4ejb9BKNGZk9hsaDwu\r\nXJ9iV0gaV/m0zNZFwvEQbpsQWm0RDiDW3lXFp8FveoAyRw/CZSxycUXO2H3y\r\nDV+HKlD0w3Kx/RaM3XSFTwnp6GkhNpgy/h6SK7+xYaILWCoTMU7Tx9LGNpqe\r\nFuZLiER7dVkfjVy8f87X7DduweiF2q5HD0dqnPfCsd/YdbApwpHbvZ925rde\r\ng5I0cho2lxy7jzCLCZa+cV/cjk+urzDN3+kGXtge5/0TNO9fOU15dihFeGMM\r\nbYXwCEOmjvKQFZdG8Sk1tDSoK4H+UjgY4ikiO12gOaFnD0y1bSRL0OMAmDn8\r\nmF76EAvDXll+77LblQLpzg0Qf+YVFeEthD4d+K7q6xdgzAd0EZtFnELDu1nl\r\nEV+JuMigtr7UTFzKlvyjci72rJ4hDtPor6asOpPYGHmCqHmiWUpOyvMPhqzH\r\nJqYgWu/ehT4K8FJx43MkEBJXSD/8pqruhJtbseKXi4HJLrZH/yd1WZcICDDh\r\naGcjGEMYAuLcEZNqQalPFii8eQd4JQmHC1YtYo1aiyrp4jb7JO39JbRlwWds\r\nAPAMEqT9OvXcmuCg07NDSRPgs7/Uulxxl/WcpPT9yxxLXna1New9xrn0N6lv\r\ncwCQ4tyXY0q8/b1nbxfD5ZX/46OdF4KaBUw=\r\n=wLp1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","module":"index.js","browser":"dist/index.js","gitHead":"65857163479f835ec51cc1e23ec01c45eab43008","scripts":{"docs":"npx jsdoc -c .jsdocrc.json .","test":"echo \"Error: no test specified\" && exit 1","build":"cross-env NODE_ENV=production npx aofl build","build-ci":"cross-env NODE_ENV=production aofl build --debug","build:dev":"cross-env NODE_ENV=development npx aofl build","prepublishOnly":"npm run build-ci && npm run docs"},"typings":"types.d.ts","_npmUser":{"name":"ariankhosravi","email":"arian@arin.io"},"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (darwin)","description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","directories":{},"_nodeVersion":"12.20.1","_hasShrinkwrap":false,"devDependencies":{"jsdoc":"^3.6.3","lit-html":"1.1.2","@aofl/cli":"^3.14.1","cross-env":"^6.0.3","tsd-jsdoc":"^2.4.0","@aofl/element":"^3.14.1","@aofl/component-utils":"^3.14.1"},"peerDependencies":{"@aofl/element":">= 3.0.0-beta.5 < 4.0.0","@aofl/component-utils":">= 3.0.0-beta.1 < 4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/picture_3.14.1_1647564499589_0.35872703255353455","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-10-06T09:02:05.157Z","modified":"2025-01-18T00:20:51.271Z","3.0.0-beta.3":"2019-10-06T09:02:05.336Z","3.0.0-beta.5":"2019-10-06T10:05:13.322Z","3.0.0-beta.6":"2019-10-08T04:49:44.769Z","3.0.0-beta.7":"2019-10-08T05:21:57.068Z","3.0.0-beta.8":"2019-10-08T05:48:17.926Z","3.0.0-beta.9":"2019-10-08T06:11:45.673Z","3.0.0-beta.11":"2019-10-08T09:42:55.345Z","3.0.0-beta.12":"2019-10-08T09:53:50.391Z","3.0.0-beta.13":"2019-10-09T04:13:28.694Z","3.0.0-beta.14":"2019-10-09T04:33:09.536Z","3.0.0-beta.15":"2019-10-09T04:50:48.101Z","3.0.0-beta.16":"2019-10-09T05:06:05.962Z","3.0.0-beta.17":"2019-10-09T05:25:04.371Z","3.0.0-beta.18":"2019-10-09T08:28:40.922Z","3.0.0-beta.19":"2019-10-10T07:55:09.366Z","3.0.0-beta.20":"2019-10-10T09:07:51.958Z","3.0.0-beta.21":"2019-10-10T09:32:09.614Z","3.0.0-beta.22":"2019-10-11T04:40:54.084Z","3.0.0-beta.23":"2019-10-11T05:40:00.993Z","3.0.0-beta.24":"2019-10-11T06:34:50.456Z","3.0.0-beta.25":"2019-10-11T07:34:52.320Z","3.0.0-beta.26":"2019-10-11T07:49:14.082Z","3.0.0-beta.27":"2019-10-11T07:54:06.441Z","3.0.0-beta.28":"2019-10-11T08:01:09.429Z","3.0.0-beta.30":"2019-10-11T22:58:48.818Z","3.0.0-beta.31":"2019-10-11T23:12:56.739Z","3.0.0-beta.32":"2019-10-14T01:07:48.352Z","3.0.0-beta.33":"2019-10-14T02:02:50.000Z","3.0.0-beta.34":"2019-10-14T07:37:04.243Z","3.0.0-beta.35":"2019-10-18T06:59:17.103Z","3.0.0-beta.36":"2019-10-19T10:45:57.817Z","3.0.0-beta.37":"2019-10-24T06:07:59.091Z","3.0.0-beta.38":"2019-10-30T22:52:28.252Z","3.0.0-beta.39":"2019-10-31T01:08:03.755Z","3.0.0-beta.40":"2019-11-11T22:31:23.502Z","3.0.0-beta.41":"2019-11-12T04:55:43.098Z","3.0.0-beta.42":"2019-11-12T05:53:50.712Z","3.0.0-beta.46":"2019-11-14T21:58:20.108Z","3.0.0-beta.47":"2019-11-15T00:48:53.763Z","3.0.0-beta.48":"2019-11-16T23:36:06.323Z","3.0.0-beta.49":"2019-11-17T03:38:01.159Z","3.0.0":"2019-11-17T07:06:14.905Z","3.1.0":"2019-11-22T03:28:18.982Z","3.2.0":"2019-11-24T07:35:03.768Z","3.2.1":"2019-11-24T08:03:55.270Z","3.2.2-alpha.2":"2020-01-14T20:28:05.335Z","3.2.2-alpha.3":"2020-01-14T21:13:29.177Z","3.3.0":"2020-01-22T23:31:42.593Z","3.4.0-alpha.0":"2020-01-27T23:40:55.613Z","3.4.0-alpha.1":"2020-01-27T23:52:45.173Z","3.4.0":"2020-01-28T00:02:02.119Z","3.5.0-beta.1":"2020-02-22T23:27:04.317Z","3.5.0-beta.2":"2020-02-22T23:53:10.563Z","3.5.0-beta.3":"2020-02-23T00:07:53.552Z","3.5.0-beta.4":"2020-02-23T01:58:01.642Z","3.5.0-beta.5":"2020-02-23T03:10:34.693Z","3.5.0-beta.6":"2020-02-23T03:18:17.658Z","3.5.0-beta.7":"2020-02-23T05:06:01.039Z","3.5.0-beta.8":"2020-02-23T05:09:13.156Z","3.5.0-beta.9":"2020-02-23T05:33:37.548Z","3.5.0-beta.10":"2020-02-23T05:50:59.996Z","3.5.0-beta.11":"2020-02-23T07:37:42.927Z","3.5.0-beta.12":"2020-02-23T09:00:40.000Z","3.5.0-beta.13":"2020-02-23T09:02:35.713Z","3.5.0-beta.14":"2020-02-23T10:00:39.110Z","3.5.0-beta.15":"2020-02-23T11:49:47.139Z","3.5.0-beta.16":"2020-02-23T11:59:24.331Z","3.5.0-beta.17":"2020-02-23T12:14:59.381Z","3.5.0-beta.18":"2020-02-25T04:00:05.021Z","3.5.0-beta.19":"2020-02-25T23:57:38.596Z","3.5.0-beta.20":"2020-03-02T23:23:13.009Z","3.5.0-beta.21":"2020-03-02T23:27:31.501Z","3.5.0-beta.22":"2020-03-02T23:42:43.487Z","3.5.0":"2020-03-03T00:03:36.757Z","3.7.0-alpha.0":"2020-03-09T21:39:12.539Z","3.6.1":"2020-03-10T18:43:24.617Z","3.7.0":"2020-03-13T18:49:40.369Z","3.7.1-alpha.0":"2020-04-20T05:47:00.609Z","3.8.0":"2020-05-12T19:19:56.342Z","3.9.0-alpha.0":"2020-05-12T19:30:31.788Z","3.8.1":"2020-05-12T19:41:22.466Z","3.9.0":"2020-05-15T17:58:41.777Z","3.10.0":"2020-05-15T21:16:00.063Z","3.12.0":"2021-01-20T00:02:19.084Z","3.12.1":"2021-01-20T00:13:16.008Z","4.0.0-alpha.9":"2021-02-03T01:48:37.541Z","4.0.0-alpha.10":"2021-02-03T01:56:46.499Z","4.0.0-alpha.11":"2021-02-03T02:24:46.149Z","3.13.0":"2021-02-25T23:44:02.134Z","3.13.1":"2021-06-15T23:49:11.690Z","4.0.0-alpha.13":"2021-09-23T23:32:31.486Z","4.0.0-alpha.15":"2021-10-06T17:04:01.335Z","4.0.0-alpha.16":"2021-10-06T17:05:16.422Z","4.0.0-alpha.17":"2021-10-06T18:47:39.774Z","4.0.0-alpha.18":"2021-10-06T23:40:42.126Z","4.0.0-alpha.19":"2021-10-06T23:47:38.501Z","4.0.0-alpha.20":"2021-10-06T23:55:05.547Z","4.0.0-alpha.21":"2021-10-08T17:06:12.062Z","4.0.0-alpha.22":"2021-10-11T20:39:16.432Z","4.0.0-alpha.23":"2021-10-11T21:07:13.646Z","4.0.0-alpha.24":"2021-10-11T21:46:44.048Z","4.0.0-alpha.25":"2021-10-12T01:20:38.289Z","4.0.0-alpha.26":"2021-10-12T01:34:20.255Z","4.0.0-alpha.27":"2021-10-13T19:06:20.467Z","4.0.0-alpha.28":"2021-10-13T22:18:12.501Z","4.0.0-alpha.29":"2021-10-15T17:35:46.286Z","4.0.0-alpha.30":"2021-10-15T18:50:52.766Z","4.0.0-alpha.31":"2021-10-15T18:55:15.073Z","4.0.0-alpha.32":"2021-10-15T19:39:37.382Z","4.0.0-alpha.33":"2021-10-15T19:42:57.968Z","4.0.0-alpha.34":"2021-10-15T19:53:03.429Z","4.0.0-alpha.35":"2021-10-15T20:00:05.361Z","4.0.0-alpha.36":"2021-10-15T20:03:25.137Z","4.0.0-alpha.37":"2021-10-15T20:06:19.444Z","4.0.0-alpha.38":"2021-10-15T20:45:58.483Z","4.0.0-alpha.39":"2021-10-15T21:09:56.248Z","4.0.0-alpha.40":"2021-10-15T21:19:50.726Z","4.0.0-alpha.41":"2021-10-18T18:34:15.489Z","4.0.0-alpha.42":"2021-10-18T19:40:22.493Z","4.0.0-alpha.43":"2021-10-18T19:44:38.435Z","4.0.0-alpha.44":"2021-11-02T17:39:24.449Z","4.0.0-alpha.45":"2021-11-02T18:15:43.181Z","3.14.0":"2022-03-18T00:18:38.973Z","3.14.1":"2022-03-18T00:48:19.724Z"},"bugs":{"url":"https://github.com/AgeOfLearning/aofl/issues"},"author":{"name":"Arian Khosravi","email":"arian.khosravi@aofl.com"},"license":"MIT","homepage":"https://ageoflearning.github.io/aofl/","keywords":["@aofl/element","WebComponents","CustomElement","responsive","picture","media query","image","source","lazy load"],"repository":{"url":"git+ssh://git@github.com/AgeOfLearning/aofl.git","type":"git"},"description":"`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` ele","maintainers":[{"email":"alexdinari@me.com","name":"alexdinari"},{"email":"lorenzo.battigelli@aofl.com","name":"lorenzo.battigelli"},{"email":"alex.dinari@aofl.com","name":"alex.dinari"},{"email":"it@aofl.com","name":"ageoflearning"},{"email":"jie.zhang@aofl.com","name":"jiezhangaofl"}],"readme":"# @aofl/picture\n\n`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element.\n\n[Api Documentation](https://ageoflearning.github.io/aofl/v3.x/api-docs/module-@aofl_picture.html)\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Installation\n```bash\nnpm i -S @aofl/picture\n```\n\n## <aofl-picture>\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 320px)\" srcset=\"https://via.placeholder.com/300x150\" width=\"300\" height=\"150\"></aofl-source>\n  <aofl-source media=\"(max-width: 500px)\" srcset=\"https://via.placeholder.com/500x250\" width=\"500\" height=\"250\"></aofl-source>\n  <aofl-source media=\"(max-width: 700px)\" srcset=\"https://via.placeholder.com/700x350\" width=\"700\" height=\"350\"></aofl-source>\n  <aofl-img src=\"https://via.placeholder.com/1000x500\" width=\"1000\" height=\"500\"></aofl-img>\n</aofl-picture>\n```\n\n## Attributes\n| Attributes      | Type    | Default | Description                                                                                                                                                              |\n|-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| disable-sources | Boolean | false   | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |\n\n\n## <aofl-img>\n`<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js\n* https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-img src=\"path/to/image\" width=\"100\" height=\"100\" alt=\"image description\"></aofl-img>\n```\n\n## attributes\n\n| Attributes | Type   | Default   | Description                                           |\n|------------|--------|-----------|-------------------------------------------------------|\n| src        | String | undefined | Image url                                             |\n| width      | Number | undefined | Width of image in pixels.                             |\n| Height     | Number | undefined | Height of image in pixels.                            |\n| alt        | String | undefined | Defines an alternative text description of the image. |\n\n\n## <aofl-source>\n\nAoflSource component must be used as a child of aofl-picture and specifies images for different media queries.\n\n## Examples\n* https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js\n\n## Usage\n```html\n<aofl-picture>\n  <aofl-source media=\"(max-width: 480px)\" srcset=\"path/to/image-480\"></aofl-source>\n  <aofl-source media=\"(max-width: 640px)\" srcset=\"path/to/image-640\"></aofl-source>\n  <aofl-source media=\"(max-width: 1024px)\" srcset=\"path/to/image-1024\"></aofl-source>\n\n  <aofl-img src=\"path/to/image\" width=\"\" height=\"\"></aofl-img>\n</aofl-picture>\n\n```\n\n## attributes\n\n| Attributes | Type   | Default | Description                                             |\n|------------|--------|---------|---------------------------------------------------------|\n| media      | String |         | media query specifying when aofl-source becomes active. |\n| srcset     | String |         | Url of the image.                                       |\n","readmeFilename":"README.md"}