├── .editorconfig
├── .gitignore
├── .prettierrc
├── .travis.yml
├── Procfile
├── README.md
├── angular.json
├── browserslist
├── e2e
    ├── protractor.conf.js
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── projects
    └── ngx-text-diff
    │   ├── CHANGELOG.md
    │   ├── LICENSE
    │   ├── README.md
    │   ├── karma.conf.js
    │   ├── ng-package.json
    │   ├── ng-package.prod.json
    │   ├── package.json
    │   ├── src
    │       ├── lib
    │       │   ├── format-line.pipe.spec.ts
    │       │   ├── format-line.pipe.ts
    │       │   ├── loader-spinner
    │       │   │   ├── loader-spinner.component.css
    │       │   │   ├── loader-spinner.component.html
    │       │   │   └── loader-spinner.component.ts
    │       │   ├── ngx-text-diff-container.directive.ts
    │       │   ├── ngx-text-diff.component.css
    │       │   ├── ngx-text-diff.component.html
    │       │   ├── ngx-text-diff.component.ts
    │       │   ├── ngx-text-diff.model.ts
    │       │   ├── ngx-text-diff.module.ts
    │       │   ├── ngx-text-diff.service.spec.ts
    │       │   ├── ngx-text-diff.service.ts
    │       │   └── ngx-text-diff.utils.ts
    │       ├── public_api.ts
    │       └── test.ts
    │   ├── tsconfig.lib.json
    │   ├── tsconfig.lib.prod.json
    │   ├── tsconfig.spec.json
    │   └── tslint.json
├── server.js
├── src
    ├── app
    │   ├── app-routing.module.ts
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── components
    │   │   ├── code-editor
    │   │   │   ├── code-editor.component.css
    │   │   │   ├── code-editor.component.html
    │   │   │   └── code-editor.component.ts
    │   │   └── components.module.ts
    │   └── home
    │   │   ├── home.component.css
    │   │   ├── home.component.html
    │   │   ├── home.component.spec.ts
    │   │   └── home.component.ts
    ├── assets
    │   └── .gitkeep
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── karma.conf.js
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    ├── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    └── tslint.json
├── tsconfig.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | # compiled output
 3 | /dist
 4 | /tmp
 5 | /out-tsc
 6 | 
 7 | # dependencies
 8 | /node_modules
 9 | 
