@stratusjs/angular 0.9.2 → 0.10.0

package/src/tree/tree.component.min.js

@@ -1 +1 @@
-System.register(["@angular/core","@angular/cdk/drag-drop","@angular/cdk/tree","@angular/platform-browser","@angular/material/icon","rxjs","@stratusjs/runtime/stratus","lodash","@agentepsilon/decko","../core/root.component","../backend.service","@stratusjs/angularjs/services/registry","@stratusjs/core/events/eventManager","@stratusjs/core/environment","@stratusjs/core/misc","@angular/common"],function(e,t){"use strict";var i,s,r,o,n,a,d,c,l,h,p,u,g,f,m,y,D,v,b,S,I=this&&this.__decorate||function(e,t,i,s){var r,o=arguments.length,n=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n},M=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},$=this&&this.__param||function(e,t){return function(i,s){t(i,s,e)}};t&&t.id;return{setters:[function(e){i=e},function(e){s=e},function(e){r=e},function(e){o=e},function(e){n=e},function(e){a=e},function(e){d=e},function(e){c=e},function(e){l=e},function(e){h=e},function(e){p=e},function(e){u=e},function(e){g=e},function(e){f=e},function(e){m=e},function(e){y=e}],execute:function(){"@stratusjs/angular",D="tree",v=f.cookie("env")?"":".min",b=`${d.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^/]*$/,"").replace(/\/dist\/$/,"/src/")}`,S=class extends h.RootComponent{constructor(e,t,i,s,o,n){super(),this.iconRegistry=e,this.sanitizer=t,this.backend=i,this.ref=s,this.elementRef=o,this.document=n,this.title=D+"_component",this.isInitialized=!1,this.isDestroyed=!1,this.isStyled=!1,this._=c.default,this.Stratus=d.Stratus,this.registry=new u.Registry,this.onChange=new a.Subject,this.unsettled=!1,this.svgIcons={},this.dblClickWait=500,this.dropLists=[],this.dropListIdMap={},this.dropListMap={},this.expandedNodeSet=new Set,this.dragging=!1,this.expandDelay=1e3,this.dropData=null,this.cdkDropListSortingDisabled=!0,this.treeControl=new r.NestedTreeControl(e=>e.children||[]),this.isBorder=!1,this.isDebug=!1}ngOnInit(){this.uid=c.default.uniqueId(`sa_${c.default.snakeCase(D)}_component_`),d.Stratus.Instances[this.uid]=this,this.hydrate(this.elementRef,this.sanitizer,["title","uid","isInitialized","isDestroyed","isStyled","target","targetSuffix","id","manifest","decouple","direct","api","urlRoot","type","property","_","Stratus","registry","fetched","data","collection","model","dataSub","onChange","subscriber","unsettled","svgIcons","isSingleClick","dblClickWait","dropLists","dropListIdMap","dropListMap","expandedNodeSet","dragging","expandTimeout","expandDelay","dropData","cdkDropListSortingDisabled","tree","treeMap","metaMap","dataSource","treeControl","isBorder","isDebug","iconRegistry","sanitizer","backend","ref","elementRef","document","ngOnInit","ngOnDestroy","refresh","remove","removeNode","nodeIsEqual","fetchData","dataDefer","dataRef","trackDropLists","setExpanded","setExpandedClick","setExpandedDblClick","onDragDrop","onDragMove","showDragData","clearDragData","buildNodePatch","getSvg","addSvgIcon","hydrate","disableRefresh","stagger","reloading"]),d.Stratus.Internals.CssLoader(`${b}/${D}/${D}.component${v}.css`).then(()=>{this.isStyled=!0,this.refresh()}).catch(e=>{console.warn("Issue detected in CSS Loader for Component:",this),console.error(e),this.isStyled=!0,this.refresh()}),c.default.forEach({tree_check:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/check.svg`,tree_add:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/add.svg`,tree_delete:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/delete.svg`,tree_edit:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/edit.svg`,tree_visibility:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/visibility.svg`},(e,t)=>this.iconRegistry.addSvgIcon(t,this.sanitizer.bypassSecurityTrustResourceUrl(e)).getNamedSvgIcon(t)),this.fetchData().then(e=>{if(!(e&&e instanceof g.EventManager))return void console.warn("Unable to bind data from Registry!");const t=()=>{!this.unsettled&&e.completed&&(this.dataDefer(this.subscriber),this.refresh())};e.on("change",t),t(),e.on("add",(e,t)=>{let i=!1;const s=()=>{if(!t.completed)return;if(i)return;if(i=!0,!(t.getIdentifier()in this.treeMap))return void t.meta.set("postPersist",!0);const e=this.treeMap[t.getIdentifier()];e.meta.component&&"openDialog"in e.meta.component?e.meta.component.openDialog():t.meta.set("postPersist",!0)};t.on("change",s),s()})}),this.dataSub=new a.Observable(e=>this.dataDefer(e)),this.dropListIdMap[`${this.uid}_parent_drop_list`]=!0,this.trackDropLists();const e=f.cookie("tree-node-border");e&&m.isJSON(e)&&(this.isBorder=JSON.parse(e));const t=f.cookie("tree-debug");t&&m.isJSON(t)&&(this.isDebug=JSON.parse(t)),this.isInitialized=!0,this.refresh()}ngOnDestroy(){this.isDestroyed=!0}refresh(){return this.isDestroyed?new Promise(e=>e()):(c.default.forEach(this.metaMap,e=>{e.component&&"refresh"in e.component&&e.component.refresh()}),super.refresh())}remove(e){}removeNode(e,t){const i=e.indexOf(t);return-1!==i&&(e.splice(i,1),!0)}nodeIsEqual(e,t){return e&&t?e.id===t.id:e===t}async fetchData(){return this.fetched?this.fetched:this.fetched=this.registry.fetch(d.Stratus.Select(this.elementRef.nativeElement),this)}dataDefer(e){if(this.subscriber=this.subscriber||e,!this.subscriber||!this.collection||!this.collection.completed)return void setTimeout(()=>{this.dataDefer(e)},500);const t=this.dataRef(!0);t&&t.length?e.next(t):setTimeout(()=>this.dataDefer(e),200)}dataRef(e=!1){if(!this.collection)return[];if(!e&&this.tree&&this.tree.length>0)return this.tree;let t=this.collection.models;return t&&c.default.isArray(t)&&t.length?(t=c.default.sortBy(t,["data.priority"]),this.metaMap=this.metaMap||{},this.treeMap={},this.tree=[],c.default.forEach(t,e=>{const t=c.default.get(e,"data.id"),i=c.default.get(e,"data.nestParent.id");this.dropListIdMap[`${this.uid}_node_${t}_drop_list`]=!0,c.default.has(this.metaMap,t)||(this.metaMap[t]={id:t,expanded:!0}),c.default.has(this.treeMap,t)||(this.treeMap[t]={id:t,model:e,children:[],meta:this.metaMap[t]}),this.treeMap[t].model=e,this.treeMap[t].meta=this.metaMap[t],i?(c.default.has(this.treeMap,i)||(this.treeMap[i]={id:i,model:null,children:[],meta:null}),this.treeMap[i].children.push(this.treeMap[t])):this.tree.push(this.treeMap[t])}),this.trackDropLists(),this.tree):[]}trackDropLists(){this.dropLists=[],c.default.forEach(this.dropListIdMap,(e,t)=>{if(!e)return;const i=t in this.dropListMap,s=i?this.dropListMap[t]:document.getElementById(t);s&&(this.dropLists.push(t),i||(this.dropListMap[t]=s))})}setExpanded(e){this.metaMap&&c.default.size(this.metaMap)&&(c.default.forEach(this.metaMap,t=>{t.expanded=e}),this.refresh())}setExpandedClick(e){this.isSingleClick=!0,setTimeout(()=>{this.isSingleClick&&this.setExpanded(e)},this.dblClickWait)}setExpandedDblClick(e){this.isSingleClick=!1,this.setExpanded(e)}async onDragDrop(e){if(!e.isPointerOverContainer)return;const t=e.item.data;if(!t)return;let i=e.container.data;const r=e.previousContainer.data,o=i?i.children:this.dataRef();if(!o)return;this.unsettled=!0;const n=this.dropData.targetId&&this.dropData.targetId in this.treeMap?this.treeMap[c.default.toNumber(this.dropData.targetId)]:null;if(f.cookie("env")&&this.isDebug&&(console.group("onDragDrop()"),c.default.forEach([`model drop: ${t.model.get("name")}`,`list shift: ${e.container.element.nativeElement.id} -> ${e.previousContainer.element.nativeElement.id}`,`index change (event): ${e.previousIndex} -> ${e.currentIndex}`,`current priority: ${t.model.get("priority")}`,`target drop action: ${this.dropData.action}`],e=>console.log(e))),n&&!this.nodeIsEqual(i,n)){if(f.cookie("env")&&this.isDebug&&(console.log(`target drop node differs: ${n.id} -> ${n.model.get("name")}`),console.log("target drop node is the same as target node:",t.id===n.id)),t.id!==n.id)switch(this.dropData.action){case"before":case"after":const e=n.model.get("nestParent.id");i=e&&e in this.treeMap?this.treeMap[e]:null;break;case"inside":i=n}f.cookie("env")&&this.isDebug&&console.log("target drop node selected:",i?`${i.id} -> ${i.model.get("name")}`:"none")}if(!this.nodeIsEqual(i,r)){if(i){switch(this.dropData.action){case"before":case"after":let e=i.children.findIndex(e=>e.id===t.id);"after"===this.dropData.action&&e++,i.children.splice(e,0,t);break;case"inside":i.children.push(t)}i.meta.expanded=!0}r&&this.removeNode(r.children,t),t.model.set("nestParent",this.buildNodePatch(i)),f.cookie("env")&&this.isDebug&&console.log(`new parent: ${t.model.get("nestParent.name")||null}`)}const a=i?i.children:o;let d=e.currentIndex;if(this.cdkDropListSortingDisabled)switch(d=null,this.dropData.action){case"before":case"after":d=a.findIndex(e=>e.id===n.id),"after"===this.dropData.action&&d++,f.cookie("env")&&this.isDebug&&console.log("index change (drop node):",`${e.previousIndex} -> ${d}`)}if(c.default.isNumber(d)){s.moveItemInArray(a,e.previousIndex,d);let i=0;c.default.forEach(a,e=>{e.model&&e.model.set&&e.model.set("priority",i++)}),f.cookie("env")&&this.isDebug&&console.log("new priority:",t.model.get("priority"))}f.cookie("env")&&this.isDebug&&console.groupEnd(),await t.model.save(),this.unsettled=!1,this.collection.throttleTrigger("change")}onDragMove(e){const t=this.document.elementFromPoint(e.pointerPosition.x,e.pointerPosition.y);if(!t)return void this.clearDragData();const i="tree-node-content",s=t.classList.contains(i)?t:t.closest(`.${i}`);if(!s)return void this.clearDragData();this.dropData={targetId:s.getAttribute("data-id")};const r=s.getBoundingClientRect(),o=r.height/3;e.pointerPosition.y-r.top<o?this.dropData.action="before":e.pointerPosition.y-r.top>2*o?this.dropData.action="after":this.dropData.action="inside",this.showDragData()}showDragData(){this.clearDragData(),this.dropData&&this.document.getElementById(`node-${this.dropData.targetId}`).classList.add(`drop-${this.dropData.action}`)}clearDragData(e=!1){e&&(this.dropData=null),this.document.querySelectorAll(".drop-before").forEach(e=>e.classList.remove("drop-before")),this.document.querySelectorAll(".drop-after").forEach(e=>e.classList.remove("drop-after")),this.document.querySelectorAll(".drop-inside").forEach(e=>e.classList.remove("drop-inside"))}buildNodePatch(e=null){if(!e||!e.model)return null;const t={};return c.default.forEach(["id","name"],i=>{const s=e.model.get(i);s&&c.default.set(t,i,s)}),t}getSvg(e,t){const i=this.addSvgIcon(e,t);return new a.Observable(t=>{this.iconRegistry.getNamedSvgIcon(i).subscribe({error(t){console.error(`getSvg(${e}): ${t}`)},complete(){t.next(i)}})})}addSvgIcon(e,t){if(e in this.svgIcons)return this.svgIcons[e];t||(t={});const i=this.svgIcons[e]=c.default.uniqueId("selector_svg");return this.iconRegistry.addSvgIcon(i,this.sanitizer.bypassSecurityTrustResourceUrl(e),t),i}},I([i.Input(),M("design:type",String)],S.prototype,"target",void 0),I([i.Input(),M("design:type",String)],S.prototype,"targetSuffix",void 0),I([i.Input(),M("design:type",Number)],S.prototype,"id",void 0),I([i.Input(),M("design:type",Boolean)],S.prototype,"manifest",void 0),I([i.Input(),M("design:type",Boolean)],S.prototype,"decouple",void 0),I([i.Input(),M("design:type",Boolean)],S.prototype,"direct",void 0),I([i.Input(),M("design:type",Object)],S.prototype,"api",void 0),I([i.Input(),M("design:type",String)],S.prototype,"urlRoot",void 0),I([i.Input(),M("design:type",String)],S.prototype,"type",void 0),I([i.Input(),M("design:type",String)],S.prototype,"property",void 0),I([l.debounce(50),M("design:type",Function),M("design:paramtypes",[Object]),M("design:returntype",void 0)],S.prototype,"onDragMove",null),S=I([i.Component({selector:`sa-${D}`,templateUrl:`${b}/${D}/${D}.component${v}.html`}),$(5,i.Inject(y.DOCUMENT)),M("design:paramtypes",[n.MatIconRegistry,o.DomSanitizer,p.BackendService,i.ChangeDetectorRef,i.ElementRef,Document])],S),e("TreeComponent",S)}}});
+System.register(["@angular/core","@angular/cdk/drag-drop","@angular/cdk/tree","@angular/platform-browser","@angular/material/icon","rxjs","@stratusjs/runtime/stratus","lodash","@agentepsilon/decko","../core/root.component","../backend.service","@stratusjs/angularjs/services/registry","@stratusjs/core/events/eventManager","@stratusjs/core/environment","@stratusjs/core/misc","@angular/common"],function(e,t){"use strict";var i,s,r,o,n,a,d,c,h,l,p,u,g,f,m,y,D,v,b,S,I=this&&this.__decorate||function(e,t,i,s){var r,o=arguments.length,n=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n},M=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},$=this&&this.__param||function(e,t){return function(i,s){t(i,s,e)}};t&&t.id;return{setters:[function(e){i=e},function(e){s=e},function(e){r=e},function(e){o=e},function(e){n=e},function(e){a=e},function(e){d=e},function(e){c=e},function(e){h=e},function(e){l=e},function(e){p=e},function(e){u=e},function(e){g=e},function(e){f=e},function(e){m=e},function(e){y=e}],execute:function(){"@stratusjs/angular",D="tree",v=f.cookie("env")?"":".min",b=`${d.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^/]*$/,"").replace(/\/dist\/$/,"/src/")}`,S=class extends l.RootComponent{constructor(e,t,i,s,o,n){super(),this.iconRegistry=e,this.sanitizer=t,this.backend=i,this.ref=s,this.elementRef=o,this.document=n,this.title=D+"_component",this.isInitialized=!1,this.isDestroyed=!1,this.isStyled=!1,this.Stratus=d.Stratus,this.registry=new u.Registry,this.onChange=new a.Subject,this.unsettled=!1,this.svgIcons={},this.dblClickWait=500,this.dropLists=[],this.dropListIdMap={},this.dropListMap={},this.expandedNodeSet=new Set,this.dragging=!1,this.expandDelay=1e3,this.dropData=null,this.cdkDropListSortingDisabled=!0,this.treeControl=new r.NestedTreeControl(e=>e.children||[]),this.isBorder=!1,this.isDebug=!1}ngOnInit(){this.uid=c.uniqueId(`sa_${c.snakeCase(D)}_component_`),d.Stratus.Instances[this.uid]=this,this.hydrate(this.elementRef,this.sanitizer,["title","uid","isInitialized","isDestroyed","isStyled","target","targetSuffix","id","manifest","decouple","direct","api","urlRoot","type","property","Stratus","registry","fetched","data","collection","model","dataSub","onChange","subscriber","unsettled","svgIcons","isSingleClick","dblClickWait","dropLists","dropListIdMap","dropListMap","expandedNodeSet","dragging","expandTimeout","expandDelay","dropData","cdkDropListSortingDisabled","tree","treeMap","metaMap","dataSource","treeControl","isBorder","isDebug","iconRegistry","sanitizer","backend","ref","elementRef","document","ngOnInit","ngOnDestroy","refresh","remove","removeNode","nodeIsEqual","fetchData","dataDefer","dataRef","trackDropLists","setExpanded","setExpandedClick","setExpandedDblClick","onDragDrop","onDragMove","showDragData","clearDragData","buildNodePatch","getSvg","addSvgIcon","hydrate","disableRefresh","stagger","reloading"]),d.Stratus.Internals.CssLoader(`${b}/${D}/${D}.component${v}.css`).then(()=>{this.isStyled=!0,this.refresh().then()}).catch(e=>{console.warn("Issue detected in CSS Loader for Component:",this),console.error(e),this.isStyled=!0,this.refresh().then()}),c.forEach({tree_check:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/check.svg`,tree_add:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/add.svg`,tree_delete:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/delete.svg`,tree_edit:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/edit.svg`,tree_visibility:`${d.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/visibility.svg`},(e,t)=>this.iconRegistry.addSvgIcon(t,this.sanitizer.bypassSecurityTrustResourceUrl(e)).getNamedSvgIcon(t)),this.fetchData().then(e=>{if(!(e&&e instanceof g.EventManager))return void console.warn("Unable to bind data from Registry!");const t=()=>{!this.unsettled&&e.completed&&(this.dataDefer(this.subscriber),this.refresh().then())};e.on("change",t),t(),e.on("add",(e,t)=>{let i=!1;const s=()=>{if(!t.completed)return;if(i)return;if(i=!0,!(t.getIdentifier()in this.treeMap))return void t.meta.set("postPersist",!0);const e=this.treeMap[t.getIdentifier()];e.meta.component&&"openDialog"in e.meta.component?e.meta.component.openDialog():t.meta.set("postPersist",!0)};t.on("change",s),s()})}),this.dataSub=new a.Observable(e=>this.dataDefer(e)),this.dropListIdMap[`${this.uid}_parent_drop_list`]=!0,this.trackDropLists();const e=f.cookie("tree-node-border");e&&m.isJSON(e)&&(this.isBorder=JSON.parse(e));const t=f.cookie("tree-debug");t&&m.isJSON(t)&&(this.isDebug=JSON.parse(t)),this.isInitialized=!0,this.refresh().then()}ngOnDestroy(){this.isDestroyed=!0}refresh(){return this.isDestroyed?new Promise(e=>e()):(c.forEach(this.metaMap,e=>{e.component&&"refresh"in e.component&&e.component.refresh()}),super.refresh())}remove(e){}removeNode(e,t){const i=e.indexOf(t);return-1!==i&&(e.splice(i,1),!0)}nodeIsEqual(e,t){return e&&t?e.id===t.id:e===t}async fetchData(){return this.fetched?this.fetched:this.fetched=this.registry.fetch(d.Stratus.Select(this.elementRef.nativeElement),this)}dataDefer(e){if(this.subscriber=this.subscriber||e,!this.subscriber||!this.collection||!this.collection.completed)return void setTimeout(()=>{this.dataDefer(e)},500);const t=this.dataRef(!0);t&&t.length?e.next(t):setTimeout(()=>this.dataDefer(e),200)}dataRef(e=!1){if(!this.collection)return[];if(!e&&this.tree&&this.tree.length>0)return this.tree;let t=this.collection.models;return t&&c.isArray(t)&&t.length?(t=c.sortBy(t,["data.priority"]),this.metaMap=this.metaMap||{},this.treeMap={},this.tree=[],c.forEach(t,e=>{const t=c.get(e,"data.id"),i=c.get(e,"data.nestParent.id");this.dropListIdMap[`${this.uid}_node_${t}_drop_list`]=!0,c.has(this.metaMap,t)||(this.metaMap[t]={id:t,expanded:!0}),c.has(this.treeMap,t)||(this.treeMap[t]={id:t,model:e,children:[],meta:this.metaMap[t]}),this.treeMap[t].model=e,this.treeMap[t].meta=this.metaMap[t],i?(c.has(this.treeMap,i)||(this.treeMap[i]={id:i,model:null,children:[],meta:null}),this.treeMap[i].children.push(this.treeMap[t])):this.tree.push(this.treeMap[t])}),this.trackDropLists(),this.tree):[]}trackDropLists(){this.dropLists=[],c.forEach(this.dropListIdMap,(e,t)=>{if(!e)return;const i=t in this.dropListMap,s=i?this.dropListMap[t]:document.getElementById(t);s&&(this.dropLists.push(t),i||(this.dropListMap[t]=s))})}setExpanded(e){this.metaMap&&c.size(this.metaMap)&&(c.forEach(this.metaMap,t=>{t.expanded=e}),this.refresh().then())}setExpandedClick(e){this.isSingleClick=!0,setTimeout(()=>{this.isSingleClick&&this.setExpanded(e)},this.dblClickWait)}setExpandedDblClick(e){this.isSingleClick=!1,this.setExpanded(e)}async onDragDrop(e){if(!e.isPointerOverContainer)return;const t=e.item.data;if(!t)return;let i=e.container.data;const r=e.previousContainer.data,o=i?i.children:this.dataRef();if(!o)return;this.unsettled=!0;const n=this.dropData.targetId&&this.dropData.targetId in this.treeMap?this.treeMap[c.toNumber(this.dropData.targetId)]:null;if(f.cookie("env")&&this.isDebug&&(console.group("onDragDrop()"),c.forEach([`model drop: ${t.model.get("name")}`,`list shift: ${e.container.element.nativeElement.id} -> ${e.previousContainer.element.nativeElement.id}`,`index change (event): ${e.previousIndex} -> ${e.currentIndex}`,`current priority: ${t.model.get("priority")}`,`target drop action: ${this.dropData.action}`],e=>console.log(e))),n&&!this.nodeIsEqual(i,n)){if(f.cookie("env")&&this.isDebug&&(console.log(`target drop node differs: ${n.id} -> ${n.model.get("name")}`),console.log("target drop node is the same as target node:",t.id===n.id)),t.id!==n.id)switch(this.dropData.action){case"before":case"after":const e=n.model.get("nestParent.id");i=e&&e in this.treeMap?this.treeMap[e]:null;break;case"inside":i=n}f.cookie("env")&&this.isDebug&&console.log("target drop node selected:",i?`${i.id} -> ${i.model.get("name")}`:"none")}if(!this.nodeIsEqual(i,r)){if(i){switch(this.dropData.action){case"before":case"after":let e=i.children.findIndex(e=>e.id===t.id);"after"===this.dropData.action&&e++,i.children.splice(e,0,t);break;case"inside":i.children.push(t)}i.meta.expanded=!0}r&&this.removeNode(r.children,t),t.model.set("nestParent",this.buildNodePatch(i)),f.cookie("env")&&this.isDebug&&console.log(`new parent: ${t.model.get("nestParent.name")||null}`)}const a=i?i.children:o;let d=e.currentIndex;if(this.cdkDropListSortingDisabled)switch(d=null,this.dropData.action){case"before":case"after":d=a.findIndex(e=>e.id===n.id),"after"===this.dropData.action&&d++,f.cookie("env")&&this.isDebug&&console.log("index change (drop node):",`${e.previousIndex} -> ${d}`)}if(c.isNumber(d)){s.moveItemInArray(a,e.previousIndex,d);let i=0;c.forEach(a,e=>{e.model&&e.model.set&&e.model.set("priority",i++)}),f.cookie("env")&&this.isDebug&&console.log("new priority:",t.model.get("priority"))}f.cookie("env")&&this.isDebug&&console.groupEnd(),await t.model.save(),this.unsettled=!1,this.collection.throttleTrigger("change")}onDragMove(e){const t=this.document.elementFromPoint(e.pointerPosition.x,e.pointerPosition.y);if(!t)return void this.clearDragData();const i="tree-node-content",s=t.classList.contains(i)?t:t.closest(`.${i}`);if(!s)return void this.clearDragData();this.dropData={targetId:s.getAttribute("data-id")};const r=s.getBoundingClientRect(),o=r.height/3;e.pointerPosition.y-r.top<o?this.dropData.action="before":e.pointerPosition.y-r.top>2*o?this.dropData.action="after":this.dropData.action="inside",this.showDragData()}showDragData(){this.clearDragData(),this.dropData&&this.document.getElementById(`node-${this.dropData.targetId}`).classList.add(`drop-${this.dropData.action}`)}clearDragData(e=!1){e&&(this.dropData=null),this.document.querySelectorAll(".drop-before").forEach(e=>e.classList.remove("drop-before")),this.document.querySelectorAll(".drop-after").forEach(e=>e.classList.remove("drop-after")),this.document.querySelectorAll(".drop-inside").forEach(e=>e.classList.remove("drop-inside"))}buildNodePatch(e=null){if(!e||!e.model)return null;const t={};return c.forEach(["id","name"],i=>{const s=e.model.get(i);s&&c.set(t,i,s)}),t}getSvg(e,t){const i=this.addSvgIcon(e,t);return new a.Observable(t=>{this.iconRegistry.getNamedSvgIcon(i).subscribe({error(t){console.error(`getSvg(${e}): ${t}`)},complete(){t.next(i)}})})}addSvgIcon(e,t){if(e in this.svgIcons)return this.svgIcons[e];t||(t={});const i=this.svgIcons[e]=c.uniqueId("selector_svg");return this.iconRegistry.addSvgIcon(i,this.sanitizer.bypassSecurityTrustResourceUrl(e),t),i}},I([i.Input(),M("design:type",String)],S.prototype,"target",void 0),I([i.Input(),M("design:type",String)],S.prototype,"targetSuffix",void 0),I([i.Input(),M("design:type",Number)],S.prototype,"id",void 0),I([i.Input(),M("design:type",Boolean)],S.prototype,"manifest",void 0),I([i.Input(),M("design:type",Boolean)],S.prototype,"decouple",void 0),I([i.Input(),M("design:type",Boolean)],S.prototype,"direct",void 0),I([i.Input(),M("design:type",Object)],S.prototype,"api",void 0),I([i.Input(),M("design:type",String)],S.prototype,"urlRoot",void 0),I([i.Input(),M("design:type",String)],S.prototype,"type",void 0),I([i.Input(),M("design:type",String)],S.prototype,"property",void 0),I([h.debounce(50),M("design:type",Function),M("design:paramtypes",[Object]),M("design:returntype",void 0)],S.prototype,"onDragMove",null),S=I([i.Component({selector:`sa-${D}`,templateUrl:`${b}/${D}/${D}.component${v}.html`}),$(5,i.Inject(y.DOCUMENT)),M("design:paramtypes",[n.MatIconRegistry,o.DomSanitizer,p.BackendService,i.ChangeDetectorRef,i.ElementRef,Document])],S),e("TreeComponent",S)}}});

package/src/tree/tree.component.ts

@@ -36,7 +36,19 @@ import {
 
 // External
 import {Stratus} from '@stratusjs/runtime/stratus'
-import _ from 'lodash'
+import {
+    forEach,
+    get,
+    has,
+    isArray,
+    isNumber,
+    set,
+    size,
+    snakeCase,
+    sortBy,
+    toNumber,
+    uniqueId
+} from 'lodash'
 import {keys} from 'ts-transformer-keys'
 import {debounce} from '@agentepsilon/decko'
 
@@ -161,7 +173,6 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
     @Input() property: string
 
     // Dependencies
-    _ = _
     Stratus = Stratus
 
     // Stratus Data Connectivity
@@ -228,7 +239,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         // Initialization
-        this.uid = _.uniqueId(`sa_${_.snakeCase(moduleName)}_component_`)
+        this.uid = uniqueId(`sa_${snakeCase(moduleName)}_component_`)
         Stratus.Instances[this.uid] = this
 
         // Hydrate Root App Inputs
@@ -239,18 +250,18 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
         Stratus.Internals.CssLoader(`${localDir}/${moduleName}/${moduleName}.component${min}.css`)
             .then(() => {
                 this.isStyled = true
-                this.refresh()
+                this.refresh().then()
             })
             .catch((err: any) => {
                 console.warn('Issue detected in CSS Loader for Component:', this)
                 console.error(err)
                 this.isStyled = true
-                this.refresh()
+                this.refresh().then()
             })
 
         // SVG Icons
         // TODO: Make this into a single service
-        _.forEach({
+        forEach({
             tree_check: `${Stratus.BaseUrl}sitetheorycore/images/icons/check.svg`,
             tree_add: `${Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/add.svg`,
             tree_delete: `${Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/delete.svg`,
@@ -272,7 +283,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
                         return
                     }
                     this.dataDefer(this.subscriber)
-                    this.refresh()
+                    this.refresh().then()
                 }
                 data.on('change', onDataChange)
                 onDataChange()
@@ -311,7 +322,8 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
                         }
                         // Since the Node is available, create the dialog
                         // console.log('direct dialog:', model)
-                        // FIXME: This is set to ignore because it previously checked if `instanceof TreeNodeComponent`, which caused a circular reference.
+                        // FIXME: This is set to ignore because it previously checked if `instanceof TreeNodeComponent`,
+                        //  which caused a circular reference.
                         // @ts-ignore
                         node.meta.component.openDialog()
                     }
@@ -341,7 +353,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
         this.isInitialized = true
 
         // Force UI Redraw
-        this.refresh()
+        this.refresh().then()
     }
 
     // async ngOnInit() {
@@ -357,7 +369,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
             return new Promise<void>(resolve => resolve())
         }
         // TODO: Refresh treeNodeComponents through a map
-        _.forEach(this.metaMap, (meta: NodeMeta) => {
+        forEach(this.metaMap, (meta: NodeMeta) => {
             if (!meta.component || !('refresh' in meta.component)) {
                 return
             }
@@ -433,26 +445,26 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
         }
         // TODO: Break away from the registry here...  It's not responsive enough.
         let models = this.collection.models
-        if (!models || !_.isArray(models) || !models.length) {
+        if (!models || !isArray(models) || !models.length) {
             return []
         }
-        models = _.sortBy(models, ['data.priority'])
+        models = sortBy(models, ['data.priority'])
         // Convert Collection Models to Nested Tree to optimize references
         this.metaMap = this.metaMap || {}
         this.treeMap = {}
         this.tree = []
-        _.forEach(models, (model: any) => {
-            const modelId = _.get(model, 'data.id')
-            const parentId = _.get(model, 'data.nestParent.id')
+        forEach(models, (model: any) => {
+            const modelId = get(model, 'data.id')
+            const parentId = get(model, 'data.nestParent.id')
             this.dropListIdMap[`${this.uid}_node_${modelId}_drop_list`] = true
-            if (!_.has(this.metaMap, modelId)) {
+            if (!has(this.metaMap, modelId)) {
                 this.metaMap[modelId] = {
                     id: modelId,
                     // TODO: This is the default setting for the UI and should be a component setting
                     expanded: true
                 }
             }
-            if (!_.has(this.treeMap, modelId)) {
+            if (!has(this.treeMap, modelId)) {
                 this.treeMap[modelId] = {
                     id: modelId,
                     model,
@@ -463,7 +475,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
             this.treeMap[modelId].model = model
             this.treeMap[modelId].meta = this.metaMap[modelId]
             if (parentId) {
-                if (!_.has(this.treeMap, parentId)) {
+                if (!has(this.treeMap, parentId)) {
                     this.treeMap[parentId] = {
                         id: parentId,
                         model: null,
@@ -486,7 +498,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
 
     private trackDropLists() {
         this.dropLists = []
-        _.forEach(this.dropListIdMap, (value: boolean, key: string) => {
+        forEach(this.dropListIdMap, (value: boolean, key: string) => {
             if (!value) {
                 return
             }
@@ -505,13 +517,13 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
     }
 
     private setExpanded(expanded: boolean): void {
-        if (!this.metaMap || !_.size(this.metaMap)) {
+        if (!this.metaMap || !size(this.metaMap)) {
             return
         }
-        _.forEach(this.metaMap, (nodeMeta: NodeMeta) => {
+        forEach(this.metaMap, (nodeMeta: NodeMeta) => {
             nodeMeta.expanded = expanded
         })
-        this.refresh()
+        this.refresh().then()
     }
 
     public setExpandedClick(expanded: boolean): void {
@@ -593,12 +605,12 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
         // Find Drop Node (For Comparisons)
         const targetDropNode =
             (this.dropData.targetId && this.dropData.targetId in this.treeMap) ?
-            this.treeMap[_.toNumber(this.dropData.targetId)] : null
+            this.treeMap[toNumber(this.dropData.targetId)] : null
 
         // Debug Data
         if (cookie('env') && this.isDebug) {
             console.group('onDragDrop()')
-            _.forEach(
+            forEach(
                 [
                     `model drop: ${targetNode.model.get('name')}`,
                     `list shift: ${event.container.element.nativeElement.id} -> ${event.previousContainer.element.nativeElement.id}`,
@@ -690,12 +702,12 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
         }
 
         // Handle new cell placement
-        if (_.isNumber(targetDropIndex)) {
+        if (isNumber(targetDropIndex)) {
             // Move cell in array
             moveItemInArray(branch, event.previousIndex, targetDropIndex)
             // Generate new priority
             let priority = 0
-            _.forEach(branch, (node: Node) => {
+            forEach(branch, (node: Node) => {
                 if (!node.model || !node.model.set) {
                     return
                 }
@@ -755,7 +767,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
 
     // private isNotSelfDrop(event: CdkDragDrop<any> | CdkDragEnter<any> | CdkDragExit<any>): boolean {
     //     console.log('isNotSelfDrop:', event.item.data, event.item.data)
-    //     return !_.isEqual(event.item.data, event.item.data)
+    //     return !isEqual(event.item.data, event.item.data)
     // }
 
     @debounce(50)
@@ -821,7 +833,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
             return null
         }
         const nodePatch = {}
-        _.forEach([
+        forEach([
             'id',
             'name'
         ], (key: string) => {
@@ -829,7 +841,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
             if (!value) {
                 return
             }
-            _.set(nodePatch, key, value)
+            set(nodePatch, key, value)
         })
         return nodePatch
     }
@@ -839,9 +851,9 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
     //         return []
     //     }
     //     // TODO: Instead of a filter, like this, it would be better to search the tree
-    //     return _.filter(this.dataRef(), function (child) {
-    //         const modelId = _.get(model, 'data.id')
-    //         const parentId = _.get(child, 'data.nestParent.id')
+    //     return filter(this.dataRef(), function (child) {
+    //         const modelId = get(model, 'data.id')
+    //         const parentId = get(child, 'data.nestParent.id')
     //         return modelId && parentId && modelId === parentId
     //     })
     // }
@@ -879,7 +891,7 @@ export class TreeComponent extends RootComponent implements OnInit, OnDestroy {
         if (!options) {
             options = {}
         }
-        const uid = this.svgIcons[url] = _.uniqueId('selector_svg')
+        const uid = this.svgIcons[url] = uniqueId('selector_svg')
         this.iconRegistry.addSvgIcon(uid, this.sanitizer.bypassSecurityTrustResourceUrl(url), options)
         return uid
     }