{"_id":"@dannymoerkerke/custom-element","_rev":"4-ce717b3136f3a75141536bbd1534fa5e","name":"@dannymoerkerke/custom-element","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@dannymoerkerke/custom-element","version":"0.0.1","description":"Web Components base class which provides data binding and convenience methods","main":"src/custom-element.js","scripts":{"start":"ws -p 8080 --spa demo/index.html","test":"ws -p 8080 --spa test/index.html","test:headless":"concurrently \"npm test\" \"sleep 1 && mocha-headless-chrome -f http://localhost:8080/\""},"author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/custom-element.git"},"homepage":"https://github.com/DannyMoerkerke/custom-element","publishConfig":{"access":"public"},"directories":{"test":"test"},"license":"ISC","devDependencies":{"chai":"^4.2.0","concurrently":"^4.1.0","local-web-server":"^2.6.1","mocha":"^6.1.2","mocha-headless-chrome":"^2.0.2","sinon":"^7.3.1"},"gitHead":"6d27fa11164af7b7305a1e51c74f8f288e9c574c","bugs":{"url":"https://github.com/DannyMoerkerke/custom-element/issues"},"_id":"@dannymoerkerke/custom-element@0.0.1","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-95xm0jm9cHWDFO09u7Y/v2WcfAv1FXzSVBA3FD5PtfFWAGBI01yPX+n3L6ZQAjK2CutXIb7QnttEtJpHA5bbBA==","shasum":"baf2de80e9b6b3b8f63d35ad1b52a771ec7bd44b","tarball":"https://registry.npmjs.org/@dannymoerkerke/custom-element/-/custom-element-0.0.1.tgz","fileCount":4,"unpackedSize":6468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWwZzCRA9TVsSAnZWagAAq3QQAIVQl9OY28SZEj4Phojm\njLqS3cu30a9rvi7WL2mhzbw9EsIv3UjbGf12nK22uckpdMZU7vFceGutuQuk\n1gVVqz/vIaFa/YObD0R7xkrAJaoqpicAQzgDPHhQDnBuiSeb0RghR7w9altU\n/vkuLp8j3b05SpcnJ4PtJuKbrmvy01VIbdB2UChu7YCXTG6m2rOOhC4BE6ej\nxgaNfimyAXaxwSR9OYXLnKp6mI/IQu3HQvoA9/yXQlcGi6Ralv8A5hWRw9OE\nseywIH30W0Rtm+VHKMyY2tKb1kr0RAw/jOUFNpNnjUsLgkVtSbejuoaaCToz\nJ04fJjaJ3ebOb9fG6IDFmXHAj2DEiVImBFsOlRrv7grqbjGWIn84upE3OxLQ\nADgBVX31iqbtMELqtJacvI0kZia32c0zeQVPPDKtMbBtQHvgP8vIl6YCPm5k\nfZUGIjFn7z1mztJqrDynvN+lkLQbLBtz60alCR2QXeFJRbobjoD3KzKWKMxS\nAo6XIuOxJa3I4k9MATdvTP5eXhoivaiOW9P+x2ScdNptE2adIvE4wDM/3PiC\nvK37X19s8S74w9ckh8uZDsxi7UDfN/QF8Fy4rxo3zXMTSXMBfhJT1L0Eqzj1\nLikHC6GzdK0IAIk9PJcPeGY4FIv3q4sWgq2pQq5SuMsGKwCkLPpCzGqouLjD\niq7v\r\n=G59d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj12mE5YqXb8nA59YRJD9VNtlsHplAwkpU774n655V4AIgbfrKtEdvuUgHqYDNiGRMZuOlyMhG27CpTpITQXIP6us="}]},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"_npmUser":{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/custom-element_0.0.1_1566246514601_0.6357182697520505"},"_hasShrinkwrap":false},"0.0.2":{"name":"@dannymoerkerke/custom-element","version":"0.0.2","description":"Web Components base class which provides data binding and convenience methods","main":"src/custom-element.js","scripts":{"start":"ws -p 8080 --spa demo/index.html","test":"ws -p 8080 --spa test/index.html","test:headless":"concurrently \"npm test\" \"sleep 1 && mocha-headless-chrome -f http://localhost:8080/\""},"author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/custom-element.git"},"homepage":"https://github.com/DannyMoerkerke/custom-element","publishConfig":{"access":"public"},"directories":{"test":"test"},"license":"ISC","devDependencies":{"chai":"^4.2.0","concurrently":"^4.1.0","local-web-server":"^2.6.1","mocha":"^6.2.0","mocha-headless-chrome":"^2.0.3","sinon":"^7.3.1"},"gitHead":"d893ea2d89a3d498d843d757736e09e93da4705f","bugs":{"url":"https://github.com/DannyMoerkerke/custom-element/issues"},"_id":"@dannymoerkerke/custom-element@0.0.2","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-iDh8yjBM9jG5pcr1gBjBhhOGb16CzjYPnm2432XSEtDFEP3ICBtCA9cE5+H1S4ma1L+Rw0eWWbl27hYsf/bEdg==","shasum":"dafa794c6ba51155f34ae975b5724597d868ada6","tarball":"https://registry.npmjs.org/@dannymoerkerke/custom-element/-/custom-element-0.0.2.tgz","fileCount":5,"unpackedSize":6841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWwocCRA9TVsSAnZWagAAFqkP/irfMZA7oEribBPVBenx\nRTBDqW7AZzfzHicREMKbieauVZ7s2/pt8ELP5ZjYKsACre51kLMzmZ8ELP/T\nrkvDkb5BCZBk8cjDyCY9Yml1G809Uif8UQP8kJTWQ+OSLGAgPiebzBhUwdAj\n6Iy3SMpS8+dub1P1Thlv7/XP7KNc+4O3zGy0j4rN8/oHHVlDTgQ/WdHqhLBE\nFq/0YMN2wpDFQQdosDpWGNf72CuaSPSHpIkQaxsNLnkSefooymrgerw3c2cc\n8v8DtiAB2qoc55OILbATw5P375GPJc/zHyXIIaWGjRlr2smX5bOQqEHTYG+l\n9G+MVH5FKgvic1qUZNFF5Ksr6hPFRWiJfa4QpBiUMggWJ1SDNr8VKWEp8DtQ\nA1vIvjn8mHrWOtuvzmqtBxCgO1JG2pUF3LUrXdteY53BI6+K1PUfmMhBIl1j\nYJJw7Twb+hlnLFndh8Ri3BbQAIe0bqxqKiuCt+IPtgHayUE7t914/IFig+fa\nZRJArXiIpyEtTgaihDKYfXUHKdPwQmJ89NIjT46sqPDiuryQNhIxhHcIsfn/\n06nFS7YjWCvzp/YLZIVNMNSCQzKMsbvEVeCmaPtFmLq2UbRtYYVgAdnwbzvE\nImEaaChUxeQXgHavX9QPUhtzAqOn5agpIPm6ZCcbvJp8CI3eoxl9jDgvRmJv\n9A3f\r\n=zsmu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZgXeHoTReziC3EgKFCp/bwurZTTEENFWR5l+bq1cTNQIhAM/Rp82hFQkCnTBeV+4GcyqUUCA1FqDo81e1qRyIv0KR"}]},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"_npmUser":{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/custom-element_0.0.2_1566247452257_0.8028503795498054"},"_hasShrinkwrap":false},"0.0.3":{"name":"@dannymoerkerke/custom-element","version":"0.0.3","description":"Web Components base class which provides data binding and convenience methods","main":"src/custom-element.js","scripts":{"start":"ws -p 8080 --spa demo/index.html","test":"ws -p 8080 --spa test/index.html","test:headless":"concurrently \"npm test\" \"sleep 1 && mocha-headless-chrome -f http://localhost:8080/\""},"author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/custom-element.git"},"homepage":"https://github.com/DannyMoerkerke/custom-element","publishConfig":{"access":"public"},"directories":{"test":"test"},"license":"ISC","devDependencies":{"chai":"^4.2.0","concurrently":"^4.1.0","local-web-server":"^2.6.1","mocha":"^6.2.0","mocha-headless-chrome":"^2.0.3","sinon":"^7.3.1"},"gitHead":"ac40e81108600255f8a68ac8bf54e3b7b5e2697f","bugs":{"url":"https://github.com/DannyMoerkerke/custom-element/issues"},"_id":"@dannymoerkerke/custom-element@0.0.3","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-i6qSDHj54P2XIG1IxMPZpLvHxwpufFlkmBzTaHon2MAsm/QcFqB4I4hEDXGQThZ+ugxZ3bDudTzaeHBtuJIlcw==","shasum":"f78535020be1e13ac6034ca60d7ebda66ceb6c51","tarball":"https://registry.npmjs.org/@dannymoerkerke/custom-element/-/custom-element-0.0.3.tgz","fileCount":5,"unpackedSize":8590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdefZzCRA9TVsSAnZWagAAhR8QAJl7MujCnbaZTsW/eVZB\n7rFrIUyOuojWBfvRDKvl5BKR0mjXLmEbC1by0tGtbijw1VNo7PIszq0BILsi\nAmckcfu98e6GzbVsuIaSe9zuL6kOan9QQfeP+FSSKWgDbEPvdMuabPCm7ixX\n+p9AITlXlwd+UMNqqMr4SUcpZKutEZhIZbnPcnduRKa09KtgiBy/ceDybS5o\ntnykucCaJrpCTsi14bkkgKB5qnC2f3UvkqdBw7GNoLyq4+QsKsLCZC4FUOYI\n5GopTuzkjVNUNL/zciIIDkFLCoEHgzLFzXnMJ28iOPthgUsezb475Zqmoodf\njAgbuZL+nwZYTgpNvrS0sBqk6tcnebPlx8ivZAZl8fqq1xm31w02s5Prbr/x\nEC20DI2+PYlNcy4Zux52oez20ltlPvj5VoyXh1WrAA1F7bYd9lltTL0zPzN7\nFU27NZFYanpazAx7kCovDX8DPdhPE0SmJHJqLZnutTf5b8U2nw/PAWEKoczC\nzTEMh601wvpxnGLonwwYE5CR4JXHdPPmgGcrPT2VXoCMlch8Nbf112IKqMUy\n4EiWvD+Rl1mK7lxR58XZxTLQZrBoObuysTzTTiHtUOEc21M1efwMl/Gqy8Du\ntuMQ5mZYu6azY/ikpY6z6iVgxCl5VFNv+cOWHisMMsoCQINyuz5xZn2rwUui\niAQS\r\n=DPHh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCue2Uu7NpuLzYDrspNOl7NqcAFbdAQVf5zuK+gYuj3EwIhAPiiIuBkoeuvKUrNwQH1KtUqe9KAdeX2YEUlJgBPmDjE"}]},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"_npmUser":{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/custom-element_0.0.3_1568274035252_0.9619509634376453"},"_hasShrinkwrap":false},"1.0.0":{"name":"@dannymoerkerke/custom-element","version":"1.0.0","description":"Web Components base class which provides data binding and convenience methods","main":"dist/custom-element.js","module":"dist/custom-element.es.js","unpkg":"dist/custom-element.umd.js","scripts":{"start":"ws -p 8080 --spa demo/index.html","prebuild":"rm -rf dist","build":"rollup -c","prepare":"npm run build","test":"ws -p 8080 --spa test/index.html","test:headless":"concurrently \"npm test\" \"sleep 1 && mocha-headless-chrome -f http://localhost:8080/\""},"author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/custom-element.git"},"homepage":"https://github.com/DannyMoerkerke/custom-element","publishConfig":{"access":"public"},"directories":{"test":"test"},"license":"ISC","devDependencies":{"chai":"^4.2.0","concurrently":"^4.1.0","local-web-server":"^2.6.1","mocha":"^6.2.0","mocha-headless-chrome":"^2.0.3","rollup":"^1.19.4","rollup-plugin-babel-minify":"^9.1.0","sinon":"^7.3.1"},"gitHead":"5eb41c55cea56965b0c0498b832ca46311636c65","bugs":{"url":"https://github.com/DannyMoerkerke/custom-element/issues"},"_id":"@dannymoerkerke/custom-element@1.0.0","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-BP7TvldD+3+RpnMVek30FmjNNcRtTqD6DSzUkVlSZaLizD5XRgrLOlb3pIkdTzqqxD9E2n2KIZ4vRdvR4Lj54w==","shasum":"49f589f3b7942efea8c502b6dd39be3038198ec5","tarball":"https://registry.npmjs.org/@dannymoerkerke/custom-element/-/custom-element-1.0.0.tgz","fileCount":7,"unpackedSize":12948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqH2cCRA9TVsSAnZWagAAu28P/34vnNN+YcrkR62xVsh2\nKYJy8xqyWCvVVYsJEl0VSHn1FnuxTA9q1e+PX9Pj/a+lZokP3cKDlhr11VZ0\nADnqcnJgseP8W83Snbd/Y6TDYWAVVS1m2BUJFZCkrti8JPBILAaRDs31PIK2\ntqken3yeipNLpezryeKe/sa9gRgN695s/tXhI5DgV8IM99s9ov45DGWcxzLe\ndHC5FoEd7lUgVvXzBtUDmkvYfAL7oIqj1v+VH7tj4dkQrup7D4dpwMwvn4FG\nelohqPuPlh5A+C0Ib3quJZ0d9LlrZQYy+0Nb5XT3FxR9vSgyWaItmKfpMJ35\n+RopgVJMSgg3aRTRgpveZQMpnK1D8tHd4+UjNJB9KnjUaPlvZIYXcuUWOPJw\nByNplUE3U7j6MfXkpUgUV149kC9qcVvqx75otqdJ/DbfgvCDmwpSOAYZZtal\nb2azxcKjfHlGxWb0VjLEDt0qOH43nSWTpE+xOBNQgOzdQGXprRZ4ri8nkQEN\nMed9jZd/SeRXkdfIILPo26TU4K70GZKQnXGQ8AdzvNAv1PnSS8K3MIc/HhCL\nu///NXFXR1gOIOHNdkGNfYALj2xSTd6XYocof2RyYzPAf/6/Sn9RRbIqcwcc\n4+byxs8EoSvSL7RGrx2MsVhiuTy/SSEf9C4GohByKhWAzpZLcLgQatvmeOFh\nw71x\r\n=5VzI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRd6iP6CSS0AMQW+3nhfiTPbGI0D4bfcx2i5n9O6R8zAiA55JjYZWFcDW5KJxhKPLh6KDpcF9t5/8u9r9Xk4A417A=="}]},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"_npmUser":{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/custom-element_1.0.0_1571323292140_0.25345414276142275"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-19T20:28:34.391Z","0.0.1":"2019-08-19T20:28:34.725Z","modified":"2022-04-05T02:42:24.524Z","0.0.2":"2019-08-19T20:44:12.386Z","0.0.3":"2019-09-12T07:40:35.410Z","1.0.0":"2019-10-17T14:41:32.266Z"},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"description":"Web Components base class which provides data binding and convenience methods","homepage":"https://github.com/DannyMoerkerke/custom-element","repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/custom-element.git"},"author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"bugs":{"url":"https://github.com/DannyMoerkerke/custom-element/issues"},"license":"ISC","readme":"# Custom Element\nA base class for Custom Elements which provides simple data binding.\n\nThis is a simple POC to demonstrate how data binding can be easily implemented using Web Components. It is not a \nreplacement for React or other frameworks, nor is it intended to be.\n\nSee my [article on medium.com](https://medium.com/@drmoerkerke/https-medium-com-drmoerkerke-data-binding-for-web-components-in-just-a-few-lines-of-code-33f0a46943b3?sk=09dd590e07b3300bae4b63dbb716cc39) for an in depth explanation. \n\n### How it works\nInside the Shadow Root of any Web Component that extends `CustomElement` data binding can be provided through the `data-bind`\nattribute on any HTML element, including other Web Components. Data binding is done through the properties of the `state` object \ninside `CustomElement`.\n\nFor example:\n\n```\n<p data-bind=\"title\"></p>\n```\n\nmeans the value of the `state.title` property of `CustomElement` is bound to this `<p>`. If the value of `state.title` \nchanges the `textContent` of this `<p>` will change with it.\nIf the value of `state.title` needs to be bound to a property of another Web Component it should be prefixed with the name\nof that property and a `:`.\n\nFor example:\n\n```\n<web-component data-bind=\"name:title\"></web-component>\n```\n\nmeans the property `name` of `<web-component>` is bound to `state.title`.\n\nIf `<web-component>` also extends `CustomElement` then its property `state.name` is bound to `state.title`, which allows \nfor multiple levels of data binding. This is because internally the `setState` method of `<web-component>` will be invoked.\n\n`CustomElement` also provides some convenience methods:\n- `show(elements?: HTMLElement[])`, show the element itself or multiple child elements when `elements` argument is given \n- `hide(elements?: HTMLElement[])`, hide the element itself or multiple child elements when `elements` argument is given \n- `select(selector: string)`, select an element from the component's Shadow DOM (calls `querySelector` internally)\n- `selectAll(selector: string)`, select multiple elements from the component's Shadow DOM (calls `querySelectorAll` internally)\n- `css(elements: HTMLElement | HTMLElement[], styles: Object)`, set multiple styles on one element or an array of elements at once\n- `addTemplate(element: HTMLElement, selector: string, replaceContents = false)`: add the contents of the `<template>` which\nis selected by `selector` to `element`. When `replaceContents` is `true` the existing contents of `element` will be replaced.\n\n*This only works for templates inside the shadowRoot of the component*\n\nExample: \n\n```\nconst container = this.shadowRoot.querySelector('#container');\n\nthis.css(container, {\n  display: 'flex'  \n  paddingBottom: '10px',\n  backgroundColor: '#ff0000'\n});\n```\n\n- `multiSelect({property: selector})`, selects an element in Shadow DOM and sets it to a property on the element\n\nExample:\n\n```\nthis.multiSelect({\n  container: '#container',\n  header: 'h1'\n});\n```\n\nis equivalent to: \n\n```\nthis.container = this.shadowRoot.querySelector('#container');\nthis.header = this.shadowRoot.querySelector('h1');\n```\n\n- `addTemplate(element: HTMLElement, selector: string, replaceContents?: boolean)`, adds the template selected by `selector` to\nthe element, optionally replacing existing content so the added template will be the only child\n\n### Demo\nTo run the demo, run `npm install` once and then `npm start` and view the demo on\n[http://localhost:8080/](http://localhost:8080/)\n\n### Testing\nRun `npm test` and view the results on [http://localhost:8080/](http://localhost:8080/)\nor run `npm run test:headless` to run the tests on the command line.\n\nThis repo also contains the configuration file `wallaby.js` to run the\ntests from your IDE using [Wallaby.js](https://wallabyjs.com/)\n\n### Browser support\n- Chrome 53+\n- Firefox 63+\n- Safari 10+\n- iOS Safari 10+\n- Chrome Android 71+\n- Firefox Android 64+\n\n\n\n\n\n","readmeFilename":"readme.md"}