10 | # IDEs and editors
11 | /.idea
12 | .project
13 | .classpath
14 | .c9/
15 | *.launch
16 | .settings/
17 | *.sublime-workspace
18 | 
19 | # IDE - VSCode
20 | .vscode/*
21 | !.vscode/settings.json
22 | !.vscode/tasks.json
23 | !.vscode/launch.json
24 | !.vscode/extensions.json
25 | 
26 | # misc
27 | /.sass-cache
28 | /connect.lock
29 | /coverage
30 | /libpeerconnection.log
31 | npm-debug.log
32 | yarn-error.log
33 | testem.log
34 | /typings
35 | 
36 | # System Files
37 | .DS_Store
38 | Thumbs.db
39 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 140,
 3 |   "parser": "typescript",
 4 |   "semi": true,
 5 |   "tabWidth": 2,
 6 |   "useTabs": false,
 7 |   "singleQuote": true,
 8 |   "trailingComma": "es5",
 9 |   "bracketSpacing": true,
10 |   "arrowParens": "avoid",
11 |   "insertPragma": false
12 | }
13 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | dist: trusty
 3 | sudo: required
 4 | node_js:
 5 | - '12'
 6 | before_install:
 7 | - npm install -g @angular/cli @angular/compiler-cli typescript
 8 | install: npm install
 9 | branches:
10 |   only:
11 |     - master
12 |     - staging
13 |     - dev
14 |     - release-0.5.0
15 | after_script:
16 | - chmod +x publish-gh-pages.sh && ./publish-gh-pages.sh
17 | addons:
18 |   chrome: stable
19 | deploy:
20 |   provider: heroku
21 |   api_key:
22 |     secure: $HEROKU_AUTH_TOKEN
23 |   app: ngx-text-diff-staging
24 |   on:
25 |     repo: ABenassi87/ngx-text-diff
26 |     branch: staging
27 | 


--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: node server.js
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ngx-text-diff
  2 | - A simple text diff `component` to be used with Angular and based on `google diff match patch` library.
  3 | 
  4 | ## Dependencies
  5 |  - diff-match-patch : ^1.0.4
  6 | 
  7 | ## Required Packages
  8 | These packages will not be auto-installed and must be installed in addition to this library.
  9 |  - @angular/common >= 6.0.0
 10 |  - @angular/core >= 6.0.0
 11 |  - @angular/forms >= 6.0.0
 12 |  - @angular/cdk >= 6.0.0 (used for scrolling synchronization)
 13 | 
 14 | ## Demo
 15 | [Ngx Text Diff Demo](https://ngx-text-diff.herokuapp.com/home)
 16 | 
 17 | ## Installation
 18 | `npm i ngx-text-diff`
 19 | 
 20 | ## API
 21 | `module: NgxTextDiffModule`  
 22 | `component: NgxTextDiffComponent`  
 23 | `selector: td-ngx-text-diff`
 24 | 
 25 | ### Inputs
 26 | | Input                | Type              | Required                        | Description                                                                                     |
 27 | | -------------------- | ----------------- | ------------------------------- | ----------------------------------------------------------------------------------------------- |
 28 | | left                 | string            | Yes                             | First text to be compared                                                                       |
 29 | | right                | string            | Yes                             | Second text to be compared                                                                      |
 30 | | diffContent          | Observable        | Optional                        | `DiffContent` observable                                                                        |
 31 | | format               | `DiffTableFormat` | Optional, default: `SideBySide` | Possible values:<br> -`SideBySide`<br> -`LineByLine`                                            |
 32 | | loading              | boolean           | Optional, default: `false`      | Possible values:<br> -`true`: shows an loading spinner.<br>- `false`: hides the loading spinner |
 33 | | hideMatchingLines    | boolean           | Optional, default: `false`      | Possible values:<br> -`true`: Only shows lines with differences.<br>- `false`: shows all lines  |
 34 | | showToolbar          | boolean           | Optional, default: `true`       | Possible values:<br> -`true`: shows the toolbar.<br>- `false`: hides the format toolbar         |
 35 | | showBtnToolbar       | boolean           | Optional, default: `true`       | Possible values:<br> -`true`: shows the format toolbar.<br>- `false`: hides the format toolbar  |
 36 | | outerContainerClass  | any               | Optional                        | `ngClass` object for the outer div                                                              |
 37 | | outerContainerStyle  | any               | Optional                        | `ngStyle` object for the outer style                                                            |
 38 | | toolbarClass         | any               | Optional                        | `ngClass` object for the toolbar div                                                            |
 39 | | toolbarStyle         | any               | Optional                        | `ngStyle` object for the toolbar style                                                          |
 40 | | compareRowsClass     | any               | Optional                        | `ngClass` object for the div surrounding the table rows                                         |
 41 | | compareRowsStyle     | any               | Optional                        | `ngStyle` object for the div surrounding the table rows                                         |
 42 | | synchronizeScrolling | boolean           | Optional, default: `true`       | Possible values:<br> -`true`: Scrolls both tables together.<br>- `false`: Scrolls individually  |
 43 | 
 44 | ### Output
 45 | | Input          | Type        | Required | Description                             |
 46 | | -------------- | ----------- | -------- | --------------------------------------- |
 47 | | compareResults | DiffResults | Optional | Event fired when comparison is executed |
 48 | 
 49 | ### Custom Objects
 50 | ``` typescript
 51 | export interface DiffContent {
 52 |   leftContent: string;
 53 |   rightContent: string;
 54 | }
 55 | 
 56 | export type DiffTableFormat = 'SideBySide' | 'LineByLine';
 57 | 
 58 | export interface DiffResults {
 59 |   hasDiff: boolean;
 60 |   diffsCount: number;
 61 |   rowsWithDiff: {
 62 |     leftLineNumber?: number;
 63 |     rightLineNumber?: number;
 64 |     numDiffs: number;
 65 |   }[];
 66 | }
 67 | ```
 68 | 
 69 | ## Usage
 70 | 1. Register the `NgxTextDiffModule` in a module, for example app module.
 71 | ``` typescript
 72 | import { BrowserModule } from '@angular/platform-browser';
 73 | import { NgModule } from '@angular/core';
 74 | import { ScrollDispatchModule } from '@angular/cdk/scrolling';
 75 | 
 76 | import { AppComponent } from './app.component';
 77 | import { NgxTextDiffModule } from 'ngx-text-diff';
 78 | 
 79 | @NgModule({
 80 |   declarations: [AppComponent],
 81 |   imports: [BrowserModule, ScrollDispatchModule, NgxTextDiffModule],
 82 |   providers: [],
 83 |   bootstrap: [AppComponent]
 84 | })
 85 | export class AppModule {}
 86 | ```
 87 | 
 88 | ``` typescript
 89 | import { Component, OnInit } from '@angular/core';
 90 | import { DiffContent, DiffResults } from 'ngx-text-diff/lib/ngx-text-diff.model';
 91 | 
 92 | @Component({
 93 |   selector: 'app-home',
 94 |   templateUrl: './home.component.html',
 95 |   styleUrls: []
 96 | })
 97 | export class HomeComponent implements OnInit {
 98 |   left = `some text to\nbe compared!`
 99 |   right = `A changed\n version \n of the text to\nbe compared!`
100 | 
101 |   constructor() {}
102 | 
103 |   ngOnInit() {
104 |   }
105 | 
106 |   onCompareResults(diffResults: DiffResults) {
107 |     console.log('diffResults', diffResults);
108 |   }
109 | }
110 | 
111 | ```
112 | 
113 | ``` html
114 | <td-ngx-text-diff
115 |   [left]="left"
116 |   [right]="right"
117 |   (compareResults)="onCompareResults($event)"
118 | >
119 | ```
120 | 
121 | ## Build the NgxTextDiff module
122 | 
123 | Run `ng build ngx-text-diff` to build the library. The build artifacts will be stored in the `dist/ngx-text-diff` directory.
124 | 
125 | ## Credits
126 | 
127 | This project is based on [google diff match patch](https://github.com/google/diff-match-patch).
128 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "ngx-text-diff-app": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "tda",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "aot": true,
 17 |             "outputPath": "dist/ngx-text-diff-app",
 18 |             "index": "src/index.html",
 19 |             "main": "src/main.ts",
 20 |             "polyfills": "src/polyfills.ts",
 21 |             "tsConfig": "src/tsconfig.app.json",
 22 |             "assets": ["src/favicon.ico", "src/assets"],
 23 |             "styles": ["src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/codemirror/lib/codemirror.css"],
 24 |             "scripts": ["node_modules/codemirror/lib/codemirror.js"]
 25 |           },
 26 |           "configurations": {
 27 |             "production": {
 28 |               "budgets": [
 29 |                 {
 30 |                   "type": "anyComponentStyle",
 31 |                   "maximumWarning": "6kb"
 32 |                 }
 33 |               ],
 34 |               "fileReplacements": [
 35 |                 {
 36 |                   "replace": "src/environments/environment.ts",
 37 |                   "with": "src/environments/environment.prod.ts"
 38 |                 }
 39 |               ],
 40 |               "optimization": true,
 41 |               "outputHashing": "all",
 42 |               "sourceMap": false,
 43 |               "extractCss": true,
 44 |               "namedChunks": false,
 45 |               "aot": true,
 46 |               "extractLicenses": true,
 47 |               "vendorChunk": false,
 48 |               "buildOptimizer": true
 49 |             }
 50 |           }
 51 |         },
 52 |         "serve": {
 53 |           "builder": "@angular-devkit/build-angular:dev-server",
 54 |           "options": {
 55 |             "browserTarget": "ngx-text-diff-app:build"
 56 |           },
 57 |           "configurations": {
 58 |             "production": {
 59 |               "browserTarget": "ngx-text-diff-app:build:production"
 60 |             }
 61 |           }
 62 |         },
 63 |         "extract-i18n": {
 64 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 65 |           "options": {
 66 |             "browserTarget": "ngx-text-diff-app:build"
 67 |           }
 68 |         },
 69 |         "test": {
 70 |           "builder": "@angular-devkit/build-angular:karma",
 71 |           "options": {
 72 |             "main": "src/test.ts",
 73 |             "polyfills": "src/polyfills.ts",
 74 |             "tsConfig": "src/tsconfig.spec.json",
 75 |             "karmaConfig": "src/karma.conf.js",
 76 |             "styles": ["src/styles.css"],
 77 |             "scripts": ["node_modules/codemirror/lib/codemirror.js"],
 78 |             "assets": ["src/favicon.ico", "src/assets"]
 79 |           }
 80 |         },
 81 |         "lint": {
 82 |           "builder": "@angular-devkit/build-angular:tslint",
 83 |           "options": {
 84 |             "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
 85 |             "exclude": ["**/node_modules/**"]
 86 |           }
 87 |         }
 88 |       }
 89 |     },
 90 |     "ngx-text-diff-app-e2e": {
 91 |       "root": "e2e/",
 92 |       "projectType": "application",
 93 |       "architect": {
 94 |         "e2e": {
 95 |           "builder": "@angular-devkit/build-angular:protractor",
 96 |           "options": {
 97 |             "protractorConfig": "e2e/protractor.conf.js",
 98 |             "devServerTarget": "ngx-text-diff-app:serve"
 99 |           },
100 |           "configurations": {
101 |             "production": {
102 |               "devServerTarget": "ngx-text-diff-app:serve:production"
103 |             }
104 |           }
105 |         },
106 |         "lint": {
107 |           "builder": "@angular-devkit/build-angular:tslint",
108 |           "options": {
109 |             "tsConfig": "e2e/tsconfig.e2e.json",
110 |             "exclude": ["**/node_modules/**"]
111 |           }
112 |         }
113 |       }
114 |     },
115 |     "ngx-text-diff": {
116 |       "root": "projects/ngx-text-diff",
117 |       "sourceRoot": "projects/ngx-text-diff/src",
118 |       "projectType": "library",
119 |       "prefix": "td",
120 |       "architect": {
121 |         "build": {
122 |           "builder": "@angular-devkit/build-ng-packagr:build",
123 |           "options": {
124 |             "tsConfig": "projects/ngx-text-diff/tsconfig.lib.json",
125 |             "project": "projects/ngx-text-diff/ng-package.json"
126 |           },
127 |           "configurations": {
128 |             "production": {
129 |               "tsConfig": "projects/ngx-text-diff/tsconfig.lib.prod.json"
130 |             }
131 |           }
132 | },
133 |         "test": {
134 |           "builder": "@angular-devkit/build-angular:karma",
135 |           "options": {
136 |             "main": "projects/ngx-text-diff/src/test.ts",
137 |             "tsConfig": "projects/ngx-text-diff/tsconfig.spec.json",
138 |             "karmaConfig": "projects/ngx-text-diff/karma.conf.js"
139 |           }
140 |         },
141 |         "lint": {
142 |           "builder": "@angular-devkit/build-angular:tslint",
143 |           "options": {
144 |             "tsConfig": ["projects/ngx-text-diff/tsconfig.lib.json", "projects/ngx-text-diff/tsconfig.spec.json"],
145 |             "exclude": ["**/node_modules/**"]
146 |           }
147 |         }
148 |       }
149 |     }
150 |   },
151 |   "defaultProject": "ngx-text-diff-app"
152 | }
153 | 


--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to ngx-text-diff-app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('tda-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-text-diff-app",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve --open",
 7 |     "build": "ng build --prod",
 8 |     "build_report": "ng build --prod --stats-json",
 9 |     "test": "echo 1",
10 |     "lint": "ng lint",
11 |     "postinstall": "ngcc",
12 |     "e2e": "ng e2e",
13 |     "build_lib": "ng build ngx-text-diff --prod",
14 |     "copy-license": "copyfiles ./projects/ngx-text-diff/LICENSE ./dist/ngx-text-diff",
15 |     "copy-readme": "copyfiles ./projects/ngx-text-diff/README.md ./dist/ngx-text-diff",
16 |     "copy-files": "npm run copy-license && npm run copy-readme",
17 |     "npm_pack": "cd dist/ngx-text-diff && npm pack",
18 |     "package": "npm run build_lib && npm run copy-files && npm run npm_pack"
19 |   },
20 |   "engines": {
21 |     "node": "12.16.2",
22 |     "npm": "6.12.0"
23 |   },
24 |   "private": true,
25 |   "dependencies": {
26 |     "@angular/animations": "^9.1.2",
27 |     "@angular/cdk": "^9.2.1",
28 |     "@angular/common": "^9.1.2",
29 |     "@angular/compiler": "^9.1.2",
30 |     "@angular/core": "^9.1.2",
31 |     "@angular/forms": "^9.1.2",
32 |     "@angular/platform-browser": "^9.1.2",
33 |     "@angular/platform-browser-dynamic": "^9.1.2",
34 |     "@angular/router": "^9.1.2",
35 |     "bootstrap": "^4.4.1",
36 |     "codemirror": "^5.52.2",
37 |     "copyfiles": "^2.2.0",
38 |     "core-js": "^3.6.5",
39 |     "diff-match-patch": "^1.0.4",
40 |     "express": "^4.17.1",
41 |     "path": "^0.12.7",
42 |     "rxjs": "~6.5.5",
43 |     "tslib": "^1.11.1",
44 |     "zone.js": "~0.10.2"
45 |   },
46 |   "devDependencies": {
47 |     "@angular-devkit/build-angular": "~0.901.1",
48 |     "@angular-devkit/build-ng-packagr": "~0.901.1",
49 |     "@angular/cli": "^9.1.1",
50 |     "@angular/compiler-cli": "^9.1.2",
51 |     "@angular/language-service": "^9.1.2",
52 |     "@types/codemirror": "0.0.91",
53 |     "@types/diff-match-patch": "^1.0.32",
54 |     "@types/express": "^4.17.6",
55 |     "@types/jasmine": "^3.5.10",
56 |     "@types/jasminewd2": "^2.0.8",
57 |     "@types/node": "^13.11.1",
58 |     "codelyzer": "^5.2.2",
59 |     "jasmine-core": "^3.5.0",
60 |     "jasmine-spec-reporter": "^5.0.1",
61 |     "karma": "^5.0.1",
62 |     "karma-chrome-launcher": "^3.1.0",
63 |     "karma-coverage-istanbul-reporter": "^2.1.1",
64 |     "karma-jasmine": "^3.1.1",
65 |     "karma-jasmine-html-reporter": "^1.5.3",
66 |     "ng-packagr": "^9.0.0",
67 |     "prettier": "^2.0.4",
68 |     "protractor": "^5.4.3",
69 |     "ts-node": "^8.8.2",
70 |     "tslint": "^6.1.1",
71 |     "typescript": "^3.8.3",
72 |     "webpack-bundle-analyzer": "^3.6.1"
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## NgxTextDiff - v0.6.0
 2 | * Added support for Angular 9
 3 | 
 4 | ## NgxTextDiff - v0.5.4
 5 | * Allowed overriding CSS and allowed user to pass in classes or styles (#18).
 6 | * Added @Output() to provide comparison data in case user wants it (#17).
 7 | * Added better usage examples to the README (#15).
 8 | 
 9 | ## NgxTextDiff - v0.5.3
10 | * Added support to Angular v7 (#10).
11 | * Fixed incorrect line numbers (#8).
12 | 
13 | ## NgxTextDiff - v0.5.2
14 | * Changed some inputs name and fixed spell errors.
15 | 
16 | ## NgxTextDiff - v0.5.0
17 | * First Alpha Version
18 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Alfredo Benassi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/README.md:
--------------------------------------------------------------------------------
  1 | # ngx-text-diff
  2 | - A simple text diff `component` to be used with Angular and based on `google diff match patch` library.
  3 | 
  4 | ## Dependencies
  5 |  - diff-match-patch : ^1.0.4
  6 | 
  7 | ## Required Packages
  8 | These packages will not be auto-installed and must be installed in addition to this library.
  9 |  - @angular/common >= 6.0.0
 10 |  - @angular/core >= 6.0.0
 11 |  - @angular/forms >= 6.0.0
 12 |  - @angular/cdk >= 6.0.0 (used for scrolling synchronization)
 13 | 
 14 | ## Demo
 15 | [Ngx Text Diff Demo](https://ngx-text-diff.herokuapp.com/home)
 16 | 
 17 | ## Installation
 18 | `npm i ngx-text-diff`
 19 | 
 20 | ## API
 21 | `module: NgxTextDiffModule`  
 22 | `component: NgxTextDiffComponent`  
 23 | `selector: td-ngx-text-diff`
 24 | 
 25 | ### Inputs
 26 | | Input                | Type              | Required                        | Description                                                                                     |
 27 | | -------------------- | ----------------- | ------------------------------- | ----------------------------------------------------------------------------------------------- |
 28 | | left                 | string            | Yes                             | First text to be compared                                                                       |
 29 | | right                | string            | Yes                             | Second text to be compared                                                                      |
 30 | | diffContent          | Observable        | Optional                        | `DiffContent` observable                                                                        |
 31 | | format               | `DiffTableFormat` | Optional, default: `SideBySide` | Possible values:<br> -`SideBySide`<br> -`LineByLine`                                            |
 32 | | loading              | boolean           | Optional, default: `false`      | Possible values:<br> -`true`: shows an loading spinner.<br>- `false`: hides the loading spinner |
 33 | | hideMatchingLines    | boolean           | Optional, default: `false`      | Possible values:<br> -`true`: Only shows lines with differences.<br>- `false`: shows all lines  |
 34 | | showToolbar          | boolean           | Optional, default: `true`       | Possible values:<br> -`true`: shows the toolbar.<br>- `false`: hides the format toolbar         |
 35 | | showBtnToolbar       | boolean           | Optional, default: `true`       | Possible values:<br> -`true`: shows the format toolbar.<br>- `false`: hides the format toolbar  |
 36 | | outerContainerClass  | any               | Optional                        | `ngClass` object for the outer div                                                              |
 37 | | outerContainerStyle  | any               | Optional                        | `ngStyle` object for the outer style                                                            |
 38 | | toolbarClass         | any               | Optional                        | `ngClass` object for the toolbar div                                                            |
 39 | | toolbarStyle         | any               | Optional                        | `ngStyle` object for the toolbar style                                                          |
 40 | | compareRowsClass     | any               | Optional                        | `ngClass` object for the div surrounding the table rows                                         |
 41 | | compareRowsStyle     | any               | Optional                        | `ngStyle` object for the div surrounding the table rows                                         |
 42 | | synchronizeScrolling | boolean           | Optional, default: `true`       | Possible values:<br> -`true`: Scrolls both tables together.<br>- `false`: Scrolls individually  |
 43 | 
 44 | ### Output
 45 | | Input          | Type        | Required | Description                             |
 46 | | -------------- | ----------- | -------- | --------------------------------------- |
 47 | | compareResults | DiffResults | Optional | Event fired when comparison is executed |
 48 | 
 49 | ### Custom Objects
 50 | ``` typescript
 51 | export interface DiffContent {
 52 |   leftContent: string;
 53 |   rightContent: string;
 54 | }
 55 | 
 56 | export type DiffTableFormat = 'SideBySide' | 'LineByLine';
 57 | 
 58 | export interface DiffResults {
 59 |   hasDiff: boolean;
 60 |   diffsCount: number;
 61 |   rowsWithDiff: {
 62 |     leftLineNumber?: number;
 63 |     rightLineNumber?: number;
 64 |     numDiffs: number;
 65 |   }[];
 66 | }
 67 | ```
 68 | 
 69 | ## Usage
 70 | 1. Register the `NgxTextDiffModule` in a module, for example app module.
 71 | ``` typescript
 72 | import { BrowserModule } from '@angular/platform-browser';
 73 | import { NgModule } from '@angular/core';
 74 | import { ScrollDispatchModule } from '@angular/cdk/scrolling';
 75 | 
 76 | import { AppComponent } from './app.component';
 77 | import { NgxTextDiffModule } from 'ngx-text-diff';
 78 | 
 79 | @NgModule({
 80 |   declarations: [AppComponent],
 81 |   imports: [BrowserModule, ScrollDispatchModule, NgxTextDiffModule],
 82 |   providers: [],
 83 |   bootstrap: [AppComponent]
 84 | })
 85 | export class AppModule {}
 86 | ```
 87 | 
 88 | ``` typescript
 89 | import { Component, OnInit } from '@angular/core';
 90 | import { DiffContent, DiffResults } from 'ngx-text-diff/lib/ngx-text-diff.model';
 91 | 
 92 | @Component({
 93 |   selector: 'app-home',
 94 |   templateUrl: './home.component.html',
 95 |   styleUrls: []
 96 | })
 97 | export class HomeComponent implements OnInit {
 98 |   left = `some text to\nbe compared!`
 99 |   right = `A changed\n version \n of the text to\nbe compared!`
100 | 
101 |   constructor() {}
102 | 
103 |   ngOnInit() {
104 |   }
105 | 
106 |   onCompareResults(diffResults: DiffResults) {
107 |     console.log('diffResults', diffResults);
108 |   }
109 | }
110 | 
111 | ```
112 | 
113 | ``` html
114 | <td-ngx-text-diff
115 |   [left]="left"
116 |   [right]="right"
117 |   (compareResults)="onCompareResults($event)"
118 | >
119 | ```
120 | 
121 | ## Build the NgxTextDiff module
122 | 
123 | Run `ng build ngx-text-diff` to build the library. The build artifacts will be stored in the `dist/ngx-text-diff` directory.
124 | 
125 | ## Credits
126 | 
127 | This project is based on [google diff match patch](https://github.com/google/diff-match-patch).
128 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: false,
28 |     browsers: ['ChromeHeadless'],
29 |     // you can define custom flags
30 |     customLaunchers: {
31 |       ChromeHeadlessNoSandbox: {
32 |         base: 'ChromeHeadless',
33 |         flags: ['--no-sandbox']
34 |       }
35 |     },
36 |     singleRun: true
37 |   });
38 | };
39 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/ng-package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
 3 |   "dest": "../../dist/ngx-text-diff",
 4 |   "lib": {
 5 |     "entryFile": "src/public_api.ts"
 6 |   },
 7 |   "whitelistedNonPeerDependencies": [
 8 |     "diff-match-patch"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/ng-package.prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
 3 |   "dest": "../../dist/ngx-text-diff",
 4 |   "lib": {
 5 |     "entryFile": "src/public_api.ts"
 6 |   },
 7 |   "whitelistedNonPeerDependencies": [
 8 |     "diff-match-patch"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-text-diff",
 3 |   "version": "0.6.0",
 4 |   "description": "A Text Diff component for Angular.",
 5 |   "keywords": [
 6 |     "Angular",
 7 |     "Library",
 8 |     "Google",
 9 |     "Diff"
10 |   ],
11 |   "license": "MIT",
12 |   "author": {
13 |     "name": "Alfredo Benassi",
14 |     "email": "alfrebenassi@gmail.com"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/ABenassi87/ngx-text-diff.git"
19 |   },
20 |   "homepage": "https://ngx-text-diff.herokuapp.com/home",
21 |   "dependencies": {
22 |     "diff-match-patch": "^1.0.4"
23 |   },
24 |   "peerDependencies": {
25 |     "@angular/common": ">=6.0.0",
26 |     "@angular/core": "^>=6.0.0",
27 |     "@angular/forms": "^>=6.0.0",
28 |     "@angular/cdk": "^>=6.0.0",
29 |     "rxjs": "~6.3.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/format-line.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | /*import { FormatLinePipe } from './format-line.pipe';
2 | 
3 | describe('FormatLinePipe', () => {
4 |   it('create an instance', () => {
5 |     const pipe = new FormatLinePipe();
6 |     expect(pipe).toBeTruthy();
7 |   });
8 | });*/
9 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/format-line.pipe.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |   name: 'formatLine'
 5 | })
 6 | export class FormatLinePipe implements PipeTransform {
 7 |   transform(line: string, diffs?: string[]): string {
 8 |     if (!line) {
 9 |       return ' ';
10 |     }
11 |     if (!!diffs && diffs.length > 0) {
12 |       /*diffs.forEach(diff => {
13 |         line = line.replace(diff, `<span class="highli">${diff}</span>`);
14 |       });*/
15 |     }
16 |     return line
17 |       .replace(/&/g, '&amp;')
18 |       .replace(/</g, '&lt;')
19 |       .replace(/>/g, '&gt;')
20 |       .replace(/"/g, '&quot;')
21 |       .replace(/ /g, '&nbsp;');
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/loader-spinner/loader-spinner.component.css:
--------------------------------------------------------------------------------
 1 | .td-loading-roller {
 2 |   display: inline-block;
 3 |   position: relative;
 4 |   width: 64px;
 5 |   height: 64px;
 6 | }
 7 | .td-loading-roller div {
 8 |   animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 9 |   transform-origin: 32px 32px;
10 | }
11 | .td-loading-roller div:after {
12 |   content: " ";
13 |   display: block;
14 |   position: absolute;
15 |   width: 6px;
16 |   height: 6px;
17 |   border-radius: 50%;
18 |   background: #000;
19 |   margin: -3px 0 0 -3px;
20 | }
21 | .td-loading-roller div:nth-child(1) {
22 |   animation-delay: -0.036s;
23 | }
24 | .td-loading-roller div:nth-child(1):after {
25 |   top: 50px;
26 |   left: 50px;
27 | }
28 | .td-loading-roller div:nth-child(2) {
29 |   animation-delay: -0.072s;
30 | }
31 | .td-loading-roller div:nth-child(2):after {
32 |   top: 54px;
33 |   left: 45px;
34 | }
35 | .td-loading-roller div:nth-child(3) {
36 |   animation-delay: -0.108s;
37 | }
38 | .td-loading-roller div:nth-child(3):after {
39 |   top: 57px;
40 |   left: 39px;
41 | }
42 | .td-loading-roller div:nth-child(4) {
43 |   animation-delay: -0.144s;
44 | }
45 | .td-loading-roller div:nth-child(4):after {
46 |   top: 58px;
47 |   left: 32px;
48 | }
49 | .td-loading-roller div:nth-child(5) {
50 |   animation-delay: -0.18s;
51 | }
52 | .td-loading-roller div:nth-child(5):after {
53 |   top: 57px;
54 |   left: 25px;
55 | }
56 | .td-loading-roller div:nth-child(6) {
57 |   animation-delay: -0.216s;
58 | }
59 | .td-loading-roller div:nth-child(6):after {
60 |   top: 54px;
61 |   left: 19px;
62 | }
63 | .td-loading-roller div:nth-child(7) {
64 |   animation-delay: -0.252s;
65 | }
66 | .td-loading-roller div:nth-child(7):after {
67 |   top: 50px;
68 |   left: 14px;
69 | }
70 | .td-loading-roller div:nth-child(8) {
71 |   animation-delay: -0.288s;
72 | }
73 | .td-loading-roller div:nth-child(8):after {
74 |   top: 45px;
75 |   left: 10px;
76 | }
77 | @keyframes lds-roller {
78 |   0% {
79 |     transform: rotate(0deg);
80 |   }
81 |   100% {
82 |     transform: rotate(360deg);
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/loader-spinner/loader-spinner.component.html:
--------------------------------------------------------------------------------
 1 | <div class="td-loading-roller" *ngIf="active">
 2 |   <div></div>
 3 |   <div></div>
 4 |   <div></div>
 5 |   <div></div>
 6 |   <div></div>
 7 |   <div></div>
 8 |   <div></div>
 9 |   <div></div>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/loader-spinner/loader-spinner.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'td-loader-spinner',
 5 |   templateUrl: './loader-spinner.component.html',
 6 |   styleUrls: ['./loader-spinner.component.css']
 7 | })
 8 | export class LoaderSpinnerComponent implements OnInit {
 9 |   @Input() active = false;
10 | 
11 |   constructor() {}
12 | 
13 |   ngOnInit() {}
14 | }
15 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff-container.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, Input, ElementRef } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[tdContainer]',
 5 | })
 6 | export class ContainerDirective {
 7 |   @Input() id: string;
 8 | 
 9 |   element: HTMLTableHeaderCellElement;
10 | 
11 |   constructor(private _el: ElementRef) {
12 |     this.element = _el.nativeElement;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.component.css:
--------------------------------------------------------------------------------
  1 | .td-wrapper {
  2 |   display: grid;
  3 |   width: 100%;
  4 |   grid-row-gap: 10px;
  5 |   grid-template-columns: repeat(2, [col] 50%);
  6 |   grid-template-rows: repeat(2, [row] auto);
  7 |   background-color: #fff;
  8 |   color: #444;
  9 | }
 10 | 
 11 | .td-toolbar-show-diff {
 12 |   grid-column: 1;
 13 |   grid-row: 1;
 14 | }
 15 | 
 16 | .td-toolbar-select-format {
 17 |   margin-left: auto;
 18 |   grid-column: 2;
 19 |   grid-row: 1;
 20 | }
 21 | 
 22 | .td-table-container {
 23 |   grid-column: 1 / 2;
 24 |   grid-row: 2;
 25 |   width: 100%;
 26 |   max-width: 100%;
 27 |   overflow-x: auto;
 28 | }
 29 | 
 30 | .td-table-wrapper {
 31 |   display: flex;
 32 |   width: 200%;
 33 | }
 34 | 
 35 | .td-table {
 36 |   border: 1px solid darkgray;
 37 |   max-height: 50vh;
 38 |   width: 100%;
 39 |   max-width: 100%;
 40 | }
 41 | 
 42 | .fit-column {
 43 |   width: 1px;
 44 |   white-space: nowrap;
 45 | }
 46 | 
 47 | .line-number-col {
 48 |   position: relative; /* I am the fallback */
 49 | 
 50 |   /* Give it everything you got! (use an auto prefixer...) */
 51 |   position: -webkit-sticky;
 52 |   position: sticky;
 53 |   left: 0;
 54 |   top: auto;
 55 |   border-right: 1px solid #ddd;
 56 |   color: #999;
 57 |   text-align: right;
 58 |   background-color: #f7f7f7;
 59 |   padding-left: 10px;
 60 |   padding-right: 10px;
 61 |   font-size: 87.5%;
 62 | }
 63 | 
 64 | .line-number-col-left {
 65 |   color: #999;
 66 |   padding-left: 10px;
 67 |   padding-right: 10px;
 68 |   text-align: right;
 69 |   background-color: #f7f7f7;
 70 |   font-size: 87.5%;
 71 | }
 72 | 
 73 | .insert-row,
 74 | .insert-row > .line-number-col {
 75 |   background-color: #dfd;
 76 |   border-color: #b4e2b4;
 77 | }
 78 | 
 79 | .delete-row,
 80 | .delete-row > .line-number-col {
 81 |   background-color: #fee8e9;
 82 |   border-color: #e9aeae;
 83 | }
 84 | 
 85 | .empty-row {
 86 |   background-color: #f7f7f7;
 87 |   height: 24px;
 88 | }
 89 | 
 90 | .td-table td {
 91 |   border-top: 0;
 92 |   padding-top: 0;
 93 |   padding-bottom: 0;
 94 |   white-space: nowrap;
 95 |   max-width: 50%;
 96 | }
 97 | 
 98 | pre {
 99 |   margin-bottom: 0;
100 | }
101 | 
102 | td.content-col {
103 |   padding: 0;
104 |   margin: 0;
105 |   line-height: 24px;
106 | }
107 | 
108 | td.prefix-col {
109 |   padding-left: 10px;
110 |   padding-right: 10px;
111 |   line-height: 24px;
112 | }
113 | 
114 | .td-btn-group {
115 |   border-radius: 4px;
116 | }
117 | 
118 | .td-btn-group button {
119 |   background-color: rgba(23,162,184,.7); /* Green background */
120 |   border: 1px solid #17a2b8; /* Green border */
121 |   color: white; /* White text */
122 |   cursor: pointer; /* Pointer/hand icon */
123 |   float: left; /* Float the buttons side by side */
124 | }
125 | 
126 | .td-btn-group button:not(:last-child) {
127 |   border-right: none; /* Prevent double borders */
128 | }
129 | .td-btn-group button:first-child {
130 |   -webkit-border-top-left-radius: 4px;
131 |   -webkit-border-bottom-left-radius: 4px;
132 |   -moz-border-radius-topleft: 4px;
133 |   -moz-border-radius-bottomleft: 4px;
134 |   border-top-left-radius: 4px;
135 |   border-bottom-left-radius: 4px;
136 | }
137 | 
138 | .td-btn-group button:last-child {
139 |   -webkit-border-top-right-radius: 4px;
140 |   -webkit-border-bottom-right-radius: 4px;
141 |   -moz-border-radius-topright: 4px;
142 |   -moz-border-radius-bottomright: 4px;
143 |   border-top-right-radius: 4px;
144 |   border-bottom-right-radius: 4px;
145 | }
146 | 
147 | /* Clear floats (clearfix hack) */
148 | .td-btn-group:after {
149 |   content: '';
150 |   clear: both;
151 |   display: table;
152 | }
153 | 
154 | /* Add a background color on hover */
155 | .td-btn-group button:hover,
156 | .td-btn-group button.active {
157 |   background-color: #17a2b8;
158 | }
159 | 
160 | /* Customize the label (the container) */
161 | .td-checkbox-container {
162 |   display: block;
163 |   position: relative;
164 |   padding-left: 21px;
165 |   margin-bottom: 0;
166 |   cursor: pointer;
167 |   font-size: 16px;
168 |   line-height: 28px;
169 |   -webkit-user-select: none;
170 |   -moz-user-select: none;
171 |   -ms-user-select: none;
172 |   user-select: none;
173 | }
174 | 
175 | /* Hide the browser's default checkbox */
176 | .td-checkbox-container input {
177 |   position: absolute;
178 |   opacity: 0;
179 |   cursor: pointer;
180 |   height: 0;
181 |   width: 0;
182 | }
183 | 
184 | /* Create a custom checkbox */
185 | .checkmark {
186 |   position: absolute;
187 |   top: 7px;
188 |   left: 0;
189 |   height: 16px;
190 |   width: 16px;
191 |   background-color: #eee;
192 | }
193 | 
194 | /* On mouse-over, add a grey background color */
195 | .td-checkbox-container:hover input ~ .checkmark {
196 |   background-color: #ccc;
197 | }
198 | 
199 | /* When the checkbox is checked, add a blue background */
200 | .td-checkbox-container input:checked ~ .checkmark {
201 |   background-color: #17a2b8;
202 | }
203 | 
204 | /* Create the checkmark/indicator (hidden when not checked) */
205 | .checkmark:after {
206 |   content: "";
207 |   position: absolute;
208 |   display: none;
209 | }
210 | 
211 | /* Show the checkmark when checked */
212 | .td-checkbox-container input:checked ~ .checkmark:after {
213 |   display: block;
214 | }
215 | 
216 | /* Style the checkmark/indicator */
217 | .td-checkbox-container .checkmark:after {
218 |   left: 5px;
219 |   top: 3px;
220 |   width: 5px;
221 |   height: 10px;
222 |   border: solid white;
223 |   border-width: 0 3px 3px 0;
224 |   -webkit-transform: rotate(45deg);
225 |   -ms-transform: rotate(45deg);
226 |   transform: rotate(45deg);
227 | }
228 | 
229 | .insert-row > .highlight {
230 |   background-color: #acf2bd !important;
231 | }
232 | 
233 | .delete-row > .highlight {
234 |   background-color: #fdb8c0 !important;
235 | }
236 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.component.html:
--------------------------------------------------------------------------------
  1 | <td-loader-spinner [active]="loading"></td-loader-spinner>
  2 | <div class="td-wrapper" [ngClass]="outerContainerClass" [ngStyle]="outerContainerStyle" *ngIf="!loading">
  3 | 
  4 |   <div [ngClass]="toolbarClass" [ngStyle]="toolbarStyle" *ngIf="showToolbar">
  5 |     <div class="td-toolbar-show-diff">
  6 |       <label class="td-checkbox-container">
  7 |         Only Show Lines with Differences ({{ diffsCount }})
  8 |         <input type="checkbox" id="showDiffs" [ngModel]="hideMatchingLines" (ngModelChange)="hideMatchingLinesChanged($event)" />
  9 |         <span class="checkmark"></span>
 10 |       </label>
 11 |     </div>
 12 |   </div>
 13 | 
 14 |   <div class="td-toolbar-select-format" *ngIf="showToolbar && showBtnToolbar">
 15 |     <div class="td-btn-group td-btn-group-toggle" data-toggle="buttons">
 16 |       <button
 17 |         *ngFor="let option of formatOptions"
 18 |         [ngClass]="{ active: format === option.value, disabled: !!option.disabled }"
 19 |         [name]="option.name"
 20 |         [id]="option.id"
 21 |         [disabled]="!!option.disabled"
 22 |         (click)="setDiffTableFormat(option.value)"
 23 |       >
 24 |         {{ option.label }}
 25 |       </button>
 26 |     </div>
 27 |   </div>
 28 | 
 29 |   <div class="td-table-wrapper" [ngClass]="compareRowsClass" [ngStyle]="compareRowsStyle">
 30 |     <!-- Right side-by-side -->
 31 |     <div class="td-table-container side-by-side" *ngIf="format === 'SideBySide'" id="td-left-compare-container" tdContainer cdkScrollable>
 32 |       <table class="td-table">
 33 |         <tbody>
 34 |           <tr *ngFor="let row of filteredTableRows; trackBy: trackTableRows">
 35 |             <td
 36 |               scope="row"
 37 |               class="fit-column line-number-col"
 38 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }"
 39 |             >
 40 |               {{ row.leftContent?.lineNumber !== -1 ? row.leftContent?.lineNumber : ' ' }}
 41 |             </td>
 42 |             <td
 43 |               class="fit-column prefix-col"
 44 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }"
 45 |             >
 46 |               <span>{{ row.leftContent?.prefix || ' ' }}</span>
 47 |             </td>
 48 |             <td
 49 |               class="content-col"
 50 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }"
 51 |               *ngIf="!row.hasDiffs"
 52 |             >
 53 |               <span [innerHTML]="row.leftContent?.lineContent | formatLine"></span>
 54 |             </td>
 55 |             <td
 56 |               class="content-col"
 57 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }"
 58 |               *ngIf="row.hasDiffs"
 59 |             >
 60 |               <span
 61 |                 [innerHTML]="diff.content | formatLine"
 62 |                 [ngClass]="{ highlight: diff.isDiff }"
 63 |                 *ngFor="let diff of row.leftContent?.lineDiffs; trackBy: trackDiffs"
 64 |               ></span>
 65 |             </td>
 66 |           </tr>
 67 |         </tbody>
 68 |       </table>
 69 |     </div>
 70 |     <!-- Left side-by-side -->
 71 |     <div class="td-table-container side-by-side" *ngIf="format === 'SideBySide'" id="td-right-compare-container" tdContainer cdkScrollable>
 72 |       <table class="td-table">
 73 |         <tbody>
 74 |           <tr *ngFor="let row of filteredTableRows; trackBy: trackTableRows">
 75 |             <td
 76 |               scope="row"
 77 |               class="fit-column line-number-col"
 78 |               [ngClass]="{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }"
 79 |             >
 80 |               {{ row.rightContent?.lineNumber !== -1 ? row.rightContent?.lineNumber : ' ' }}
 81 |             </td>
 82 |             <td
 83 |               class="fit-column prefix-col"
 84 |               [ngClass]="{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }"
 85 |             >
 86 |               <span>{{ row.rightContent?.prefix || ' ' }}</span>
 87 |             </td>
 88 |             <td
 89 |               class="content-col"
 90 |               [ngClass]="{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }"
 91 |               *ngIf="!row.hasDiffs"
 92 |             >
 93 |               <span [innerHTML]="row.rightContent?.lineContent | formatLine"></span>
 94 |             </td>
 95 |             <td
 96 |               class="content-col"
 97 |               [ngClass]="{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }"
 98 |               *ngIf="row.hasDiffs"
 99 |             >
