app-draggable-portlets-template/app-draggable-portlets-template.metadata.json

An easy implementation of draggable portlets for Angular, where you can load all portlets by a data json file.

{"__symbolic":"module","version":4,"metadata":{"AppDraggablePortletsTemplateService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"AppDraggablePortletsTemplateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-draggable-portlets-template","template":"\n    <app-load-portlets configFile=\"/assets/json/data.json\"></app-load-portlets>\n  ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"AppDraggablePortletsTemplateModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AppDraggablePortletsTemplateComponent"},{"__symbolic":"reference","name":"PortletComponent"},{"__symbolic":"reference","name":"PortletsGroupComponent"},{"__symbolic":"reference","name":"LoadPortletsComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":19,"character":4}],"providers":[{"__symbolic":"reference","name":"ReturnJsonArrayService"}],"exports":[{"__symbolic":"reference","name":"AppDraggablePortletsTemplateComponent"},{"__symbolic":"reference","name":"PortletComponent"},{"__symbolic":"reference","name":"PortletsGroupComponent"},{"__symbolic":"reference","name":"LoadPortletsComponent"}]}]}],"members":{}},"LoadPortletsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":40,"character":1},"arguments":[{"selector":"app-load-portlets","providers":[{"__symbolic":"reference","name":"ReturnJsonArrayService"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":45,"character":17},"member":"None"},"template":"<!--<div>\n  <ul>\n      <li>Load the file for change the portlets options <input type=\"file\" (change)=\"onChange($event)\"/></li>\n      <li>Example json file <a href=\"./assets/json/data.json\" target=\"_blank\">download here</a></li>\n  </ul>\n</div>\n\n<h3>Portlets</h3>-->\n<app-portlets-group [(data)]=\"data\"></app-portlets-group>","styles":["@import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);body{font-family:Arial,Helvetica,sans-serif;min-width:320px}table{font-size:1em}.ui-draggable,.ui-droppable{background-position:top}.column{width:33%;float:left;padding-bottom:100px}.portlet{margin:0 1em 1em 0;padding:.3em}.portlet-header{padding:.2em .3em;margin-bottom:.5em;position:relative}.portlet-toggle{position:absolute;top:50%;right:0;margin-top:-8px}.portlet-content{padding:.4em}.portlet-placeholder{border:1px dotted #000;margin:0 1em 1em 0;height:50px}"]}]}],"members":{"configFile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ReturnJsonArrayService"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadJQuery":[{"__symbolic":"method"}],"loadFile":[{"__symbolic":"method"}]}},"PortletComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-portlet","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":17},"member":"None"},"template":" <div *ngIf=\"portlet\" class=\"portlet\">\r\n  <div class=\"portlet-header\">{{ portlet.header }}</div>\r\n  <div class=\"portlet-content\">\r\n    {{ portlet.content }}\r\n    <!--iframe src=\"https://www.youtube.com/embed/QH2-TGUlwu4?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allowfullscreen></iframe>\r\n    -->\r\n  </div>\r\n</div>","styles":["@import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);body{font-family:Arial,Helvetica,sans-serif;min-width:320px}table{font-size:1em}.ui-draggable,.ui-droppable{background-position:top}.column{width:33%;float:left;padding-bottom:100px}.portlet{margin:0 1em 1em 0;padding:.3em}.portlet-header{padding:.2em .3em;margin-bottom:.5em;position:relative}.portlet-toggle{position:absolute;top:50%;right:0;margin-top:-8px}.portlet-content{padding:.4em}.portlet-placeholder{border:1px dotted #000;margin:0 1em 1em 0;height:50px}"]}]}],"members":{"portlet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"PortletsGroupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-portlets-group","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":17},"member":"None"},"template":"<div *ngFor=\"let column of (data | async)?.columns\" class=\"column\">\r\n  <div *ngFor=\"let portlet of column.portlets\">\r\n    <app-portlet [portlet]=\"portlet\"></app-portlet>\r\n  </div>\r\n</div>","styles":["@import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);body{font-family:Arial,Helvetica,sans-serif;min-width:320px}table{font-size:1em}.ui-draggable,.ui-droppable{background-position:top}.column{width:33%;float:left;padding-bottom:100px}.portlet{margin:0 1em 1em 0;padding:.3em}.portlet-header{padding:.2em .3em;margin-bottom:.5em;position:relative}.portlet-toggle{position:absolute;top:50%;right:0;margin-top:-8px}.portlet-content{padding:.4em}.portlet-placeholder{border:1px dotted #000;margin:0 1em 1em 0;height:50px}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"Column":{"__symbolic":"class","members":{}},"Data":{"__symbolic":"class","members":{}},"Portlet":{"__symbolic":"class","members":{}},"ReturnJsonArrayService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":10,"character":28}]}],"getScreen":[{"__symbolic":"method"}],"handleError":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}},"origins":{"AppDraggablePortletsTemplateService":"./lib/app-draggable-portlets-template.service","AppDraggablePortletsTemplateComponent":"./lib/app-draggable-portlets-template.component","AppDraggablePortletsTemplateModule":"./lib/app-draggable-portlets-template.module","LoadPortletsComponent":"./lib/load/load-portlets.component","PortletComponent":"./lib/portlet/portlet.component","PortletsGroupComponent":"./lib/portlets/portlets-group.component","Column":"./lib/column","Data":"./lib/data","Portlet":"./lib/portlet","ReturnJsonArrayService":"./lib/return-json-array.service"},"importAs":"app-draggable-portlets-template"}