{"_id":"@vonage/white-board","_rev":"83-e64b6e4405750193693152b022389a14","name":"@vonage/white-board","dist-tags":{"latest":"0.1.1"},"versions":{"0.0.1":{"name":"@vonage/white-board","version":"0.0.1","author":{"name":"Vonage"},"license":"MIT","_id":"@vonage/white-board@0.0.1","maintainers":[{"name":"keichenblat","email":"kfir.eichenblat@vonage.com"},{"name":"daniel-sapir","email":"daniel.sapir@vonage.com"},{"name":"ekatz","email":"elishai.katz@vonage.com"},{"name":"llihovodov","email":"lily.lihovodov@vonage.com"},{"name":"tabdullah","email":"tyshown.abdullah@vonage.com"},{"name":"jmoramunoz2","email":"JuanFernando.Mora@vonage.com"},{"name":"sailusha","email":"sailu.vejella@vonage.com"},{"name":"hilakl","email":"hila.klein@vonage.com"},{"name":"leppelin","email":"tamir.nahum@vonage.com"},{"name":"molszewski_v","email":"marceli.olszewski@vonage.com"},{"name":"twilliams253","email":"terrence.williams@vonage.com"},{"name":"abolles","email":"andrew.bolles@vonage.com"},{"name":"lallen2","email":"latea.allen@vonage.com"},{"name":"yonatan.kra","email":"yonatan.kra@vonage.com"},{"name":"jtiet","email":"jason.tiet@vonage.com"},{"name":"kpaxian","email":"alexander.mazuruk@gmail.com"},{"name":"vonage-frontier","email":"frontier@vonage.com"},{"name":"jurgo","email":"jurgo.boemo@gmail.com"},{"name":"vonage_client_media_processing","email":"vcp_webrtc@vonage.com"},{"name":"remi-deltombe-vonage","email":"remi.deltombe@vonage.com"},{"name":"rmalis","email":"roee.malis@vonage.com"},{"name":"or.cpc","email":"or.abramovich@vonage.com"},{"name":"jeffswartz","email":"jeff.swartz@vonage.com"},{"name":"rhainer","email":"salome_cat@yahoo.com"},{"name":"deliajolt","email":"delia.ekstrom@vonage.com"},{"name":"behaze","email":"lhayes@tokbox.com"},{"name":"raulkg","email":"gaddam.rahul.kumar@gmail.com"},{"name":"liranbin","email":"liranbin@gmail.com"},{"name":"javiermolsanz","email":"javier.molinasanz@vonage.com"},{"name":"agus-vonage","email":"agus.barra@vonage.com"},{"name":"v-kpheng","email":"Kongpheng.Nanthavongsa@vonage.com"},{"name":"vgai-dev","email":"vgai-studio-developers@vonage.com"},{"name":"nitzanhardon","email":"nitzan.hardon@vonage.com"},{"name":"eportolanvonage","email":"enrico.portolan@vonage.com"},{"name":"web-il","email":"web-il@vonage.com"},{"name":"iceberg-team","email":"icebergteam@vonage.com"},{"name":"yinon","email":"yinon@hotmail.com"},{"name":"unified_portal","email":"unified_portal_dev@vonage.com"},{"name":"vreporter-npm","email":"vreporter-support@vonage.com"},{"name":"vbcbe","email":"vbc-be@vonage.com"},{"name":"voxip_team","email":"guy.mininberg@vonage.com"},{"name":"gunifydevops","email":"gunifydevops@vonage.com"},{"name":"yuri.guller","email":"gullerya@gmail.com"},{"name":"idanvon","email":"idan.cohen@vonage.com"},{"name":"nexmo-devrel","email":"devrel@vonage.com"},{"name":"vvd","email":"vivid@vonage.com"},{"name":"vonagemeetings","email":"VBC-Meetings@vonage.com"},{"name":"vonage-jenkins","email":"video.api.ops@vonage.com"},{"name":"maikthomas","email":"michaelgeorge.thomas@vonage.com"},{"name":"germangol","email":"german.goldenstein@gmail.com"},{"name":"ashwinvprabhu","email":"ashwin.venkateshprabhu@vonage.com"},{"name":"arivonage","email":"ari.ades@vonage.com"}],"homepage":"https://github.com/Vonage-Community/web_components-video_api-javascript/tree/main/white-board#readme","bugs":{"url":"https://github.com/Vonage-Community/web_components-video_api-javascript/issues"},"dist":{"shasum":"38e2a7e888a4585c91e0352495609107f50e094c","tarball":"https://registry.npmjs.org/@vonage/white-board/-/white-board-0.0.1.tgz","fileCount":15,"integrity":"sha512-OkudyguqcNlC0hS2dS2jOaUnP9rZY04jOyutP2hyDzvBNxBGOGCNwa04xdcfhZ9NFfdDxdsQW9/U5aV4jBM/Lg==","signatures":[{"sig":"MEYCIQDVHzo0O/y0tSbQgJvth5BabzoHwUnr1tkOILaeJ1ZOaQIhAJKe6FtcTC6jen/iAUZSzcEyNp3j1cNmFH1tegPzysSm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421521},"main":"index.js","type":"module","module":"index.js","exports":{".":"./index.js","./white-board.js":"./white-board.js"},"gitHead":"4ff2df19bb304404d219ab0fdb254e0932ce4f98","scripts":{"test":"web-test-runner --coverage","start":"web-dev-server","analyze":"cem analyze --litelement","storybook":"npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs","test:watch":"web-test-runner --watch","storybook:build":"npm run analyze -- --exclude dist && build-storybook"},"_npmUser":{"name":"nexmo-devrel","email":"devrel@vonage.com"},"repository":{"url":"git+https://github.com/Vonage-Community/web_components-video_api-javascript.git#main","type":"git"},"_npmVersion":"9.8.1","description":"white-board Web Component to be used with Video API following open-wc recommendations","directories":{},"_nodeVersion":"16.15.0","dependencies":{"lit":"^2.3.1"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"@web/dev-server":"^0.1.34","@open-wc/testing":"^3.1.6","@web/test-runner":"^0.14.0","@web/dev-server-storybook":"^0.0.2","@custom-elements-manifest/analyzer":"^0.4.17"},"_npmOperationalInternal":{"tmp":"tmp/white-board_0.0.1_1705611375382_0.2638467832897968","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@vonage/white-board","version":"0.1.1","author":{"name":"Vonage"},"license":"MIT","_id":"@vonage/white-board@0.1.1","maintainers":[{"name":"web-il","email":"web-il@vonage.com"},{"name":"iceberg-team","email":"icebergteam@vonage.com"},{"name":"unified_portal","email":"unified_portal_dev@vonage.com"},{"name":"vreporter-npm","email":"vreporter-support@vonage.com"},{"name":"vbcbe","email":"vbc-be@vonage.com"},{"name":"yuri.guller","email":"gullerya@gmail.com"},{"name":"idanvon","email":"idan.cohen@vonage.com"},{"name":"nexmo-devrel","email":"devrel@vonage.com"},{"name":"vvd","email":"vivid@vonage.com"},{"name":"vonagemeetings","email":"VBC-Meetings@vonage.com"},{"name":"vonage-jenkins","email":"video.api.ops@vonage.com"},{"name":"v-kpheng","email":"Kongpheng.Nanthavongsa@vonage.com"},{"name":"adasilvacabral","email":"andreina.dasilvacabral@vonage.com"},{"name":"sarvesh.bisht","email":"sarvesh.bisht@vonage.com"},{"name":"vgai-dev","email":"vgai-studio-developers@vonage.com"},{"name":"vonage_client_media_processing","email":"vcp_webrtc@vonage.com"},{"name":"or.cpc","email":"or.abramovich@vonage.com"},{"name":"tabdullah","email":"tyshown.abdullah@vonage.com"},{"name":"llihovodov","email":"lily.lihovodov@vonage.com"},{"name":"daniel-sapir","email":"daniel.sapir@vonage.com"},{"name":"aviadhouri.va","email":"Aviad.Houri@vonage.com"},{"name":"vonage-frontier","email":"frontier@vonage.com"},{"name":"jtiet","email":"jason.tiet@vonage.com"},{"name":"hilakl","email":"hila.klein@vonage.com"},{"name":"saurabh.vonage","email":"Saurabh.Kulkarni@vonage.com"},{"name":"leppelin","email":"tamir.nahum@vonage.com"},{"name":"yonatan.kra","email":"yonatan.kra@vonage.com"},{"name":"gpojula","email":"Gayathri.Pojula@vonage.com"},{"name":"elimenko.vonage","email":"egor.limenko@vonage.com"},{"name":"omrizilber","email":"omri.zilber@vonage.com"},{"name":"molszewski_v","email":"marceli.olszewski@vonage.com"},{"name":"sailusha","email":"sailu.vejella@vonage.com"},{"name":"lallen2","email":"latea.allen@vonage.com"},{"name":"abolles","email":"andrew.bolles@vonage.com"},{"name":"twilliams253","email":"terrence.williams@vonage.com"},{"name":"morvonage","email":"mor.tubul@vonage.com"},{"name":"ilan.aradbilavsky.at.vonage.com","email":"ilan.aradbilavsky@vonage.com"},{"name":"mgalin","email":"michal.galin@vonage.com"},{"name":"jhajduk.vonage","email":"jakub.hajduk@vonage.com"},{"name":"vquezada","email":"vladimir.quezada@vonage.com"},{"name":"adidomenico","email":"alessio.didomenico@vonage.com"},{"name":"pravallika-pamu","email":"pamu.pravallika@vonage.com"},{"name":"abagdi","email":"avijit.bagdi@vonage.com"},{"name":"tasif-mohammad","email":"Tasif.Mohammad@vonage.com"},{"name":"anuradhlankapalli","email":"anuradh.lankapalli@vonage.com"},{"name":"hrosenberg","email":"hen.rosenberg@vonage.com"},{"name":"gokul-vonage","email":"gokul.narayanan@vonage.com"},{"name":"vbc-web-cicd-bot","email":"vbc-web-cicd@vonage.com"},{"name":"mserranomontes","email":"marina.serranomontes@vonage.com"},{"name":"ariel12955","email":"Ariel.Bar@vonage.com"},{"name":"franbecerra","email":"Francisco.Becerra@vonage.com"},{"name":"urihaim","email":"Uri.Haim@vonage.com"},{"name":"mvera_vonage","email":"manuel.veranieto@vonage.com"},{"name":"mike.zhylevych","email":"mike.zhylevych@vonage.com"},{"name":"mprabhuvonage","email":"mithun.prabhu@vonage.com"},{"name":"sharad-srivastava2","email":"sharad.srivastava@vonage.com"},{"name":"lucas_pilarski","email":"lukasz.pilarski@vonage.com"},{"name":"gputtaswamy","email":"gnanesh.puttaswamy@vonage.com"},{"name":"pradadiya","email":"paresh.radadiya@vonage.com"},{"name":"manish-ranjan07","email":"manish.ranjan@vonage.com"},{"name":"manish-vonage","email":"manish.sharma@vonage.com"},{"name":"ppandey2","email":"priya.pandey@vonage.com"},{"name":"srajput0909","email":"shubham.rajput@vonage.com"},{"name":"pvillenamontes","email":"pablo.villenamontes@vonage.com"},{"name":"dsimoes2","email":"diogo.simoes@vonage.com"},{"name":"manel_vonage","email":"manel.jimeno@vonage.com"},{"name":"joliveraortega","email":"joseantonio.oliveraortega@vonage.com"}],"homepage":"https://github.com/Vonage-Community/web_components-video_api-javascript/tree/main/white-board#readme","bugs":{"url":"https://github.com/Vonage-Community/web_components-video_api-javascript/issues"},"dist":{"shasum":"081beeede817573933e4545917a104aefc42e168","tarball":"https://registry.npmjs.org/@vonage/white-board/-/white-board-0.1.1.tgz","fileCount":15,"integrity":"sha512-3Hb8R4e05h5NSJvW9/MXmFF6go/Vm/f+LMnHsnn/ejmkYwxAqeS9HqHBVtz2WJtXEN8+HYECbBkLx61u34jCIQ==","signatures":[{"sig":"MEUCIQDcb1wGTSOe8XM+yLpXIW7PGwE71TFpYMNfalSBdInomwIgd4czYLCaa/TCklmaxle54oTqR/9qcta3a4zYWCzJlsY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":428725},"main":"index.js","type":"module","module":"index.js","exports":{".":"./index.js","./white-board.js":"./white-board.js"},"gitHead":"e53556a9e43bcb223f4349d0f805d2b23fc3ef0b","scripts":{"test":"web-test-runner --coverage","start":"web-dev-server","analyze":"cem analyze --litelement","storybook":"npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs","test:watch":"web-test-runner --watch","storybook:build":"npm run analyze -- --exclude dist && build-storybook"},"_npmUser":{"name":"nexmo-devrel","email":"devrel@vonage.com"},"repository":{"url":"git+https://github.com/Vonage-Community/web_components-video_api-javascript.git#main","type":"git"},"_npmVersion":"11.6.2","description":"white-board Web Component to be used with Video API following open-wc recommendations","directories":{},"_nodeVersion":"24.11.1","dependencies":{"lit":"^2.3.1"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"@web/dev-server":"^0.4.6","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.0","@web/dev-server-storybook":"^0.0.2","@custom-elements-manifest/analyzer":"^0.4.17"},"_npmOperationalInternal":{"tmp":"tmp/white-board_0.1.1_1768412023155_0.024990056536665417","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2024-01-18T20:56:15.226Z","modified":"2026-09-03T04:38:58.074Z","0.0.1":"2024-01-18T20:56:15.585Z","0.1.1":"2026-01-14T17:33:43.364Z"},"bugs":{"url":"https://github.com/Vonage-Community/web_components-video_api-javascript/issues"},"author":{"name":"Vonage"},"license":"MIT","homepage":"https://github.com/Vonage-Community/web_components-video_api-javascript/tree/main/white-board#readme","repository":{"url":"git+https://github.com/Vonage-Community/web_components-video_api-javascript.git#main","type":"git"},"description":"white-board Web Component to be used with Video API following open-wc recommendations","maintainers":[{"email":"web-il@vonage.com","name":"web-il"},{"email":"icebergteam@vonage.com","name":"iceberg-team"},{"email":"unified_portal_dev@vonage.com","name":"unified_portal"},{"email":"vreporter-support@vonage.com","name":"vreporter-npm"},{"email":"vbc-be@vonage.com","name":"vbcbe"},{"email":"gullerya@gmail.com","name":"yuri.guller"},{"email":"idan.cohen@vonage.com","name":"idanvon"},{"email":"devrel@vonage.com","name":"nexmo-devrel"},{"email":"vivid@vonage.com","name":"vvd"},{"email":"VBC-Meetings@vonage.com","name":"vonagemeetings"},{"email":"video.api.ops@vonage.com","name":"vonage-jenkins"},{"email":"andreina.dasilvacabral@vonage.com","name":"adasilvacabral"},{"email":"sarvesh.bisht@vonage.com","name":"sarvesh.bisht"},{"email":"vgai-studio-developers@vonage.com","name":"vgai-dev"},{"email":"vcp_webrtc@vonage.com","name":"vonage_client_media_processing"},{"email":"or.abramovich@vonage.com","name":"or.cpc"},{"email":"lily.lihovodov@vonage.com","name":"llihovodov"},{"email":"daniel.sapir@vonage.com","name":"daniel-sapir"},{"email":"Aviad.Houri@vonage.com","name":"aviadhouri.va"},{"email":"ignacio.delacruz@vonage.com","name":"idelacruz"},{"email":"frontier@vonage.com","name":"vonage-frontier"},{"email":"hila.klein@vonage.com","name":"hilakl"},{"email":"Saurabh.Kulkarni@vonage.com","name":"saurabh.vonage"},{"email":"tamir.nahum@vonage.com","name":"leppelin"},{"email":"antoni.silvestrepadros@vonage.com","name":"asilvonage"},{"email":"Gayathri.Pojula@vonage.com","name":"gpojula"},{"email":"egor.limenko@vonage.com","name":"elimenko.vonage"},{"email":"kanav.bhatia@vonage.com","name":"kanav_vonage"},{"email":"omri.zilber@vonage.com","name":"omrizilber"},{"email":"marceli.olszewski@vonage.com","name":"molszewski_v"},{"email":"sailu.vejella@vonage.com","name":"sailusha"},{"email":"ragul.palanisamy@vonage.com","name":"rpalanisamy-vonage"},{"email":"Valentyn.Bohdan@vonage.com","name":"vbohdan_vonage"},{"email":"andrew.bolles@vonage.com","name":"abolles"},{"email":"gorka.revillafernandez@vonage.com","name":"gorka.vonage"},{"email":"bharath.ps@vonage.com","name":"bharath-vonage"},{"email":"mor.tubul@vonage.com","name":"morvonage"},{"email":"ilan.aradbilavsky@vonage.com","name":"ilan.aradbilavsky.at.vonage.com"},{"email":"chuck.reeves@vonage.com","name":"vonreeves"},{"email":"avi.dantes@vonage.com","name":"avi.dantes"},{"email":"michal.galin@vonage.com","name":"mgalin"},{"email":"jakub.hajduk@vonage.com","name":"jhajduk.vonage"},{"email":"Nitsan.unger@vonage.com","name":"nitsanungerfrontier"},{"email":"vladimir.quezada@vonage.com","name":"vquezada"},{"email":"alessio.didomenico@vonage.com","name":"adidomenico"},{"email":"sathish.r@vonage.com","name":"sathishr-vonage"},{"email":"pamu.pravallika@vonage.com","name":"pravallika-pamu"},{"email":"avijit.bagdi@vonage.com","name":"abagdi"},{"email":"anuradh.lankapalli@vonage.com","name":"anuradhlankapalli"},{"email":"hen.rosenberg@vonage.com","name":"hrosenberg"},{"email":"gokul.narayanan@vonage.com","name":"gokul-vonage"},{"email":"alistair.slowe@vonage.com","name":"aslowe-vcc"},{"email":"vbc-web-cicd@vonage.com","name":"vbc-web-cicd-bot"},{"email":"marina.serranomontes@vonage.com","name":"mserranomontes"},{"email":"Ariel.Bar@vonage.com","name":"ariel12955"},{"email":"Francisco.Becerra@vonage.com","name":"franbecerra"},{"email":"Uri.Haim@vonage.com","name":"urihaim"},{"email":"manuel.veranieto@vonage.com","name":"mvera_vonage"},{"email":"mike.zhylevych@vonage.com","name":"mike.zhylevych"},{"email":"mithun.prabhu@vonage.com","name":"mprabhuvonage"},{"email":"sharad.srivastava@vonage.com","name":"sharad-srivastava2"},{"email":"lukasz.pilarski@vonage.com","name":"lucas_pilarski"},{"email":"manish.ranjan@vonage.com","name":"manish-ranjan07"},{"email":"shubham.rajput@vonage.com","name":"srajput0909"},{"email":"pablo.villenamontes@vonage.com","name":"pvillenamontes"},{"email":"diogo.simoes@vonage.com","name":"dsimoes2"},{"email":"manel.jimeno@vonage.com","name":"manel_vonage"},{"email":"joseantonio.oliveraortega@vonage.com","name":"joliveraortega"}],"readme":"# \\<white-board>\n\nThis Web Component follows the [open-wc](https://github.com/open-wc/open-wc) recommendation and is meant to be used with the [Vonage Video SDK](https://developer.vonage.com/en/video/overview).\n\n> A [Vonage Video API account](https://dashboard.nexmo.com) will be needed.\n\nA goal is to simplify the code needed to create a video chat quickly. This Web Component will enable whiteboard / annotation functionality.\n\n## Installation\n\n```bash\nnpm i @vonage/white-board\n```\n\n## Usage\n\n### import from node modules\n\n```html\n<script type=\"module\">\n  import '@vonage/white-board/white-board.js';\n</script>\n```\n\n### OR using a CDN\n```html\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@vonage/white-board@latest/white-board.js/+esm\"></script>\n\n```\n\n### place tag in HTML\n\n```html\n<white-board></white-board>\n```\n\n### Attributes that can be used (optional):\n\n- `properties` : (Object) the properties used to publish the whiteboard. Find the full list in the [documentation](https://vonage.github.io/conversation-docs/video-js-reference/latest/OT.html#initPublisher).\n- `text` : (Object) set the text elements of the UI.\n```javascript\n// Default values\n{\n  tools : 'Tools:',\n  pen : 'Pen',\n  text : 'Text',\n  eraser : 'Eraser',\n  rectangle : 'Rectangle',\n  circle : 'Circle',\n  triangle : 'Triangle',\n  fillInColor : 'fill in Color',\n  size : 'Size:',\n  selectImage : 'Select Image:',\n  clear : 'clear',\n  save : 'save',\n  clearSource : 'clear source',\n  selectSource : 'select source',\n  startSharing: 'start sharing',\n  stopSharing: 'stop sharing'\n}\n```\n\n```html\n<white-board text='{\"pen\":\"Pencil\"}'></white-board>\n```\n\n## Styling\n\nThe Web Component uses the [CSS pseudo-element `::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling. So you can style it the same way you would style a regular button element. Here's an example:\n\n```css\nwhite-board::part(tools button) {\n  font-size: 20px;\n  color: white;\n  background-color: black;\n  border-radius: 5px;\n}\n```\n\nHere is a diagram showing the different parts of the Web Component labeled.\n\n![Diagram labeling the parts of the component](white-board-style-diagram.jpg \"Diagram labeling the parts of the component\")\n\n\n## Getting it to work\n\n1. Get a reference to the Web Component.\n2. Generate a Session and Token.\n3. Pass Session and Token into Web Component reference.\n\n>**Note**: This can vary with library / framework (see [examples folder](../examples))\n\n## Testing with Web Test Runner\n\nTo execute a single test run:\n\n```bash\nnpm run test\n```\n\nTo run the tests in interactive watch mode run:\n\n```bash\nnpm run test:watch\n```\n\n## Demoing with Storybook\n\nTo run a local instance of Storybook for your component, run\n\n```bash\nnpm run storybook\n```\n\nTo build a production version of Storybook, run\n\n```bash\nnpm run storybook:build\n```\n\n\n## Tooling configs\n\nFor most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.\n\nIf you customize the configuration a lot, you can consider moving them to individual files.\n\n## Local Demo with `web-dev-server`\n\n```bash\nnpm start\n```\n\nTo run a local development server that serves the basic demo located in `demo/index.html`\n","readmeFilename":"README.md"}