100 |               <span
101 |                 [innerHTML]="diff.content | formatLine"
102 |                 [ngClass]="{ highlight: diff.isDiff }"
103 |                 *ngFor="let diff of row.rightContent?.lineDiffs; trackBy: trackDiffs"
104 |               ></span>
105 |             </td>
106 |           </tr>
107 |         </tbody>
108 |       </table>
109 |     </div>
110 |     <!-- Line By Line - combined table -->
111 |     <div class="td-table-container line-by-line" *ngIf="format === 'LineByLine'">
112 |       <table class="td-table">
113 |         <tbody>
114 |           <tr *ngFor="let row of filteredTableRowsLineByLine; trackBy: trackTableRows">
115 |             <td scope="row" class="fit-column line-number-col-left">{{ row.leftContent?.lineNumber }}</td>
116 |             <td scope="row" class="fit-column line-number-col">{{ row.rightContent?.lineNumber }}</td>
117 |             <td
118 |               class="fit-column prefix-col"
119 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }"
120 |             >
121 |               <span>{{ row.leftContent?.prefix || row.rightContent?.prefix || ' ' }}</span>
122 |             </td>
123 |             <td
124 |               class="content-col"
125 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }"
126 |               *ngIf="!row.hasDiffs"
127 |             >
128 |               <span [innerHTML]="row.leftContent?.lineContent | formatLine"></span>
129 |             </td>
130 |             <td
131 |               class="content-col"
132 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }"
133 |               *ngIf="row.hasDiffs && row.leftContent && row.leftContent?.lineDiffs.length !== 0"
134 |             >
135 |               <span
136 |                 [innerHTML]="diff.content | formatLine"
137 |                 [ngClass]="{ highlight: diff.isDiff }"
138 |                 *ngFor="let diff of row.leftContent?.lineDiffs; trackBy: trackDiffs"
139 |               ></span>
140 |             </td>
141 |             <td
142 |               class="content-col"
143 |               [ngClass]="{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }"
144 |               *ngIf="row.hasDiffs && row.rightContent && row.rightContent?.lineDiffs.length !== 0"
145 |             >
146 |               <span
147 |                 [innerHTML]="diff.content | formatLine"
148 |                 [ngClass]="{ highlight: diff.isDiff }"
149 |                 *ngFor="let diff of row.rightContent?.lineDiffs; trackBy: trackDiffs"
150 |               ></span>
151 |             </td>
152 |           </tr>
153 |         </tbody>
154 |       </table>
155 |     </div>
156 |   </div>
157 | </div>
158 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ChangeDetectorRef,
  3 |   Component,
  4 |   Input,
  5 |   OnDestroy,
  6 |   OnInit,
  7 |   Output,
  8 |   EventEmitter,
  9 |   ViewChildren,
 10 |   QueryList,
 11 |   AfterViewInit
 12 | } from '@angular/core';
 13 | import { DiffContent, DiffPart, DiffTableFormat, DiffTableFormatOption, DiffTableRowResult, DiffResults } from './ngx-text-diff.model';
 14 | import { NgxTextDiffService } from './ngx-text-diff.service';
 15 | import { Observable, Subscription } from 'rxjs';
 16 | import { ContainerDirective } from './ngx-text-diff-container.directive';
 17 | import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
 18 | 
 19 | @Component({
 20 |   selector: 'td-ngx-text-diff',
 21 |   templateUrl: './ngx-text-diff.component.html',
 22 |   styleUrls: ['./ngx-text-diff.component.css'],
 23 | })
 24 | export class NgxTextDiffComponent implements OnInit, AfterViewInit, OnDestroy {
 25 |   private _hideMatchingLines = false;
 26 |   @ViewChildren(ContainerDirective) containers: QueryList<ContainerDirective>;
 27 |   @Input() format: DiffTableFormat = 'SideBySide';
 28 |   @Input() left = '';
 29 |   @Input() right = '';
 30 |   @Input() diffContent: Observable<DiffContent>;
 31 |   @Input() loading = false;
 32 |   @Input() showToolbar = true;
 33 |   @Input() showBtnToolbar = true;
 34 |   @Input()
 35 |   get hideMatchingLines() {
 36 |     return this._hideMatchingLines;
 37 |   }
 38 | 
 39 |   set hideMatchingLines(hide: boolean) {
 40 |     this.hideMatchingLinesChanged(hide);
 41 |   }
 42 |   @Input() outerContainerClass: string;
 43 |   @Input() outerContainerStyle: any;
 44 |   @Input() toolbarClass: string;
 45 |   @Input() toolbarStyle: any;
 46 |   @Input() compareRowsClass: string;
 47 |   @Input() compareRowsStyle: any;
 48 |   @Input() synchronizeScrolling = true;
 49 |   @Output() compareResults = new EventEmitter<DiffResults>();
 50 |   subscriptions: Subscription[] = [];
 51 |   tableRows: DiffTableRowResult[] = [];
 52 |   filteredTableRows: DiffTableRowResult[] = [];
 53 |   tableRowsLineByLine: DiffTableRowResult[] = [];
 54 |   filteredTableRowsLineByLine: DiffTableRowResult[] = [];
 55 |   diffsCount = 0;
 56 | 
 57 |   formatOptions: DiffTableFormatOption[] = [
 58 |     {
 59 |       id: 'side-by-side',
 60 |       name: 'side-by-side',
 61 |       label: 'Side by Side',
 62 |       value: 'SideBySide',
 63 |       icon: 'la-code',
 64 |     },
 65 |     {
 66 |       id: 'line-by-line',
 67 |       name: 'line-by-line',
 68 |       label: 'Line by Line',
 69 |       value: 'LineByLine',
 70 |       icon: 'la-file-text',
 71 |     },
 72 |   ];
 73 | 
 74 |   constructor(private scrollService: ScrollDispatcher, private diff: NgxTextDiffService, private cd: ChangeDetectorRef) {}
 75 | 
 76 |   ngOnInit() {
 77 |     this.loading = true;
 78 |     if (this.diffContent) {
 79 |       this.subscriptions.push(
 80 |         this.diffContent.subscribe(content => {
 81 |           this.loading = true;
 82 |           this.left = content.leftContent;
 83 |           this.right = content.rightContent;
 84 |           this.renderDiffs()
 85 |             .then(() => {
 86 |               this.cd.detectChanges();
 87 |               this.loading = false;
 88 |             })
 89 |             .catch(() => (this.loading = false));
 90 |         })
 91 |       );
 92 |     }
 93 |     this.renderDiffs()
 94 |       .then(() => (this.loading = false))
 95 |       .catch(e => (this.loading = false));
 96 |   }
 97 | 
 98 |   ngAfterViewInit() {
 99 |     this.initScrollListener();
100 |   }
101 | 
102 |   ngOnDestroy(): void {
103 |     if (this.subscriptions) {
104 |       this.subscriptions.forEach(subscription => subscription.unsubscribe());
105 |     }
106 |   }
107 | 
108 |   hideMatchingLinesChanged(value: boolean) {
109 |     this._hideMatchingLines = value;
110 |     if (this.hideMatchingLines) {
111 |       this.filteredTableRows = this.tableRows.filter(
112 |         row => (row.leftContent && row.leftContent.prefix === '-') || (row.rightContent && row.rightContent.prefix === '+')
113 |       );
114 |       this.filteredTableRowsLineByLine = this.tableRowsLineByLine.filter(
115 |         row => (row.leftContent && row.leftContent.prefix === '-') || (row.rightContent && row.rightContent.prefix === '+')
116 |       );
117 |     } else {
118 |       this.filteredTableRows = this.tableRows;
119 |       this.filteredTableRowsLineByLine = this.tableRowsLineByLine;
120 |     }
121 |   }
122 | 
123 |   setDiffTableFormat(format: DiffTableFormat) {
124 |     this.format = format;
125 |   }
126 | 
127 |   async renderDiffs() {
128 |     try {
129 |       this.diffsCount = 0;
130 |       this.tableRows = await this.diff.getDiffsByLines(this.left, this.right);
131 |       this.tableRowsLineByLine = this.tableRows.reduce((tableLineByLine: DiffTableRowResult[], row: DiffTableRowResult) => {
132 |         if (!tableLineByLine) {
133 |           tableLineByLine = [];
134 |         }
135 |         if (row.hasDiffs) {
136 |           if (row.leftContent) {
137 |             tableLineByLine.push({
138 |               leftContent: row.leftContent,
139 |               rightContent: null,
140 |               belongTo: row.belongTo,
141 |               hasDiffs: true,
142 |               numDiffs: row.numDiffs,
143 |             });
144 |           }
145 |           if (row.rightContent) {
146 |             tableLineByLine.push({
147 |               leftContent: null,
148 |               rightContent: row.rightContent,
149 |               belongTo: row.belongTo,
150 |               hasDiffs: true,
151 |               numDiffs: row.numDiffs,
152 |             });
153 |           }
154 |         } else {
155 |           tableLineByLine.push(row);
156 |         }
157 | 
158 |         return tableLineByLine;
159 |       }, []);
160 |       this.diffsCount = this.tableRows.filter(row => row.hasDiffs).length;
161 |       this.filteredTableRows = this.tableRows;
162 |       this.filteredTableRowsLineByLine = this.tableRowsLineByLine;
163 |       this.emitCompareResultsEvent();
164 |     } catch (e) {
165 |       throw e;
166 |     }
167 |   }
168 | 
169 |   emitCompareResultsEvent() {
170 |     const diffResults: DiffResults = {
171 |       hasDiff: this.diffsCount > 0,
172 |       diffsCount: this.diffsCount,
173 |       rowsWithDiff: this.tableRows
174 |         .filter(row => row.hasDiffs)
175 |         .map(row => ({
176 |           leftLineNumber: row.leftContent ? row.leftContent.lineNumber : null,
177 |           rightLineNumber: row.rightContent ? row.rightContent.lineNumber : null,
178 |           numDiffs: row.numDiffs,
179 |         })),
180 |     };
181 | 
182 |     this.compareResults.next(diffResults);
183 |   }
184 | 
185 |   trackTableRows(index, row: DiffTableRowResult) {
186 |     return row && row.leftContent ? row.leftContent.lineContent : row && row.rightContent ? row.rightContent.lineContent : undefined;
187 |   }
188 | 
189 |   trackDiffs(index, diff: DiffPart) {
190 |     return diff && diff.content ? diff.content : undefined;
191 |   }
192 | 
193 |   private initScrollListener() {
194 |     this.subscriptions.push(this.scrollService.scrolled().subscribe((scrollableEv: CdkScrollable) => {
195 |       if (scrollableEv && this.synchronizeScrolling) {
196 |         const scrollableId = scrollableEv.getElementRef().nativeElement.id;
197 |         const nonScrolledContainer: ContainerDirective = this.containers.find(container => container.id !== scrollableId);
198 |         if (nonScrolledContainer) {
199 |           nonScrolledContainer.element.scrollTo({
200 |             top: scrollableEv.measureScrollOffset('top'),
201 |             left: scrollableEv.measureScrollOffset('left'),
202 |           });
203 |         }
204 |       }
205 |     }));
206 |   }
207 | }
208 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.model.ts:
--------------------------------------------------------------------------------
 1 | export type DiffTableFormat = 'SideBySide' | 'LineByLine';
 2 | export type SideDiff = 'both' | 'left' | 'right';
 3 | 
 4 | export interface DiffTableFormatOption {
 5 |   id: string;
 6 |   name: string;
 7 |   label: string;
 8 |   value: DiffTableFormat;
 9 |   icon?: string;
10 |   disabled?: boolean;
11 | }
12 | 
13 | export interface DiffContent {
14 |   leftContent: string;
15 |   rightContent: string;
16 | }
17 | 
18 | export interface DiffPart {
19 |   content: string;
20 |   isDiff: boolean;
21 | }
22 | 
23 | export interface DiffLineResult {
24 |   lineNumber: number;
25 |   prefix: string;
26 |   lineContent: string;
27 |   lineDiffs: DiffPart[];
28 | }
29 | 
30 | export interface DiffTableRowResult {
31 |   leftContent: DiffLineResult;
32 |   rightContent: DiffLineResult;
33 |   belongTo: SideDiff;
34 |   hasDiffs: boolean;
35 |   numDiffs: number;
36 | }
37 | 
38 | export interface DiffResults {
39 |   hasDiff: boolean;
40 |   diffsCount: number;
41 |   rowsWithDiff: {
42 |     leftLineNumber?: number;
43 |     rightLineNumber?: number;
44 |     numDiffs: number;
45 |   }[];
46 | }
47 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { NgxTextDiffComponent } from './ngx-text-diff.component';
 3 | import { CommonModule } from '@angular/common';
 4 | import { FormsModule } from '@angular/forms';
 5 | import { LoaderSpinnerComponent } from './loader-spinner/loader-spinner.component';
 6 | import { FormatLinePipe } from './format-line.pipe';
 7 | import { ContainerDirective } from './ngx-text-diff-container.directive';
 8 | import { ScrollingModule } from '@angular/cdk/scrolling';
 9 | 
