{"_id":"@darekodz/json-viewer","_rev":"3-f80cb9193a6d3f2c5b9f14c7359bc206","name":"@darekodz/json-viewer","dist-tags":{"latest":"2.0.4"},"versions":{"2.0.1":{"name":"@darekodz/json-viewer","version":"2.0.1","main":"dist/json-viewer.js","module":"dist/json-viewer.js","customElements":"custom-elements.json","source":"src/index.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/darekodz/json-viewer.git"},"keywords":["json","viewer","webcomponents"],"author":{"name":"alenaksu"},"bugs":{"url":"https://github.com/alenaksu/json-viewer/issues"},"scripts":{"start":"vite","clean":"rimraf dist","build":"npm run clean && npm run analyze && rollup -c rollup.config.js","docs":"vite build && touch docs/.nojekyll","analyze":"cem analyze --litelement","analyze:watch":"npm run analyze -- --watch","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"},"dependencies":{"lit":"^2.3.1"},"devDependencies":{"@babel/core":"^7.19.3","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-decorators":"^7.19.3","@babel/preset-env":"^7.19.3","@babel/preset-modules":"^0.1.5","@custom-elements-manifest/analyzer":"^0.6.4","@rollup/plugin-node-resolve":"^14.1.0","@rollup/plugin-typescript":"^8.5.0","@rollup/pluginutils":"^4.2.1","husky":"^8.0.1","postcss-modules":"^5.0.0","prettier":"^2.7.1","pretty-quick":"^3.1.3","rimraf":"^3.0.2","rollup":"^2.79.1","rollup-plugin-lit-css":"^4.0.0","rollup-plugin-minify-html-literals":"^1.2.6","rollup-plugin-postcss":"^4.0.2","rollup-plugin-summary":"^1.4.3","rollup-plugin-terser":"^7.0.2","tslib":"^2.4.0","typescript":"^4.8.4","vite":"^4.4.9"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"exports":{".":"./dist/json-viewer.js","./src/*":"./src/*.js","./package.json":"./package.json","./json-viewer.js":"./dist/json-viewer.js","./JsonViewer.js":"./dist/JsonViewer.js"},"types":"./dist/index.d.ts","_id":"@darekodz/json-viewer@2.0.1","gitHead":"ca70982cdd6633df5a0fde1c06de6dc7d5452348","description":"[](https://github.com/alenaksu/json-viewer/releases)\r [](https://www.npmjs.com/package/@alenaksu/json-viewer)\r [![down","homepage":"https://github.com/darekodz/json-viewer#readme","_nodeVersion":"18.16.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-xwnhBgy2H7iGPkXeHPlFM4oyPuGfJzg/T3ceY27c+nYAim6+yr/cyt0aMHBUnopGy+nZM5MvwKsmHsPJd5GgbQ==","shasum":"6d4a93e2c0a32fda96c88279a0ea9ab49b9513ef","tarball":"https://registry.npmjs.org/@darekodz/json-viewer/-/json-viewer-2.0.1.tgz","fileCount":27,"unpackedSize":197069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8zZTf2YiQtx+PT9yQQqNJAUQTIeEcSlS95IHrFbCa3AiEAhyvq2j7adA2sAZerL5AlQ7u5dT5nyhVhfXAWfu02Fu8="}]},"_npmUser":{"name":"darekodz","email":"darekodz@gmail.com"},"directories":{},"maintainers":[{"name":"darekodz","email":"darekodz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/json-viewer_2.0.1_1693317257109_0.6602124680233139"},"_hasShrinkwrap":false},"2.0.2":{"name":"@darekodz/json-viewer","version":"2.0.2","main":"dist/json-viewer.js","module":"dist/json-viewer.js","customElements":"custom-elements.json","source":"src/index.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/darekodz/json-viewer.git"},"keywords":["json","viewer","webcomponents"],"author":{"name":"alenaksu"},"bugs":{"url":"https://github.com/darekodz/json-viewer/issues"},"scripts":{"start":"vite","clean":"rimraf dist","build":"npm run clean && npm run analyze && rollup -c rollup.config.mjs","docs":"vite build && touch docs/.nojekyll","analyze":"cem analyze --litelement","analyze:watch":"npm run analyze -- --watch","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"},"dependencies":{"lit":"^2.8.0"},"devDependencies":{"@babel/core":"^7.22.11","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-decorators":"^7.22.10","@babel/preset-env":"^7.22.10","@babel/preset-modules":"^0.1.6","@custom-elements-manifest/analyzer":"^0.8.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.3","@rollup/pluginutils":"^5.0.4","husky":"^8.0.3","postcss-modules":"^6.0.0","prettier":"^3.0.3","pretty-quick":"^3.1.3","rimraf":"^5.0.1","rollup":"^2.79.1","rollup-plugin-lit-css":"^4.0.1","rollup-plugin-minify-html-literals":"^1.2.6","rollup-plugin-postcss":"^4.0.2","rollup-plugin-summary":"^2.0.0","rollup-plugin-terser":"^7.0.2","tslib":"^2.6.2","typescript":"^5.2.2","vite":"^4.4.9"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"exports":{".":"./dist/json-viewer.js","./src/*":"./src/*.js","./package.json":"./package.json","./json-viewer.js":"./dist/json-viewer.js","./JsonViewer.js":"./dist/JsonViewer.js"},"types":"./dist/index.d.ts","_id":"@darekodz/json-viewer@2.0.2","gitHead":"af3085391ddec5ed2d1b5d68bea0777c4ee7cc7f","description":"[](https://github.com/alenaksu/json-viewer/releases)\r [](https://www.npmjs.com/package/@alenaksu/json-viewer)\r [![down","homepage":"https://github.com/darekodz/json-viewer#readme","_nodeVersion":"18.16.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-tsqg6mCbPiU3U6cRv36nWTO467A3ui30ZSlRnR7GPo7iOXGGUgUi4lXoDj7QCBRqEFu9E/TYjBQEdmD3IRfnrA==","shasum":"f556ca0c0ba127bf2f68a1b59cfb7be32e7093e9","tarball":"https://registry.npmjs.org/@darekodz/json-viewer/-/json-viewer-2.0.2.tgz","fileCount":27,"unpackedSize":172670,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRGOXr1sGcDxWLfqisbQka1rkqU99JZ6EEhxjdcvHbrAiEA/M4XQjE1Uc2WnnwVonRwZpy0cVGo3x394blc+bqq7M0="}]},"_npmUser":{"name":"darekodz","email":"darekodz@gmail.com"},"directories":{},"maintainers":[{"name":"darekodz","email":"darekodz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/json-viewer_2.0.2_1693320443307_0.4600455028092263"},"_hasShrinkwrap":false},"2.0.3":{"name":"@darekodz/json-viewer","version":"2.0.3","type":"module","main":"dist/json-viewer.js","module":"dist/json-viewer.js","customElements":"custom-elements.json","source":"src/index.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/darekodz/json-viewer.git"},"keywords":["json","viewer","webcomponents"],"author":{"name":"alenaksu"},"bugs":{"url":"https://github.com/darekodz/json-viewer/issues"},"scripts":{"start":"vite","clean":"rimraf dist","build":"npm run clean && npm run analyze && rollup -c rollup.config.mjs","docs":"vite build && touch docs/.nojekyll","analyze":"cem analyze --litelement","analyze:watch":"npm run analyze -- --watch","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"},"dependencies":{"lit":"^2.8.0"},"devDependencies":{"@babel/core":"^7.22.11","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-decorators":"^7.22.10","@babel/preset-env":"^7.22.10","@babel/preset-modules":"^0.1.6","@custom-elements-manifest/analyzer":"^0.8.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.3","@rollup/pluginutils":"^5.0.4","husky":"^8.0.3","postcss-modules":"^6.0.0","prettier":"^3.0.3","pretty-quick":"^3.1.3","rimraf":"^5.0.1","rollup":"^2.79.1","rollup-plugin-lit-css":"^4.0.1","rollup-plugin-minify-html-literals":"^1.2.6","rollup-plugin-postcss":"^4.0.2","rollup-plugin-summary":"^2.0.0","rollup-plugin-terser":"^7.0.2","tslib":"^2.6.2","typescript":"^5.2.2","vite":"^4.4.9"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"exports":{".":"./dist/json-viewer.js","./src/*":"./src/*.js","./package.json":"./package.json","./json-viewer.js":"./dist/json-viewer.js","./JsonViewer.js":"./dist/JsonViewer.js"},"types":"./dist/index.d.ts","_id":"@darekodz/json-viewer@2.0.3","gitHead":"7961a0f904cd07e6f03ae3e63792f6bc14a968a2","description":"[](https://github.com/alenaksu/json-viewer/releases)\r [](https://www.npmjs.com/package/@alenaksu/json-viewer)\r [![down","homepage":"https://github.com/darekodz/json-viewer#readme","_nodeVersion":"18.16.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-hKkqlbY8BHNDRZZ4acyABAMtExS+oZs1pcWNfdUq2R+0iqEe+ZLZA2QARTyLbFs48p2fFxh6IhnUv2H954F7XA==","shasum":"5766c253adaf326bc7ef9d9086dff5325e4259ba","tarball":"https://registry.npmjs.org/@darekodz/json-viewer/-/json-viewer-2.0.3.tgz","fileCount":26,"unpackedSize":154110,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0ayYhFhrZZOnfbiJ0eNzbQBi3gCL2PUCWUqCtuZLRAgIhAOJUkXHhy0xMRByXTB6U5wAkeNtcbsw6IkvKg2/fIHIA"}]},"_npmUser":{"name":"darekodz","email":"darekodz@gmail.com"},"directories":{},"maintainers":[{"name":"darekodz","email":"darekodz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/json-viewer_2.0.3_1693320641286_0.2778106469511581"},"_hasShrinkwrap":false},"2.0.4":{"name":"@darekodz/json-viewer","version":"2.0.4","type":"module","main":"dist/json-viewer.js","module":"dist/json-viewer.js","customElements":"custom-elements.json","source":"src/index.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/darekodz/json-viewer.git"},"keywords":["json","viewer","webcomponents"],"author":{"name":"alenaksu"},"bugs":{"url":"https://github.com/darekodz/json-viewer/issues"},"scripts":{"start":"vite","clean":"rimraf dist","build":"npm run clean && npm run analyze && rollup -c rollup.config.mjs","docs":"vite build && touch docs/.nojekyll","analyze":"cem analyze --litelement","analyze:watch":"npm run analyze -- --watch","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"},"dependencies":{"lit":"^2.8.0"},"devDependencies":{"@babel/preset-typescript":"^7.18.6","@babel/core":"^7.22.11","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-decorators":"^7.22.10","@babel/preset-env":"^7.22.10","@babel/preset-modules":"^0.1.6","@custom-elements-manifest/analyzer":"^0.8.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.3","@rollup/pluginutils":"^5.0.4","husky":"^8.0.3","postcss-modules":"^6.0.0","prettier":"^3.0.3","pretty-quick":"^3.1.3","rimraf":"^5.0.1","rollup":"^2.79.1","rollup-plugin-lit-css":"^4.0.1","rollup-plugin-minify-html-literals":"^1.2.6","rollup-plugin-postcss":"^4.0.2","rollup-plugin-summary":"^2.0.0","rollup-plugin-terser":"^7.0.2","tslib":"^2.6.2","typescript":"^5.2.2","vite":"^4.4.9"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"exports":{".":"./dist/json-viewer.js","./src/*":"./src/*.js","./package.json":"./package.json","./json-viewer.js":"./dist/json-viewer.js","./JsonViewer.js":"./dist/JsonViewer.js"},"types":"./dist/index.d.ts","_id":"@darekodz/json-viewer@2.0.4","gitHead":"68ce53dbc46adce83b0cf01c978cd73ea0759c4b","description":"[](https://github.com/alenaksu/json-viewer/releases)\r [](https://www.npmjs.com/package/@alenaksu/json-viewer)\r [![down","homepage":"https://github.com/darekodz/json-viewer#readme","_nodeVersion":"18.16.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Z+KOSL2hkb8GpOwFOfzRNliWoc4Q9ae8mn79Lqh7z69qx3GLykQTPGkixMnSsEZiVzYd/rGBWFCBQQfnxKOolw==","shasum":"59a0cf51c41b35a9476f1f49aba563188186d244","tarball":"https://registry.npmjs.org/@darekodz/json-viewer/-/json-viewer-2.0.4.tgz","fileCount":26,"unpackedSize":154158,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEv+EkXpa65F0PaktB3UD31617iMjxto7yn5EatwLG2tAiAshQfeIRi5w+9PbVWXFm/hHDhWsyQ5oXmtgv3RlLa6UA=="}]},"_npmUser":{"name":"darekodz","email":"darekodz@gmail.com"},"directories":{},"maintainers":[{"name":"darekodz","email":"darekodz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/json-viewer_2.0.4_1693321075583_0.5030532859388321"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-29T13:54:16.986Z","2.0.1":"2023-08-29T13:54:17.393Z","modified":"2023-08-29T14:57:56.038Z","2.0.2":"2023-08-29T14:47:23.599Z","2.0.3":"2023-08-29T14:50:41.464Z","2.0.4":"2023-08-29T14:57:55.858Z"},"maintainers":[{"name":"darekodz","email":"darekodz@gmail.com"}],"description":"[](https://github.com/alenaksu/json-viewer/releases)\r [](https://www.npmjs.com/package/@alenaksu/json-viewer)\r [![down","homepage":"https://github.com/darekodz/json-viewer#readme","keywords":["json","viewer","webcomponents"],"repository":{"type":"git","url":"git+https://github.com/darekodz/json-viewer.git"},"author":{"name":"alenaksu"},"bugs":{"url":"https://github.com/darekodz/json-viewer/issues"},"license":"MIT","readme":"[](https://github.com/alenaksu/json-viewer/releases)\r\n[](https://www.npmjs.com/package/@alenaksu/json-viewer)\r\n[](https://www.npmjs.com/package/@alenaksu/json-viewer)\r\n[](https://snyk.io/test/npm/@alenaksu/json-viewer)\r\n[](https://raw.githubusercontent.com/alenaksu/json-viewer/master/LICENSE)\r\n[](https://www.webcomponents.org/element/@alenaksu/json-viewer)\r\n\r\nA Web Component to visualize JSON data in a tree view\r\n\r\n---\r\n\r\n- [Installation](#installation)\r\n - [From CDN](#from-cdn)\r\n - [From NPM](#from-npm)\r\n- [Usage](#usage)\r\n - [Attributes](#attributes)\r\n - [Properties](#properties)\r\n - [Methods](#methods)\r\n - [CSS Parts](#css-parts)\r\n - [CSS custom properties](#css-custom-properties)\r\n - [Basic Usage](#basic-usage)\r\n - [Load the JSON dynamically](#load-the-json-dynamically)\r\n - [Basic interactions](#basic-interactions)\r\n- [Demo](#demo)\r\n\r\n## Installation\r\n\r\n### From CDN\r\n\r\nThe package contains a bundled version of the component which includes also the Lit library. It can be useful in case you want to import the package using a CDN.\r\n\r\n```html\r\n\r\n```\r\n\r\n### From NPM\r\n\r\nInstall the component through NPM:\r\n\r\n```sh\r\nnpm i @alenaksu/json-viewer\r\n```\r\n\r\n\r\nImport the package to your project, this way the component will be automatically defined in the custom elements registry with its default tag name `json-viewer`.\r\n\r\n```js\r\nimport '@alenaksu/json-viewer';\r\n```\r\n\r\nIf you want to extend the component or if you just need to use it in scoped registries with a different tag name, then you can import the component class from the package:\r\n\r\n```js\r\nimport { JsonViewer } '@alenaksu/json-viewer/dist/JsonViewer.js';\r\n\r\nclass MyJsonViewer extends JsonViewer {\r\n ...\r\n}\r\n\r\ncustomElements.define('my-json-viewer', MyJsonViewer);\r\n```\r\n\r\n---\r\n\r\n## Usage\r\n\r\n```html\r\n\r\n```\r\n\r\n### Attributes\r\n\r\n- `data` - the string representation of JSON object to load\r\n\r\n### Properties\r\n\r\n- `data` - get/set the JSON object\r\n\r\n### Methods\r\n\r\n- `filter (regexOrPath: RegExp|string) => void` | Maintains only the nodes that match the given criteria\r\n- `resetFilter () => void` | Clear the filter\r\n- `expand (regexOrPath: RegExp|string) => void` | Expand all the nodes that match the given criteria\r\n- `expandAll () => void` | Alias for `expand('**')`\r\n- `collapse (regexOrPath: RegExp|string) => void` | Collapse all the nodes that match the given criteria\r\n- `collapseAll () => void` | Alias for `collapse('**')`\r\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.\r\n\r\n### CSS Parts\r\n\r\n- `object` - The object wrapper element.\r\n- `property` - The wrapper element of a property.\r\n- `key` - The key element of a property.\r\n- `primitive` - The primitive value.\r\n- `primitive--string` - Applied when the primitive is a string.\r\n- `primitive--number` - Applied when the primitive is a number.\r\n- `primitive--boolean` - Applied when the primitive is a boolean.\r\n- `primitive--null` - Applied when the primitive is a null.\r\n- `preview` - The value preview of a property.\r\n- `highlight` - The highlighted value.\r\n\r\n### CSS custom properties\r\n\r\nThe appearance of the component can be modified by changing the CSS custom properties\r\n\r\n```css\r\njson-viewer {\r\n /* Background, font and indentation */\r\n --background-color: #2a2f3a;\r\n --color: #f8f8f2;\r\n --font-family: monaco, Consolas, 'Lucida Console', monospace;\r\n --font-size: 1rem;\r\n --indent-size: 1.5em;\r\n --indentguide-size: 1px;\r\n --indentguide-style: solid;\r\n --indentguide-color: #333;\r\n --indentguide-color-active: #666;\r\n --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);\r\n --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);\r\n\r\n /* Types colors */\r\n --string-color: #a3eea0;\r\n --number-color: #d19a66;\r\n --boolean-color: #4ba7ef;\r\n --null-color: #df9cf3;\r\n --property-color: #6fb3d2;\r\n\r\n /* Collapsed node preview */\r\n --preview-color: rgba(222, 175, 143, 0.9);\r\n\r\n /* Search highlight color */\r\n --highlight-color: #6fb3d2;\r\n}\r\n```\r\n\r\n### Basic Usage\r\n\r\nPut the JSON inside the element\r\n\r\n```html\r\n\r\n { \"quiz\": { \"sport\": { \"q1\": { \"question\": \"Which one is correct team name in NBA?\", \"options\": [ \"New York Bulls\",\r\n \"Los Angeles Kings\", \"Golden State Warriros\", \"Huston Rocket\" ], \"answer\": \"Huston Rocket\" } }, \"maths\": { \"q1\": {\r\n \"question\": \"5 + 7 = ?\", \"options\": [ \"10\", \"11\", \"12\", \"13\" ], \"answer\": \"12\" }, \"q2\": { \"question\": \"12 - 8 = ?\",\r\n \"options\": [ \"1\", \"2\", \"3\", \"4\" ], \"answer\": \"4\" } } } }\r\n\r\n```\r\n\r\n### Load the JSON dynamically\r\n\r\n```html\r\n\r\n\r\n\r\n```\r\n\r\n### Basic interactions\r\n\r\n```js\r\nconst viewer = document.querySelector('#json');\r\n\r\n// Expand/collapse/filter\r\nviewer.expand('**.name');\r\nviewer.collapse(/name/);\r\nviewer.filter('test.*.name');\r\n\r\n// Search\r\nconst searchIterator = viewer.search('value');\r\n// Scrolls to the node and highlight the value\r\nsearchIterator.next();\r\n```\r\n\r\n## Demo\r\n\r\nThe demo can also be run locally with\r\n\r\n```sh\r\nnpm run start\r\n```\r\n","readmeFilename":"README.md"}