New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
differentiate
Advanced tools
differentiate - npm Package Compare versions
Comparing version 2.3.1 to 2.3.2
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("differentiate",["exports","@angular/core","@angular/common"],t):t(e.differentiate={},e.ng.core,e.ng.common)}(this,function(e,t,n){"use strict";var s={literal:1,pair:2,json:3,array:4};s[s.literal]="literal",s[s.pair]="pair",s[s.json]="json",s[s.array]="array";var h={"default":1,typeChanged:2,nameChanged:3,valueChanged:4,added:5,removed:6};h[h["default"]]="default",h[h.typeChanged]="typeChanged",h[h.nameChanged]="nameChanged",h[h.valueChanged]="valueChanged",h[h.added]="added",h[h.removed]="removed";var r=function(){function e(){this.allowRevert=!1,this.allowAdvance=!1,this.attributeOrderIsImportant=!0,this.onlyShowDifferences=!1,this.leftSideToolTip="take left side",this.rightSideToolTip="take right side",this.onrevert=new t.EventEmitter,this.onadvance=new t.EventEmitter,this.ondifference=new t.EventEmitter}return Object.defineProperty(e.prototype,"namedRootObject",{set:function(e){e.replace(" ","").length?this.categorizeBy=e.split(","):this.categorizeBy=undefined},enumerable:!0,configurable:!0}),e.prototype.generateNodeId=function(){return Math.floor(1e4*Math.random())+1},e.prototype.transformNodeToOriginalStructure=function(e,n){var r=this,i={},o=[];return e.map(function(e){if(e.status!==h.removed)if(n===s.json)if(e.type===s.literal)o.push(e.value);else if(e.type===s.pair)i[e.name]=e.value;else if(e.type===s.array){var t=r.transformNodeToOriginalStructure(e.children,e.parent);e.name.length?i[e.name]=t:i=[t]}else e.type===s.json&&(i[e.name]=r.transformNodeToOriginalStructure(e.children,e.parent));else n===s.array&&(e.type===s.literal?o.push(e.value):e.type===s.json?o.push(r.transformNodeToOriginalStructure(e,e.parent)):e.type===s.array&&o.push(r.transformNodeToOriginalStructure(e.children,e.parent)))}),o.length?o:i},e.prototype.transformNodeToInternalStruction=function(r){var i=this,e=r;if(r instanceof Array){var o=[],d=s.array;r.map(function(e,t){var n=i.transformNodeToInternalStruction(e);n instanceof Array?(i.attributeOrderIsImportant||(n.sort(function(e,t){return e.name<=t.name?-1:1}),n.map(function(e,t){e.index=t,e.altName=""+t})),o.push({id:i.generateNodeId(),index:t,name:"",altName:""+t,value:"",parent:d,type:s.array,status:h["default"],children:n})):o.push({id:i.generateNodeId(),index:t,name:"",altName:""+t,value:n,parent:d,type:s.literal,status:h["default"],children:[]})}),e=o}else if(r instanceof Object){var t=Object.keys(r),a=[],l=s.json;this.attributeOrderIsImportant||t.sort(function(e,t){return e<=t?-1:1}),t.map(function(e,t){var n=i.transformNodeToInternalStruction(r[e]);n instanceof Array?(i.attributeOrderIsImportant||(n.sort(function(e,t){return e.name<=t.name?-1:1}),n.map(function(e,t){e.index=t,e.altName=""+t})),a.push({id:i.generateNodeId(),index:t,name:e,altName:""+t,value:"",parent:l,type:s.json,status:h["default"],children:n})):a.push({id:i.generateNodeId(),index:t,name:e,altName:""+t,value:n,parent:l,type:s.pair,status:h["default"],children:[]})}),e=a}return e},e.prototype.itemInArray=function(e,t){var n,r=t.type===s.literal?t.value?String(t.value).toUpperCase():"":t.type===s.array?t.altName:t.name;return e.map(function(e){e.type===s.literal?e.value&&String(e.value).toUpperCase()===r&&(n=e):e.type===s.array?e.altName===r&&(n=e):e.name===r&&(n=e)}),n},e.prototype.leftItemFromRightItem=function(e,t){var n;if(!e||!t)return n;var r=t.type===s.literal?t.value?t.value.toUpperCase():"":t.type===s.array?t.altName:t.name;return e.type===s.literal?e.value&&String(e.value).toUpperCase()===r&&(n=e):e.type===s.array?e.altName===r&&(n=e):e.name===r&&(n=e),n},e.prototype.compare=function(e,t){e.type!==t.type?(e.status=h.typeChanged,t.status=h.typeChanged,e.counterpart=t.id,t.counterpart=e.id):e.type===s.literal?e.value!==t.value&&(e.status=h.valueChanged,t.status=h.valueChanged,e.counterpart=t.id,t.counterpart=e.id):e.type===s.pair?(e.name!==t.name&&(e.status=h.nameChanged,t.status=h.nameChanged,e.counterpart=t.id,t.counterpart=e.id),e.value!==t.value&&(e.status=h.valueChanged,t.status=h.valueChanged,e.counterpart=t.id,t.counterpart=e.id)):(e.name!==t.name&&(e.status=h.nameChanged,t.status=h.nameChanged,e.counterpart=t.id,t.counterpart=e.id),this.unify(e.children,t.children))},e.prototype.reIndex=function(e){var n=this;e.map(function(e,t){e.index=t,n.reIndex(e.children)})},e.prototype.copyInto=function(e,t,n,r){var i=JSON.parse(JSON.stringify(t));e.splice(n,0,i),this.reIndex(e),t.status=r,i.status=r,t.counterpart=i.id,i.counterpart=t.id,this.setChildrenStatus(t.children,r),this.setChildrenStatus(i.children,r)},e.prototype.setChildrenStatus=function(e,t){var n=this;e.map(function(e){e.status=t,n.setChildrenStatus(e.children,t)})},e.prototype.unify=function(e,t){for(var n=0,r=0,i=!0;i;){var o,d=n<e.length?this.itemInArray(t,e[n]):undefined,a=r<t.length?this.itemInArray(e,t[r]):undefined;if(!d&&n<e.length)if(t.length)this.copyInto(t,e[n],n,h.removed),r++,n++;else for(;n<e.length;)this.copyInto(t,e[n],n,h.removed),r++,n++;if(!a&&r<t.length)if(e.length)this.copyInto(e,t[r],r,h.added),r++,n++;else for(;r<t.length;)this.copyInto(e,t[r],r,h.added),r++,n++;if(d||(d=r<t.length?t[r]:undefined),a||(a=n<e.length?e[n]:undefined),d&&d.index!==n)for(;n<e.length;){if(d=this.leftItemFromRightItem(t[n],e[n])){d=r<t.length?t[r]:undefined;break}this.copyInto(t,e[n],n,h.removed),r++,n++}if(a&&a.index!==r)for(;r<t.length;){if(a=this.leftItemFromRightItem(e[r],t[r])){a=n<e.length?e[n]:undefined;break}this.copyInto(e,t[r],r,h.added),r++,n++}if(d&&n<e.length)(o=this.itemInArray(t,e[n]))&&o.index!==d.index&&(this.copyInto(e,t[r],r,h.added),n++,d=++r<t.length?t[r]:undefined);if(a&&r<t.length)(o=this.itemInArray(e,t[r]))&&o.index!==a.index&&(this.copyInto(t,e[n],n,h.removed),r++,a=++n<e.length?e[n]:undefined);d&&a&&(d.parent!==a.parent?(this.copyInto(e,t[r],r,h.added),this.copyInto(t,e[n],n,h.removed)):this.compare(d,a),r++,n++),i=n<e.length||r<t.length}},e.prototype.toInternalStruction=function(e,t){var n={leftSide:this.transformNodeToInternalStruction(e),rightSide:this.transformNodeToInternalStruction(t)};return this.unify(n.leftSide,n.rightSide),this.onlyShowDifferences&&(n.leftSide=this.filterUnchanged(n.leftSide),n.rightSide=this.filterUnchanged(n.rightSide)),n},e.prototype.filterUnchanged=function(e){var t=this,n=[];return e.map(function(e){e.children=t.filterUnchanged(e.children),(e.type>s.pair&&e.children.length||e.status!==h["default"])&&n.push(e)}),n.map(function(e,t){e.index=t,e.altName=""+t}),n},e.prototype.ngOnChanges=function(e){(e.attributeOrderIsImportant||e.onlyShowDifferences||e.leftSideObject||e.namedRootObject||e.rightSideObject)&&(this.ready=!1,this.ngOnInit())},e.prototype.ngOnInit=function(){var e=this;setTimeout(function(){return e.init()},666)},e.prototype.categorizedName=function(t){var n="";return this.categorizeBy.map(function(e){t.name===e&&(n=t.value)}),n},e.prototype.sideCategorizedName=function(e){var r=this;e.map(function(e){var n=[];e.children.map(function(e){var t=r.categorizedName(e);String(t).length&&n.push(t)}),e.categorizeBy=1<n.length?n.join(" - "):n[0],e.collapsed=!0})},e.prototype.init=function(){var e=this;if(this.leftSideObject&&this.rightSideObject){var t=this.leftSideObject instanceof Array?this.leftSideObject:[this.leftSideObject],n=this.rightSideObject instanceof Array?this.rightSideObject:[this.rightSideObject],r=this.toInternalStruction(t,n);this.categorizeBy&&(this.sideCategorizedName(r.leftSide),this.sideCategorizedName(r.rightSide)),this.leftSide=[{id:this.generateNodeId(),name:"",value:"Root",index:0,parent:s.array,type:s.array,expanded:!0,isRoot:!0,children:r.leftSide}],this.rightSide=[{id:this.generateNodeId(),name:"",value:"Root",index:0,parent:s.array,type:s.array,expanded:!0,isRoot:!0,children:r.rightSide}],setTimeout(function(){e.ready=!0,e.fireCountDifference()},333)}},e.prototype.fireCountDifference=function(){var t=0;this.leftSide[0].children.map(function(e){e.children.map(function(e){e.status!==h["default"]&&t++})}),this.ondifference.emit(t)},e.prototype.lookupChildOf=function(t,e,n){var r=this,i=undefined;return t.id===n?i={parent:e,node:t}:t.children.length&&t.children.map(function(e){i||((i=r.lookupChildOf(e,undefined,n))&&i.parent===undefined?i.parent=t:e.id===n&&(i={parent:t,node:e}))}),i},e.prototype.performAdvanceToRight=function(e,t,n,r){var i=this,o=this.leftSide[0].children[r].children;n===h.removed?(e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.added?(e.parent.children.splice(e.node.index,1),t.parent.children.splice(t.node.index,1),this.reIndex(e.parent.children),this.reIndex(t.parent.children)):n===h.nameChanged?(e.node.name=t.node.name,e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.valueChanged?(t.node.value=e.node.value,t.node.status=h["default"],e.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.typeChanged&&(e.node.type=t.node.type,e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),e.node.children=t.node.children),setTimeout(function(){i.onadvance.emit({index:r,node:i.transformNodeToOriginalStructure(o,s.json)}),i.fireCountDifference()},66)},e.prototype.performAdvanceToLeft=function(e,t,n,r){var i=this,o=this.rightSide[0].children[r].children;n===h.added?(e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.removed?(e.parent.children.splice(e.node.index,1),t.parent.children.splice(t.node.index,1),this.reIndex(e.parent.children),this.reIndex(t.parent.children)):n===h.nameChanged?(t.node.name=e.node.name,t.node.status=h["default"],e.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.valueChanged?(e.node.value=t.node.value,e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.typeChanged&&(t.node.type=e.node.type,t.node.status=h["default"],e.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),t.node.children=e.node.children),setTimeout(function(){i.onrevert.emit({index:r,node:i.transformNodeToOriginalStructure(o,s.json)}),i.fireCountDifference()},66)},e.prototype.advance=function(e){var t=parseInt(e.node.path.split(",")[1]);"advance"===e.type?this.performAdvanceToLeft(this.lookupChildOf(this.leftSide[0].children[t],this.leftSide[0],e.node.id),this.lookupChildOf(this.rightSide[0].children[t],this.rightSide[0],e.node.counterpart),e.node.status,t):this.performAdvanceToRight(this.lookupChildOf(this.leftSide[0].children[t],this.leftSide[0],e.node.counterpart),this.lookupChildOf(this.rightSide[0].children[t],this.rightSide[0],e.node.id),e.node.status,t)},e.prototype.autoExpand=function(e){var t=parseInt(e.split(",")[1]),n=this.rightSide[0].children[t],r=this.leftSide[0].children[t];n.collapsed=!n.collapsed,r.collapsed=!r.collapsed},e.prototype.onhover=function(e){var t=parseInt(e.path.split(",")[1]);this.rightSide[0].children[t].children[e.index].hover=e.hover,this.leftSide[0].children[t].children[e.index].hover=e.hover},e.decorators=[{type:t.Component,args:[{selector:"differentiate",template:'<div class="spinner" *ngIf="!ready">\r\n <svg \r\n version="1.1" \r\n id="loader" \r\n xmlns="http://www.w3.org/2000/svg" \r\n xmlns:xlink="http://www.w3.org/1999/xlink" \r\n x="0px" \r\n y="0px"\r\n width="40px" \r\n height="40px" \r\n viewBox="0 0 50 50" \r\n style="enable-background:new 0 0 50 50;" \r\n xml:space="preserve">\r\n <path \r\n fill="#000" \r\n d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">\r\n <animateTransform attributeType="xml"\r\n attributeName="transform"\r\n type="rotate"\r\n from="0 25 25"\r\n to="360 25 25"\r\n dur="0.6s"\r\n repeatCount="indefinite"/>\r\n </path>\r\n </svg>\r\n</div>\r\n<differentiate-tree \r\n *ngIf="leftSide && rightSide"\r\n class="root" \r\n level="0" \r\n side="left-side" \r\n (onexpand)="autoExpand($event)"\r\n (onhover)="onhover($event)"\r\n (onrevert)="advance($event)"\r\n [rightSideToolTip]="rightSideToolTip"\r\n [showLeftActionButton]="allowAdvance" \r\n [children]="leftSide"></differentiate-tree>\r\n<differentiate-tree \r\n *ngIf="leftSide && rightSide"\r\n class="root" \r\n level="0" \r\n side="right-side" \r\n (onexpand)="autoExpand($event)"\r\n (onhover)="onhover($event)"\r\n (onrevert)="advance($event)"\r\n [leftSideToolTip]="leftSideToolTip"\r\n [showRightActionButton]="allowRevert" \r\n [children]="rightSide"></differentiate-tree>\r\n\r\n',styles:[":host{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;display:block;max-width:100vw;max-height:300px;overflow-y:auto;position:relative;width:100%}:host .spinner{margin:0 auto 1em;height:222px;width:20%;text-align:center;padding:1em;display:inline-block;vertical-align:top;position:absolute;top:0;left:10%;z-index:2}:host svg path,:host svg rect{fill:#1c0696}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={allowRevert:[{type:t.Input,args:["allowRevert"]}],allowAdvance:[{type:t.Input,args:["allowAdvance"]}],attributeOrderIsImportant:[{type:t.Input,args:["attributeOrderIsImportant"]}],onlyShowDifferences:[{type:t.Input,args:["onlyShowDifferences"]}],leftSideObject:[{type:t.Input,args:["leftSideObject"]}],rightSideObject:[{type:t.Input,args:["rightSideObject"]}],leftSideToolTip:[{type:t.Input,args:["leftSideToolTip"]}],rightSideToolTip:[{type:t.Input,args:["rightSideToolTip"]}],namedRootObject:[{type:t.Input,args:["namedRootObject"]}],onrevert:[{type:t.Output,args:["onrevert"]}],onadvance:[{type:t.Output,args:["onadvance"]}],ondifference:[{type:t.Output,args:["ondifference"]}]},e}(),i=function(){function e(){this.collapsed=!0,this.showLeftActionButton=!1,this.showRightActionButton=!1,this.status=1,this.side="",this.level="0",this.objectPath="",this.leftSideToolTip="take left side",this.rightSideToolTip="take right side",this.onhover=new t.EventEmitter,this.onrevert=new t.EventEmitter,this.onexpand=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.depth=parseInt(this.level)},e.prototype.bubleup=function(e){e.side=this.side,this.onhover.emit(e)},e.prototype.keyup=function(e){13===e.which&&e.target.click()},e.prototype.changCounter=function(){var t=0;return this.children.map(function(e){e.status!==h["default"]&&t++}),t},e.prototype.expand=function(e){this.onexpand.emit(this.objectPath)},e.prototype.autoExpand=function(e){this.onexpand.emit(e)},e.prototype.advanceToRightSide=function(e){e.path=this.objectPath+(this.objectPath.length?",":"")+e.index,this.onrevert.emit({type:"advance",node:e})},e.prototype.advanceToLeftSide=function(e){e.path=this.objectPath+(this.objectPath.length?",":"")+e.index,this.onrevert.emit({type:"revert",node:e})},e.prototype.advance=function(e){this.onrevert.emit(e)},e.prototype.mouseOvered=function(e,t,n){e.preventDefault(),2===this.depth&&(e.stopPropagation(),this.onhover.emit({hover:t,index:n,path:this.objectPath}))},e.decorators=[{type:t.Component,args:[{selector:"differentiate-tree",template:'<div *ngIf="categorizeBy" \r\n class="diff-heading" \r\n (click)="expand($event)">\r\n <span class="arrow" *ngIf="collapsed">►</span>\r\n <span class="arrow" *ngIf="!collapsed">▼</span>\r\n <span [textContent]="categorizeBy"></span>\r\n <span class="counter" [textContent]="changCounter()"></span>\r\n</div>\r\n<ul [class]="side" [class.child]="depth ===2 || (categorizeBy && categorizeBy.length)" [class.collapsed]="categorizeBy && collapsed">\r\n <li *ngFor="let child of children" \r\n (mouseout)="depth === 2 ? mouseOvered($event, false, child.index) : null"\r\n (mouseover)="depth === 2 ? mouseOvered($event, true, child.index) : null"\r\n [class.hover]="child.hover"\r\n [class.added]="child.status === 5" \r\n [class.removed]="child.status === 6" \r\n [class.type-changed]="child.status === 2" \r\n [class.name-changed]="child.status === 3" \r\n [class.value-changed]="child.status === 4">\r\n <div class=\'tree-node\' [ngClass]="\'depth-\' + depth" [class.collapsed]="child.collapsed" [id] = "child.id">\r\n <span [title]="rightSideToolTip"\r\n class="do" \r\n tabindex="0"\r\n aria-hidden="true"\r\n (keyup)="keyup($event)"\r\n (click)="advanceToRightSide(child)"\r\n *ngIf="showLeftActionButton && status !== child.status && child.status > 1">⎌</span>\r\n <span *ngIf=\'child.name && child.name!=null\'\r\n class=\'name\' \r\n [innerHTML]="child.name.length ? child.name : \' \'">\r\n </span>\r\n <span *ngIf=\'child.value && child.value!=null\'\r\n class=\'value\' \r\n [class.string]="depth > 0 && child.value && child.value.length"\r\n [innerHTML]="child.value ? child.value : \' \'">\r\n </span>\r\n <span [title]="leftSideToolTip"\r\n class="undo" \r\n tabindex="0"\r\n aria-hidden="true"\r\n (keyup)="keyup($event)"\r\n (click)="advanceToLeftSide(child)"\r\n *ngIf="showRightActionButton && status !== child.status && child.status > 1">⎌</span>\r\n </div>\r\n <differentiate-tree *ngIf="child.children.length" \r\n [level]="depth+1" \r\n [status]="child.status" \r\n [collapsed]="child.collapsed"\r\n [categorizeBy]="child.categorizeBy"\r\n [showLeftActionButton]="showLeftActionButton" \r\n [leftSideToolTip]="leftSideToolTip"\r\n [showRightActionButton]="showRightActionButton" \r\n [rightSideToolTip]="rightSideToolTip"\r\n [objectPath]="objectPath + (objectPath.length ? \',\':\'\') + child.index"\r\n (onhover)="bubleup($event)"\r\n (onrevert)="advance($event)"\r\n (onexpand)="autoExpand($event)"\r\n [class.child-node]="child.parent != 4" \r\n [children]=\'child.children\'></differentiate-tree>\r\n <div *ngIf="child.status > 2" class="upper" [class.collapsed]="child.collapsed" [ngClass]="\'depth-\' + depth" ></div>\r\n <div *ngIf="child.status > 2" class="lower" [class.collapsed]="child.collapsed" [ngClass]="\'depth-\' + depth" ></div>\r\n </li>\r\n</ul>\r\n\r\n',styles:[":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{border-radius:50%;background-color:#ddd;cursor:pointer;color:#962323;font-size:1.2rem;height:18px;line-height:1.2rem;position:absolute;text-align:center;top:0;width:18px;z-index:2}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul.child{margin-top:2px!important}ul.child li{padding-top:2px;padding-bottom:2px}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"]}]}],e.propDecorators={collapsed:[{type:t.Input,args:["collapsed"]}],children:[{type:t.Input,args:["children"]}],showLeftActionButton:[{type:t.Input,args:["showLeftActionButton"]}],showRightActionButton:[{type:t.Input,args:["showRightActionButton"]}],status:[{type:t.Input,args:["status"]}],side:[{type:t.Input,args:["side"]}],level:[{type:t.Input,args:["level"]}],objectPath:[{type:t.Input,args:["objectPath"]}],categorizeBy:[{type:t.Input,args:["categorizeBy"]}],leftSideToolTip:[{type:t.Input,args:["leftSideToolTip"]}],rightSideToolTip:[{type:t.Input,args:["rightSideToolTip"]}],onhover:[{type:t.Output,args:["onhover"]}],onrevert:[{type:t.Output,args:["onrevert"]}],onexpand:[{type:t.Output,args:["onexpand"]}]},e}(),o=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[r,i],exports:[r],entryComponents:[],providers:[],schemas:[t.CUSTOM_ELEMENTS_SCHEMA]}]}],e}();e.DifferentiateComponent=r,e.DifferentiateTree=i,e.DifferentiateModule=o,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("differentiate",["exports","@angular/core","@angular/common"],t):t(e.differentiate={},e.ng.core,e.ng.common)}(this,function(e,t,n){"use strict";var s={literal:1,pair:2,json:3,array:4};s[s.literal]="literal",s[s.pair]="pair",s[s.json]="json",s[s.array]="array";var h={"default":1,typeChanged:2,nameChanged:3,valueChanged:4,added:5,removed:6};h[h["default"]]="default",h[h.typeChanged]="typeChanged",h[h.nameChanged]="nameChanged",h[h.valueChanged]="valueChanged",h[h.added]="added",h[h.removed]="removed";var i=function(){function e(){this.allowRevert=!1,this.allowAdvance=!1,this.attributeOrderIsImportant=!0,this.onlyShowDifferences=!1,this.leftSideToolTip="take left side",this.rightSideToolTip="take right side",this.onrevert=new t.EventEmitter,this.onadvance=new t.EventEmitter,this.ondifference=new t.EventEmitter}return Object.defineProperty(e.prototype,"namedRootObject",{set:function(e){e.replace(" ","").length?this.categorizeBy=e.split(","):this.categorizeBy=undefined},enumerable:!0,configurable:!0}),e.prototype.generateNodeId=function(){return Math.floor(1e4*Math.random())+1},e.prototype.transformNodeToOriginalStructure=function(e,n){var i=this,r={},o=[];return e.map(function(e){if(e.status!==h.removed)if(n===s.json)if(e.type===s.literal)o.push(e.value);else if(e.type===s.pair)r[e.name]=e.value;else if(e.type===s.array){var t=i.transformNodeToOriginalStructure(e.children,e.parent);e.name.length?r[e.name]=t:r=[t]}else e.type===s.json&&(r[e.name]=i.transformNodeToOriginalStructure(e.children,e.parent));else n===s.array&&(e.type===s.literal?o.push(e.value):e.type===s.json?o.push(i.transformNodeToOriginalStructure(e,e.parent)):e.type===s.array&&o.push(i.transformNodeToOriginalStructure(e.children,e.parent)))}),o.length?o:r},e.prototype.transformNodeToInternalStruction=function(i){var r=this,e=i;if(i instanceof Array){var o=[],d=s.array;i.map(function(e,t){var n=r.transformNodeToInternalStruction(e);n instanceof Array?(r.attributeOrderIsImportant||(n.sort(function(e,t){return e.name<=t.name?-1:1}),n.map(function(e,t){e.index=t,e.altName=""+t})),o.push({id:r.generateNodeId(),index:t,name:"",altName:""+t,value:"",parent:d,type:s.array,status:h["default"],children:n})):o.push({id:r.generateNodeId(),index:t,name:"",altName:""+t,value:n,parent:d,type:s.literal,status:h["default"],children:[]})}),e=o}else if(i instanceof Object){var t=Object.keys(i),a=[],l=s.json;this.attributeOrderIsImportant||t.sort(function(e,t){return e<=t?-1:1}),t.map(function(e,t){var n=r.transformNodeToInternalStruction(i[e]);n instanceof Array?(r.attributeOrderIsImportant||(n.sort(function(e,t){return e.name<=t.name?-1:1}),n.map(function(e,t){e.index=t,e.altName=""+t})),a.push({id:r.generateNodeId(),index:t,name:e,altName:""+t,value:"",parent:l,type:s.json,status:h["default"],children:n})):a.push({id:r.generateNodeId(),index:t,name:e,altName:""+t,value:n,parent:l,type:s.pair,status:h["default"],children:[]})}),e=a}return e},e.prototype.itemInArray=function(e,t){var n,i=t.type===s.literal?t.value?String(t.value).toUpperCase():"":t.type===s.array?t.altName:t.name;return e.map(function(e){e.type===s.literal?e.value&&String(e.value).toUpperCase()===i&&(n=e):e.type===s.array?e.altName===i&&(n=e):e.name===i&&(n=e)}),n},e.prototype.leftItemFromRightItem=function(e,t){var n;if(!e||!t)return n;var i=t.type===s.literal?t.value?t.value.toUpperCase():"":t.type===s.array?t.altName:t.name;return e.type===s.literal?e.value&&String(e.value).toUpperCase()===i&&(n=e):e.type===s.array?e.altName===i&&(n=e):e.name===i&&(n=e),n},e.prototype.compare=function(e,t){e.type!==t.type?(e.status=h.typeChanged,t.status=h.typeChanged,e.counterpart=t.id,t.counterpart=e.id):e.type===s.literal?e.value!==t.value&&(e.status=h.valueChanged,t.status=h.valueChanged,e.counterpart=t.id,t.counterpart=e.id):e.type===s.pair?(e.name!==t.name&&(e.status=h.nameChanged,t.status=h.nameChanged,e.counterpart=t.id,t.counterpart=e.id),e.value!==t.value&&(e.status=h.valueChanged,t.status=h.valueChanged,e.counterpart=t.id,t.counterpart=e.id)):(e.name!==t.name&&(e.status=h.nameChanged,t.status=h.nameChanged,e.counterpart=t.id,t.counterpart=e.id),this.unify(e.children,t.children))},e.prototype.reIndex=function(e){var n=this;e.map(function(e,t){e.index=t,n.reIndex(e.children)})},e.prototype.copyInto=function(e,t,n,i){var r=JSON.parse(JSON.stringify(t));e.splice(n,0,r),this.reIndex(e),t.status=i,r.status=i,t.counterpart=r.id,r.counterpart=t.id,this.setChildrenStatus(t.children,i),this.setChildrenStatus(r.children,i)},e.prototype.setChildrenStatus=function(e,t){var n=this;e.map(function(e){e.status=t,n.setChildrenStatus(e.children,t)})},e.prototype.unify=function(e,t){for(var n=0,i=0,r=!0;r;){var o,d=n<e.length?this.itemInArray(t,e[n]):undefined,a=i<t.length?this.itemInArray(e,t[i]):undefined;if(!d&&n<e.length)if(t.length)this.copyInto(t,e[n],n,h.removed),i++,n++;else for(;n<e.length;)this.copyInto(t,e[n],n,h.removed),i++,n++;if(!a&&i<t.length)if(e.length)this.copyInto(e,t[i],i,h.added),i++,n++;else for(;i<t.length;)this.copyInto(e,t[i],i,h.added),i++,n++;if(d||(d=i<t.length?t[i]:undefined),a||(a=n<e.length?e[n]:undefined),d&&d.index!==n)for(;n<e.length;){if(d=this.leftItemFromRightItem(t[n],e[n])){d=i<t.length?t[i]:undefined;break}this.copyInto(t,e[n],n,h.removed),i++,n++}if(a&&a.index!==i)for(;i<t.length;){if(a=this.leftItemFromRightItem(e[i],t[i])){a=n<e.length?e[n]:undefined;break}this.copyInto(e,t[i],i,h.added),i++,n++}if(d&&n<e.length)(o=this.itemInArray(t,e[n]))&&o.index!==d.index&&(this.copyInto(e,t[i],i,h.added),n++,d=++i<t.length?t[i]:undefined);if(a&&i<t.length)(o=this.itemInArray(e,t[i]))&&o.index!==a.index&&(this.copyInto(t,e[n],n,h.removed),i++,a=++n<e.length?e[n]:undefined);d&&a&&(d.parent!==a.parent?(this.copyInto(e,t[i],i,h.added),this.copyInto(t,e[n],n,h.removed)):this.compare(d,a),i++,n++),r=n<e.length||i<t.length}},e.prototype.toInternalStruction=function(e,t){var n={leftSide:this.transformNodeToInternalStruction(e),rightSide:this.transformNodeToInternalStruction(t)};return this.unify(n.leftSide,n.rightSide),this.onlyShowDifferences&&(n.leftSide=this.filterUnchanged(n.leftSide),n.rightSide=this.filterUnchanged(n.rightSide)),n},e.prototype.filterUnchanged=function(e){var t=this,n=[];return e.map(function(e){e.children=t.filterUnchanged(e.children),(e.type>s.pair&&e.children.length||e.status!==h["default"])&&n.push(e)}),n.map(function(e,t){e.index=t,e.altName=""+t}),n},e.prototype.ngOnChanges=function(e){(e.attributeOrderIsImportant||e.onlyShowDifferences||e.leftSideObject||e.namedRootObject||e.rightSideObject)&&(this.ready=!1,this.ngOnInit())},e.prototype.ngOnInit=function(){var e=this;setTimeout(function(){return e.init()},666)},e.prototype.categorizedName=function(t){var n="";return this.categorizeBy.map(function(e){t.name===e&&(n=t.value)}),n},e.prototype.sideCategorizedName=function(e){var i=this;e.map(function(e){var n=[];e.children.map(function(e){var t=i.categorizedName(e);String(t).length&&n.push(t)}),e.categorizeBy=1<n.length?n.join(" - "):n[0],e.collapsed=!0})},e.prototype.init=function(){var e=this;if(this.leftSideObject&&this.rightSideObject){var t=this.leftSideObject instanceof Array?this.leftSideObject:[this.leftSideObject],n=this.rightSideObject instanceof Array?this.rightSideObject:[this.rightSideObject],i=this.toInternalStruction(t,n);this.categorizeBy&&(this.sideCategorizedName(i.leftSide),this.sideCategorizedName(i.rightSide)),this.leftSide=[{id:this.generateNodeId(),name:"",value:"Root",index:0,parent:s.array,type:s.array,expanded:!0,isRoot:!0,children:i.leftSide}],this.rightSide=[{id:this.generateNodeId(),name:"",value:"Root",index:0,parent:s.array,type:s.array,expanded:!0,isRoot:!0,children:i.rightSide}],setTimeout(function(){e.ready=!0,e.fireCountDifference()},333)}},e.prototype.fireCountDifference=function(){var t=0;this.leftSide[0].children.map(function(e){e.children.map(function(e){e.status!==h["default"]&&t++})}),this.ondifference.emit(t)},e.prototype.lookupChildOf=function(t,e,n){var i=this,r=undefined;return t.id===n?r={parent:e,node:t}:t.children.length&&t.children.map(function(e){r||((r=i.lookupChildOf(e,undefined,n))&&r.parent===undefined?r.parent=t:e.id===n&&(r={parent:t,node:e}))}),r},e.prototype.performAdvanceToRight=function(e,t,n,i){var r=this,o=this.leftSide[0].children[i].children;n===h.removed?(e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.added?(e.parent.children.splice(e.node.index,1),t.parent.children.splice(t.node.index,1),this.reIndex(e.parent.children),this.reIndex(t.parent.children)):n===h.nameChanged?(e.node.name=t.node.name,e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.valueChanged?(t.node.value=e.node.value,t.node.status=h["default"],e.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.typeChanged&&(e.node.type=t.node.type,e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),e.node.children=t.node.children),setTimeout(function(){r.onadvance.emit({index:i,node:r.transformNodeToOriginalStructure(o,s.json)}),r.fireCountDifference()},66)},e.prototype.performAdvanceToLeft=function(e,t,n,i){var r=this,o=this.rightSide[0].children[i].children;n===h.added?(e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.removed?(e.parent.children.splice(e.node.index,1),t.parent.children.splice(t.node.index,1),this.reIndex(e.parent.children),this.reIndex(t.parent.children)):n===h.nameChanged?(t.node.name=e.node.name,t.node.status=h["default"],e.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.valueChanged?(e.node.value=t.node.value,e.node.status=h["default"],t.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),this.setChildrenStatus(t.node.children,t.node.status)):n===h.typeChanged&&(t.node.type=e.node.type,t.node.status=h["default"],e.node.status=h["default"],this.setChildrenStatus(e.node.children,e.node.status),t.node.children=e.node.children),setTimeout(function(){r.onrevert.emit({index:i,node:r.transformNodeToOriginalStructure(o,s.json)}),r.fireCountDifference()},66)},e.prototype.advance=function(e){var t=parseInt(e.node.path.split(",")[1]);"advance"===e.type?this.performAdvanceToLeft(this.lookupChildOf(this.leftSide[0].children[t],this.leftSide[0],e.node.id),this.lookupChildOf(this.rightSide[0].children[t],this.rightSide[0],e.node.counterpart),e.node.status,t):this.performAdvanceToRight(this.lookupChildOf(this.leftSide[0].children[t],this.leftSide[0],e.node.counterpart),this.lookupChildOf(this.rightSide[0].children[t],this.rightSide[0],e.node.id),e.node.status,t)},e.prototype.autoExpand=function(e){var t=parseInt(e.split(",")[1]),n=this.rightSide[0].children[t],i=this.leftSide[0].children[t];n.collapsed=!n.collapsed,i.collapsed=!i.collapsed},e.prototype.onhover=function(e){var t=parseInt(e.path.split(",")[1]);this.rightSide[0].children[t].children[e.index].hover=e.hover,this.leftSide[0].children[t].children[e.index].hover=e.hover},e.decorators=[{type:t.Component,args:[{selector:"differentiate",template:'<div class="spinner" *ngIf="!ready">\r\n <svg \r\n version="1.1" \r\n id="loader" \r\n xmlns="http://www.w3.org/2000/svg" \r\n xmlns:xlink="http://www.w3.org/1999/xlink" \r\n x="0px" \r\n y="0px"\r\n width="40px" \r\n height="40px" \r\n viewBox="0 0 50 50" \r\n style="enable-background:new 0 0 50 50;" \r\n xml:space="preserve">\r\n <path \r\n fill="#000" \r\n d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">\r\n <animateTransform attributeType="xml"\r\n attributeName="transform"\r\n type="rotate"\r\n from="0 25 25"\r\n to="360 25 25"\r\n dur="0.6s"\r\n repeatCount="indefinite"/>\r\n </path>\r\n </svg>\r\n</div>\r\n<differentiate-tree \r\n *ngIf="leftSide && rightSide"\r\n class="root" \r\n level="0" \r\n side="left-side" \r\n (onexpand)="autoExpand($event)"\r\n (onhover)="onhover($event)"\r\n (onrevert)="advance($event)"\r\n [rightSideToolTip]="rightSideToolTip"\r\n [showLeftActionButton]="allowAdvance" \r\n [children]="leftSide"></differentiate-tree>\r\n<differentiate-tree \r\n *ngIf="leftSide && rightSide"\r\n class="root" \r\n level="0" \r\n side="right-side" \r\n (onexpand)="autoExpand($event)"\r\n (onhover)="onhover($event)"\r\n (onrevert)="advance($event)"\r\n [leftSideToolTip]="leftSideToolTip"\r\n [showRightActionButton]="allowRevert" \r\n [children]="rightSide"></differentiate-tree>\r\n\r\n',styles:[":host{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;display:block;max-width:100vw;max-height:300px;overflow-y:auto;position:relative;width:100%}:host .spinner{margin:0 auto 1em;height:222px;width:20%;text-align:center;padding:1em;display:inline-block;vertical-align:top;position:absolute;top:0;left:10%;z-index:2}:host svg path,:host svg rect{fill:#1c0696}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={allowRevert:[{type:t.Input,args:["allowRevert"]}],allowAdvance:[{type:t.Input,args:["allowAdvance"]}],attributeOrderIsImportant:[{type:t.Input,args:["attributeOrderIsImportant"]}],onlyShowDifferences:[{type:t.Input,args:["onlyShowDifferences"]}],leftSideObject:[{type:t.Input,args:["leftSideObject"]}],rightSideObject:[{type:t.Input,args:["rightSideObject"]}],leftSideToolTip:[{type:t.Input,args:["leftSideToolTip"]}],rightSideToolTip:[{type:t.Input,args:["rightSideToolTip"]}],namedRootObject:[{type:t.Input,args:["namedRootObject"]}],onrevert:[{type:t.Output,args:["onrevert"]}],onadvance:[{type:t.Output,args:["onadvance"]}],ondifference:[{type:t.Output,args:["ondifference"]}]},e}(),r=function(){function e(){this.collapsed=!0,this.showLeftActionButton=!1,this.showRightActionButton=!1,this.status=1,this.side="",this.level="0",this.objectPath="",this.leftSideToolTip="take left side",this.rightSideToolTip="take right side",this.onhover=new t.EventEmitter,this.onrevert=new t.EventEmitter,this.onexpand=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.depth=parseInt(this.level)},e.prototype.bubleup=function(e){e.side=this.side,this.onhover.emit(e)},e.prototype.keyup=function(e){13===e.which&&e.target.click()},e.prototype.changCounter=function(){var t=0;return this.children.map(function(e){e.status!==h["default"]&&t++}),t},e.prototype.expand=function(e){this.onexpand.emit(this.objectPath)},e.prototype.autoExpand=function(e){this.onexpand.emit(e)},e.prototype.advanceToRightSide=function(e){e.path=this.objectPath+(this.objectPath.length?",":"")+e.index,this.onrevert.emit({type:"advance",node:e})},e.prototype.advanceToLeftSide=function(e){e.path=this.objectPath+(this.objectPath.length?",":"")+e.index,this.onrevert.emit({type:"revert",node:e})},e.prototype.advance=function(e){this.onrevert.emit(e)},e.prototype.mouseOvered=function(e,t,n){e.preventDefault(),2===this.depth&&(e.stopPropagation(),this.onhover.emit({hover:t,index:n,path:this.objectPath}))},e.decorators=[{type:t.Component,args:[{selector:"differentiate-tree",template:'<div *ngIf="categorizeBy" \r\n class="diff-heading" \r\n (click)="expand($event)">\r\n <span class="arrow" *ngIf="collapsed">►</span>\r\n <span class="arrow" *ngIf="!collapsed">▼</span>\r\n <span [textContent]="categorizeBy"></span>\r\n <span class="counter" [textContent]="changCounter()"></span>\r\n</div>\r\n<ul [class]="side" [class.child]="depth ===2 || (categorizeBy && categorizeBy.length)" [class.collapsed]="categorizeBy && collapsed">\r\n <li *ngFor="let child of children" \r\n (mouseout)="depth === 2 ? mouseOvered($event, false, child.index) : null"\r\n (mouseover)="depth === 2 ? mouseOvered($event, true, child.index) : null"\r\n [class.hover]="child.hover"\r\n [class.added]="child.status === 5" \r\n [class.removed]="child.status === 6" \r\n [class.type-changed]="child.status === 2" \r\n [class.name-changed]="child.status === 3" \r\n [class.value-changed]="child.status === 4">\r\n <div class=\'tree-node\' [ngClass]="\'depth-\' + depth" [class.collapsed]="child.collapsed" [id] = "child.id">\r\n <span [title]="rightSideToolTip"\r\n class="do" \r\n tabindex="0"\r\n aria-hidden="true"\r\n (keyup)="keyup($event)"\r\n (click)="advanceToRightSide(child)"\r\n *ngIf="showLeftActionButton && status !== child.status && child.status > 1">⎌</span>\r\n <span *ngIf=\'child.name && child.name!=null\'\r\n class=\'name\' \r\n [innerHTML]="child.name.length ? child.name : \' \'">\r\n </span>\r\n <span *ngIf=\'child.value && child.value!=null\'\r\n class=\'value\' \r\n [class.string]="depth > 0 && child.value && child.value.length"\r\n [innerHTML]="child.value ? child.value : \' \'">\r\n </span>\r\n <span [title]="leftSideToolTip"\r\n class="undo" \r\n tabindex="0"\r\n aria-hidden="true"\r\n (keyup)="keyup($event)"\r\n (click)="advanceToLeftSide(child)"\r\n *ngIf="showRightActionButton && status !== child.status && child.status > 1">⎌</span>\r\n </div>\r\n <differentiate-tree *ngIf="child.children.length" \r\n [level]="depth+1" \r\n [status]="child.status" \r\n [collapsed]="child.collapsed"\r\n [categorizeBy]="child.categorizeBy"\r\n [showLeftActionButton]="showLeftActionButton" \r\n [leftSideToolTip]="leftSideToolTip"\r\n [showRightActionButton]="showRightActionButton" \r\n [rightSideToolTip]="rightSideToolTip"\r\n [objectPath]="objectPath + (objectPath.length ? \',\':\'\') + child.index"\r\n (onhover)="bubleup($event)"\r\n (onrevert)="advance($event)"\r\n (onexpand)="autoExpand($event)"\r\n [class.child-node]="child.parent != 4" \r\n [children]=\'child.children\'></differentiate-tree>\r\n <div *ngIf="child.status > 2" class="upper" [class.collapsed]="child.collapsed" [ngClass]="\'depth-\' + depth" ></div>\r\n <div *ngIf="child.status > 2" class="lower" [class.collapsed]="child.collapsed" [ngClass]="\'depth-\' + depth" ></div>\r\n </li>\r\n</ul>\r\n\r\n',styles:[":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .hover .do,ul li .hover .undo{text-decoration:underline}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{cursor:pointer;color:#962323;position:absolute;text-align:center;top:0;width:18px;z-index:2;height:100%}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li .do,ul.left-side li .undo{border-right:1px solid #ddd}ul.left-side li .tree-node:before{position:absolute;top:0;left:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-right:1px solid #ddd;content:' ';display:block}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li .do,ul.right-side li .undo{border-left:1px solid #ddd}ul.right-side li .tree-node:after{position:absolute;top:0;right:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-left:1px solid #ddd;content:' ';display:block}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"]}]}],e.propDecorators={collapsed:[{type:t.Input,args:["collapsed"]}],children:[{type:t.Input,args:["children"]}],showLeftActionButton:[{type:t.Input,args:["showLeftActionButton"]}],showRightActionButton:[{type:t.Input,args:["showRightActionButton"]}],status:[{type:t.Input,args:["status"]}],side:[{type:t.Input,args:["side"]}],level:[{type:t.Input,args:["level"]}],objectPath:[{type:t.Input,args:["objectPath"]}],categorizeBy:[{type:t.Input,args:["categorizeBy"]}],leftSideToolTip:[{type:t.Input,args:["leftSideToolTip"]}],rightSideToolTip:[{type:t.Input,args:["rightSideToolTip"]}],onhover:[{type:t.Output,args:["onhover"]}],onrevert:[{type:t.Output,args:["onrevert"]}],onexpand:[{type:t.Output,args:["onexpand"]}]},e}(),o=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[i,r],exports:[i],entryComponents:[],providers:[],schemas:[t.CUSTOM_ELEMENTS_SCHEMA]}]}],e}();e.DifferentiateComponent=i,e.DifferentiateTree=r,e.DifferentiateModule=o,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=differentiate.umd.min.js.map |
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":4,"metadata":{"DifferentiateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"differentiate","template":"<div class=\"spinner\" *ngIf=\"!ready\">\r\n <svg \r\n version=\"1.1\" \r\n id=\"loader\" \r\n xmlns=\"http://www.w3.org/2000/svg\" \r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" \r\n x=\"0px\" \r\n y=\"0px\"\r\n width=\"40px\" \r\n height=\"40px\" \r\n viewBox=\"0 0 50 50\" \r\n style=\"enable-background:new 0 0 50 50;\" \r\n xml:space=\"preserve\">\r\n <path \r\n fill=\"#000\" \r\n d=\"M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z\">\r\n <animateTransform attributeType=\"xml\"\r\n attributeName=\"transform\"\r\n type=\"rotate\"\r\n from=\"0 25 25\"\r\n to=\"360 25 25\"\r\n dur=\"0.6s\"\r\n repeatCount=\"indefinite\"/>\r\n </path>\r\n </svg>\r\n</div>\r\n<differentiate-tree \r\n *ngIf=\"leftSide && rightSide\"\r\n class=\"root\" \r\n level=\"0\" \r\n side=\"left-side\" \r\n (onexpand)=\"autoExpand($event)\"\r\n (onhover)=\"onhover($event)\"\r\n (onrevert)=\"advance($event)\"\r\n [rightSideToolTip]=\"rightSideToolTip\"\r\n [showLeftActionButton]=\"allowAdvance\" \r\n [children]=\"leftSide\"></differentiate-tree>\r\n<differentiate-tree \r\n *ngIf=\"leftSide && rightSide\"\r\n class=\"root\" \r\n level=\"0\" \r\n side=\"right-side\" \r\n (onexpand)=\"autoExpand($event)\"\r\n (onhover)=\"onhover($event)\"\r\n (onrevert)=\"advance($event)\"\r\n [leftSideToolTip]=\"leftSideToolTip\"\r\n [showRightActionButton]=\"allowRevert\" \r\n [children]=\"rightSide\"></differentiate-tree>\r\n\r\n","styles":[":host{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;display:block;max-width:100vw;max-height:300px;overflow-y:auto;position:relative;width:100%}:host .spinner{margin:0 auto 1em;height:222px;width:20%;text-align:center;padding:1em;display:inline-block;vertical-align:top;position:absolute;top:0;left:10%;z-index:2}:host svg path,:host svg rect{fill:#1c0696}"]}]}],"members":{"allowRevert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["allowRevert"]}]}],"allowAdvance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["allowAdvance"]}]}],"attributeOrderIsImportant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["attributeOrderIsImportant"]}]}],"onlyShowDifferences":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["onlyShowDifferences"]}]}],"leftSideObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3},"arguments":["leftSideObject"]}]}],"rightSideObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3},"arguments":["rightSideObject"]}]}],"leftSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["leftSideToolTip"]}]}],"rightSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3},"arguments":["rightSideToolTip"]}]}],"namedRootObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3},"arguments":["namedRootObject"]}]}],"onrevert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3},"arguments":["onrevert"]}]}],"onadvance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3},"arguments":["onadvance"]}]}],"ondifference":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":73,"character":3},"arguments":["ondifference"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"generateNodeId":[{"__symbolic":"method"}],"transformNodeToOriginalStructure":[{"__symbolic":"method"}],"transformNodeToInternalStruction":[{"__symbolic":"method"}],"itemInArray":[{"__symbolic":"method"}],"leftItemFromRightItem":[{"__symbolic":"method"}],"compare":[{"__symbolic":"method"}],"reIndex":[{"__symbolic":"method"}],"copyInto":[{"__symbolic":"method"}],"setChildrenStatus":[{"__symbolic":"method"}],"unify":[{"__symbolic":"method"}],"toInternalStruction":[{"__symbolic":"method"}],"filterUnchanged":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"categorizedName":[{"__symbolic":"method"}],"sideCategorizedName":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"fireCountDifference":[{"__symbolic":"method"}],"lookupChildOf":[{"__symbolic":"method"}],"performAdvanceToRight":[{"__symbolic":"method"}],"performAdvanceToLeft":[{"__symbolic":"method"}],"advance":[{"__symbolic":"method"}],"autoExpand":[{"__symbolic":"method"}],"onhover":[{"__symbolic":"method"}]}},"DifferentiateTree":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"differentiate-tree","template":"<div *ngIf=\"categorizeBy\" \r\n class=\"diff-heading\" \r\n (click)=\"expand($event)\">\r\n <span class=\"arrow\" *ngIf=\"collapsed\">►</span>\r\n <span class=\"arrow\" *ngIf=\"!collapsed\">▼</span>\r\n <span [textContent]=\"categorizeBy\"></span>\r\n <span class=\"counter\" [textContent]=\"changCounter()\"></span>\r\n</div>\r\n<ul [class]=\"side\" [class.child]=\"depth ===2 || (categorizeBy && categorizeBy.length)\" [class.collapsed]=\"categorizeBy && collapsed\">\r\n <li *ngFor=\"let child of children\" \r\n (mouseout)=\"depth === 2 ? mouseOvered($event, false, child.index) : null\"\r\n (mouseover)=\"depth === 2 ? mouseOvered($event, true, child.index) : null\"\r\n [class.hover]=\"child.hover\"\r\n [class.added]=\"child.status === 5\" \r\n [class.removed]=\"child.status === 6\" \r\n [class.type-changed]=\"child.status === 2\" \r\n [class.name-changed]=\"child.status === 3\" \r\n [class.value-changed]=\"child.status === 4\">\r\n <div class='tree-node' [ngClass]=\"'depth-' + depth\" [class.collapsed]=\"child.collapsed\" [id] = \"child.id\">\r\n <span [title]=\"rightSideToolTip\"\r\n class=\"do\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToRightSide(child)\"\r\n *ngIf=\"showLeftActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n <span *ngIf='child.name && child.name!=null'\r\n class='name' \r\n [innerHTML]=\"child.name.length ? child.name : ' '\">\r\n </span>\r\n <span *ngIf='child.value && child.value!=null'\r\n class='value' \r\n [class.string]=\"depth > 0 && child.value && child.value.length\"\r\n [innerHTML]=\"child.value ? child.value : ' '\">\r\n </span>\r\n <span [title]=\"leftSideToolTip\"\r\n class=\"undo\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToLeftSide(child)\"\r\n *ngIf=\"showRightActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n </div>\r\n <differentiate-tree *ngIf=\"child.children.length\" \r\n [level]=\"depth+1\" \r\n [status]=\"child.status\" \r\n [collapsed]=\"child.collapsed\"\r\n [categorizeBy]=\"child.categorizeBy\"\r\n [showLeftActionButton]=\"showLeftActionButton\" \r\n [leftSideToolTip]=\"leftSideToolTip\"\r\n [showRightActionButton]=\"showRightActionButton\" \r\n [rightSideToolTip]=\"rightSideToolTip\"\r\n [objectPath]=\"objectPath + (objectPath.length ? ',':'') + child.index\"\r\n (onhover)=\"bubleup($event)\"\r\n (onrevert)=\"advance($event)\"\r\n (onexpand)=\"autoExpand($event)\"\r\n [class.child-node]=\"child.parent != 4\" \r\n [children]='child.children'></differentiate-tree>\r\n <div *ngIf=\"child.status > 2\" class=\"upper\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n <div *ngIf=\"child.status > 2\" class=\"lower\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n </li>\r\n</ul>\r\n\r\n","styles":[":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{border-radius:50%;background-color:#ddd;cursor:pointer;color:#962323;font-size:1.2rem;height:18px;line-height:1.2rem;position:absolute;text-align:center;top:0;width:18px;z-index:2}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul.child{margin-top:2px!important}ul.child li{padding-top:2px;padding-bottom:2px}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"]}]}],"members":{"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3},"arguments":["collapsed"]}]}],"children":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3},"arguments":["children"]}]}],"showLeftActionButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3},"arguments":["showLeftActionButton"]}]}],"showRightActionButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["showRightActionButton"]}]}],"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["status"]}]}],"side":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["side"]}]}],"level":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["level"]}]}],"objectPath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3},"arguments":["objectPath"]}]}],"categorizeBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3},"arguments":["categorizeBy"]}]}],"leftSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["leftSideToolTip"]}]}],"rightSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3},"arguments":["rightSideToolTip"]}]}],"onhover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3},"arguments":["onhover"]}]}],"onrevert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":3},"arguments":["onrevert"]}]}],"onexpand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":3},"arguments":["onexpand"]}]}],"ngOnInit":[{"__symbolic":"method"}],"bubleup":[{"__symbolic":"method"}],"keyup":[{"__symbolic":"method"}],"changCounter":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"autoExpand":[{"__symbolic":"method"}],"advanceToRightSide":[{"__symbolic":"method"}],"advanceToLeftSide":[{"__symbolic":"method"}],"advance":[{"__symbolic":"method"}],"mouseOvered":[{"__symbolic":"method"}]}},"DifferentiateModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4}],"declarations":[{"__symbolic":"reference","name":"DifferentiateComponent"},{"__symbolic":"reference","name":"DifferentiateTree"}],"exports":[{"__symbolic":"reference","name":"DifferentiateComponent"}],"entryComponents":[],"providers":[],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":21,"character":12}]}]}],"members":{}}},"origins":{"DifferentiateComponent":"./src/app/differentiate/components/differentiate.component","DifferentiateTree":"./src/app/differentiate/components/differentiate-tree.component","DifferentiateModule":"./src/app/differentiate/differentiate.module"},"importAs":"differentiate"} | ||
| {"__symbolic":"module","version":4,"metadata":{"DifferentiateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"differentiate","template":"<div class=\"spinner\" *ngIf=\"!ready\">\r\n <svg \r\n version=\"1.1\" \r\n id=\"loader\" \r\n xmlns=\"http://www.w3.org/2000/svg\" \r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" \r\n x=\"0px\" \r\n y=\"0px\"\r\n width=\"40px\" \r\n height=\"40px\" \r\n viewBox=\"0 0 50 50\" \r\n style=\"enable-background:new 0 0 50 50;\" \r\n xml:space=\"preserve\">\r\n <path \r\n fill=\"#000\" \r\n d=\"M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z\">\r\n <animateTransform attributeType=\"xml\"\r\n attributeName=\"transform\"\r\n type=\"rotate\"\r\n from=\"0 25 25\"\r\n to=\"360 25 25\"\r\n dur=\"0.6s\"\r\n repeatCount=\"indefinite\"/>\r\n </path>\r\n </svg>\r\n</div>\r\n<differentiate-tree \r\n *ngIf=\"leftSide && rightSide\"\r\n class=\"root\" \r\n level=\"0\" \r\n side=\"left-side\" \r\n (onexpand)=\"autoExpand($event)\"\r\n (onhover)=\"onhover($event)\"\r\n (onrevert)=\"advance($event)\"\r\n [rightSideToolTip]=\"rightSideToolTip\"\r\n [showLeftActionButton]=\"allowAdvance\" \r\n [children]=\"leftSide\"></differentiate-tree>\r\n<differentiate-tree \r\n *ngIf=\"leftSide && rightSide\"\r\n class=\"root\" \r\n level=\"0\" \r\n side=\"right-side\" \r\n (onexpand)=\"autoExpand($event)\"\r\n (onhover)=\"onhover($event)\"\r\n (onrevert)=\"advance($event)\"\r\n [leftSideToolTip]=\"leftSideToolTip\"\r\n [showRightActionButton]=\"allowRevert\" \r\n [children]=\"rightSide\"></differentiate-tree>\r\n\r\n","styles":[":host{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;display:block;max-width:100vw;max-height:300px;overflow-y:auto;position:relative;width:100%}:host .spinner{margin:0 auto 1em;height:222px;width:20%;text-align:center;padding:1em;display:inline-block;vertical-align:top;position:absolute;top:0;left:10%;z-index:2}:host svg path,:host svg rect{fill:#1c0696}"]}]}],"members":{"allowRevert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["allowRevert"]}]}],"allowAdvance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["allowAdvance"]}]}],"attributeOrderIsImportant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["attributeOrderIsImportant"]}]}],"onlyShowDifferences":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["onlyShowDifferences"]}]}],"leftSideObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3},"arguments":["leftSideObject"]}]}],"rightSideObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3},"arguments":["rightSideObject"]}]}],"leftSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["leftSideToolTip"]}]}],"rightSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3},"arguments":["rightSideToolTip"]}]}],"namedRootObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3},"arguments":["namedRootObject"]}]}],"onrevert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3},"arguments":["onrevert"]}]}],"onadvance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3},"arguments":["onadvance"]}]}],"ondifference":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":73,"character":3},"arguments":["ondifference"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"generateNodeId":[{"__symbolic":"method"}],"transformNodeToOriginalStructure":[{"__symbolic":"method"}],"transformNodeToInternalStruction":[{"__symbolic":"method"}],"itemInArray":[{"__symbolic":"method"}],"leftItemFromRightItem":[{"__symbolic":"method"}],"compare":[{"__symbolic":"method"}],"reIndex":[{"__symbolic":"method"}],"copyInto":[{"__symbolic":"method"}],"setChildrenStatus":[{"__symbolic":"method"}],"unify":[{"__symbolic":"method"}],"toInternalStruction":[{"__symbolic":"method"}],"filterUnchanged":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"categorizedName":[{"__symbolic":"method"}],"sideCategorizedName":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"fireCountDifference":[{"__symbolic":"method"}],"lookupChildOf":[{"__symbolic":"method"}],"performAdvanceToRight":[{"__symbolic":"method"}],"performAdvanceToLeft":[{"__symbolic":"method"}],"advance":[{"__symbolic":"method"}],"autoExpand":[{"__symbolic":"method"}],"onhover":[{"__symbolic":"method"}]}},"DifferentiateTree":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"differentiate-tree","template":"<div *ngIf=\"categorizeBy\" \r\n class=\"diff-heading\" \r\n (click)=\"expand($event)\">\r\n <span class=\"arrow\" *ngIf=\"collapsed\">►</span>\r\n <span class=\"arrow\" *ngIf=\"!collapsed\">▼</span>\r\n <span [textContent]=\"categorizeBy\"></span>\r\n <span class=\"counter\" [textContent]=\"changCounter()\"></span>\r\n</div>\r\n<ul [class]=\"side\" [class.child]=\"depth ===2 || (categorizeBy && categorizeBy.length)\" [class.collapsed]=\"categorizeBy && collapsed\">\r\n <li *ngFor=\"let child of children\" \r\n (mouseout)=\"depth === 2 ? mouseOvered($event, false, child.index) : null\"\r\n (mouseover)=\"depth === 2 ? mouseOvered($event, true, child.index) : null\"\r\n [class.hover]=\"child.hover\"\r\n [class.added]=\"child.status === 5\" \r\n [class.removed]=\"child.status === 6\" \r\n [class.type-changed]=\"child.status === 2\" \r\n [class.name-changed]=\"child.status === 3\" \r\n [class.value-changed]=\"child.status === 4\">\r\n <div class='tree-node' [ngClass]=\"'depth-' + depth\" [class.collapsed]=\"child.collapsed\" [id] = \"child.id\">\r\n <span [title]=\"rightSideToolTip\"\r\n class=\"do\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToRightSide(child)\"\r\n *ngIf=\"showLeftActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n <span *ngIf='child.name && child.name!=null'\r\n class='name' \r\n [innerHTML]=\"child.name.length ? child.name : ' '\">\r\n </span>\r\n <span *ngIf='child.value && child.value!=null'\r\n class='value' \r\n [class.string]=\"depth > 0 && child.value && child.value.length\"\r\n [innerHTML]=\"child.value ? child.value : ' '\">\r\n </span>\r\n <span [title]=\"leftSideToolTip\"\r\n class=\"undo\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToLeftSide(child)\"\r\n *ngIf=\"showRightActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n </div>\r\n <differentiate-tree *ngIf=\"child.children.length\" \r\n [level]=\"depth+1\" \r\n [status]=\"child.status\" \r\n [collapsed]=\"child.collapsed\"\r\n [categorizeBy]=\"child.categorizeBy\"\r\n [showLeftActionButton]=\"showLeftActionButton\" \r\n [leftSideToolTip]=\"leftSideToolTip\"\r\n [showRightActionButton]=\"showRightActionButton\" \r\n [rightSideToolTip]=\"rightSideToolTip\"\r\n [objectPath]=\"objectPath + (objectPath.length ? ',':'') + child.index\"\r\n (onhover)=\"bubleup($event)\"\r\n (onrevert)=\"advance($event)\"\r\n (onexpand)=\"autoExpand($event)\"\r\n [class.child-node]=\"child.parent != 4\" \r\n [children]='child.children'></differentiate-tree>\r\n <div *ngIf=\"child.status > 2\" class=\"upper\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n <div *ngIf=\"child.status > 2\" class=\"lower\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n </li>\r\n</ul>\r\n\r\n","styles":[":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .hover .do,ul li .hover .undo{text-decoration:underline}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{cursor:pointer;color:#962323;position:absolute;text-align:center;top:0;width:18px;z-index:2;height:100%}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li .do,ul.left-side li .undo{border-right:1px solid #ddd}ul.left-side li .tree-node:before{position:absolute;top:0;left:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-right:1px solid #ddd;content:' ';display:block}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li .do,ul.right-side li .undo{border-left:1px solid #ddd}ul.right-side li .tree-node:after{position:absolute;top:0;right:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-left:1px solid #ddd;content:' ';display:block}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"]}]}],"members":{"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3},"arguments":["collapsed"]}]}],"children":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3},"arguments":["children"]}]}],"showLeftActionButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3},"arguments":["showLeftActionButton"]}]}],"showRightActionButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["showRightActionButton"]}]}],"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["status"]}]}],"side":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["side"]}]}],"level":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["level"]}]}],"objectPath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3},"arguments":["objectPath"]}]}],"categorizeBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3},"arguments":["categorizeBy"]}]}],"leftSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["leftSideToolTip"]}]}],"rightSideToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3},"arguments":["rightSideToolTip"]}]}],"onhover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3},"arguments":["onhover"]}]}],"onrevert":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":3},"arguments":["onrevert"]}]}],"onexpand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":3},"arguments":["onexpand"]}]}],"ngOnInit":[{"__symbolic":"method"}],"bubleup":[{"__symbolic":"method"}],"keyup":[{"__symbolic":"method"}],"changCounter":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"autoExpand":[{"__symbolic":"method"}],"advanceToRightSide":[{"__symbolic":"method"}],"advanceToLeftSide":[{"__symbolic":"method"}],"advance":[{"__symbolic":"method"}],"mouseOvered":[{"__symbolic":"method"}]}},"DifferentiateModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4}],"declarations":[{"__symbolic":"reference","name":"DifferentiateComponent"},{"__symbolic":"reference","name":"DifferentiateTree"}],"exports":[{"__symbolic":"reference","name":"DifferentiateComponent"}],"entryComponents":[],"providers":[],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":21,"character":12}]}]}],"members":{}}},"origins":{"DifferentiateComponent":"./src/app/differentiate/components/differentiate.component","DifferentiateTree":"./src/app/differentiate/components/differentiate-tree.component","DifferentiateModule":"./src/app/differentiate/differentiate.module"},"importAs":"differentiate"} |
@@ -120,3 +120,3 @@ /** | ||
| template: "<div *ngIf=\"categorizeBy\" \r\n class=\"diff-heading\" \r\n (click)=\"expand($event)\">\r\n <span class=\"arrow\" *ngIf=\"collapsed\">►</span>\r\n <span class=\"arrow\" *ngIf=\"!collapsed\">▼</span>\r\n <span [textContent]=\"categorizeBy\"></span>\r\n <span class=\"counter\" [textContent]=\"changCounter()\"></span>\r\n</div>\r\n<ul [class]=\"side\" [class.child]=\"depth ===2 || (categorizeBy && categorizeBy.length)\" [class.collapsed]=\"categorizeBy && collapsed\">\r\n <li *ngFor=\"let child of children\" \r\n (mouseout)=\"depth === 2 ? mouseOvered($event, false, child.index) : null\"\r\n (mouseover)=\"depth === 2 ? mouseOvered($event, true, child.index) : null\"\r\n [class.hover]=\"child.hover\"\r\n [class.added]=\"child.status === 5\" \r\n [class.removed]=\"child.status === 6\" \r\n [class.type-changed]=\"child.status === 2\" \r\n [class.name-changed]=\"child.status === 3\" \r\n [class.value-changed]=\"child.status === 4\">\r\n <div class='tree-node' [ngClass]=\"'depth-' + depth\" [class.collapsed]=\"child.collapsed\" [id] = \"child.id\">\r\n <span [title]=\"rightSideToolTip\"\r\n class=\"do\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToRightSide(child)\"\r\n *ngIf=\"showLeftActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n <span *ngIf='child.name && child.name!=null'\r\n class='name' \r\n [innerHTML]=\"child.name.length ? child.name : ' '\">\r\n </span>\r\n <span *ngIf='child.value && child.value!=null'\r\n class='value' \r\n [class.string]=\"depth > 0 && child.value && child.value.length\"\r\n [innerHTML]=\"child.value ? child.value : ' '\">\r\n </span>\r\n <span [title]=\"leftSideToolTip\"\r\n class=\"undo\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToLeftSide(child)\"\r\n *ngIf=\"showRightActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n </div>\r\n <differentiate-tree *ngIf=\"child.children.length\" \r\n [level]=\"depth+1\" \r\n [status]=\"child.status\" \r\n [collapsed]=\"child.collapsed\"\r\n [categorizeBy]=\"child.categorizeBy\"\r\n [showLeftActionButton]=\"showLeftActionButton\" \r\n [leftSideToolTip]=\"leftSideToolTip\"\r\n [showRightActionButton]=\"showRightActionButton\" \r\n [rightSideToolTip]=\"rightSideToolTip\"\r\n [objectPath]=\"objectPath + (objectPath.length ? ',':'') + child.index\"\r\n (onhover)=\"bubleup($event)\"\r\n (onrevert)=\"advance($event)\"\r\n (onexpand)=\"autoExpand($event)\"\r\n [class.child-node]=\"child.parent != 4\" \r\n [children]='child.children'></differentiate-tree>\r\n <div *ngIf=\"child.status > 2\" class=\"upper\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n <div *ngIf=\"child.status > 2\" class=\"lower\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n </li>\r\n</ul>\r\n\r\n", | ||
| styles: [":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{border-radius:50%;background-color:#ddd;cursor:pointer;color:#962323;font-size:1.2rem;height:18px;line-height:1.2rem;position:absolute;text-align:center;top:0;width:18px;z-index:2}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul.child{margin-top:2px!important}ul.child li{padding-top:2px;padding-bottom:2px}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"] | ||
| styles: [":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .hover .do,ul li .hover .undo{text-decoration:underline}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{cursor:pointer;color:#962323;position:absolute;text-align:center;top:0;width:18px;z-index:2;height:100%}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li .do,ul.left-side li .undo{border-right:1px solid #ddd}ul.left-side li .tree-node:before{position:absolute;top:0;left:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-right:1px solid #ddd;content:' ';display:block}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li .do,ul.right-side li .undo{border-left:1px solid #ddd}ul.right-side li .tree-node:after{position:absolute;top:0;right:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-left:1px solid #ddd;content:' ';display:block}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"] | ||
| }] } | ||
@@ -123,0 +123,0 @@ ]; |
@@ -159,3 +159,3 @@ /** | ||
| template: "<div *ngIf=\"categorizeBy\" \r\n class=\"diff-heading\" \r\n (click)=\"expand($event)\">\r\n <span class=\"arrow\" *ngIf=\"collapsed\">►</span>\r\n <span class=\"arrow\" *ngIf=\"!collapsed\">▼</span>\r\n <span [textContent]=\"categorizeBy\"></span>\r\n <span class=\"counter\" [textContent]=\"changCounter()\"></span>\r\n</div>\r\n<ul [class]=\"side\" [class.child]=\"depth ===2 || (categorizeBy && categorizeBy.length)\" [class.collapsed]=\"categorizeBy && collapsed\">\r\n <li *ngFor=\"let child of children\" \r\n (mouseout)=\"depth === 2 ? mouseOvered($event, false, child.index) : null\"\r\n (mouseover)=\"depth === 2 ? mouseOvered($event, true, child.index) : null\"\r\n [class.hover]=\"child.hover\"\r\n [class.added]=\"child.status === 5\" \r\n [class.removed]=\"child.status === 6\" \r\n [class.type-changed]=\"child.status === 2\" \r\n [class.name-changed]=\"child.status === 3\" \r\n [class.value-changed]=\"child.status === 4\">\r\n <div class='tree-node' [ngClass]=\"'depth-' + depth\" [class.collapsed]=\"child.collapsed\" [id] = \"child.id\">\r\n <span [title]=\"rightSideToolTip\"\r\n class=\"do\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToRightSide(child)\"\r\n *ngIf=\"showLeftActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n <span *ngIf='child.name && child.name!=null'\r\n class='name' \r\n [innerHTML]=\"child.name.length ? child.name : ' '\">\r\n </span>\r\n <span *ngIf='child.value && child.value!=null'\r\n class='value' \r\n [class.string]=\"depth > 0 && child.value && child.value.length\"\r\n [innerHTML]=\"child.value ? child.value : ' '\">\r\n </span>\r\n <span [title]=\"leftSideToolTip\"\r\n class=\"undo\" \r\n tabindex=\"0\"\r\n aria-hidden=\"true\"\r\n (keyup)=\"keyup($event)\"\r\n (click)=\"advanceToLeftSide(child)\"\r\n *ngIf=\"showRightActionButton && status !== child.status && child.status > 1\">⎌</span>\r\n </div>\r\n <differentiate-tree *ngIf=\"child.children.length\" \r\n [level]=\"depth+1\" \r\n [status]=\"child.status\" \r\n [collapsed]=\"child.collapsed\"\r\n [categorizeBy]=\"child.categorizeBy\"\r\n [showLeftActionButton]=\"showLeftActionButton\" \r\n [leftSideToolTip]=\"leftSideToolTip\"\r\n [showRightActionButton]=\"showRightActionButton\" \r\n [rightSideToolTip]=\"rightSideToolTip\"\r\n [objectPath]=\"objectPath + (objectPath.length ? ',':'') + child.index\"\r\n (onhover)=\"bubleup($event)\"\r\n (onrevert)=\"advance($event)\"\r\n (onexpand)=\"autoExpand($event)\"\r\n [class.child-node]=\"child.parent != 4\" \r\n [children]='child.children'></differentiate-tree>\r\n <div *ngIf=\"child.status > 2\" class=\"upper\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n <div *ngIf=\"child.status > 2\" class=\"lower\" [class.collapsed]=\"child.collapsed\" [ngClass]=\"'depth-' + depth\" ></div>\r\n </li>\r\n</ul>\r\n\r\n", | ||
| styles: [":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{border-radius:50%;background-color:#ddd;cursor:pointer;color:#962323;font-size:1.2rem;height:18px;line-height:1.2rem;position:absolute;text-align:center;top:0;width:18px;z-index:2}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul.child{margin-top:2px!important}ul.child li{padding-top:2px;padding-bottom:2px}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"] | ||
| styles: [":host{box-sizing:border-box;width:100%}:host.root{float:left;width:50%}:host.child-node{float:left}.diff-heading{padding:5px;font-weight:700;background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.1);color:#666;cursor:pointer}.diff-heading .arrow{color:#999;font-size:.6rem;font-weight:700}.diff-heading .counter{float:right;border-radius:50%;width:16px;text-align:center;background-color:rgba(0,0,0,.4);font-size:.8rem;color:#fff}.diff-heading:first-child{border-top:1px solid rgba(0,0,0,.1)}ul{box-sizing:border-box;list-style:none;padding:0;width:100%}ul .collapsed,ul.collapsed{display:none!important}ul li .hover{background-color:rgba(0,0,0,.1)}ul li .hover .do,ul li .hover .undo{text-decoration:underline}ul li .tree-node{position:relative}ul li .tree-node.depth-0{display:none}ul li .tree-node .do,ul li .tree-node .undo{cursor:pointer;color:#962323;position:absolute;text-align:center;top:0;width:18px;z-index:2;height:100%}ul li .tree-node .undo{right:0}ul li .tree-node .do{left:0}ul.undefined li:hover{background-color:rgba(0,0,0,.1)}ul.left-side{border-right:1px solid rgba(0,0,0,.1);margin:0}ul.left-side li{position:relative;display:table;width:100%}ul.left-side li .do,ul.left-side li .undo{border-right:1px solid #ddd}ul.left-side li .tree-node:before{position:absolute;top:0;left:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-right:1px solid #ddd;content:' ';display:block}ul.left-side li.added .name,ul.left-side li.added .value{opacity:.2;font-style:italic}ul.left-side li.added .upper{border-radius:0 0 100%;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;top:0;right:0}ul.left-side li.added .upper.depth-1{border:2px solid #245024;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-2{border:2px dotted #378637;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-3{border:1px solid #48ad48;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-4{border:1px dotted #57d657;border-top-width:0;border-left-width:0}ul.left-side li.added .upper.depth-5{border:1px dashed #67fa67;border-top-width:0;border-left-width:0}ul.left-side li.added .lower{border-radius:0 100% 0 0;box-sizing:border-box;height:50%;position:absolute;pointer-events:none;width:50%;bottom:0;right:0}ul.left-side li.added .lower.depth-1{border:2px solid #245024;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-2{border:2px dotted #378637;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-3{border:1px solid #48ad48;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-4{border:1px dotted #57d657;border-bottom-width:0;border-left-width:0}ul.left-side li.added .lower.depth-5{border:1px dashed #67fa67;border-bottom-width:0;border-left-width:0}ul.left-side li.removed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.removed .upper:after{content:' - ';color:#962323;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.removed .lower{display:none}ul.left-side li.removed .tree-node span,ul.left-side li.type-changed .tree-node span{color:#962323}ul.left-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;width:66px;top:0;right:0;pointer-events:none}ul.left-side li.name-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.name-changed .tree-node .name{color:#000060}ul.left-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:66px;top:0;right:0}ul.left-side li.value-changed .upper:after{content:' ~ ';color:#000060;font-weight:700;float:right;padding-right:10px;font-size:1.2rem;line-height:1.2rem}ul.left-side li.value-changed .tree-node .value{color:#000060}ul.right-side{border-left:1px solid rgba(0,0,0,.1);margin:0}ul.right-side li{position:relative;display:table;width:100%}ul.right-side li .do,ul.right-side li .undo{border-left:1px solid #ddd}ul.right-side li .tree-node:after{position:absolute;top:0;right:0;width:18px;z-index:1;background:rgba(0,0,0,.02);height:100%;border-left:1px solid #ddd;content:' ';display:block}ul.right-side li.added .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;width:90%;top:0;left:0}ul.right-side li.added .upper:after{content:'+';color:#4a4;font-weight:700;padding-left:5px;font-size:1.2rem;line-height:1.2rem}ul.right-side li.added .lower{display:none}ul.right-side li.added .tree-node span{color:#4a4}ul.right-side li.removed .name,ul.right-side li.removed .value{-webkit-text-decoration-line:line-through;text-decoration-line:line-through;-webkit-text-decoration-color:#962323;text-decoration-color:#962323}ul.right-side li.removed .upper{border-radius:0 0 0 100%;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;top:0}ul.right-side li.removed .upper.depth-1{border:2px solid #600000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-2{border:2px dotted maroon;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-3{border:1px solid #a00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-4{border:1px dotted #c00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .upper.depth-5{border:1px dashed #f00000;border-top-width:0;border-right-width:0}ul.right-side li.removed .lower{border-radius:100% 0 0;box-sizing:border-box;height:50%;width:10%;position:absolute;pointer-events:none;bottom:0}ul.right-side li.removed .lower.depth-1{border:2px solid #600000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-2{border:2px dotted maroon;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-3{border:1px solid #a00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-4{border:1px dotted #c00000;border-bottom-width:0;border-right-width:0}ul.right-side li.removed .lower.depth-5{border:1px dashed #f00000;border-bottom-width:0;border-right-width:0}ul.right-side li.type-changed .tree-node span{color:#962323}ul.right-side li.name-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.name-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.name-changed .tree-node .name{color:#000060}ul.right-side li.value-changed .upper{box-sizing:border-box;height:100%;position:absolute;pointer-events:none;top:0;left:0}ul.right-side li.value-changed .upper:before{content:' ~ ';color:#000060;font-weight:700;float:right;padding-left:5px;font-size:20px;line-height:16px}ul.right-side li.value-changed .tree-node .value{color:#000060}ul .tree-node{box-sizing:border-box;color:#7c9eb2;display:table;padding:0;position:relative;margin:0;width:100%}ul .tree-node.depth-0{padding-left:5px}ul .tree-node.depth-1{padding-left:20px}ul .tree-node.depth-2{padding-left:40px}ul .tree-node.depth-3{padding-left:60px}ul .tree-node.depth-4{padding-left:80px}ul .tree-node.depth-5{padding-left:100px}ul .tree-node.depth-6{padding-left:120px}ul .tree-node.depth-7{padding-left:140px}ul .tree-node.depth-8{padding-left:160px}ul .tree-node.depth-9{padding-left:180px}ul .tree-node.depth-10{padding-left:200px}ul .tree-node .name{color:#444;font-weight:700}ul .tree-node .name:after{content:':'}ul .tree-node .value.string:after,ul .tree-node .value.string:before{content:'\"'}"] | ||
| }] } | ||
@@ -162,0 +162,0 @@ ]; |
| { | ||
| "name": "differentiate", | ||
| "version": "2.3.1", | ||
| "version": "2.3.2", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "private": false, |
@@ -39,2 +39,5 @@ # Welcome to Differentiate Objects! | ||
| # Version 2.3.2 | ||
| Better looking merger buttons on left/right side of JSON objects. | ||
| # Version 2.3.1 | ||
@@ -41,0 +44,0 @@ Fixed issue #2. Modified code to avoid upper-case call on blank string. |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.3%
1128711
- Lines of code
- increased by0.2%
6134
- Number of lines in readme file
- increased by1.8%
170
No dependency changes