10 | @NgModule({
11 |   imports: [CommonModule, FormsModule, ScrollingModule],
12 |   declarations: [NgxTextDiffComponent, LoaderSpinnerComponent, FormatLinePipe, ContainerDirective],
13 |   exports: [NgxTextDiffComponent],
14 | })
15 | export class NgxTextDiffModule {}
16 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { inject, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { NgxTextDiffService } from './ngx-text-diff.service';
 4 | import { DiffTableRowResult } from './ngx-text-diff.model';
 5 | 
 6 | export interface TextDiffTestCase {
 7 |   id: number;
 8 |   name: string;
 9 |   left: string;
10 |   right: string;
11 |   expectedResult?: DiffTableRowResult[];
12 |   hasError?: boolean;
13 |   error?: any;
14 | }
15 | 
16 | /*const testCases: TextDiffTestCase[] = [
17 |   {
18 |     id: 1,
19 |     name: 'Basic Diff',
20 |     left: '<name>John Doe</name>',
21 |     right: '<name>John Moe</name>',
22 |     expectedResult: [
23 |       {
24 |         rightContent: { lineNumber: 1, lineContent: '<name>John Moe</name>', prefix: '+', lineDiffs: ['M'] },
25 |         leftContent: { lineNumber: 1, lineContent: '<name>John Doe</name>', prefix: '-', lineDiffs: ['D'] },
26 |         belongTo: 'both'
27 |       }
28 |     ],
29 |     hasError: false
30 |   },
31 |   {
32 |     id: 2,
33 |     name: 'Two Diffs',
34 |     left: '<name>John Does</name>',
35 |     right: '<name>John Moez</name>',
36 |     expectedResult: [
37 |       {
38 |         rightContent: { lineNumber: 1, lineContent: '<name>John Moez</name>', prefix: '+', lineDiffs: ['M', 'z'] },
39 |         leftContent: { lineNumber: 1, lineContent: '<name>John Does</name>', prefix: '-', lineDiffs: ['D', 's'] },
40 |         belongTo: 'both'
41 |       }
42 |     ],
43 |     hasError: false
44 |   },
45 |   {
46 |     id: 3,
47 |     name: 'Two Lines Diffs',
48 |     left: '<name>John Does</name>\n<email>john.Moe@widget.com</email>',
49 |     right: '<name>John Moez</name>\n<address>Test</address>',
50 |     expectedResult: [
51 |       {
52 |         rightContent: { lineNumber: 1, lineContent: '<name>John Moez</name>', prefix: '+', lineDiffs: ['M', 'z'] },
53 |         leftContent: { lineNumber: 1, lineContent: '<name>John Does</name>', prefix: '-', lineDiffs: ['D', 's'] },
54 |         belongTo: 'both'
55 |       },
56 |       {
57 |         rightContent: { lineNumber: 2, lineContent: '<address>Test</address>', prefix: '+', lineDiffs: ['<address>Test</address>'] },
58 |         leftContent: {
59 |           lineNumber: 2,
60 |           lineContent: '<email>john.Moe@widget.com</email>',
61 |           prefix: '-',
62 |           lineDiffs: ['<email>john.Moe@widget.com</email>']
63 |         },
64 |         belongTo: 'both'
65 |       }
66 |     ],
67 |     hasError: false
68 |   }
69 | ];*/
70 | 
71 | describe('NgxTextDiffService', () => {
72 |   beforeEach(() =>
73 |     TestBed.configureTestingModule({
74 |       providers: [NgxTextDiffService]
75 |     }));
76 | 
77 |   it('should be created', () => {
78 |     const service: NgxTextDiffService = TestBed.get(NgxTextDiffService);
79 |     expect(service).toBeTruthy();
80 |   });
81 | 
82 |   /*testCases.forEach(tc => {
83 |     it(`TC ${tc.id} - ${tc.name}`, inject([NgxTextDiffService], (service: NgxTextDiffService) => {
84 |       const actualResult = service.getDiffsByChars(tc.left, tc.right);
85 |       actualResult.then(result => {
86 |         expect(JSON.stringify(result)).toEqual(JSON.stringify(tc.expectedResult));
87 |       });
88 |     }));
89 |   });*/
90 | });
91 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.service.ts:
--------------------------------------------------------------------------------
  1 | import { Injectable } from '@angular/core';
  2 | import { Diff, DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT, diff_match_patch } from 'diff-match-patch';
  3 | import { DiffLineResult, DiffPart, DiffTableRowResult } from './ngx-text-diff.model';
  4 | import { isEmpty, isNil } from './ngx-text-diff.utils';
  5 | 
  6 | @Injectable({
  7 |   providedIn: 'root'
  8 | })
  9 | export class NgxTextDiffService {
 10 |   diffParser: diff_match_patch;
 11 | 
 12 |   constructor() {
 13 |     this.initParser();
 14 |   }
 15 | 
 16 |   private initParser() {
 17 |     this.diffParser = new diff_match_patch();
 18 |   }
 19 | 
 20 |   getDiffsByLines(left: string, right: string): Promise<DiffTableRowResult[]> {
 21 |     return new Promise<DiffTableRowResult[]>((resolve, reject) => {
 22 |       const a = this.diffParser.diff_linesToChars_(left, right);
 23 |       const lineText1 = a.chars1;
 24 |       const lineText2 = a.chars2;
 25 |       const linesArray = a.lineArray;
 26 |       const diffs: Diff[] = this.diffParser.diff_main(lineText1, lineText2, true);
 27 |       this.diffParser.diff_charsToLines_(diffs, linesArray);
 28 |       const rows: DiffTableRowResult[] = this.formatOutput(diffs);
 29 |       if (!rows) {
 30 |         reject('Error');
 31 |       }
 32 | 
 33 |       resolve(rows);
 34 |     });
 35 |   }
 36 | 
 37 |   private formatOutput(diffs: Diff[]): DiffTableRowResult[] {
 38 |     let lineLeft = 1;
 39 |     let lineRight = 1;
 40 |     return diffs.reduce((rows: DiffTableRowResult[], diff: Diff) => {
 41 |       if (!rows) {
 42 |         rows = [];
 43 |       }
 44 |       const diffType: number = diff[0];
 45 |       const diffValue: string = diff[1];
 46 |       let leftDiffRow: DiffTableRowResult = null;
 47 |       let rightDiffRow: DiffTableRowResult = null;
 48 |       let leftContent: DiffLineResult = null;
 49 |       let rightContent: DiffLineResult = null;
 50 |       let rowTemp: DiffTableRowResult = null;
 51 |       switch (diffType) {
 52 |         case DIFF_EQUAL: // 0
 53 |           diffValue
 54 |             .split('\n')
 55 |             .filter((value, index, array) => {
 56 |               if (index === array.length - 1) {
 57 |                 return !isEmpty(value);
 58 |               }
 59 |               return true;
 60 |             })
 61 |             .forEach(line => {
 62 |               leftContent = {
 63 |                 lineNumber: lineLeft,
 64 |                 lineContent: line,
 65 |                 lineDiffs: [],
 66 |                 prefix: ''
 67 |               };
 68 |               rightContent = {
 69 |                 lineNumber: lineRight,
 70 |                 lineContent: line,
 71 |                 lineDiffs: [],
 72 |                 prefix: ''
 73 |               };
 74 |               rowTemp = {
 75 |                 leftContent,
 76 |                 rightContent,
 77 |                 belongTo: 'both',
 78 |                 hasDiffs: false,
 79 |                 numDiffs: 0,
 80 |               };
 81 |               rows.push(rowTemp);
 82 |               lineRight = lineRight + 1;
 83 |               lineLeft = lineLeft + 1;
 84 |             });
 85 |           break;
 86 |         case DIFF_DELETE: // -1
 87 |           diffValue
 88 |             .split('\n')
 89 |             .filter((value, index, array) => {
 90 |               if (index === array.length - 1) {
 91 |                 return !isEmpty(value);
 92 |               }
 93 |               return true;
 94 |             })
 95 |             .forEach(line => {
 96 |               rightDiffRow = rows.find(
 97 |                 row => !row.leftContent && row.rightContent && row.rightContent.lineNumber === lineLeft && row.rightContent.prefix !== ''
 98 |               );
 99 |               leftContent = {
100 |                 lineNumber: lineLeft,
101 |                 lineContent: line,
102 |                 lineDiffs: [{ content: line, isDiff: true }],
103 |                 prefix: '-'
104 |               };
105 |               if (rightDiffRow) {
106 |                 rightDiffRow.leftContent = leftContent;
107 |                 rightDiffRow.leftContent.lineDiffs = this.getDiffParts(
108 |                   rightDiffRow.leftContent.lineContent,
109 |                   rightDiffRow.rightContent.lineContent
110 |                 );
111 |                 rightDiffRow.rightContent.lineDiffs = this.getDiffParts(
112 |                   rightDiffRow.rightContent.lineContent,
113 |                   rightDiffRow.leftContent.lineContent
114 |                 );
115 |                 rightDiffRow.belongTo = 'both';
116 |                 rightDiffRow.numDiffs = this.countDiffs(rightDiffRow);
117 |               } else {
118 |                 rows.push({
119 |                   leftContent,
120 |                   rightContent: null,
121 |                   hasDiffs: true,
122 |                   belongTo: 'left',
123 |                   numDiffs: 1,
124 |                 });
125 |               }
126 |               lineLeft = lineLeft + 1;
127 |             });
128 |           break;
129 |         case DIFF_INSERT: // 1
130 |           diffValue
131 |             .split('\n')
132 |             .filter((value, index, array) => {
133 |               if (index === array.length - 1) {
134 |                 return !isEmpty(value);
135 |               }
136 |               return true;
137 |             })
138 |             .forEach(line => {
139 |               leftDiffRow = rows.find(
140 |                 row => row.leftContent && !row.rightContent && row.leftContent.lineNumber === lineRight && row.leftContent.prefix !== ''
141 |               );
142 |               rightContent = {
143 |                 lineNumber: lineRight,
144 |                 lineContent: line,
145 |                 lineDiffs: [{ content: line, isDiff: true }],
146 |                 prefix: '+'
147 |               };
148 |               if (leftDiffRow) {
149 |                 leftDiffRow.rightContent = rightContent;
150 |                 leftDiffRow.leftContent.lineDiffs = this.getDiffParts(
151 |                   leftDiffRow.leftContent.lineContent,
152 |                   leftDiffRow.rightContent.lineContent
153 |                 );
154 |                 leftDiffRow.rightContent.lineDiffs = this.getDiffParts(
155 |                   leftDiffRow.rightContent.lineContent,
156 |                   leftDiffRow.leftContent.lineContent
157 |                 );
158 |                 leftDiffRow.belongTo = 'both';
159 |                 leftDiffRow.numDiffs = this.countDiffs(leftDiffRow);
160 |               } else {
161 |                 rows.push({
162 |                   leftContent: null,
163 |                   rightContent,
164 |                   hasDiffs: true,
165 |                   belongTo: 'right',
166 |                   numDiffs: 1,
167 |                 });
168 |               }
169 |               lineRight = lineRight + 1;
170 |             });
171 |           break;
172 |       }
173 |       return rows;
174 |     }, []);
175 |   }
176 | 
177 |   private countDiffs(result: DiffTableRowResult): number {
178 |     let diffCount = 0;
179 |     if (result.leftContent) {
180 |       diffCount += result.leftContent.lineDiffs.filter(diff => diff.isDiff).length;
181 |     }
182 |     if (result.leftContent) {
183 |       diffCount += result.rightContent.lineDiffs.filter(diff => diff.isDiff).length;
184 |     }
185 |     return diffCount;
186 |   }
187 | 
188 |   private getDiffParts(value: string, compareValue: string): DiffPart[] {
189 |     const diffParts: DiffPart[] = [];
190 |     let i = 0;
191 |     let j = 0;
192 |     let shared = '';
193 |     let diff = '';
194 | 
195 |     while (i < value.length) {
196 |       if (value[i] === compareValue[j] && j < compareValue.length) {
197 |         if (diff !== '') {
198 |           diffParts.push({ content: diff, isDiff: true });
199 |           diff = '';
200 |         }
201 |         shared += value[i];
202 |       } else {
203 |         if (shared !== '') {
204 |           diffParts.push({ content: shared, isDiff: false });
205 |           shared = '';
206 |         }
207 |         diff += value[i];
208 |       }
209 |       i++;
210 |       j++;
211 |     }
212 | 
213 |     if (diff !== '') {
214 |       diffParts.push({ content: diff, isDiff: true });
215 |     } else if (shared !== '') {
216 |       diffParts.push({ content: shared, isDiff: false });
217 |     }
218 | 
219 |     return diffParts;
220 |   }
221 | }
222 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/lib/ngx-text-diff.utils.ts:
--------------------------------------------------------------------------------
1 | export const isNil = val => val === undefined || val === null;
2 | export const isEmpty = val => val == null || !(Object.keys(val) || val).length || (Object.keys(val) || val).length === 0;
3 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/public_api.ts:
--------------------------------------------------------------------------------
1 | /*
2 |  * Public API Surface of ngx-text-diff
3 |  */
4 | 
5 | export * from './lib/ngx-text-diff.service';
6 | export * from './lib/ngx-text-diff.component';
7 | export * from './lib/ngx-text-diff.module';
8 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'core-js/es7/reflect';
 4 | import 'zone.js/dist/zone';
 5 | import 'zone.js/dist/zone-testing';
 6 | import { getTestBed } from '@angular/core/testing';
 7 | import {
 8 |   BrowserDynamicTestingModule,
 9 |   platformBrowserDynamicTesting
10 | } from '@angular/platform-browser-dynamic/testing';
11 | 
12 | declare const require: any;
13 | 
14 | // First, initialize the Angular testing environment.
15 | getTestBed().initTestEnvironment(
16 |   BrowserDynamicTestingModule,
17 |   platformBrowserDynamicTesting()
18 | );
19 | // Then we find all the tests.
20 | const context = require.context('./', true, /\.spec\.ts$/);
21 | // And load the modules.
22 | context.keys().map(context);
23 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "es2015",
 5 |     "module": "es2015",
 6 |     "moduleResolution": "node",
 7 |     "declaration": true,
 8 |     "sourceMap": true,
 9 |     "inlineSources": true,
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "types": [],
14 |     "lib": [
15 |       "dom",
16 |       "es2015"
17 |     ]
18 |   },
19 |   "angularCompilerOptions": {
20 |     "skipTemplateCodegen": true,
21 |     "strictMetadataEmit": true,
22 |     "fullTemplateTypeCheck": true,
23 |     "strictInjectionParameters": true,
24 |     "enableResourceInlining": true
25 |   },
26 |   "exclude": [
27 |     "src/test.ts",
28 |     "**/*.spec.ts"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.lib.json",
3 |   "angularCompilerOptions": {
4 |     "enableIvy": false
5 |   }
6 | }


