{"__symbolic":"module","version":4,"metadata":{"MsPhenomKanbanService":{"__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":{"ngInjectableDef":{}}},"MsPhenomKanbanComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ms-phenom-kanban","template":"\n    <p>\n      Phenom-kanban works!\n    </p>\n  ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"MsPhenomKanbanModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":17,"character":4},{"__symbolic":"reference","module":"ngx-drag-and-drop-lists","name":"DndListModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"MsPhenomKanbanComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"MsPhenomKanbanComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"PHENOM-kanban","template":"<div class=\"container-fluid\">\n  <div class=\"row pb10\" *ngIf=\"enableFilter\">\n    <div class=\"col-md-3 col-lg-3 col-sm-6 col-xs-12\">\n      <label class=\"noWhiteSpace {{labelClass}}\">Column</label>\n      <select class=\"form-control\" [(ngModel)]=\"column\" (change)=\"changeColumn($event.target.value)\">\n        <option value=\"0\">Select column</option>\n        <option *ngFor=\"let col of arrColumns\" value={{col.value}}>\n          {{col.text}}\n        </option>\n      </select>\n    </div>\n\n    <div class=\"col-md-3 col-lg-3 col-sm-6 col-xs-12\">\n      <label class=\"noWhiteSpace {{labelClass}}\">Filter fields</label>\n      <select class=\"form-control\" [(ngModel)]=\"filterField\" (change)=\"changeFilter($event.target.value)\">\n        <option value=\"0\">Select filter</option>\n        <option *ngFor=\"let col of arrColumns\" value={{col.value}}>\n          {{col.text}}\n        </option>\n      </select>\n    </div>\n\n    <div class=\"col-md-3 col-lg-3 col-sm-6 col-xs-12\">\n      <label class=\"noWhiteSpace {{labelClass}}\">Sort fields</label>\n      <select class=\"form-control\" [(ngModel)]=\"sortField\" (ngModelChange)=\"sortChange($event)\">\n        <option value=\"0\">Select sort</option>\n        <option *ngFor=\"let col of arrColumns\" value={{col.value}}>\n          {{col.text}}\n        </option>\n      </select>\n    </div>\n  </div>\n\n  <div class=\"row pb10\" *ngIf=\"enableFilter\">\n    <div class=\"col-md-12 filterHeight\">\n      <label class=\"noWhiteSpace {{labelClass}}\">Quick Filter :</label>\n      <button *ngFor=\"let sFilter of kanbanFilter; let i = index\" (click)=\"filterKanbaData(sFilter, i)\" class=\"btn btn-info mar5 btnStyle\"\n        [ngClass]=\"{'active': i == activeFilterIndex}\">{{sFilter}}</button>\n      <button (click)=\"clearFilter()\" class=\"btn btn-info mar5 btnStyle\" title=\"Clear filter\">X</button>\n    </div>\n  </div>\n  <div class=\"row rowstyle\">\n    <div class=\"cBoard\" *ngFor=\"let dropzone of simpleList; let i = index\" [ngStyle]=\"{'min-width': dropzone.data.length == 0 ? '265.063px':'pointer'}\">\n      <div class=\"dropzone box-yellow\">\n        <div class=\"listHeader\" *ngIf=\"enableColumnHeader\">\n          <p class=\"list_title\">\n            <span *ngIf=\"showItemCount\" class=\"badge badge-pill badge-info pull-right\"> {{dropzone.data.length}} </span> &nbsp;\n            <strong class=\"{{labelClass}}\" *ngIf=\"dropzone.heading && dropzone.heading!=''\">{{dropzone.heading | uppercase}} </strong>\n          </p>\n        </div>\n        <div id=\"dropzoneId\" *ngIf=\"dropzone.data.length > 0\" class=\"listBody\" [dndList] [dndModel]=\"dropzone.data\" [dndPlaceholder]=\"placeholder\">\n          <div *ngFor=\"let item of dropzone.data\" class=\"itemBox\">\n            <div class=\"innerBox\" [ngClass]=\"item['colorCodingCSS']\" title=\"Drag\" [dndDraggable] (dndMoved)=\"removeItem(item, dropzone.data)\"\n              (dndDragEnd)=\"dragEnd()\" (dndDragStart)=\"dragStart()\" [dndObject]=\"item\" (dblclick)=\"showDetailsView(item)\">\n              <ng-container *ngFor=\"let ele of elementAttributes; let i=index;\">\n                <ms-output-label [eleAttributes]=\"ele\" [elementData]=\"item\" *ngIf=\"ele['elementType'] === 'simple' && ele.type === 'OutputLabel' && !ele['hidden']\">\n                </ms-output-label>\n              </ng-container>\n              <ng-container *ngIf=\"enableDetailsView && item['showDetailsPanel']\">\n\n                <div class=\"backdrop\" [ngStyle]=\"{'display':display}\"></div>\n                <div class=\"modal\" tabindex=\"-1\" role=\"dialog\" [ngStyle]=\"{'display':display}\">\n                  <div class=\"vertical-alignment-helper\">\n                    <div class=\"modal-dialog vertical-align-center\" role=\"document\">\n                      <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                          <h4 class=\"modal-title\">Summary</h4>\n                        </div>\n                        <div class=\"modal-body\">\n                          <ng-container *ngFor=\"let ele of elementAttributes; let i=index;\">\n                            <ms-output-label [eleAttributes]=\"ele\" [elementData]=\"item\" *ngIf=\"ele['elementType'] === 'simple' && ele.type === 'OutputLabel'\">\n                            </ms-output-label>\n                          </ng-container>\n                        </div>\n                        <div class=\"modal-footer\">\n\n                          <button title=\"Return\" type=\"button\" class=\"btn btn-info noOutline btnStyle\" (click)=\"onCloseHandled()\">\n                            <i class=\"fa fa-reply\"></i>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div class=\"dndPlaceholder\" #placeholder></div>\n        </div>\n        <div id=\"dropzoneId\" *ngIf=\"dropzone.data.length == 0\" class=\"listBody\" [dndList] [dndModel]=\"dropzone.data\" [dndPlaceholder]=\"placeholder\">\n          <div class=\"innerBox\" title=\"Drag\" [dndDraggable] (dndDragEnd)=\"dragEnd()\" (dndDragStart)=\"dragStart()\" [dndObject]=\"null\">\n          </div>\n          <div class=\"dndPlaceholder\" #placeholder></div>\n        </div>\n      </div>\n    </div>\n  </div>","styles":[".btnStyle{padding:0 5px}.noWhiteSpace{margin-bottom:0}.row{flex-wrap:nowrap}.itemBox{padding:5px}.listBody{padding:0 5px;font-size:14px;color:green;max-height:450px;overflow-y:auto;margin:5px 5px 5px 0}.innerBox{border:1px solid #ccc;padding:10px}.innerBox:hover{background:#f1f1f1;cursor:move;opacity:1}.summaryPanel{padding:5px;margin-top:5px;border:1px solid #ccc;background:#fff}.summaryTitle{color:#212529;margin-bottom:10px;border-bottom:1px solid #ccc}.summaryTitle p{padding:5px}.summaryTitle button.close{margin-top:-5px}.noOutline{outline:0}.innerBox.workComplete{border-left:5px solid green!important}.innerBox.workPending{border-left:5px solid #ff0!important}.innerBox.workInProgress{border-left:5px solid orange!important}.innerBox.workDelete{border-left:5px solid red!important}.pad20,.pt20{padding-top:20px}.pb20{padding-bottom:20px}.pb10{padding-bottom:10px}.mar5{margin:5px}.filterBadge{margin:5px;font-size:14px;cursor:pointer}.filterHeight{max-height:150px;overflow-y:auto}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#17a2b8;background-color:#fff;border-color:#17a2b8;font-weight:400}.cBoard{background:#fff;min-height:100px;margin:5px;padding-bottom:5px;display:inline-block;border-radius:15px;border:1px solid #ccc}.listHeader{padding:10px;border-bottom:1px solid #ccc}.list_title{margin:0}@media (min-width:768px){.row{flex-wrap:nowrap}}@media (min-width :481px) and (max-width:768px){.cBoard{width:100%}.row{flex-wrap:wrap}}@media only screen and (min-width :768px) and (max-width :990px){.cBoard{width:48.6%}.row{flex-wrap:wrap}}@media (max-width :480px){.cBoard{width:100%}.row{flex-wrap:wrap}}.backdrop{position:fixed;top:0;left:0;width:100%;height:100vh}.modal-header{display:inherit}.modal-content{border:1px solid #ccc}.rowstyle{display:flex;margin-right:-15px;margin-left:-15px;overflow-x:auto;margin-bottom:10px}"]}]}],"members":{"kanbanConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"kanbanData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"enableColumnHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"enableFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"enableDetailsView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"displayFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"showItemCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"elementAttributes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"filterField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"sortField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"labelClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"generateEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"prepareKanbanColumns":[{"__symbolic":"method"}],"changeColumn":[{"__symbolic":"method"}],"changeFilter":[{"__symbolic":"method"}],"sortChange":[{"__symbolic":"method"}],"prepareFilterOptions":[{"__symbolic":"method"}],"showDetailsView":[{"__symbolic":"method"}],"onCloseHandled":[{"__symbolic":"method"}],"filterKanbaData":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragEnd":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ms-output-label","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":6,"character":17},"member":"None"},"template":"<div class=\"{{eleAttributes['elementContainerStyleClass']}}\" [ngStyle]=\"{'display: none': eleAttributes['hidden']}\">\n  <span *ngIf=\"(eleAttributes['label'] && eleAttributes['label'] != '') && (!eleAttributes['beanId'] || eleAttributes['beanId'] == '')\"\n    title=\"{{eleAttributes['title']}}\" [ngStyle]=\"eleAttributes['inlineStyle']\">\n    <span *ngIf=\"eleAttributes.key == 'footer'\">©</span>{{eleAttributes['label']}}\n  </span>\n\n  <span *ngIf=\"(eleAttributes['label'] || eleAttributes['label'] !='') && (eleAttributes['beanId'] || eleAttributes['beanId'] != '')\"\n    title=\"{{eleAttributes['title']}}\" [ngStyle]=\"eleAttributes['inlineStyle']\">\n    <span *ngIf=\"eleAttributes.key == 'footer'\">©</span>{{eleAttributes['label']}} &nbsp; {{elementData[eleAttributes['beanId']]}}\n  </span>\n\n  <span *ngIf=\"(!eleAttributes['label'] || eleAttributes['label'] == '') && (eleAttributes['beanId'] || eleAttributes['beanId'] != '')\"\n    title=\"Wahid {{eleAttributes['title']}}\" [ngStyle]=\"eleAttributes['inlineStyle']\">\n    <span *ngIf=\"eleAttributes.key == 'footer'\">©</span>{{elementData[eleAttributes['beanId']]}}\n  </span>\n</div>","styles":[""]}]}],"members":{"elementData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"eleAttributes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"simpleElementBeanClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"complexElementBeanClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"MsPhenomKanbanService":"./lib/ms-phenom-kanban.service","MsPhenomKanbanComponent":"./lib/ms-phenom-kanban.component","MsPhenomKanbanModule":"./lib/ms-phenom-kanban.module","ɵa":"./lib/kanban/kanban.component","ɵb":"./lib/output-label/output-label.component"},"importAs":"ms-phenom-kanban"}