{"_id":"@acarapetis/json-viewer","_rev":"1-c44f7cfaf5aab2d0d91dee5ed8f853e1","name":"@acarapetis/json-viewer","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.1":{"name":"@acarapetis/json-viewer","version":"0.2.1","main":"build/index.js","source":"src/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/acarapetis/json-viewer.git"},"keywords":["json","viewer","webcomponents"],"author":{"name":"alenaksu"},"bugs":{"url":"https://github.com/alenaksu/json-viewer/issues"},"scripts":{"start":"parcel ./website/index.html","build":"rm -rf dist && rollup -c rollup.config.js","website":"rm -rf docs/ && parcel build website/index.html --public-url /json-viewer/ --dist-dir docs/ --no-cache"},"dependencies":{"@tiny-lit/element":"^2.0.0-alpha.8","@webcomponents/custom-elements":"^1.4.2"},"devDependencies":{"@babel/core":"^7.11.6","@babel/plugin-proposal-class-properties":"^7.10.4","@babel/preset-env":"^7.11.5","@babel/preset-modules":"^0.1.4","@rollup/plugin-babel":"^5.2.1","@rollup/plugin-node-resolve":"^9.0.0","comlink":"^4.3.0","husky":"^4.3.0","parcel":"^2.0.0-alpha.3.2","postcss-modules":"^3.2.2","prettier":"^2.1.1","pretty-quick":"^3.0.2","rollup":"^2.26.11","rollup-plugin-minify-html-literals":"^1.2.5","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"targets":{"website":{}},"browserslist":["chrome > 50"],"gitHead":"9a2b180b675ce78460ebcb24b831f2b51fd55ddb","description":"[![GitHub release](https://img.shields.io/github/v/release/alenaksu/json-viewer.svg)](https://github.com/alenaksu/json-viewer/releases) [![npm](https://badgen.net/npm/v/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer) [![downlo","homepage":"https://github.com/acarapetis/json-viewer#readme","_id":"@acarapetis/json-viewer@0.2.1","_nodeVersion":"14.17.2","_npmVersion":"6.14.13","dist":{"integrity":"sha512-2GIhB4E0/lC2nYw+wDSK7kWKjv9YZq9zgWLa7oPilJI5ofz1R+QC1R3IFA2hKZOL38UdH0PSxdYRn0I/U4Kehw==","shasum":"396674a9232defeb814fa0efcc388d947c54e754","tarball":"https://registry.npmjs.org/@acarapetis/json-viewer/-/json-viewer-0.2.1.tgz","fileCount":33,"unpackedSize":253383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9imxCRA9TVsSAnZWagAAwkEP/jpp1cgiwyugamWCDZwF\ntRsnBrqlJDoFyljnXtUVf/6NX5/oK4vQ+M0psIFkao+MiJEHdbhXcqUqzPcF\nTbcuxrUotDahpspNdb32ZU302dgJf6fzepcq5P+GvRo+6L01lJrWLt7l8AZc\nKhptidXwwdUQByWoGe5ldnTYAK7glK7JVdU4y1+5r1065SbTDAvYwWnqaJJ/\nlHcWMnEQNfq6Xcp47U9ZF7/NVeAalpTvq2skT9XekZ+fu0mfwi5cm9Hd5qav\n0Kwg4Rd18GFz+LXs0B892LtCFmZiDXeRdnWO4hDz+2rVUmiQWQUMbp5krukY\n1VaUZoZ82paQFJpquwVpnGXY5Q9wAvhywXfmTQfeV8lFLiRyzq2Jd2yg+FFM\npHgf9Dcj+Tcf3kTj1JWITJbcGj8BH8EzFz+KIgO8SLMw6L5YQivYfDe4JDZo\nM1gDOZOP+Ev5GwlZ2AzMH0Z8pZtAMbjVLeROxMUgd6yNagoa1XjCvYYoaIyC\novlnXFKIMV/JFdqILMA7z0fKTsskLRMobFyQoQbY7RtkVIm+meN3jXDWGF8w\njlMEyVOTx6gkwt9dYz8DioOiI27f/IkAWFF1ys89sr7EejscKP43r9S7XICv\n7UjHnW9ySENEQhd0xc7UtDKQsaqL6hCxTfpayi26Xv1sjtxJ0g9D9MDL9bqu\nDPkK\r\n=0hqw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdAC/TxJXkJv+LLK5VWB2a/p8GmdEERUtxtVgC3l9gsAiAQtgFIstBbM4J9VlDACnd5/YJvmiq3IFWuxFakcsL+yw=="}]},"_npmUser":{"name":"acarapetis","email":"anthony.carapetis@gmail.com"},"directories":{},"maintainers":[{"name":"acarapetis","email":"anthony.carapetis@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/json-viewer_0.2.1_1626745265056_0.8099055998678122"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-20T01:41:05.014Z","0.2.1":"2021-07-20T01:41:05.244Z","modified":"2022-04-04T11:06:17.351Z"},"maintainers":[{"name":"acarapetis","email":"anthony.carapetis@gmail.com"}],"description":"[![GitHub release](https://img.shields.io/github/v/release/alenaksu/json-viewer.svg)](https://github.com/alenaksu/json-viewer/releases) [![npm](https://badgen.net/npm/v/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer) [![downlo","homepage":"https://github.com/acarapetis/json-viewer#readme","keywords":["json","viewer","webcomponents"],"repository":{"type":"git","url":"git+https://github.com/acarapetis/json-viewer.git"},"author":{"name":"alenaksu"},"bugs":{"url":"https://github.com/alenaksu/json-viewer/issues"},"license":"MIT","readme":"[![GitHub release](https://img.shields.io/github/v/release/alenaksu/json-viewer.svg)](https://github.com/alenaksu/json-viewer/releases)\n[![npm](https://badgen.net/npm/v/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer)\n[![downloads](https://badgen.net/npm/dt/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer)\n[![Known Vulnerabilities](https://snyk.io/test/npm/@alenaksu/json-viewer/badge.svg)](https://snyk.io/test/npm/@alenaksu/json-viewer)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/alenaksu/json-viewer/master/LICENSE)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@alenaksu/json-viewer)\n\nA Web Component to visualize JSON data in a tree view\n\n---\n\n## Installation\n\n```sh\nnpm i @alenaksu/json-viewer\n```\n\nThen import the package to your project.\n\n```js\nimport '@alenaksu/json-viewer';\n```\n\n---\n\n## Usage\n\n```html\n<json-viewer></json-viewer>\n```\n\n**Attributes**\n\n-   `data` - the string representation of JSON object to load\n\n**Properties**\n\n-   `data` - get/set the JSON object\n\n**Methods**\n\n-   `filter (regexOrPath: RegExp|string) => void` | Mantains only the nodes that match the given criteria\n-   `resetFilter () => void` | Clear the filter\n\n-   `expand (regexOrPath: RegExp|string) => void` | Expand all the nodes that match the given criteria\n-   `expandAll () => void` | Alias for `expand('**')`\n\n-   `collapse (regexOrPath: RegExp|string) => void` | Collapse all the nodes that match the given criteria\n-   `collapseAll () => void` | Alias for `collapse('**')`\n\n-   `search (regexOrPath: RegExp|string) => Iterator` | Return and iterator with which is possible to go through all the matched nodes. It scrolls the page to the node and highlights it.\n\n### Basic Usage\n\nPut the JSON inside the element\n\n```html\n<json-viewer>\n    { \"quiz\": { \"sport\": { \"q1\": { \"question\": \"Which one is correct team name in NBA?\", \"options\": [ \"New York Bulls\",\n    \"Los Angeles Kings\", \"Golden State Warriros\", \"Huston Rocket\" ], \"answer\": \"Huston Rocket\" } }, \"maths\": { \"q1\": {\n    \"question\": \"5 + 7 = ?\", \"options\": [ \"10\", \"11\", \"12\", \"13\" ], \"answer\": \"12\" }, \"q2\": { \"question\": \"12 - 8 = ?\",\n    \"options\": [ \"1\", \"2\", \"3\", \"4\" ], \"answer\": \"4\" } } } }\n</json-viewer>\n```\n\n### Load the JSON dinamically\n\n```html\n<json-viewer id=\"json\"></json-viewer>\n\n<script>\n    document.querySelector('#json').data = { prop1: true, prop2: 'test' };\n</script>\n```\n\n### Basic interactions\n\n```js\nconst viewer = document.querySelector('#json');\n\n// Expand/collapse/filter\nviewer.expand('**.name');\nviewer.collapse(/name/);\nviewer.filter('test.*.name');\n\n// Search\nconst searchIterator = viewer.search('value');\n// Scrolls to the node and highlight the value\nsearchIterator.next();\n```\n\n### Theming\n\nThe appereance of the component can be modified by changing the CSS variables\n\n```css\njson-viewver {\n    /* Background, font and color */\n    --background-color: #2a2f3a;\n    --color: #f8f8f2;\n    --font-family: monaco, Consolas, 'Lucida Console', monospace;\n\n    /* Types colors */\n    --string-color: #a3eea0;\n    --number-color: #d19a66;\n    --boolean-color: #4ba7ef;\n    --null-color: #df9cf3;\n    --property-color: #6fb3d2;\n\n    /* Collapsed node preview */\n    --preview-color: rgba(222, 175, 143, 0.9);\n\n    /* Search highlight color */\n    --highlight-color: #6fb3d2;\n}\n```\n\n## Demo\n\nThe demo can also be run locally with\n\n```sh\nnpm run start\n```\n","readmeFilename":"README.md"}