--------------------------------------------------------------------------------
/projects/ngx-text-diff/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/ngx-text-diff/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "td",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "td",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const express = require('express');
 3 | const app = express();
 4 | 
 5 | // Serve static files
 6 | app.use(express.static(__dirname + '/dist/ngx-text-diff-app'));
 7 | 
 8 | // Send all requests to index.html
 9 | app.get('/*', function(req, res) {
10 |   res.sendFile(path.join(__dirname + '/dist/ngx-text-diff-app/index.html'));
11 | });
12 | 
13 | // default Heroku port
14 | app.listen(process.env.PORT || 5000);
15 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | import { HomeComponent } from './home/home.component';
 4 | 
 5 | const routes: Routes = [
 6 |   {
 7 |     path: 'home',
 8 |     component: HomeComponent
 9 |   },
10 |   {
11 |     path: '',
12 |     redirectTo: 'home',
13 |     pathMatch: 'full'
14 |   }
15 | ];
16 | 
17 | @NgModule({
18 |   imports: [RouterModule.forRoot(routes)],
19 |   exports: [RouterModule]
20 | })
21 | export class AppRoutingModule {}
22 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABenassi87/ngx-text-diff/52a678ba5066fd5565afc00a8923a826f9dd0edd/src/app/app.component.css


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>
2 | 
3 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /*import { TestBed, async } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | 
 4 | describe('AppComponent', () => {
 5 |   beforeEach(async(() => {
 6 |     TestBed.configureTestingModule({
 7 |       declarations: [
 8 |         AppComponent
 9 |       ],
10 |     }).compileComponents();
11 |   }));
12 | 
13 |   it('should create the app', () => {
14 |     const fixture = TestBed.createComponent(AppComponent);
15 |     const app = fixture.debugElement.componentInstance;
16 |     expect(app).toBeTruthy();
17 |   });
18 | 
19 |   it(`should have as title 'ngx-text-diff-app'`, () => {
20 |     const fixture = TestBed.createComponent(AppComponent);
21 |     const app = fixture.debugElement.componentInstance;
22 |     expect(app.title).toEqual('ngx-text-diff-app');
23 |   });
24 | 
25 |   it('should render title in a h1 tag', () => {
26 |     const fixture = TestBed.createComponent(AppComponent);
27 |     fixture.detectChanges();
28 |     const compiled = fixture.debugElement.nativeElement;
29 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-text-diff-app!');
30 |   });
31 | });*/
32 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'tda-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'ngx-text-diff-app';
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppComponent } from './app.component';
 5 | import { HomeComponent } from './home/home.component';
 6 | import { ComponentsModule } from './components/components.module';
 7 | import { FormsModule } from '@angular/forms';
 8 | import { AppRoutingModule } from './app-routing.module';
 9 | import { NgxTextDiffModule } from '../../projects/ngx-text-diff/src/lib/ngx-text-diff.module';
