UNPKG

ngx-object-diff

Version:

An Angular 2+ library to compare and show object differences.

2 lines 6.36 kB
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ngx-object-diff",["exports","@angular/core","@angular/platform-browser"],n):n((e=e||self)["ngx-object-diff"]={},e.ng.core,e.ng.platformBrowser)}(this,(function(e,n,t){"use strict";var i=function(){function e(e){this.sanitizer=e,this.openChar="{",this.closeChar="}"}return e.prototype.setOpenChar=function(e){this.openChar=e},e.prototype.setCloseChar=function(e){this.closeChar=e},e.prototype.diff=function(e,n,t,i){if(e===n)return this.equalObj(e);var r={},s=!0;for(var o in e)if(!i&&o in n||i&&void 0!==n&&n.hasOwnProperty(o))if(e[o]===n[o])r[o]=this.equalObj(e[o]);else if(!t&&this.isValidAttr(e[o],n[o])){var a=this.diff(e[o],n[o],t,i);"equal"==a.changed?r[o]=this.equalObj(e[o]):(s=!1,r[o]=a)}else s=!1,r[o]={changed:"primitive change",removed:e[o],added:n[o]};else s=!1,r[o]={changed:"removed",value:e[o]};for(var o in n)(i||o in e)&&(!i||void 0===e||e.hasOwnProperty(o))||(s=!1,r[o]={changed:"added",value:n[o]});return s?this.equalObj(e):{changed:"object change",value:r}},e.prototype.diffOwnProperties=function(e,n,t){return this.diff(e,n,t,!0)},e.prototype.toJsonView=function(e,n){return this.formatToJsonXMLString(e,n)},e.prototype.objToJsonView=function(e,n){return this.formatObjToJsonXMLString(e,n)},e.prototype.toJsonDiffView=function(e,n){return this.formatChangesToXMLString(e,n)},e.prototype.formatObjToJsonXMLString=function(e,n){return this.sanitizer.bypassSecurityTrustHtml(this.inspect(e,n))},e.prototype.formatToJsonXMLString=function(e,t){var i=[],r=e.value;if("equal"==e.changed)return this.sanitizer.sanitize(n.SecurityContext.HTML,this.sanitizer.bypassSecurityTrustHtml(this.inspect(r,t)));for(var s in r)i.push(this.formatChange(s,r[s],t));return this.sanitizer.sanitize(n.SecurityContext.HTML,this.sanitizer.bypassSecurityTrustHtml("<span>"+this.openChar+'</span>\n<div class="diff-level">'+i.join("<span>,</span>\n")+"\n</div><span>"+this.closeChar+"</span>"))},e.prototype.formatChangesToXMLString=function(e,t){var i=[];if("equal"==e.changed)return"";var r=e.value;for(var s in r){"equal"!==r[s].changed&&i.push(this.formatChange(s,r[s],t,!0))}return this.sanitizer.sanitize(n.SecurityContext.HTML,this.sanitizer.bypassSecurityTrustHtml("<span>"+this.openChar+'</span>\n<div class="diff-level">'+i.join("<span>,</span>\n")+"\n</div><span>"+this.closeChar+"</span>"))},e.prototype.formatChange=function(e,n,t,i){var r;switch(n.changed){case"equal":r=this.stringifyObjectKey(this.escapeHTML(e))+"<span>: </span>"+this.inspect(n.value);break;case"removed":r='<del class="diff">'+this.stringifyObjectKey(this.escapeHTML(e))+"<span>: </span>"+this.inspect(n.value)+"</del>";break;case"added":r='<ins class="diff">'+this.stringifyObjectKey(this.escapeHTML(e))+"<span>: </span>"+this.inspect(n.value)+"</ins>";break;case"primitive change":var s=this.stringifyObjectKey(this.escapeHTML(e))+"<span>: </span>";r='<del class="diff diff-key">'+s+this.inspect(n.removed)+'</del><span>,</span>\n<ins class="diff diff-key">'+s+this.inspect(n.added)+"</ins>";break;case"object change":r=t?"":this.stringifyObjectKey(e)+"<span>: </span>"+(i?this.formatChangesToXMLString(n):this.formatToJsonXMLString(n))}return r},e.prototype.inspect=function(e,n){return this._inspect("",e,n)},e.prototype._inspect=function(e,n,t){switch(typeof n){case"object":if(!n){e+="null";break}if(t){e+="[object]";break}var i=Object.keys(n),r=i.length;if(0===r)e+="<span>"+this.openChar+this.closeChar+"</span>";else{e+="<span>"+this.openChar+'</span>\n<div class="diff-level">';for(var s=0;s<r;s++){var o=i[s];e=this._inspect(e+this.stringifyObjectKey(this.escapeHTML(o))+"<span>: </span>",n[o]),s<r-1&&(e+="<span>,</span>\n")}e+="\n</div><span>"+this.closeChar+"</span>"}break;case"string":e+=JSON.stringify(this.escapeHTML(n));break;case"undefined":e+="undefined";break;default:e+=this.escapeHTML(String(n))}return e},e.prototype.stringifyObjectKey=function(e){return/^[a-z0-9_$]*$/i.test(e)?e:JSON.stringify(e)},e.prototype.escapeHTML=function(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},e.prototype.equalObj=function(e){return{changed:"equal",value:e}},e.prototype.isValidAttr=function(e,n){var t=typeof e,i=typeof n;return e&&n&&("object"==t||"function"==t)&&("object"==i||"function"==i)},e.decorators=[{type:n.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:t.DomSanitizer}]},e.ngInjectableDef=n.ɵɵdefineInjectable({factory:function(){return new e(n.ɵɵinject(t.DomSanitizer))},token:e,providedIn:"root"}),e}();var r=function(){function e(){}return e.decorators=[{type:n.Component,args:[{selector:"ngx-object-diff",template:'\n <pre [innerHTML]="obj"></pre>\n ',styles:["\n pre{\n display: block;\n padding: 9.5px;\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 1.428571429;\n color: #333;\n word-break: break-all;\n word-wrap: break-word;\n background-color: #f5f5f5;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n :host >>> .diff {\n display: inline-block;\n }\n :host >>> .diff-level {\n margin-left: 1.6em;\n }\n :host >>> .diff-holder {\n color: #666;\n margin: 0;\n }\n :host >>> .diff-holder span {\n color: #AAA;\n }\n :host >>> del.diff {\n text-decoration: none;\n color: #b30000;\n background: #fadad7;\n }\n :host >>> ins.diff {\n background: #eaf2c2;\n color: #406619;\n text-decoration: none;\n }\n :host >>> del.diff-key {\n border: 1px solid #f8a4a4;\n }\n :host >>> ins.diff-key {\n border: 1px solid #a3ce4c;\n margin-top: -1px;\n position: relative;\n }\n :host >>> ins.diff span {\n color: #AABF40;\n }\n :host >>> del.diff span {\n color: #EE8177;\n }\n "]}]}],e.propDecorators={obj:[{type:n.Input}]},e}();var s=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{declarations:[r],imports:[],providers:[i],exports:[r]}]}],e}();e.NgxObjectDiffComponent=r,e.NgxObjectDiffModule=s,e.NgxObjectDiffService=i,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=ngx-object-diff.umd.min.js.map