ngx-text-diff
Version:
A Text Diff component for Angular.
1 lines • 20 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgxTextDiffService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"initParser":[{"__symbolic":"method"}],"getDiffsByLines":[{"__symbolic":"method"}],"formatOutput":[{"__symbolic":"method"}],"countDiffs":[{"__symbolic":"method"}],"getDiffParts":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"NgxTextDiffComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"td-ngx-text-diff","template":"<td-loader-spinner [active]=\"loading\"></td-loader-spinner>\r\n<div class=\"td-wrapper\" [ngClass]=\"outerContainerClass\" [ngStyle]=\"outerContainerStyle\" *ngIf=\"!loading\">\r\n\r\n <div [ngClass]=\"toolbarClass\" [ngStyle]=\"toolbarStyle\" *ngIf=\"showToolbar\">\r\n <div class=\"td-toolbar-show-diff\">\r\n <label class=\"td-checkbox-container\">\r\n Only Show Lines with Differences ({{ diffsCount }})\r\n <input type=\"checkbox\" id=\"showDiffs\" [ngModel]=\"hideMatchingLines\" (ngModelChange)=\"hideMatchingLinesChanged($event)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"td-toolbar-select-format\" *ngIf=\"showToolbar && showBtnToolbar\">\r\n <div class=\"td-btn-group td-btn-group-toggle\" data-toggle=\"buttons\">\r\n <button\r\n *ngFor=\"let option of formatOptions\"\r\n [ngClass]=\"{ active: format === option.value, disabled: !!option.disabled }\"\r\n [name]=\"option.name\"\r\n [id]=\"option.id\"\r\n [disabled]=\"!!option.disabled\"\r\n (click)=\"setDiffTableFormat(option.value)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"td-table-wrapper\" [ngClass]=\"compareRowsClass\" [ngStyle]=\"compareRowsStyle\">\r\n <!-- Right side-by-side -->\r\n <div class=\"td-table-container side-by-side\" *ngIf=\"format === 'SideBySide'\" id=\"td-left-compare-container\" tdContainer cdkScrollable>\r\n <table class=\"td-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of filteredTableRows; trackBy: trackTableRows\">\r\n <td\r\n scope=\"row\"\r\n class=\"fit-column line-number-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }\"\r\n >\r\n {{ row.leftContent?.lineNumber !== -1 ? row.leftContent?.lineNumber : ' ' }}\r\n </td>\r\n <td\r\n class=\"fit-column prefix-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }\"\r\n >\r\n <span>{{ row.leftContent?.prefix || ' ' }}</span>\r\n </td>\r\n <td\r\n class=\"content-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }\"\r\n *ngIf=\"!row.hasDiffs\"\r\n >\r\n <span [innerHTML]=\"row.leftContent?.lineContent | formatLine\"></span>\r\n </td>\r\n <td\r\n class=\"content-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'empty-row': !row.leftContent?.lineContent }\"\r\n *ngIf=\"row.hasDiffs\"\r\n >\r\n <span\r\n [innerHTML]=\"diff.content | formatLine\"\r\n [ngClass]=\"{ highlight: diff.isDiff }\"\r\n *ngFor=\"let diff of row.leftContent?.lineDiffs; trackBy: trackDiffs\"\r\n ></span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!-- Left side-by-side -->\r\n <div class=\"td-table-container side-by-side\" *ngIf=\"format === 'SideBySide'\" id=\"td-right-compare-container\" tdContainer cdkScrollable>\r\n <table class=\"td-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of filteredTableRows; trackBy: trackTableRows\">\r\n <td\r\n scope=\"row\"\r\n class=\"fit-column line-number-col\"\r\n [ngClass]=\"{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }\"\r\n >\r\n {{ row.rightContent?.lineNumber !== -1 ? row.rightContent?.lineNumber : ' ' }}\r\n </td>\r\n <td\r\n class=\"fit-column prefix-col\"\r\n [ngClass]=\"{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }\"\r\n >\r\n <span>{{ row.rightContent?.prefix || ' ' }}</span>\r\n </td>\r\n <td\r\n class=\"content-col\"\r\n [ngClass]=\"{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }\"\r\n *ngIf=\"!row.hasDiffs\"\r\n >\r\n <span [innerHTML]=\"row.rightContent?.lineContent | formatLine\"></span>\r\n </td>\r\n <td\r\n class=\"content-col\"\r\n [ngClass]=\"{ 'insert-row': row.rightContent?.prefix === '+', 'empty-row': !row.rightContent?.lineContent }\"\r\n *ngIf=\"row.hasDiffs\"\r\n >\r\n <span\r\n [innerHTML]=\"diff.content | formatLine\"\r\n [ngClass]=\"{ highlight: diff.isDiff }\"\r\n *ngFor=\"let diff of row.rightContent?.lineDiffs; trackBy: trackDiffs\"\r\n ></span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!-- Line By Line - combined table -->\r\n <div class=\"td-table-container line-by-line\" *ngIf=\"format === 'LineByLine'\">\r\n <table class=\"td-table\">\r\n <tbody>\r\n <tr *ngFor=\"let row of filteredTableRowsLineByLine; trackBy: trackTableRows\">\r\n <td scope=\"row\" class=\"fit-column line-number-col-left\">{{ row.leftContent?.lineNumber }}</td>\r\n <td scope=\"row\" class=\"fit-column line-number-col\">{{ row.rightContent?.lineNumber }}</td>\r\n <td\r\n class=\"fit-column prefix-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }\"\r\n >\r\n <span>{{ row.leftContent?.prefix || row.rightContent?.prefix || ' ' }}</span>\r\n </td>\r\n <td\r\n class=\"content-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }\"\r\n *ngIf=\"!row.hasDiffs\"\r\n >\r\n <span [innerHTML]=\"row.leftContent?.lineContent | formatLine\"></span>\r\n </td>\r\n <td\r\n class=\"content-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }\"\r\n *ngIf=\"row.hasDiffs && row.leftContent && row.leftContent?.lineDiffs.length !== 0\"\r\n >\r\n <span\r\n [innerHTML]=\"diff.content | formatLine\"\r\n [ngClass]=\"{ highlight: diff.isDiff }\"\r\n *ngFor=\"let diff of row.leftContent?.lineDiffs; trackBy: trackDiffs\"\r\n ></span>\r\n </td>\r\n <td\r\n class=\"content-col\"\r\n [ngClass]=\"{ 'delete-row': row.leftContent?.prefix === '-', 'insert-row': row.rightContent?.prefix === '+' }\"\r\n *ngIf=\"row.hasDiffs && row.rightContent && row.rightContent?.lineDiffs.length !== 0\"\r\n >\r\n <span\r\n [innerHTML]=\"diff.content | formatLine\"\r\n [ngClass]=\"{ highlight: diff.isDiff }\"\r\n *ngFor=\"let diff of row.rightContent?.lineDiffs; trackBy: trackDiffs\"\r\n ></span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n</div>\r\n","styles":[".td-wrapper{display:grid;width:100%;grid-row-gap:10px;grid-template-columns:repeat(2,[col] 50%);grid-template-rows:repeat(2,[row] auto);background-color:#fff;color:#444}.td-toolbar-show-diff{grid-column:1;grid-row:1}.td-toolbar-select-format{margin-left:auto;grid-column:2;grid-row:1}.td-table-container{grid-column:1/2;grid-row:2;width:100%;max-width:100%;overflow-x:auto}.td-table-wrapper{display:flex;width:200%}.td-table{border:1px solid #a9a9a9;max-height:50vh;width:100%;max-width:100%}.fit-column{width:1px;white-space:nowrap}.line-number-col{position:relative;position:-webkit-sticky;position:sticky;left:0;top:auto;border-right:1px solid #ddd;color:#999;text-align:right;background-color:#f7f7f7;padding-left:10px;padding-right:10px;font-size:87.5%}.line-number-col-left{color:#999;padding-left:10px;padding-right:10px;text-align:right;background-color:#f7f7f7;font-size:87.5%}.insert-row,.insert-row>.line-number-col{background-color:#dfd;border-color:#b4e2b4}.delete-row,.delete-row>.line-number-col{background-color:#fee8e9;border-color:#e9aeae}.empty-row{background-color:#f7f7f7;height:24px}.td-table td{border-top:0;padding-top:0;padding-bottom:0;white-space:nowrap;max-width:50%}pre{margin-bottom:0}td.content-col{padding:0;margin:0;line-height:24px}td.prefix-col{padding-left:10px;padding-right:10px;line-height:24px}.td-btn-group{border-radius:4px}.td-btn-group button{background-color:rgba(23,162,184,.7);border:1px solid #17a2b8;color:#fff;cursor:pointer;float:left}.td-btn-group button:not(:last-child){border-right:none}.td-btn-group button:first-child{-webkit-border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-bottomleft:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.td-btn-group button:last-child{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px}.td-btn-group:after{content:'';clear:both;display:table}.td-btn-group button.active,.td-btn-group button:hover{background-color:#17a2b8}.td-checkbox-container{display:block;position:relative;padding-left:21px;margin-bottom:0;cursor:pointer;font-size:16px;line-height:28px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.td-checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:7px;left:0;height:16px;width:16px;background-color:#eee}.td-checkbox-container:hover input~.checkmark{background-color:#ccc}.td-checkbox-container input:checked~.checkmark{background-color:#17a2b8}.checkmark:after{content:\"\";position:absolute;display:none}.td-checkbox-container input:checked~.checkmark:after{display:block}.td-checkbox-container .checkmark:after{left:5px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}.insert-row>.highlight{background-color:#acf2bd!important}.delete-row>.highlight{background-color:#fdb8c0!important}"]}]}],"members":{"containers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":25,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"right":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"diffContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"showToolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"showBtnToolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"hideMatchingLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"outerContainerClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"outerContainerStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"toolbarClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"toolbarStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"compareRowsClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"compareRowsStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"synchronizeScrolling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"compareResults":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollDispatcher","line":73,"character":37},{"__symbolic":"reference","name":"NgxTextDiffService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":73,"character":101}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"hideMatchingLinesChanged":[{"__symbolic":"method"}],"setDiffTableFormat":[{"__symbolic":"method"}],"renderDiffs":[{"__symbolic":"method"}],"emitCompareResultsEvent":[{"__symbolic":"method"}],"trackTableRows":[{"__symbolic":"method"}],"trackDiffs":[{"__symbolic":"method"}],"initScrollListener":[{"__symbolic":"method"}]}},"NgxTextDiffModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":26},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":10,"character":39}],"declarations":[{"__symbolic":"reference","name":"NgxTextDiffComponent"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"NgxTextDiffComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[tdContainer]"}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":10,"character":27}]}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"td-loader-spinner","template":"<div class=\"td-loading-roller\" *ngIf=\"active\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n</div>\r\n","styles":[".td-loading-roller{display:inline-block;position:relative;width:64px;height:64px}.td-loading-roller div{-webkit-animation:1.2s cubic-bezier(.5,0,.5,1) infinite lds-roller;animation:1.2s cubic-bezier(.5,0,.5,1) infinite lds-roller;transform-origin:32px 32px}.td-loading-roller div:after{content:\" \";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#000;margin:-3px 0 0 -3px}.td-loading-roller div:nth-child(1){-webkit-animation-delay:-36ms;animation-delay:-36ms}.td-loading-roller div:nth-child(1):after{top:50px;left:50px}.td-loading-roller div:nth-child(2){-webkit-animation-delay:-72ms;animation-delay:-72ms}.td-loading-roller div:nth-child(2):after{top:54px;left:45px}.td-loading-roller div:nth-child(3){-webkit-animation-delay:-108ms;animation-delay:-108ms}.td-loading-roller div:nth-child(3):after{top:57px;left:39px}.td-loading-roller div:nth-child(4){-webkit-animation-delay:-144ms;animation-delay:-144ms}.td-loading-roller div:nth-child(4):after{top:58px;left:32px}.td-loading-roller div:nth-child(5){-webkit-animation-delay:-.18s;animation-delay:-.18s}.td-loading-roller div:nth-child(5):after{top:57px;left:25px}.td-loading-roller div:nth-child(6){-webkit-animation-delay:-216ms;animation-delay:-216ms}.td-loading-roller div:nth-child(6):after{top:54px;left:19px}.td-loading-roller div:nth-child(7){-webkit-animation-delay:-252ms;animation-delay:-252ms}.td-loading-roller div:nth-child(7):after{top:50px;left:14px}.td-loading-roller div:nth-child(8){-webkit-animation-delay:-288ms;animation-delay:-288ms}.td-loading-roller div:nth-child(8):after{top:45px;left:10px}@-webkit-keyframes lds-roller{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes lds-roller{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}"]}]}],"members":{"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"formatLine"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"NgxTextDiffService":"./lib/ngx-text-diff.service","NgxTextDiffComponent":"./lib/ngx-text-diff.component","NgxTextDiffModule":"./lib/ngx-text-diff.module","ɵa":"./lib/ngx-text-diff-container.directive","ɵb":"./lib/loader-spinner/loader-spinner.component","ɵc":"./lib/format-line.pipe"},"importAs":"ngx-text-diff"}