10 | 
11 | @NgModule({
12 |   declarations: [AppComponent, HomeComponent],
13 |   imports: [BrowserModule, ComponentsModule, NgxTextDiffModule, FormsModule, AppRoutingModule],
14 |   providers: [],
15 |   bootstrap: [AppComponent]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/src/app/components/code-editor/code-editor.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABenassi87/ngx-text-diff/52a678ba5066fd5565afc00a8923a826f9dd0edd/src/app/components/code-editor/code-editor.component.css


--------------------------------------------------------------------------------
/src/app/components/code-editor/code-editor.component.html:
--------------------------------------------------------------------------------
1 | <textarea
2 |   [name]="name"
3 |   class="{{className}}"
4 |   autocomplete="off"
5 |   [autofocus]="autoFocus"
6 |   #ref>
7 | </textarea>
8 | 


--------------------------------------------------------------------------------
/src/app/components/code-editor/code-editor.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AfterViewInit,
  3 |   ChangeDetectionStrategy,
  4 |   Component,
  5 |   ElementRef,
  6 |   EventEmitter,
  7 |   forwardRef,
  8 |   Input,
  9 |   KeyValueDiffer,
 10 |   KeyValueDiffers,
 11 |   NgZone,
 12 |   OnDestroy,
 13 |   Output,
 14 |   ViewChild,
 15 | } from '@angular/core';
 16 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 17 | import { Editor, EditorChangeLinkedList, EditorConfiguration, EditorFromTextArea, ScrollInfo } from 'codemirror';
 18 | 
 19 | function normalizeLineEndings(str: string) {
 20 |   if (!str) {
 21 |     return str;
 22 |   }
 23 |   return str.replace(/\r\n|\r/g, '\n');
 24 | }
 25 | 
 26 | declare var require: any;
 27 | 
 28 | @Component({
 29 |   selector: 'tda-code-editor',
 30 |   templateUrl: './code-editor.component.html',
 31 |   styleUrls: ['./code-editor.component.css'],
 32 |   providers: [
 33 |     {
 34 |       provide: NG_VALUE_ACCESSOR,
 35 |       useExisting: forwardRef(() => CodeEditorComponent),
 36 |       multi: true,
 37 |     },
 38 |   ],
 39 |   preserveWhitespaces: false,
 40 |   changeDetection: ChangeDetectionStrategy.OnPush,
 41 | })
 42 | export class CodeEditorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
 43 |   /* class applied to the created textarea */
 44 |   @Input() className = '';
 45 |   /* name applied to the created textarea */
 46 |   @Input() name = 'codemirror';
 47 |   /* autofocus setting applied to the created textarea */
 48 |   @Input() autoFocus = false;
 49 |   /**
 50 |    * set options for codemirror
 51 |    * @link http://codemirror.net/doc/manual.html#config
 52 |    */
 53 |   @Input()
 54 |   set options(value: { [key: string]: any }) {
 55 |     this._options = value;
 56 |     if (!this._differ && value) {
 57 |       this._differ = this._differs.find(value).create();
 58 |     }
 59 |   }
 60 |   /* preserve previous scroll position after updating value */
 61 |   @Input() preserveScrollPosition = false;
 62 |   /* called when the text cursor is moved */
 63 |   @Output() cursorActivity = new EventEmitter<Editor>();
 64 |   /* called when the editor is focused or loses focus */
 65 |   @Output() focusChange = new EventEmitter<boolean>();
 66 |   /* called when the editor is scrolled */
 67 |   @Output() scroll = new EventEmitter<ScrollInfo>();
 68 |   @ViewChild('ref', { static: true }) ref: ElementRef;
 69 |   value = '';
 70 |   disabled = false;
 71 |   isFocused = false;
 72 |   codeMirror: EditorFromTextArea;
 73 |   private _differ: KeyValueDiffer<string, any>;
 74 |   private _options: any;
 75 | 
 76 |   constructor(private _differs: KeyValueDiffers, private _ngZone: NgZone) {}
 77 | 
 78 |   ngAfterViewInit() {
 79 |     if (!this.ref) {
 80 |       return;
 81 |     }
 82 |     // in order to allow for universal rendering, we import Codemirror runtime with `require` to prevent node errors
 83 |     const { fromTextArea } = require('codemirror');
 84 | 
 85 |     this._ngZone.runOutsideAngular(() => {
 86 |       this.codeMirror = fromTextArea(this.ref.nativeElement, this._options);
 87 |       this.codeMirror.on('cursorActivity', cm => this._ngZone.run(() => this.cursorActive(cm)));
 88 |       this.codeMirror.on('scroll', this.scrollChanged.bind(this));
 89 |       this.codeMirror.on('blur', () => this._ngZone.run(() => this.focusChanged(false)));
 90 |       this.codeMirror.on('focus', () => this._ngZone.run(() => this.focusChanged(true)));
 91 |       this.codeMirror.on('change', (cm: Editor, change: EditorChangeLinkedList) =>
 92 |         this._ngZone.run(() => this.codemirrorValueChanged(cm, change))
 93 |       );
 94 |       this.codeMirror.setValue(this.value);
 95 |     });
 96 |   }
 97 |   /*ngDoCheck() {
 98 |     if (!this._differ) {
 99 |       return;
100 |     }
101 |     // check options have not changed
102 |     const changes = this._differ.diff(this._options);
103 |     if (changes) {
104 |       changes.forEachChangedItem((option: KeyValueChangeRecord<any, any>) => this.setOptionIfChanged(option.key, option.currentValue));
105 |       changes.forEachAddedItem(option => this.setOptionIfChanged(option.key, option.currentValue));
106 |       changes.forEachRemovedItem(option => this.setOptionIfChanged(option.key, option.currentValue));
107 |     }
108 |   }*/
109 |   ngOnDestroy() {
110 |     // is there a lighter-weight way to remove the cm instance?
111 |     if (this.codeMirror) {
112 |       this.codeMirror.toTextArea();
113 |     }
114 |   }
115 |   codemirrorValueChanged(cm: Editor, change: EditorChangeLinkedList) {
116 |     if (change.origin !== 'setValue') {
117 |       this.value = cm.getValue();
118 |       this.onChange(this.value);
119 |     }
120 |   }
121 |   setOptionIfChanged(optionName: keyof EditorConfiguration, newValue: any) {
122 |     if (!this.codeMirror) {
123 |       return;
124 |     }
125 |     this.codeMirror.setOption(optionName, newValue);
126 |   }
127 |   focusChanged(focused: boolean) {
128 |     this.onTouched();
129 |     this.isFocused = focused;
130 |     this.focusChange.emit(focused);
131 |   }
132 |   scrollChanged(cm: Editor) {
133 |     this.scroll.emit(cm.getScrollInfo());
134 |   }
135 |   cursorActive(cm: Editor) {
136 |     this.cursorActivity.emit(cm);
137 |   }
138 |   /** Implemented as part of ControlValueAccessor. */
139 |   writeValue(value: string): void {
140 |     if (value === null || value === undefined) {
141 |       return;
142 |     }
143 |     if (!this.codeMirror) {
144 |       this.value = value;
145 |       return;
146 |     }
147 |     const cur = this.codeMirror.getValue();
148 |     if (value !== cur && normalizeLineEndings(cur) !== normalizeLineEndings(value)) {
149 |       this.value = value;
150 |       if (this.preserveScrollPosition) {
151 |         const prevScrollPosition = this.codeMirror.getScrollInfo();
152 |         this.codeMirror.setValue(this.value);
153 |         this.codeMirror.scrollTo(prevScrollPosition.left, prevScrollPosition.top);
154 |       } else {
155 |         this.codeMirror.setValue(this.value);
156 |       }
157 |     }
158 |   }
159 | 
160 |   /** Implemented as part of ControlValueAccessor. */
161 |   registerOnChange(fn: (value: string) => void): void {
162 |     this.onChange = fn;
163 |   }
164 |   /** Implemented as part of ControlValueAccessor. */
165 |   registerOnTouched(fn: () => void): void {
166 |     this.onTouched = fn;
167 |   }
168 |   /** Implemented as part of ControlValueAccessor. */
169 |   setDisabledState(isDisabled: boolean): void {
170 |     this.disabled = isDisabled;
171 |     this.setOptionIfChanged('readOnly', this.disabled);
172 |   }
173 |   /** Implemented as part of ControlValueAccessor. */
174 |   private onChange = (_: any) => {};
175 |   /** Implemented as part of ControlValueAccessor. */
176 |   private onTouched = () => {};
177 | }
178 | 


