ees-jsoneditor 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 David Herges
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,183 @@
+# Angular Json Editor
+
+
+Angular Json Editor (wrapper for [jsoneditor](https://github.com/josdejong/jsoneditor)). View/Edit Json file with formatting.
+
+[StackBlitz template](https://stackblitz.com/edit/ees-jsoneditor)
+
+Working with latest Angular 20.
+
+![Demo Image](/src/assets/printDemo.png)
+
+## Installation
+
+To install this library with npm, run below command:
+
+```sh
+$ npm install --save jsoneditor ees-jsoneditor
+```
+
+Example:
+
+```html
+<json-editor [options]="editorOptions" [data]="data" (change)="getData($event)"></json-editor>
+```
+
+## Usage
+
+### Configuration
+
+Import the standalone component as below:
+
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { InfinityJsonEditorComponent, JsonEditorOptions } from 'ees-jsoneditor';
+
+@Component({
+  selector: 'app-root',
+  template: '<json-editor [options]="editorOptions" [data]="data"></json-editor>',
+  styleUrls: ['./app.component.css'],
+  imports: [InfinityJsonEditorComponent]
+})
+export class AppComponent {
+  public editorOptions: JsonEditorOptions;
+  public data: any;
+  // optional
+  @ViewChild(InfinityJsonEditorComponent, { static: false }) editor: InfinityJsonEditorComponent;
+
+  constructor() {
+    this.editorOptions = new JsonEditorOptions()
+    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
+    //this.options.mode = 'code'; //set only one mode
+
+    this.data = {"products":[{"name":"car","product":[{"name":"honda","model":[{"id":"civic","name":"civic"},{"id":"accord","name":"accord"},{"id":"crv","name":"crv"},{"id":"pilot","name":"pilot"},{"id":"odyssey","name":"odyssey"}]}]}]}
+  }
+
+}
+```
+Note : For better styling, add below line to your main style.css file
+
+```js
+@import "~jsoneditor/dist/jsoneditor.min.css";
+```
+
+
+### Forms
+
+Build it integrated with ReactiveForms:
+
+```ts
+this.form = this.fb.group({
+  myinput: [this.data]
+});
+```
+```html
+<form  [formGroup]="form" (submit)="submit()">
+    <json-editor [options]="editorOptions2" formControlName="myinput">
+    </json-editor>
+</form>
+```
+
+### Extra Features
+
+Besides all the
+[configuration options](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md)
+from the original jsoneditor, Angular Json Editor supports one additional option:
+
+_expandAll_ - to automatically expand all nodes upon json loaded with the _data_ input.
+
+# Troubleshoot
+
+If you have issue with the height of the component, you can try one of those solutions:
+
+When you import CSS:
+
+```css
+@import "~jsoneditor/dist/jsoneditor.min.css";
+textarea.jsoneditor-text{min-height:350px;}
+```
+
+Or Customizing the CSS:
+
+```css
+:host ::ng-deep json-editor,
+:host ::ng-deep json-editor .jsoneditor,
+:host ::ng-deep json-editor > div,
+:host ::ng-deep json-editor jsoneditor-outer {
+  height: 500px;
+}
+```
+
+Or  as a inner style in component:
+
+```html
+<json-editor class="col-md-12" #editorExample style="min-height: 300px;" [options]="editorOptionsData" [data]="dataStructure"></json-editor>
+```
+
+For code view you can change the height using this example:
+```css
+.ace_editor.ace-jsoneditor {
+  min-height: 500px;
+}
+```
+
+Use debug mode to see in your console the data and options passed to jsoneditor. Copy this and paste in your issue when reporting bugs.
+
+```html
+<json-editor [debug]="true" [options]="editorOptionsData" [data]="dataStructure"></json-editor>
+```
+
+## JSONOptions missing params
+
+If you find youself trying to use an custom option that is not mapped here, you can do:
+
+```ts
+let editorOptions: JsonEditorOptions = new JsonEditorOptions(); (<any>this.editorOptions).templates = [{menu options objects as in json editor documentation}]
+```
+
+See the [issue](https://github.com/yasir-nazir/ees-jsoneditor/issues/57)
+
+## Internet Explorer
+
+If you want to support IE, please follow this guide:
+* https://github.com/yasir-nazir/ees-jsoneditor/issues/44#issuecomment-508650610
+
+## Multiple editors
+
+To use multiple jsoneditors in your view you cannot use the same editor options.
+
+You should have something like:
+
+```html
+<div *ngFor="let prd of data.products" class="w-100-p p-24" >
+  <json-editor [options]="makeOptions()" [data]="prd" (change)="showJson($event)"></json-editor>
+</div>
+```
+
+```ts
+makeOptions = () => {
+  return new JsonEditorOptions();
+}
+```
+
+# Demo
+
+Demo component files are included in Git Project.
+
+Demo Project with a lot of different implementations (ngInit, change event and others):
+[https://github.com/yasir-nazir/ees-jsoneditor/tree/master/src/app/demo)
+
+When publishing it to npm, look over this docs: https://docs.npmjs.com/misc/developers
+
+# Collaborate
+
+Fork, clone this repo and install dependencies.
+This project just works with webpack 4 (dont change to 5):
+
+```sh
+npm i -g rimraf
+npm i
+```
+
+# License
+MIT(./LICENSE)

package/angular.json

@@ -0,0 +1,169 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ees-jsoneditor-demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/ees-jsoneditor-demo",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "ees-jsoneditor-demo:build:production"
+            },
+            "development": {
+              "buildTarget": "ees-jsoneditor-demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n",
+          "options": {
+            "buildTarget": "ees-jsoneditor-demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    },
+    "ees-jsoneditor": {
+      "projectType": "library",
+      "root": "projects/ees-jsoneditor",
+      "sourceRoot": "projects/ees-jsoneditor/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "project": "projects/ees-jsoneditor/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ees-jsoneditor/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ees-jsoneditor/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "tsConfig": "projects/ees-jsoneditor/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "style": "css",
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  },
+  "cli": {
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
+    "analytics": false
+  }
+}

package/e2e/app.e2e-spec.ts

@@ -0,0 +1,17 @@
+import { NgPackagedPage } from './app.po';
+
+describe('ng-packaged App', () => {
+  let page: NgPackagedPage;
+
+  beforeEach(() => {
+    page = new NgPackagedPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    page.getParagraphText()
+    .then(t => {
+      expect(t).toEqual('Welcome to Angular Json Editor');
+    });
+  });
+});

package/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class NgPackagedPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

package/e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "ees-jsoneditor",
+  "version": "2.0.0",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yasir-nazir/ees-jsoneditor.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:app": "npm run build:lib && ng build",
+    "build:lib": "ng build --project ees-jsoneditor",
+    "watch": "npm run build:lib -- --watch",
+    "build:full": "npm run build:lib && npm run build:app",
+    "publishnpm": "cp README.md projects/ees-jsoneditor/README.md && npm run build:lib && cd dist/ees-jsoneditor && npm publish",
+    "unpublish": "npm deprecate -f 'ees-jsoneditor@1.9.3' 'this package has been deprecated'",
+    "test": "npm run test:dev && npm run e2e",
+    "test:dev": "ng test --project ees-jsoneditor-demo",
+    "test:unit": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "ports": "lsof -i tcp:4201",
+    "reinstall": "rm package-lock.json && rm -rf node_modules && npm i",
+    "rebuildsass": "npm rebuild node-sass"
+  },
+  "dependencies": {
+    "@angular/common": "20.3.15",
+    "@angular/compiler": "20.3.15",
+    "@angular/core": "20.3.15",
+    "@angular/forms": "20.3.15",
+    "@angular/platform-browser": "20.3.15",
+    "@angular/platform-browser-dynamic": "20.3.15",
+    "@angular/router": "20.3.15",
+    "jsoneditor": "*",
+    "ng-packagr": "^20.3.2",
+    "rxjs": "^7.8.2",
+    "tslib": "^2.8.1",
+    "webpack": "^5.88.2",
+    "zone.js": "~0.15.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/schematics": "^20.3.13",
+    "@angular-eslint/builder": "^20.7.0",
+    "@angular-eslint/eslint-plugin": "^20.7.0",
+    "@angular-eslint/eslint-plugin-template": "^20.7.0",
+    "@angular-eslint/schematics": "^20.7.0",
+    "@angular-eslint/template-parser": "^20.7.0",
+    "@angular/build": "^20.3.13",
+    "@angular/cli": "^20.3.13",
+    "@angular/compiler-cli": "20.3.15",
+    "@angular/language-service": "20.3.15",
+    "@types/jasmine": "~5.1.2",
+    "@types/jsoneditor": "^9.9.3",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "cpr": "^3.0.1",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "latest",
+    "eslint-plugin-jsdoc": "latest",
+    "eslint-plugin-prefer-arrow": "latest",
+    "jasmine-core": "~5.1.2",
+    "karma": "6.4.2",
+    "karma-chrome-launcher": "3.2.0",
+    "karma-coverage": "~2.2.1",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "5.9.3"
+  },
+  "description": "",
+  "main": "index.js",
+  "author": "Yasir Nazir",
+  "bugs": {
+    "url": "https://github.com/yasir-nazir/ees-jsoneditor/issues"
+  },
+  "homepage": "https://github.com/yasir-nazir/ees-jsoneditor#readme"
+}

package/projects/ees-jsoneditor/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}