{"_rev":"3-c2280d18b707bef773412228152d5c35","time":{"created":"2022-08-17T17:37:39.864Z","0.0.62":"2022-08-17T13:12:28.855Z","modified":"2022-08-17T17:37:40.262Z","0.0.63":"2022-08-17T17:37:40.140Z"},"_id":"@ahmedalayat/elsa-workflow-designer","name":"@ahmedalayat/elsa-workflow-designer","dist-tags":{"latest":"0.0.63"},"versions":{"0.0.63":{"name":"@ahmedalayat/elsa-workflow-designer","version":"0.0.63","description":"Stencil Component Starter","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/elsa-workflow-designer/elsa-workflow-designer.js","repository":{"type":"git","url":"git+https://github.com/elsa-workflows/elsa-designer-html.git"},"bugs":{"url":"https://github.com/elsa-workflows/elsa-designer-html/issues"},"homepage":"https://github.com/elsa-workflows/elsa-designer-html","keywords":["workflow","workflow designer","web component","stenciljs"],"author":{"name":"Sipke Schoorstra"},"scripts":{"build":"stencil build --docs","start":"stencil build --dev --watch --serve","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll"},"devDependencies":{"@stencil/core":"^2.17.3","@stencil/sass":"^1.0.1","@types/jquery":"^3.3.30","@types/node":"^12.6.9"},"license":"BSD-3-Clause","dependencies":{"bootstrap":"^4.6.2","dragscroll":"0.0.8","handlebars":"^4.4.2","jquery":"^3.6.0","json2yaml":"^1.1.0","jsplumb":"^2.11.1","popper.js":"^1.16.1","uuid-browser":"^3.1.0"},"directories":{"doc":"doc"},"_id":"@ahmedalayat/elsa-workflow-designer@0.0.63","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-dVS1hHEURXDnVlj1qzB+oHdWG3XJjPSIQcqWIQYJ2BBYNYIC0idC9rpDPpDW8tEqWbmN+/JciIdGMJtLeGNB+Q==","shasum":"1109fdd3c5c3374b95ed95189ca3bb40e1cb22d6","tarball":"https://registry.npmjs.org/@ahmedalayat/elsa-workflow-designer/-/elsa-workflow-designer-0.0.63.tgz","fileCount":186,"unpackedSize":2934003,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4Iq/A0rCW70wdFqpG57nOfsQEET2jtdaLa//BBBAklAiEAn5PR4IM83CtmZu3boW5hK+inymNv36k9OOA5B3K9gVk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/SdkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopixAAlBqzGp+Yf6IDX3/yIhvRBjUAJsHDHeus2ZQfcqHsaZmxrlzU\r\nnhxe6p1fG467Q9pXhoZhAvMbjzV7vrZczaOO0TBGAvmYwfJMt6ZIcllm5pTX\r\nepC0h/MBwPMFRUc8i6WENfW5BCBQKMVzy0uvdmCfjTqx1QOqyMHktWGV3af0\r\nlrwJf1P684bkv/tQDU5mSMWk6yX35QCClXJJF0pHG5Qn46oLQbKsDqZZAxwH\r\nDl1kYKFbdSCDbrdMcrlmi2fQZ6bijUjUhc+bC+sDfOxBMravMBL0iWZCgY99\r\n4WCH4rfSWLRP3Z8Z+bLcSyumVv9lxkhe54GKJczRnKfB4rCO7VB8sGjKlhpb\r\nV5CiIuEgDeZxN4IxocHuwj2ibx1ME5/ZEKaj/smf5QaZTuMMCFAU91JlGQDn\r\nSVQvRIz8y9yudnVt2PlR7Xcf267n4U4XAxxbGKBIbDYCGkN9SbCQH0kGLqvu\r\nA7q7B1HTh+au4btWj9CT9QSA8+73h1lvduMuzBiLq22mDbaDDBiBcn9NCZXP\r\n5vtebyttcJfLPkRZKE01OVLWcz3AxeKeEM+W/zA4xvvhhjus6U+70yOkhaD9\r\nqxkn9/henlMvOxH7mEPFTkmE7nkJ3t1oFCwW7/+9QZqaJWrUBuTX7UTmgOip\r\ndOPu4NJLrSeFW3I1bZFqsNjjdmr6H2P2/7M=\r\n=2aLv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ahmedalayat","email":"prog.ahmed80@gmail.com"},"maintainers":[{"name":"ahmedalayat","email":"prog.ahmed80@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/elsa-workflow-designer_0.0.63_1660757859917_0.42519385265674603"},"_hasShrinkwrap":false}},"maintainers":[{"name":"ahmedalayat","email":"prog.ahmed80@gmail.com"}],"description":"Stencil Component Starter","homepage":"https://github.com/elsa-workflows/elsa-designer-html","keywords":["workflow","workflow designer","web component","stenciljs"],"repository":{"type":"git","url":"git+https://github.com/elsa-workflows/elsa-designer-html.git"},"author":{"name":"Sipke Schoorstra"},"bugs":{"url":"https://github.com/elsa-workflows/elsa-designer-html/issues"},"license":"BSD-3-Clause","readme":"[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com/)\n\n# Elsa Workflow Designer\n\n[![npm (scoped)](https://img.shields.io/npm/v/@elsa-workflows/elsa-workflow-designer.svg)](https://www.npmjs.com/package/@elsa-workflows/elsa-workflow-designer)\n\nElsa is a visual programming tool that allows you to implement parts or all of your application with workflows.\nElsa Designer is a standalone client-side web component that you can embed in your own application.\n\n![html-based workflow designer](/doc/workflow-sample-2.png)\n\n## Installing this component\n\n### Script tag\n\n- Put a script tag similar to this `<script src='https://unpkg.com/@elsa-workflows/elsa-workflow-designer@0.0.10/dist/elsa-workflow-designer.js'></script>` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### Node Modules\n- Run `npm install @elsa-workflows/elsa-workflow-designer --save`\n- Put a script tag similar to this `<script src='node_modules/@elsa-workflows/elsa-workflow-designer/dist/elsa-workflow-designer.js'></script>` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### In a stencil-starter app\n- Run `npm install @elsa-workflows/elsa-workflow-designer --save`\n- Add an import to the npm packages `import @elsa-workflows/elsa-workflow-designer;`\n- Then you can use the element anywhere in your template, JSX, html etc\n\n## Using this component\n\nTo use the component, add the following HTML tag:\n\n```html\n<wf-designer-host></wf-designer-host>\n```\n\nOut of the box, the designer registers a default set of activities that are provided from a set of plugins.\nTo add custom activities, you need to define them as part of a custom plugin.\n\n## Integration with other Frontend framework\n\n### Angular(2+)\n1. Add Elsa Designer pkg CDN on `index.html`\n```HTML\n<script\n    type=\"module\"\n    src=\"https://unpkg.com/@elsa-workflows/elsa-workflow-designer@0.0.61/dist/elsa-workflow-designer/elsa-workflow-designer.esm.js\"\n></script>\n<script\n    nomodule=\"\"\n    src=\"https://unpkg.com/@elsa-workflows/elsa-workflow-designer@0.0.61/dist/elsa-workflow-designer/elsa-workflow-designer.js\"\n></script>\n```\n\n2. On `app.module.ts`, add `CUSTOM_ELEMENTS_SCHEMA`\n```Typescript\n@NgModule({\n  //whatever you have on app module goes here... \n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule {}\n```\n\n3. Add `<ng-wf-designer-host></ng-wf-designer-host>` to the HTML\n```HTML\n<wf-designer-host\n    id=\"designerHost\"\n    canvas-height=\"300vh\"\n    [attr.data-activity-definitions]=\"activityDefinition\"\n    [attr.data-workflow]=\"workflowModel\">\n</wf-designer-host>\n```\n> See full example [here](https://codesandbox.io/s/angular-elsa-designer-dkb4t?file=/src/app/app.component.html)\n\n### Custom Activities\n\nTODO: Describe how to register custom activity definitions using JavaScript & JSON.","readmeFilename":"README.md"}