{"_id":"microsoft-graph-toolkit","_rev":"2-d833958ca1f0aa07d2345a1f3094be2e","name":"microsoft-graph-toolkit","dist-tags":{"latest":"0.1.0-preview.1"},"versions":{"0.1.0-preview.1":{"name":"microsoft-graph-toolkit","version":"0.1.0-preview.1","description":"UI for the Microsoft Graph","keywords":["microsoft graph","web components","msal"],"homepage":"https://github.com/microsoftgraph/microsoft-graph-toolkit","bugs":{"url":"https://github.com/microsoftgraph/microsoft-graph-toolkit/issues"},"repository":{"type":"git","url":"git+https://github.com/microsoftgraph/microsoft-graph-toolkit.git"},"author":{"name":"Microsoft"},"license":"MIT","main":"./dist/es6/index.js","types":"./dist/es6/index.d.ts","module":"./dist/es6/index.js","scripts":{"clean":"shx rm -rf dist","start":"run-p sass:watch build:watch serve watch","serve":"owc-dev-server --port 3333","watch":"browser-sync start --no-notify --proxy localhost:3333 --files 'dist/**/*.js, index.html'","sass":"gulp sass","sass:watch":"gulp watchSass","build":"run-s prettier:check clean sass build:esm build:bundle","build:esm":"tsc","build:watch":"tsc --watch","build:bundle":"npm run copy:loader && npm run copy:wc && npm run sass && rollup -c","copy:loader":"cpx src/bundle/mgt-loader.js dist/bundle","copy:wc":"cpx node_modules/@webcomponents/webcomponentsjs/bundles/**/* dist/bundle/wc/bundles && cpx node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js dist/bundle/wc","test":"jest","test:watch":"jest --watch","prepack":"npm run build","prettier:base":"prettier --parser typescript","prettier:check":"npm run prettier:base -- --list-different \"src/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"src/**/*.{ts,tsx}\""},"dependencies":{"@microsoft/microsoft-graph-client":"^1.6.0","@microsoft/microsoft-graph-types":"^1.8.0","@microsoft/teams-js":"^1.4.1","lit-element":"^2.1.0","msal":"^1.0.0-preview.3","office-ui-fabric-core":"10.0.0"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-class-properties":"^7.4.0","@babel/plugin-proposal-decorators":"^7.4.0","@babel/plugin-proposal-object-rest-spread":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-typescript":"^7.3.3","@types/jest":"^24.0.11","@webcomponents/webcomponentsjs":"^2.2.7","babel-polyfill":"6.5.0","browser-sync":"^2.26.3","cpx":"^1.5.0","gulp":"^4.0.0","gulp-append-prepend":"^1.0.6","gulp-rename":"^1.4.0","gulp-sass":"^4.0.2","husky":"^1.3.1","jest":"^24.5.0","jest-junit":"^6.3.0","npm-run-all":"^4.1.5","owc-dev-server":"^0.2.1","prettier":"1.17.0","rollup":"^1.7.3","rollup-plugin-babel":"^4.3.2","rollup-plugin-babel-minify":"^8.0.0","rollup-plugin-commonjs":"^9.2.2","rollup-plugin-json":"^4.0.0","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-postcss":"^2.0.3","rollup-plugin-terser":"^4.0.4","rollup-plugin-typescript":"^1.0.1","sass":"^1.17.3","shx":"^0.3.2","ts-jest":"^24.0.1","typescript":"^3.4.4","whatwg-fetch":"^3.0.0"},"jest-junit":{"suiteName":"jest tests","output":"testResults/junit.xml","classNameTemplate":"{classname} - {title}","titleTemplate":"{classname} - {title}","ancestorSeparator":" > ","usePathForSuiteName":"true"},"husky":{"hooks":{"pre-commit":"npm run prettier:write"}},"prettier":{"printWidth":120,"singleQuote":true},"gitHead":"c87bbcfa7f6da7a9adf1d29ab3b7c02cf0acec29","_id":"microsoft-graph-toolkit@0.1.0-preview.1","_npmVersion":"6.4.1","_nodeVersion":"11.4.0","_npmUser":{"name":"microsoft-graph-toolkit","email":"mgt-npm@microsoft.com"},"dist":{"integrity":"sha512-v+B091yW6gsVCUsksSljNmaleJBUemhgO4aEqaWLHtXuFwwNuE5WcjuUwBaRjsStd8zaRxN16e3qAQEKn4KRrA==","shasum":"b64040348999622011b6ffde7602934962ccfd00","tarball":"https://registry.npmjs.org/microsoft-graph-toolkit/-/microsoft-graph-toolkit-0.1.0-preview.1.tgz","fileCount":108,"unpackedSize":2782658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcw0MoCRA9TVsSAnZWagAAGmkQAIYo8Av7/X3wFUtZykkS\ni5+8wmGVrjdZWqh/zWbDivXtbQe7p8DdgRCbOnbIyjcW9vg+XB9bNLl9obql\nCbBxc+M7RUdCWBp938NBpsazpOkmqmpKFG4GHMsae0iZUsUMZSc/hTlnAtsO\nhhIHYllkO5V85IRFLfSB8q/x733H3+fgERgA4vQAdsdcyPxZ0mQ5W4rPdHcg\nP+VU4dSID5l6bkkreYJp2/Vh+2pclT2PDHoivg/1DnxD4Foy/lVe5/BQzWmc\nDa21KLN/xbVtVQd9luOSg/JVhrf7zOyTaatVdKAeX4oR+UdNWc+GwRfOHFcn\nJk1j9o1KdFCCnm3Fs++5K0/AeQwkIn63Ok+0jtu7Sz9Vqcf0r7DlSolBeJ8g\ny7sh9bELw65SiTpHq5o71frcbo0P7NqqsbCcnjpw9UTzkGnD8uEf2treeNfo\nN1kH1RNJZ10Al/G8w60a68wzhlC9kn4+0eYiT66h/4W+riw+SbjQYlBTSGbQ\nqj6SgMTCSQildFufvzc6m2wO6CrZ0sdSh2YVuDyqBCirNGYkk1rPVIEUYGV0\nR/HKOk0EjrDqtTEthQfVnSjdx2IUbs7sSB655TMYLBc5S5puvSq3TrqDWR1R\n/QCpA4Oj7yKmMtwA38OuJPlxUJfmTcvlA669HDOWIIcxac+a6FrimjJ4Nk5b\n7Fy2\r\n=ZoOq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVaceGV8ilfudVn2RjH3AlG1/IOGKtdfCr3Hh6kf1JFAiBgF2LdeDwM8CG1cZ0qaExlEonVqUH9z6kdWCZR9SjoxA=="}]},"maintainers":[{"name":"microsoft-graph-toolkit","email":"mgt-npm@microsoft.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/microsoft-graph-toolkit_0.1.0-preview.1_1556300581781_0.8917938528835772"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2019-04-26T17:43:01.780Z","0.1.0-preview.1":"2019-04-26T17:43:03.569Z","modified":"2024-02-05T17:55:31.084Z"},"maintainers":[{"name":"microsoft-graph-toolkit","email":"mgt-npm@microsoft.com"}],"description":"UI for the Microsoft Graph","homepage":"https://github.com/microsoftgraph/microsoft-graph-toolkit","keywords":["microsoft graph","web components","msal"],"repository":{"type":"git","url":"git+https://github.com/microsoftgraph/microsoft-graph-toolkit.git"},"author":{"name":"Microsoft"},"bugs":{"url":"https://github.com/microsoftgraph/microsoft-graph-toolkit/issues"},"license":"MIT","readme":"# Microsoft Graph Toolkit (Preview)\r\n\r\n[![NPM](https://img.shields.io/npm/v/microsoft-graph-toolkit.svg)](https://www.npmjs.com/package/microsoft-graph-toolkit) [![Licence](https://img.shields.io/github/license/microsoftgraph/microsoft-graph-toolkit.svg)](https://github.com/microsoftgraph/msgraph-sdk-javascript) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/microsoftgraph/msgraph-sdk-javascript) [![stackoverflow](https://img.shields.io/stackexchange/stackoverflow/t/microsoft-graph-toolkit.svg)](https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit) \r\n[![Build Status](https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_apis/build/status/microsoftgraph.microsoft-graph-toolkit?branchName=master)](https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_build/latest?definitionId=1&branchName=master)\r\n\r\nThe Graph Toolkit is a collection of UI components and helpers for the Microsoft Graph.\r\n\r\nComponents are built as web components and work with any web framework\r\n\r\n## This library is in Preview\r\n\r\nThis project is in preview and can change at any time. This includes changes in apis, design, and architecture. Based on feedback, the project is expected to evolve and stabilize over time.\r\n\r\n## Documentation\r\n\r\n[View the documentation](./docs)\r\n\r\n## Getting Started\r\n\r\nYou can install the components by referencing them through our CDN or installing them through NPM\r\n\r\n### Use via CDN:\r\n\r\n```html\r\n<script src=\"https://mgtlib.z5.web.core.windows.net/mgt/latest/mgt-loader.js\"></script>\r\n```\r\n\r\nYou can then start using the components in your html page. Here is a full working example with the Msal provider:\r\n\r\n```html\r\n<script src=\"https://mgtlib.z5.web.core.windows.net/mgt/latest/mgt-loader.js\"></script>\r\n<mgt-msal-provider client-id=\"[CLIENT-ID]\" ></mgt-msal-provider>\r\n<mgt-login></mgt-login>\r\n\r\n<!-- <script>\r\n    // alternatively, you can set the provider in code and provide more options\r\n    mgt.Providers.globalProvider = new mgt.MsalProvider({clientId: '[CLIENT-ID]'});\r\n</script> -->\r\n```\r\n\r\n> NOTE: MSAL requires the page to be hosted in a web server for the authentication redirects. If you are just getting started and want to play around, the quickest way is to use something like [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) in vscode. \r\n\r\n### Use via NPM:\r\n\r\nThe benefits of using MGT through NPM is that you have full control of the bundling process and you can bundle only the code you need for your site. First, add the npm package:\r\n\r\n```bash\r\nnpm install microsoft-graph-toolkit\r\n```\r\n\r\nNow you can reference all components at the page you are using:\r\n\r\n```html\r\n<script src=\"node_modules/microsoft-graph-toolkit/dist/es6/components.js\"></script>\r\n```\r\n\r\nOr, just reference the component you need and avoid loading everything else:\r\n\r\n```html\r\n<script src=\"node_modules/microsoft-graph-toolkit/dist/es6/components/mgt-login/mgt-login.js\"></script>\r\n```\r\n\r\nSimilarly, to add a provider, you can add it as a component:\r\n\r\n```html\r\n<script src=\"node_modules/microsoft-graph-toolkit/dist/es6/components/providers/mgt-msal-provider.js\"></script>\r\n\r\n<mgt-msal-provider client-id=\"[CLIENT-ID]\"></mgt-msal-provider>\r\n```\r\n\r\nor, add it in your code:\r\n\r\n```html\r\n<script type=\"module\">\r\n    import {Providers, MsalProvider} from 'microsoft-graph-toolkit';\r\n\r\n    Providers.globalProvider = new MsalProvider({clientId: '[CLIENT-ID]'});\r\n</script>\r\n```\r\n## Providers\r\n\r\nThe components work best when used with a [provider](./docs/providers.md). The provider exposes authentication and Microsoft Graph apis used by the components to call into the Microsoft Graph.\r\n\r\nThe toolkit contains providers for [MSAL](./docs/providers/msal.md), [SharePoint](./docs/providers/sharepoint.md), [Teams](./docs/providers/teams.md), and Office Add-ins (coming soon). You can also create your own providers by extending the [IProvider] abstract class.\r\n\r\n\r\n## Contribute\r\n\r\nWe enthusiastically welcome contributions and feedback. Please read the [contributing guide](CONTRIBUTING.md) before you begin.\r\n\r\n## Feedback and Requests\r\nFor general questions and support, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit) where questions should be tagged with `microsoft-graph-toolkit`\r\n\r\nPlease use [GitHub Issues](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) for bug reports and feature requests. We highly recommend you browse existing issues before opening new issues.\r\n\r\n## License\r\n\r\nCopyright (c) Microsoft and Contributors. All right reserved. Licensed under the MIT License\r\n\r\n## Code of Conduct\r\n\r\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\r\n\r\n","readmeFilename":"readme.md"}