{"_id":"@access-europe/ngx-css-element-queries","_rev":"3-96a8dc67f98f6cdf70e162ec3bdb1998","name":"@access-europe/ngx-css-element-queries","dist-tags":{"latest":"1.2.1-ngx"},"versions":{"1.2.1":{"name":"@access-europe/ngx-css-element-queries","version":"1.2.1","description":"CSS-Element-Queries Polyfill. Proof-of-concept for high-speed element dimension/media queries in valid css.","main":"index.js","typings":"ngx-css-element-queries.d.ts","directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Marc J. Schmidt"},"license":"MIT","homepage":"https://github.com/access-europe/ngx-css-element-queries","devDependencies":{"grunt":"^0.4.5","grunt-bump":"^0.3.1"},"gitHead":"1503df327dde196dae20133dcc33b3a71b327d0f","_id":"@access-europe/ngx-css-element-queries@1.2.1","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-udjmWqslwVaXa8hWjcyuViQLu/flH4ZYkkQQFu1NnOofWAZ3uj76uB01m4J+L2IhReDyYScUN5wui37PN4QvZQ==","shasum":"2a194687fc199e3072cb8040ffe3fa8083c93d2f","tarball":"https://registry.npmjs.org/@access-europe/ngx-css-element-queries/-/ngx-css-element-queries-1.2.1.tgz","fileCount":12,"unpackedSize":40777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzBXrCRA9TVsSAnZWagAAitUP/31uNYsMAMeXBh5hKQmI\nOusXVLsYpeiKL/OuaBzVdkiZVlLvBjr6cUptwUhnAkCtwXPOLmNvjNE8wEWi\nKlVuVdKNEamDHYZXqNhW3j9XBPuSt41JmEp6a7UXVrz0PSo75d26TU2wQXHj\ncZNML8nmEsh4bI4PwHW44cpeoX05WCCqSFc9/lpl2y9gX9AlIoWzRxYx1q5x\n60uP/AolFQOFlkPUomS3H5/r0GizNugq/dtkHOH8wxNCD5uLC4DMEBJshDS+\nWRsl1pfbpQvUUQe/InKeSluK9fzeNONC8mzIR09L5kr9FTJYpFLAeEUtqr/v\nAgzs2zZ8kg1ULrZyzUf7VPQK9ZlolqiEvdWspXgPcxY6OTwfhnOJAQ2gu7H4\n0wfS5gcbJ94XyIrd6mlzDZqzNoXEPbOeq2UvGm1LbJkG5BvIjLVxtGyJSZS4\n0rnFPuHf1V1rp1PIlSYnP+7saLkFBQyd67jTc2Ifm/29ZO4wPm+6SKt5shvP\njzW7Cs8PPJGvJ4r4+PxfbYGd4NDNqlYSovQg/IGLxAphW7FkwrM9G3Vwj1tp\nZKnYgrJRXXB5lN0HKtsPOwI7UbmlpIt6Z5LV1TPFLe+DJNd8AviYwI8IDRFH\nYd9M2cynCFijnZ2KDtLge1IRg/I8zr/oO+aQ24NHNnnMRIlhhfA40lPbdSxC\naaQM\r\n=Onz1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdqj8KxMbIWIPWeIgY8YEb7SCOWsqsHwwj0XPYWHsPtAiBHBzyM6KiWV+818lqJ2JxVod33wBkWcXXEeVTKZpRjMg=="}]},"maintainers":[{"name":"pchojnacki","email":"piotr.chojnacki@access-company.com"},{"name":"filipryuuto","email":"filip.malinowski@access-company.com"}],"_npmUser":{"name":"pchojnacki","email":"piotr.chojnacki@access-company.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-css-element-queries_1.2.1_1573656043010_0.41985380785380944"},"_hasShrinkwrap":false},"1.2.1-ngx":{"name":"@access-europe/ngx-css-element-queries","version":"1.2.1-ngx","description":"CSS-Element-Queries Polyfill for Angular. Proof-of-concept for high-speed element dimension/media queries in valid css.","main":"index.js","typings":"ngx-css-element-queries.d.ts","directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Piotr Chojnacki"},"license":"MIT","homepage":"https://github.com/access-europe/ngx-css-element-queries","devDependencies":{"grunt":"^0.4.5","grunt-bump":"^0.3.1"},"gitHead":"c052c193d9ac36ac9257c2f44ddcdd78a2336631","_id":"@access-europe/ngx-css-element-queries@1.2.1-ngx","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-exK1kLD5CI/nkoSNfQeZTZ8+t/I2JGnvtsmDqlD4R6fOlu1r7UNZ5vegWG07Oc31FdHNkt/8VvdiHn88aFwztQ==","shasum":"9e7f1a4cdeff81cc1a0521cb8c28ce7f27d57c2c","tarball":"https://registry.npmjs.org/@access-europe/ngx-css-element-queries/-/ngx-css-element-queries-1.2.1-ngx.tgz","fileCount":13,"unpackedSize":41889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzRh4CRA9TVsSAnZWagAAaZAP/jDL24btEICpdmrqZpdh\nBObDh5RsWxyMkkhmtINnLKgoNxLBpVVoUuzWXdl8uqbTvOXwuHuUrnjZUA4g\n6cSZLF/npCOlSieuSjEd6hIUP3FJeno8B8cFSrZ0Zm39E8zNT9496m4orHBe\nKpTsEcPNVeyb9IB24ZFi6WsMyfLJFYFqTwGRFCokUtFYvaTwrVAiwNNio6wd\n85Bpgou8iCgFaejgJMn48dwrxq17KdUc7oDFMoJY0ej0GkKq1uqiQRyvRVG1\n9F+SYr6roe35eVBmPvU80WnuU+/sEpF/HIO7K5tmNPeYtsHDV3muRCfhBNac\nPehCs48hJSeAeCWVTOMhJ3OUSJB8lPiDDIlYSrWxi19SjwljUMCvbCdrxK66\nl4FV2BFkSTfudrGugXrVn9o/Dsz6/S2rw7iZk9fvb0iMt1J2t5d1QYHqhEYt\nx0/yod9d3VvfbjudYSob7lKk43TSoyDQOwoi5QOW1H+HJYoNVB2PJP7He58V\n7gRtX3+apiUtF2lrq2wxd8C9qe8qphsOrhUZj70yPMWdhmgp9j3NtBPtXd5n\njJjnznpQX3cKywEiO17jCGEgD9MImIL/nrQZJZqZFj1D0Q2KnT3CINMp5lhM\naIekihkhAjhYsPv6YEmgj9eJ2WzXscjjuI/cCjSccJT6f5pcROurLQMoIKYU\npGdB\r\n=dgRm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNeDyNvH48zoaG5INJb+hz7frH2k2lLFKDQuVvu26yKAIhALnQzAoOPLCpwRRVjX3KbY5fu9/fy0HEi4oE3hvDQXL9"}]},"maintainers":[{"name":"filipryuuto","email":"filip.malinowski@access-company.com"},{"name":"pchojnacki","email":"piotr.chojnacki@access-company.com"}],"_npmUser":{"name":"pchojnacki","email":"piotr.chojnacki@access-company.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-css-element-queries_1.2.1-ngx_1573722231833_0.6823396964287318"},"_hasShrinkwrap":false}},"time":{"created":"2019-11-13T14:40:42.778Z","1.2.1":"2019-11-13T14:40:43.139Z","modified":"2022-04-04T11:06:58.704Z","1.2.1-ngx":"2019-11-14T09:03:52.114Z"},"maintainers":[{"email":"akbar.syed@access-company.com","name":"akbar.syed"},{"email":"piotr.chojnacki@access-company.com","name":"pchojnacki"},{"email":"filip.malinowski@access-company.com","name":"filipryuuto"}],"description":"CSS-Element-Queries Polyfill for Angular. Proof-of-concept for high-speed element dimension/media queries in valid css.","homepage":"https://github.com/access-europe/ngx-css-element-queries","author":{"name":"Piotr Chojnacki"},"license":"MIT","readme":"# CSS Element Queries\n\nThis is a fork of library created by Marc J. Schmidt (link to original library: http://marcj.github.io/css-element-queries/) which is suitable for applications using View Encapsulation feature. Current implementation allows to call init() function multiple times without duplicating style rulesets every single time.\n\nElement Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+).\nIt allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported)\nsize while not causing performance lags due to event based implementation.\n\nIt's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.\n\nFeatures:\n\n - no performance issues since it listens only on size changes of elements that have element query rules defined through css. Other element query polifills only listen on `window.onresize` which causes performance issues and allows only to detect changes via window.resize event and not inside layout changes like css3 animation, :hover, DOM changes etc.\n - no interval/timeout detection. Truly event-based through integrated ResizeSensor class.\n - automatically discovers new DOM elements. No need to call javascript manually.\n - no CSS modifications. Valid CSS Syntax\n - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML/JS.\n - supports and tested in webkit, gecko and IE(10+)\n - `min-width`, `min-height`, `max-width` and `max-height` are supported so far\n - works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more\n - no Javascript-Framework dependency (works with jQuery, Mootools, etc.)\n - Works beautiful for responsive images without FOUC\n\nMore demos and information: http://marcj.github.io/css-element-queries/\n\n## Examples\n\n### Element Query\n\n```css\n.widget-name h2 {\n    font-size: 12px;\n}\n\n.widget-name[min-width~=\"400px\"] h2 {\n    font-size: 18px;\n}\n\n.widget-name[min-width~=\"600px\"] h2 {\n    padding: 55px;\n    text-align: center;\n    font-size: 24px;\n}\n\n.widget-name[min-width~=\"700px\"] h2 {\n    font-size: 34px;\n    color: red;\n}\n```\n\nAs you can see we use the `~=` [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).\nSince this css-element-queries polyfill adds new element attributes on the DOM element\n(`<div class=\"widget-name\" min-width=\"400px 700px\"></div>`) depending on your actual CSS and element's dimension,\nyou should always use this attribute selector (especially if you have several element query rules on the same element).\n\n```html\n<div class=\"widget-name\">\n   <h2>Element responsiveness FTW!</h2>\n</div>\n```\n\n### Responsive image\n\n```html\n    <div data-responsive-image>\n        <img data-src=\"http://placehold.it/350x150\"/>\n        <img min-width=\"350\" data-src=\"http://placehold.it/700x300\"/>\n        <img min-width=\"700\" data-src=\"http://placehold.it/1400x600\"/>\n    </div>\n```\n\nInclude the javascript files at the bottom and you're good to go. No custom javascript calls needed.\n\n```html\n<script src=\"src/ResizeSensor.js\"></script>\n<script src=\"src/ElementQueries.js\"></script>\n```\n\n## See it in action:\n\nHere live http://marcj.github.io/css-element-queries/.\n\n![Demo](http://marcj.github.io/css-element-queries/images/css-element-queries-demo.gif)\n\n\n## Module Loader\n\nIf you're using a module loader you need to trigger the event listening or initialization yourself:\n\n```javascript\nvar ElementQueries = require('css-element-queries/src/ElementQueries');\n\n //attaches to DOMLoadContent\nElementQueries.listen();\n\n//or if you want to trigger it yourself.\n// Parse all available CSS and attach ResizeSensor to those elements which have rules attached\n// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.\nElementQueries.init();\n```\n\n## Issues\n\n - So far does not work on `img` and other elements that can't contain other elements. Wrapping with a `div` works fine though (See demo).\n - Adds additional hidden elements into selected target element and forces target element to be relative or absolute.\n - Local stylesheets do not work (using `file://` protocol).\n - If you have rules on an element that has a css animation, also add `element-queries`. E.g. `.widget-name { animation: 2sec my-animation, 1s element-queries;}`. We use this to detect new added DOM elements automatically.\n\n## License\n\nMIT license. Copyright [Marc J. Schmidt](https://twitter.com/MarcJSchmidt).\n","readmeFilename":"README.md"}