{"_id":"@codebaer/ngx-responsive-element","_rev":"1-0d0e43caa5d82f35df32a052168d7b03","name":"@codebaer/ngx-responsive-element","dist-tags":{"latest":"11.0.0"},"versions":{"11.0.0":{"name":"@codebaer/ngx-responsive-element","version":"11.0.0","description":"Directive that adds responsive functionality to any element. Adds custom css classes for provided element widths to facilitate styling elements for different screen sizes.","author":{"name":"René Galle"},"repository":{"type":"git","url":"git+https://github.com/Argee88/codebaer.git"},"bugs":{"url":"https://github.com/Argee88/codebaer/issues"},"keywords":["angular","javascript","typescript","directive","responsive","elements","element"],"license":"MIT","peerDependencies":{"@angular/common":"^11.0.9","@angular/core":"^11.0.9"},"dependencies":{"tslib":"^2.0.0","@angular/platform-browser":"^11.0.0"},"main":"bundles/codebaer-ngx-responsive-element.umd.js","module":"fesm2015/codebaer-ngx-responsive-element.js","es2015":"fesm2015/codebaer-ngx-responsive-element.js","esm2015":"esm2015/codebaer-ngx-responsive-element.js","fesm2015":"fesm2015/codebaer-ngx-responsive-element.js","typings":"codebaer-ngx-responsive-element.d.ts","metadata":"codebaer-ngx-responsive-element.metadata.json","sideEffects":false,"homepage":"https://github.com/Argee88/codebaer#readme","_id":"@codebaer/ngx-responsive-element@11.0.0","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-PoID/tM6jAIE6ZnQkhc5fCa89FP6KDngLIEOLjK3yWMTS16wB7MZ1eWFBW+yJkPg9LeiQOd2IQnYV+PCBQilPw==","shasum":"a27c5ba5a30da5e0caff6c92adc924367aad8913","tarball":"https://registry.npmjs.org/@codebaer/ngx-responsive-element/-/ngx-responsive-element-11.0.0.tgz","fileCount":33,"unpackedSize":37275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGv5tCRA9TVsSAnZWagAAAdYQAJgCslHRQg2jVIFW1Np8\nu+EITnSvYp3T4qexiigqCg7KNbQw8JVxHlmKwZx9aFzEOIMdo+JiV5ghMU7M\neBxXvLMoZQd8ukHD1afU0D4b8m/x20SrGJLWCr+r2u7c16qfxgQWmVBNKypL\n9yIx5uECTVR5MQQ1Rr5KHIjs91DfxJ8y4FzjClls/8kKopC4eNcFo/gv+Rrw\nln9xtUqodSQnp1i61MPKgEqTHPBg+f1wQINDVOCLW6yc87HVTBd/pUCuoDXl\nsIWATTtQXkzGWeCl1Mjlr38x6dDHu3cZl4HbA4ockIkKMNQ8BMn8Dx/IbLXK\nVpynNsXvgs8yeEbu9IrdNctoykzVO8VVdkDoKFA4LQUsxDs1ufb7OnJwF0rC\nViWTOX+U/SUKQcgI2ZQC4upJqrcm1ntkgnOsvCbOuzHW2KLJsmbQaBriqeKZ\nh/jgETNVKBpOuescjn3Iw6O5Ev5RHHrqxPrd3A9q3eJsqSeFl574T6jmVlxX\ny11aqnj1adIUsGVD0HPvObQ4M2Wd63xjy+TdQch/dv2h4Q/OQEx8pDTLNP7a\nVZ+2Qhk1Oa44DYyO59GH902ebP6CMNmjtadE2Etm9iNz47ObQ4Jr9b/Tg7mS\nkhuR+9sdlQXh6BZLxKnZ1jAO13deQaCBaQwqQ8Q1MeXucvhI5RAhoSocvRvn\n0IYf\r\n=eA7U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9nzIH+wlzjJLaLZRuQDd0tMMIzB8eP0EMPlK/q66S2AiBtImOPNurQY2JU2Rvg/aINqCRIrr/yLG/t+QbXZOgetg=="}]},"_npmUser":{"name":"codebaer","email":"renegalle88@gmail.com"},"directories":{},"maintainers":[{"name":"codebaer","email":"renegalle88@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-responsive-element_11.0.0_1612381804556_0.595092646918673"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-03T19:50:04.498Z","11.0.0":"2021-02-03T19:50:04.688Z","modified":"2022-04-04T23:58:51.264Z"},"maintainers":[{"name":"codebaer","email":"renegalle88@gmail.com"}],"description":"Directive that adds responsive functionality to any element. Adds custom css classes for provided element widths to facilitate styling elements for different screen sizes.","homepage":"https://github.com/Argee88/codebaer#readme","keywords":["angular","javascript","typescript","directive","responsive","elements","element"],"repository":{"type":"git","url":"git+https://github.com/Argee88/codebaer.git"},"author":{"name":"René Galle"},"bugs":{"url":"https://github.com/Argee88/codebaer/issues"},"license":"MIT","readme":"# NgxResponsiveElement\n\n## Install\n\n```\nnpm i -S @codebaer/ngx-responsive-element\n```\n\n## Include\n\nImport the module via\n\n```\nimport { NgxResponsiveElementModule } from '@codebaer/ngx-responsive-element';\n```\n\nand add NgxResponsiveElementModule to your module's imports\n\n```javascript\n@NgModule({\n    imports: [..., NgxResponsiveElementModule],\n})\nexport class YourModule {}\n```\n\n## Use directive\n\nYou can use the directive on any element you want.\n\n### sizeMap\n\nDefine a sizeMap object. The key is the lowest pixel value of the element's\nwidth and the value is the css class that should get applied.\n\nExample:\n\n```javascript\nconst sizeMap = { 300: 'small', 500: 'medium', 700: 'large' };\n```\n\n```html\n<div cbNgxResponsiveElement [sizeMap]=\"sizeMap\"></div>\n```\n\nFrom 300px element's width to 499px the class 'small' will be applied. From\n500px element's width to 699px the class 'medium' will be applied. From 700px\nelement's width onwards the class 'large' will be applied.\n\nFor widths lower than 300px, the defaultCssClass will be applied.\n\n### defaultCssClass\n\nDefine the css class your element should have when the element's size is smaller\nthan the smallest key in your sizeMap.\n\nIf you don't set the defaultCssClass, it defaults to 'default'.\n\nExample:\n\n```javascript\nconst defaultCssClass = 'test';\n```\n\n```html\n<div cbNgxResponsiveElement [defaultCssClass]=\"defaultCssClass\"></div>\n```\n","readmeFilename":"README.md"}