{"_id":"@acoustic-content-sdk/ng-web-component","_rev":"13-b6dbbf92c10e9ec7529b9e6f9c8c4507","name":"@acoustic-content-sdk/ng-web-component","dist-tags":{"latest":"9.0.10076"},"versions":{"9.0.10034":{"name":"@acoustic-content-sdk/ng-web-component","version":"9.0.10034","description":"Module to attach inline-edit functionality to an WCH based Angular application.","keywords":["acoustic","acoustic-content","angular","schematics","sdk","web-components"],"bugs":{"web":"https://developer.ibm.com/answers/smartspace/wch/index.html"},"license":"MIT","author":{"name":"Carsten Leue","email":"carsten.leue@de.ibm.com"},"sideEffects":false,"main":"bundles/acoustic-content-sdk-ng-web-component.umd.js","module":"esm5/acoustic-content-sdk-ng-web-component.js","typings":"acoustic-content-sdk-ng-web-component.d.ts","dependencies":{"@acoustic-content-sdk/api":"9.0.10034","@acoustic-content-sdk/component-api":"9.0.10034","@acoustic-content-sdk/component-hbs":"9.0.10034","@acoustic-content-sdk/ng-api":"9.0.10034","@acoustic-content-sdk/ng-utils":"9.0.10034","@acoustic-content-sdk/utils":"9.0.10034"},"peerDependencies":{"@angular/common":"^9","@angular/core":"^9","rxjs":"^6","tslib":"^1.10.0"},"es2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","esm2015":"esm2015/acoustic-content-sdk-ng-web-component.js","esm5":"esm5/acoustic-content-sdk-ng-web-component.js","fesm2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","fesm5":"fesm5/acoustic-content-sdk-ng-web-component.js","metadata":"acoustic-content-sdk-ng-web-component.metadata.json","schematics":"./assets/collection.json","tsdoc":{"tsdocFlavor":"AEDoc"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"_id":"@acoustic-content-sdk/ng-web-component@9.0.10034","dist":{"shasum":"c9d9f0a2b054f16c93a65f918e881fa6770970f1","integrity":"sha512-MVQIQyUueIRftrJsdIR0YME+3qs/EY+h1BiLpG4A5g/sxPTSgG0goY4nXbgFn8iJ/nJsHiCO8+wXVupd9MOGIw==","tarball":"https://registry.npmjs.org/@acoustic-content-sdk/ng-web-component/-/ng-web-component-9.0.10034.tgz","fileCount":83,"unpackedSize":381945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedHaMCRA9TVsSAnZWagAACd4P/3jFV1AvLroOiVWJZDWA\ngVdt3dvg8ZB58F5bFGvgvMGQkBS0hcsoJi9zbkPYJ2qb34Z8foZespbjQ/qO\nTnFCQqtK98WXxS2T2QICui4/akrsNNfb6QRv9R2xC56t1mS7LKQwR0rqw5qs\nHKjGymEFpySg41L9ASvSz/cYGiqoxlevIZMI80OKD2sP7FQdJZr01Xik8QUH\nzkjIcbhg7H9xdn9dyGfpHwZZ0qp8mm2hmKazMQ6mpOhAAgKaq29N2bskwcEW\nvtG6Fmgyj4wxfvbv9bgJxM5uZaLse/xWzGgtSktGDvdeEW2dQshgfZu02SPl\nFJi9h2Y82HdEv8CChm1hEznov04gDhJD4Fw5UCX8A2Vb6NvkMEJPw+YaR6Q/\nkW0wWv1/RZixmXLn2HvjnJj4T83FX9tQCQXwMfmJTA1Z/ZVaHHdOy94nHxFj\nGG2xo/HSWit1hNnpLTGJKUU0l4Gg+nfgb4ybmrOVNs6t+dDaZIVDwG0UwgBE\nMwj9ch++YYdatbLOwtgo3JZZV2zmq+K10Q/SOqCfEuSZScqV4sbAhylY1fo9\nDWE/5XTgjDDtpp4/gGM2OF1Wmje7AXK5x9EqixOl1RdZ4hv9RGGUSkrh6EOS\n0gSG914ifqmOnFt1fTr2pCxFtihnDwEIK7lz58Lpm+kG3FOh2l1JCyoyxZ/J\nZZEH\r\n=wlMJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeruhP1AMaVnc+1FHN/npAzfSjB30+xV5WuQzjQu42OgIhAP/zca6h6ar0bg7lFaXTNRTTLQu2VbcFDaZqxKzmf6ML"}]},"maintainers":[{"name":"orenaksakal","email":"orenaksakal@gmail.com"},{"name":"daherbst","email":"david.herbst@acoustic.co"},{"name":"mburati","email":"mike.burati@acoustic.com"},{"name":"joachim.loeffel","email":"joachim.loeffel@acoustic.co"},{"name":"buehlerd","email":"buehlerd@de.ibm.com"},{"name":"carstenleue","email":"carsten.leue@de.ibm.com"}],"_npmUser":{"name":"carstenleue","email":"carsten.leue@de.ibm.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-web-component_9.0.10034_1584690827715_0.4280838464303365"},"_hasShrinkwrap":false},"9.0.10040":{"name":"@acoustic-content-sdk/ng-web-component","version":"9.0.10040","description":"Module to attach inline-edit functionality to an WCH based Angular application.","keywords":["acoustic","acoustic-content","angular","schematics","sdk","web-components"],"bugs":{"web":"https://developer.ibm.com/answers/smartspace/wch/index.html"},"license":"MIT","author":{"name":"Carsten Leue","email":"carsten.leue@de.ibm.com"},"sideEffects":false,"main":"bundles/acoustic-content-sdk-ng-web-component.umd.js","module":"esm5/acoustic-content-sdk-ng-web-component.js","typings":"acoustic-content-sdk-ng-web-component.d.ts","dependencies":{"@acoustic-content-sdk/api":"9.0.10040","@acoustic-content-sdk/component-api":"9.0.10040","@acoustic-content-sdk/component-hbs":"9.0.10040","@acoustic-content-sdk/ng-api":"9.0.10040","@acoustic-content-sdk/ng-utils":"9.0.10040","@acoustic-content-sdk/utils":"9.0.10040"},"peerDependencies":{"@angular/common":"^9","@angular/core":"^9","rxjs":"^6","tslib":"^1.10.0"},"es2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","esm2015":"esm2015/acoustic-content-sdk-ng-web-component.js","esm5":"esm5/acoustic-content-sdk-ng-web-component.js","fesm2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","fesm5":"fesm5/acoustic-content-sdk-ng-web-component.js","metadata":"acoustic-content-sdk-ng-web-component.metadata.json","schematics":"./assets/collection.json","tsdoc":{"tsdocFlavor":"AEDoc"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"_id":"@acoustic-content-sdk/ng-web-component@9.0.10040","dist":{"shasum":"0b81fb770130dd256fd6efba1eb127f5ef5b27cd","integrity":"sha512-JAob0Jk6El7FyNWTvgLw3uCdgEyWllMvq8hhCDaLV01jklHESYxRgUtcSsCD3JmbMNH3BmJ2Nmqoo0H8SDKTkA==","tarball":"https://registry.npmjs.org/@acoustic-content-sdk/ng-web-component/-/ng-web-component-9.0.10040.tgz","fileCount":89,"unpackedSize":415979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedLXJCRA9TVsSAnZWagAAH6AQAIOBiGK8qBxge6KvOUPz\nPH2FFSTDA3DwqBfKiQNk1scqEweqy1H2mLDalXKzxBqRIp8QjbMKwY6hdIve\nuhorLyU7p/2WYWQUI0TYN/nNolA+wdM5wjJgOK0tntzkQwl7pOjEMUIOYO7A\nS/+8ssKaV9jAi7GykOJHAhT7wgNJuahWLGNpuWK93FDn1RmV0YwWGQ1seRLr\n+iITygT2xPpxLsHUMjsJHaRH8VbZ1wmR9jmaYRwkPj3MiNop9+u6OsE4903b\nrZzlNM8+tXJmLzodhNvWjnoNqqGDvXOHu1jACTwhEAPDVhl6czSLjmlaAeGO\nrlPMfaiLhJYfsBwYOv9WCehyXZRUSDQyajqK19Ww+YcVcYL7i8HvgYWpPmHk\nzHd9Bq0Cl1uLR8ITVNybVyVTWeyRBjx+TJ90DrzLv2Cqu3GLiuGMs9goEWyZ\nrlLiHOL2xbaEmp+6rc60sUAoMUDUWD+2+Ge1UHezzw5ODgNKfuXp8fJKDx7l\nDB9wTjiQpP0/kavptPDlho0f4SRgGY6Rag8HTnT8RoHQexOsgAGAoadPYjwB\ntB8cqP8PPUevOi/XuzI0GsoyLtaIqFaMIcyriYa+Cc2aU3WhnX+oH8iSB5e2\nbUKcdxy7HP49EumHJ6mQN6uyppAmjamiIFqnorKtiP+Ycq4LS6VabGQNM/eA\nJeJW\r\n=+9fe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGhNzaVBGLcby5rHcXjwuJKJek92pttTFB/HDFjeCX5AIgbZ5dnRqtonwqiXlhspX1LexQvOE9zxw7eX4nqZbljWk="}]},"maintainers":[{"name":"buehlerd","email":"buehlerd@de.ibm.com"},{"name":"carstenleue","email":"carsten.leue@de.ibm.com"},{"name":"daherbst","email":"david.herbst@acoustic.co"},{"name":"joachim.loeffel","email":"joachim.loeffel@acoustic.co"},{"name":"mburati","email":"mike.burati@acoustic.com"},{"name":"orenaksakal","email":"orenaksakal@gmail.com"}],"_npmUser":{"name":"carstenleue","email":"carsten.leue@de.ibm.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-web-component_9.0.10040_1584707017134_0.9731719788141269"},"_hasShrinkwrap":false},"9.0.10067":{"name":"@acoustic-content-sdk/ng-web-component","version":"9.0.10067","description":"Module to attach inline-edit functionality to an WCH based Angular application.","keywords":["acoustic","acoustic-content","angular","schematics","sdk","web-components"],"bugs":{"web":"https://developer.ibm.com/answers/smartspace/wch/index.html"},"license":"MIT","author":{"name":"Carsten Leue","email":"carsten.leue@de.ibm.com"},"sideEffects":false,"main":"bundles/acoustic-content-sdk-ng-web-component.umd.js","module":"esm5/acoustic-content-sdk-ng-web-component.js","typings":"acoustic-content-sdk-ng-web-component.d.ts","dependencies":{"@acoustic-content-sdk/api":"9.0.10067","@acoustic-content-sdk/component-api":"9.0.10067","@acoustic-content-sdk/component-hbs":"9.0.10067","@acoustic-content-sdk/ng-api":"9.0.10067","@acoustic-content-sdk/ng-rest-api":"9.0.10067","@acoustic-content-sdk/ng-utils":"9.0.10067","@acoustic-content-sdk/rest-api":"9.0.10067","@acoustic-content-sdk/utils":"9.0.10067","@acoustic-content-sdk/web-components-services":"9.0.10067"},"peerDependencies":{"@angular/common":"^9","@angular/core":"^9","rxjs":"^6","tslib":"^1.10.0"},"es2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","esm2015":"esm2015/acoustic-content-sdk-ng-web-component.js","esm5":"esm5/acoustic-content-sdk-ng-web-component.js","fesm2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","fesm5":"fesm5/acoustic-content-sdk-ng-web-component.js","metadata":"acoustic-content-sdk-ng-web-component.metadata.json","schematics":"./assets/collection.json","tsdoc":{"tsdocFlavor":"AEDoc"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"_id":"@acoustic-content-sdk/ng-web-component@9.0.10067","dist":{"shasum":"ef163a78df05d7f3ef8d9c5ac70706383941b05a","integrity":"sha512-LFdrg++hcyMJnPPicOhyHflJ8rVLhJyB515hpg965dwrZ7JMwBFNrb1nBtHnR7Pa72J1iNJfw08YQHRWrwOP2w==","tarball":"https://registry.npmjs.org/@acoustic-content-sdk/ng-web-component/-/ng-web-component-9.0.10067.tgz","fileCount":92,"unpackedSize":460230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee2zKCRA9TVsSAnZWagAA7g4P/32sYn56NA2AU9GsbPXK\nSQlpoCAo1GnV42dP/2d7piGGnNUo5HdhnQLSRH8pS4dtolYOWsI4ec1Qwr1R\npy0zOZg0TPJcPxPU78qBbOiKLtEAniP5dbjZ5XFW5ZVN1nZgClgIsUi8ZJAS\nNW2MD8AiOKOLzI2wYV4lYGKjIxCe8+mwogVJayGMptpzQPxN4e3QSbW4pFkL\n7PyhDPedCXq+QMSCupVPTEnZMhBk0FlIHh2vMVTcSPQ6wDp7SjiS2TZZimKr\nZVtiDlwVYvBsU2MP6cvUBtHq7sIovzcfcxeIrc2GFL1XdORzoZSQfMpLxwhT\nX2Sq6Vri87cFe4gyBRNqel5rNzzhYJY6RVqFKal7kE9sHDhsieZyM2rXAeAM\nO03dhT17R6C0zuprS/FtH10SKcenSMTqOC37Pt68fHfEIwIaPL8RRKW8TJXV\nJD1OlvbxGjnB10P8NyMz7uWnh+KEPAl6PZ6n5LmqCaxva1zjiMW8MXRSyLVL\nlGq4DIXSCVJXlgtrLh86ZmPI0ImYcRtg1rnxEs5U6w2cpmhDe8uLn6bZukhh\noOfcOaT+i4dPSV1KBCqrqRzzJbW2h8KNGmhBvnyX0E2eKDcYqfD7pbElNdEU\nKjrOyYRTWPyBJ/8fYpYagtgAgFBOWm9k13pn3q+0P+MO6SwTdIqp2+W59Opc\nmZIZ\r\n=IHGu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcXcY8F0bpbmnI79+y9owMCZg+hyM2kJCJQnUS2uYL+AiBojinkb30+J3JFsvEbaevQw+CUs39gRKeVmx+5fESKQw=="}]},"maintainers":[{"name":"buehlerd","email":"buehlerd@de.ibm.com"},{"name":"carstenleue","email":"carsten.leue@de.ibm.com"},{"name":"daherbst","email":"david.herbst@acoustic.co"},{"name":"joachim.loeffel","email":"joachim.loeffel@acoustic.co"},{"name":"mburati","email":"mike.burati@acoustic.com"},{"name":"orenaksakal","email":"orenaksakal@gmail.com"}],"_npmUser":{"name":"carstenleue","email":"carsten.leue@de.ibm.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-web-component_9.0.10067_1585147082264_0.01344913654281088"},"_hasShrinkwrap":false},"9.0.10076":{"name":"@acoustic-content-sdk/ng-web-component","version":"9.0.10076","description":"Module to attach inline-edit functionality to an WCH based Angular application.","keywords":["acoustic","acoustic-content","angular","schematics","sdk","web-components"],"bugs":{"web":"https://developer.ibm.com/answers/smartspace/wch/index.html"},"license":"MIT","author":{"name":"Carsten Leue","email":"carsten.leue@de.ibm.com"},"sideEffects":false,"main":"bundles/acoustic-content-sdk-ng-web-component.umd.js","module":"esm5/acoustic-content-sdk-ng-web-component.js","typings":"acoustic-content-sdk-ng-web-component.d.ts","dependencies":{"@acoustic-content-sdk/api":"9.0.10076","@acoustic-content-sdk/component-api":"9.0.10076","@acoustic-content-sdk/component-hbs":"9.0.10076","@acoustic-content-sdk/ng-api":"9.0.10076","@acoustic-content-sdk/ng-rest-api":"9.0.10076","@acoustic-content-sdk/ng-utils":"9.0.10076","@acoustic-content-sdk/rest-api":"9.0.10076","@acoustic-content-sdk/utils":"9.0.10076","@acoustic-content-sdk/web-components-services":"9.0.10076"},"peerDependencies":{"@angular/common":"^9","@angular/core":"^9","rxjs":"^6","tslib":"^1.10.0"},"es2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","esm2015":"esm2015/acoustic-content-sdk-ng-web-component.js","esm5":"esm5/acoustic-content-sdk-ng-web-component.js","fesm2015":"fesm2015/acoustic-content-sdk-ng-web-component.js","fesm5":"fesm5/acoustic-content-sdk-ng-web-component.js","metadata":"acoustic-content-sdk-ng-web-component.metadata.json","schematics":"./assets/collection.json","tsdoc":{"tsdocFlavor":"AEDoc"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"_id":"@acoustic-content-sdk/ng-web-component@9.0.10076","dist":{"shasum":"469f10a5633c8acf186a0026fd5ae97b7ed98154","integrity":"sha512-a06GIOa7celOGRguM50YLBclTrlGJXmm6X4iHwafGXNrOm5tuAS8/fAvAo5yxpMLQQeWWxLQEEJ8unS/BNrBMQ==","tarball":"https://registry.npmjs.org/@acoustic-content-sdk/ng-web-component/-/ng-web-component-9.0.10076.tgz","fileCount":92,"unpackedSize":459735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefQCeCRA9TVsSAnZWagAA9cUP/1/vjgO//i9T6Wyy420F\nryJ5JP09CxDi4bWn1HTYVrVtlfrcFu47OfmM1tXYb/mPcaqCyEb85LhSxYPM\nnX0yus0k9d1/mIfVPYCZnzOVGPsV/IcDS+zUh5kld36ENB2GiIxdITWfhsnF\nkPitQpNG/EGCHVMteYQGErAQey3MPKQfsG0K/MwTSM9p08rv+iWlRnXogjW/\nvIhySdIA0KcgYj7avPFJ38khFGxBCLQJDeO2F2orJB5zNLONNKqfCUWq9c6X\nTHAEatpdpD/I8GBruRyNG+lWXs0wGF/wxrto2+oAt7fE/jOY9Fp9gHT6qSmi\nY64Iirx4c9owH6dn/iMabtNx0qnlsvlNedvMCzPOjxwDJj0h0PU5+Hy8rgdl\nqwg0LOwVRrVE2AnM8a3aVPVIupe628gaN53ZMHhZRd51tlWoqGou4AHpCSyu\nFLOJSZBK8H3l4x6xtlB8XRVnhOZPpQM4dmG1SsT9eLwwcMlvO0uQTnQw3VHF\n8IjepuB+tN/ILEFxL5Doj71quz3wGwOsI25Q/jw1gTxUdctKEBN7MqvePa9w\nrHhX4SbCrb0vwx8Ao6/gHssiBpOaKnnFxODygJKR6uHGTk4jFvuapa21NNKb\n6FuzSH2mfmEgRs5oDnCfycip9CKqXKIFcWzNRM+lhhxJVOW+XOZJ+Qd81pFc\nRB+K\r\n=zzbk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzneieGH/kafFnLEsoylObvN5/RiUziuGFZKTyVLKC/AIhAIp2+o6rPrXgAzUhUCjEuTOy5CXyEzE/BeLRSXCYY32L"}]},"maintainers":[{"email":"carsten.leue@de.ibm.com","name":"carstenleue"},{"email":"david.herbst@acoustic.co","name":"daherbst"},{"email":"jim.patrick@acoustic.co","name":"jim.patrick"},{"email":"joe.john@acoustic.com","name":"joe.john"},{"email":"kevin.tapperson@acoustic.co","name":"kevintap"},{"email":"mike.burati@acoustic.com","name":"mburati"},{"email":"Neel.Patel@acoustic.co","name":"neelkanthpatel"},{"email":"orenaksakal@gmail.com","name":"orenaksakal"}],"_npmUser":{"name":"carstenleue","email":"carsten.leue@de.ibm.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-web-component_9.0.10076_1585250461686_0.2639087730710381"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-20T07:53:47.495Z","9.0.10034":"2020-03-20T07:53:47.859Z","modified":"2022-04-04T11:14:08.571Z","9.0.10040":"2020-03-20T12:23:37.256Z","9.0.10067":"2020-03-25T14:38:02.473Z","9.0.10076":"2020-03-26T19:21:01.803Z"},"maintainers":[{"email":"marcin.pasiewicz@gmail.com","name":"marcin-pasiewicz"},{"email":"nikodem.graczewski@acoustic.co","name":"nikodem.graczewski.acoustic"},{"email":"pawel.galias@acoustic.com","name":"pawel.galias-ac"},{"email":"orenaksakal@gmail.com","name":"orenaksakal"},{"email":"marcin.konopka@acoustic.com","name":"marcin.konopka-ac"}],"description":"Module to attach inline-edit functionality to an WCH based Angular application.","keywords":["acoustic","acoustic-content","angular","schematics","sdk","web-components"],"author":{"name":"Carsten Leue","email":"carsten.leue@de.ibm.com"},"bugs":{"web":"https://developer.ibm.com/answers/smartspace/wch/index.html"},"license":"MIT","readme":"<a name=\"_5dff844492814a815c9eb3ca9a387441cab61c213f2a73c2adf2e6b5b7e3793c\"></a>\n[![npm](https://img.shields.io/npm/v/@acoustic-content-sdk/ng-web-component.svg?style=flat-square)](https://www.npmjs.com/package/@acoustic-content-sdk/ng-web-component)\n\nImplementation of an Angular Component that can dynamically inject [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) for layouts.\n\nThis allows you to add application components without having to recompile the application. Components can be registered with Acoustic Content using regular layout definitions and [wchtools](https://www.npmjs.com/package/wchtools-cli).\n\n## Table of Contents\n\n- [API Documentation](#_b6ab29834c1170886eff3ece415f30ed40bfbd1a48212c259da213ef7e0025d4)\n\n## Adding a WebComponents based Layout Component\n\nIn order to include an application component using web components you need to provide the following artifacts:\n\n- a content type\n- a layout\n- a layout mapping\n- a web component\n\n### Content Type, Layout and Layout Mapping\n\nFollow the instructions for [adding handlebars based layouts](https://github.com/acoustic-content-samples/sample-handlebars-server-render) to Acoustic content. The result is a content type, a layout and a layout mapping.\n\n### Web Component\n\nCreate a JS file with your web component in [CommonJS](https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/) module format. The simplest form would be:\n\n```javascript\nclass MyComponent extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    this.innerHTML = `<div>Works!</div>`;\n  }\n}\n\nmodule.exports = { MyComponent };\n```\n\nMake this file available on a web server, e.g. by pushing it to your tenant. Say the file is then available via `https://my-server/my-component.js`\n\n**Note**: for a real-world application I recommend to use [webpack](https://webpack.js.org/) to bundle your component.\n\n### Reference you Component from the Layout\n\nIn the first step you have created a layout descriptor file. Add the `tags` member and reference your component from a tag using the syntax `bundle:{$URL}#{$COMPONENT}`:\n\n```json\n{\n  \"tags\": [\"bundle:https://my-server/my-component.js#MyComponent\"]\n}\n```\n\nThis syntax allows you to package multiple layout components in one file.\n\n[Push](https://www.npmjs.com/package/wchtools-cli) your changed layout to your tenant.\n\n**Note:** The URL may be absolute or relative. If absolute it can point to any server location. If relative it is resolved relative to the resource base URL for the tenant. This allows you to simply upload your scripts as unmanaged assets to your tenant.\n\n\n<a name=\"_b6ab29834c1170886eff3ece415f30ed40bfbd1a48212c259da213ef7e0025d4\"></a>\n<!-- Do not edit this file. It is automatically generated by API Documenter. -->\n\n[Home](#_b5615f22267c8b2d79d919ff1689d1aaf646d3167c9f2fc052e4f8e484e6600d) &gt; [@acoustic-content-sdk/ng-web-component](#_b6ab29834c1170886eff3ece415f30ed40bfbd1a48212c259da213ef7e0025d4)\n\n## ng-web-component package\n\nImplementation of an Angular component that can dynamically inject web components for layouts\n\n## Classes\n\n|  Class | Description |\n|  --- | --- |\n|  [AcNgWebComponentModule](#_4e43d9c3e1f2e25d85a2458d84a676d8a45ee1ed69a5c545facce03833e004fa) |  |\n\n## Variables\n\n|  Variable | Description |\n|  --- | --- |\n|  [VERSION](#_ef9c317f7661ab865375e9d2e4ec1fb227a75b61bf09ce4d1fc25bd26c491c22) | Version and build number of the package |\n\n\n<a name=\"_5dff844492814a815c9eb3ca9a387441cab61c213f2a73c2adf2e6b5b7e3793c\"></a>\n\n<a name=\"_4e43d9c3e1f2e25d85a2458d84a676d8a45ee1ed69a5c545facce03833e004fa\"></a>\n<!-- Do not edit this file. It is automatically generated by API Documenter. -->\n\n[Home](#_b5615f22267c8b2d79d919ff1689d1aaf646d3167c9f2fc052e4f8e484e6600d) &gt; [@acoustic-content-sdk/ng-web-component](#_b6ab29834c1170886eff3ece415f30ed40bfbd1a48212c259da213ef7e0025d4) &gt; [AcNgWebComponentModule](#_4e43d9c3e1f2e25d85a2458d84a676d8a45ee1ed69a5c545facce03833e004fa)\n\n## AcNgWebComponentModule class\n\n<b>Signature:</b>\n\n```typescript\nexport declare class AcNgWebComponentModule \n```\n\n## Properties\n\n|  Property | Modifiers | Type | Description |\n|  --- | --- | --- | --- |\n|  [VERSION](#_dc4ba74a581c02461fab4009985bcd53e5bb3c7314916e38e1f61055492528ab) |  | <code>WchSdkVersion</code> | Exposes the version information of this module |\n\n\n<a name=\"_ef9c317f7661ab865375e9d2e4ec1fb227a75b61bf09ce4d1fc25bd26c491c22\"></a>\n<!-- Do not edit this file. It is automatically generated by API Documenter. -->\n\n[Home](#_b5615f22267c8b2d79d919ff1689d1aaf646d3167c9f2fc052e4f8e484e6600d) &gt; [@acoustic-content-sdk/ng-web-component](#_b6ab29834c1170886eff3ece415f30ed40bfbd1a48212c259da213ef7e0025d4) &gt; [VERSION](#_ef9c317f7661ab865375e9d2e4ec1fb227a75b61bf09ce4d1fc25bd26c491c22)\n\n## VERSION variable\n\nVersion and build number of the package\n\n<b>Signature:</b>\n\n```typescript\nVERSION: {\n    version: {\n        major: string;\n        minor: string;\n        patch: string;\n        branch: string;\n    };\n    build: Date;\n}\n```\n\n<a name=\"_dc4ba74a581c02461fab4009985bcd53e5bb3c7314916e38e1f61055492528ab\"></a>\n<!-- Do not edit this file. It is automatically generated by API Documenter. -->\n\n[Home](#_b5615f22267c8b2d79d919ff1689d1aaf646d3167c9f2fc052e4f8e484e6600d) &gt; [@acoustic-content-sdk/ng-web-component](#_b6ab29834c1170886eff3ece415f30ed40bfbd1a48212c259da213ef7e0025d4) &gt; [AcNgWebComponentModule](#_4e43d9c3e1f2e25d85a2458d84a676d8a45ee1ed69a5c545facce03833e004fa) &gt; [VERSION](#_dc4ba74a581c02461fab4009985bcd53e5bb3c7314916e38e1f61055492528ab)\n\n## AcNgWebComponentModule.VERSION property\n\nExposes the version information of this module\n\n<b>Signature:</b>\n\n```typescript\nVERSION: WchSdkVersion;\n```\n","readmeFilename":"README.md"}