--------------------------------------------------------------------------------
/src/app/components/components.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { CodeEditorComponent } from './code-editor/code-editor.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [
 7 |     CommonModule
 8 |   ],
 9 |   declarations: [CodeEditorComponent],
10 |   exports: [CodeEditorComponent],
11 | })
12 | export class ComponentsModule { }
13 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABenassi87/ngx-text-diff/52a678ba5066fd5565afc00a8923a826f9dd0edd/src/app/home/home.component.css


--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container-fluid">
 2 |   <header>
 3 |     <div class="container">
 4 |       <h1>NGX Text Diffs</h1>
 5 |     </div>
 6 |   </header>
 7 |   <div class="main-content">
 8 |     <div class="container">
 9 |       <form>
10 |         <div class="form-row">
11 |           <div class="form-group col-md-6">
12 |             <label for="leftContent" class="font-weight-bold">Left Content:</label>
13 |             <tda-code-editor
14 |               [options]="options"
15 |               [ngModel]="content.leftContent"
16 |               [name]="'leftContent'"
17 |               [autoFocus]="true"
18 |               (ngModelChange)="handleChange('left',$event)"
19 |             ></tda-code-editor>
20 |           </div>
21 |           <div class="form-group col-md-6">
22 |             <label for="rightContent" class="font-weight-bold">Right Content:</label>
23 |             <tda-code-editor
24 |               [options]="options"
25 |               [ngModel]="content.rightContent"
26 |               [name]="'rightContent'"
27 |               [autoFocus]="false"
28 |               (ngModelChange)="handleChange('right',$event)"
29 |             ></tda-code-editor>
30 |           </div>
31 |         </div>
32 |         <button type="submit" (click)="submitComparison()" class="btn btn-primary">Compare</button>
33 |       </form>
34 |       <div *ngIf="submitted">
35 |         <td-ngx-text-diff
36 |           [left]="content.leftContent"
37 |           [right]="content.rightContent"
38 |           [loading]="!submitted"
39 |           [diffContent]="contentObservable$"
40 |           [synchronizeScrolling]="true"
41 |           [compareRowsStyle]="{'max-height': '500px', 'overflow': 'auto'}"
42 |           (compareResults)="onCompareResults($event)"
43 |         >
44 |         </td-ngx-text-diff>
45 |       </div>
46 |     </div>
47 |   </div>
48 | </div>
49 | 
50 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /*import { TestBed, async } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | 
 4 | describe('AppComponent', () => {
 5 |   beforeEach(async(() => {
 6 |     TestBed.configureTestingModule({
 7 |       declarations: [
 8 |         AppComponent
 9 |       ],
10 |     }).compileComponents();
11 |   }));
12 | 
13 |   it('should create the app', () => {
14 |     const fixture = TestBed.createComponent(AppComponent);
15 |     const app = fixture.debugElement.componentInstance;
16 |     expect(app).toBeTruthy();
17 |   });
18 | 
19 |   it(`should have as title 'ngx-text-diff-app'`, () => {
20 |     const fixture = TestBed.createComponent(AppComponent);
21 |     const app = fixture.debugElement.componentInstance;
22 |     expect(app.title).toEqual('ngx-text-diff-app');
23 |   });
24 | 
25 |   it('should render title in a h1 tag', () => {
26 |     const fixture = TestBed.createComponent(AppComponent);
27 |     fixture.detectChanges();
28 |     const compiled = fixture.debugElement.nativeElement;
29 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-text-diff-app!');
30 |   });
31 | });*/
32 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Observable, Subject } from 'rxjs';
 3 | import { DiffResults } from '../../../projects/ngx-text-diff/src/lib/ngx-text-diff.model';
 4 | 
 5 | export interface DiffContent {
 6 |   leftContent: string;
 7 |   rightContent: string;
 8 | }
 9 | 
10 | @Component({
11 |   selector: 'tda-home',
12 |   templateUrl: './home.component.html',
13 |   styleUrls: ['./home.component.css']
14 | })
15 | export class HomeComponent implements OnInit {
16 |   submitted = false;
17 |   content: DiffContent = {
18 |     leftContent: '',
19 |     rightContent: ''
20 |   };
21 | 
22 |   options: any = {
23 |     lineNumbers: true,
24 |     mode: 'xml'
25 |   };
26 | 
27 |   contentObservable: Subject<DiffContent> = new Subject<DiffContent>();
28 |   contentObservable$: Observable<DiffContent> = this.contentObservable.asObservable();
29 | 
30 |   constructor() {}
31 | 
32 |   ngOnInit() {
33 |     this.submitted = false;
34 |     this.content.leftContent =
35 |       '<card xmlns="http://businesscard.org">\n' +
36 |       '   <name>John Doe</name>\n' +
37 |       '   <title>CEO, Widget Inc.</title>\n' +
38 |       '   <email>john.Moe@widget.com</email>\n' +
39 |       '   <cellphone>(202) 456-1414</cellphone>\n' +
40 |       '   <phone>(202) 456-1414</phone>\n' +
41 |       '   <logo url="widget.gif"/>\n' +
42 |       ' </card>';
43 |     this.content.rightContent =
44 |       '<card xmlns="http://businesscard.org">\n' +
45 |       '   <name>John Moe</name>\n' +
46 |       '   <title>CEO, Widget Inc.</title>\n' +
47 |       '   <email>john.Moe@widget.com</email>\n' +
48 |       '   <phone>(202) 456-1414</phone>\n' +
49 |       '   <address>Test</address>\n' +
50 |       '   <logo url="widget.gif"/>\n' +
51 |       ' </card>';
52 |   }
53 | 
54 |   submitComparison() {
55 |     this.submitted = false;
56 |     this.contentObservable.next(this.content);
57 |     this.submitted = true;
58 |   }
59 | 
60 |   handleChange(side: 'left' | 'right', value: string) {
61 |     switch (side) {
62 |       case 'left':
63 |         this.content.leftContent = value;
64 |         break;
65 |       case 'right':
66 |         this.content.rightContent = value;
67 |         break;
68 |       default:
69 |         break;
70 |     }
71 |   }
72 | 
73 |   onCompareResults(diffResults: DiffResults) {
74 |     console.log('diffResults', diffResults);
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABenassi87/ngx-text-diff/52a678ba5066fd5565afc00a8923a826f9dd0edd/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABenassi87/ngx-text-diff/52a678ba5066fd5565afc00a8923a826f9dd0edd/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>NgxTextDiffApp</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <tda-root></tda-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: false,
28 |     browsers: ['ChromeHeadless'],
29 |     // you can define custom flags
30 |     customLaunchers: {
31 |       ChromeHeadlessNoSandbox: {
32 |         base: 'ChromeHeadless',
33 |         flags: ['--no-sandbox']
34 |       }
35 |     },
36 |     // you can define custom flags
37 |     singleRun: true
38 |   });
39 | };
40 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 
14 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags.ts';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "main.ts",
 9 |     "polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "tda",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "tda",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "esnext",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "downlevelIteration": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2017",
19 |       "dom"
20 |     ],
21 |     "paths": {
22 |       "ngx-text-diff": [
23 |         "dist/ngx-text-diff"
24 |       ],
25 |       "ngx-text-diff/*": [
26 |         "dist/ngx-text-diff/*"
27 |       ]
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-redundant-jsdoc": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "no-output-on-prefix": true,
121 |     "no-inputs-metadata-property": true,
122 |     "no-outputs-metadata-property": true,
123 |     "no-host-metadata-property": true,
124 |     "no-input-rename": true,
125 |     "no-output-rename": true,
126 |     "use-lifecycle-interface": true,
127 |     "use-pipe-transform-interface": true,
128 |     "component-class-suffix": true,
129 |     "directive-class-suffix": true
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------