[{"__symbolic":"module","version":3,"metadata":{"NgxDualListboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-dual-listbox","styles":["\n    *{\n        box-sizing: border-box;\n    }\n    .container-dualListBox{\n        display: -webkit-box; \n        display: -moz-box;\n        display: -ms-flexbox;\n        display: -webkit-flex; \n        display: flex;\n\n        -webkit-box-align: center;\n        -moz-box-align: center;\n        -ms-flex-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n     }\n     .container-dualListBox > div{\n             height: 100%;\n             max-height: 100%;\n             display: flex;\n             flex-direction: column;\n             place-content: flex-start;\n     }\n     .container-items{\n        align-items: flex-start;\n        width:40%;\n        border: 1px solid #ccc8c8;\n     }\n     .container-buttons{\n        align-items: center;\n        width:20%;\n     }\n     .btn-arrow{\n           border: 1px solid #afa7a7;\n           background: #9c9797;\n           color: white;\n           padding: 3px;\n           margin: 5px;\n           width:90px;\n           text-align: center;\n     }\n    .choosed{\n           width: 100%;\n           background: #91949c;\n           color: white;\n     }"],"template":"\n  <div class=\"container-dualListBox\">\n    <div class=\"container-items\" [style.minHeight]=\"minHeight\">\n      <div *ngFor=\"let item of availableItems.totalItems\" [ngClass]=\"{ choosed: availableItems.isSelected(item,1) }\" (click)=\"availableItems.select(item)\">\n        <div *ngIf=\"templateItem;else noTemplateItem\">\n          <ng-container [ngTemplateOutlet]=\"templateItem\" [ngOutletContext]=\"{ data: item }\">\n          </ng-container>\n        </div>\n        <ng-template #noTemplateItem>\n          {{item.name}}\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"container-buttons\">\n       <div class=\"\" (click)=\"select()\">\n       <div *ngIf=\"templateArrowRight;else arrowRigth\">\n          <ng-container [ngTemplateOutlet]=\"templateArrowRight\">\n          </ng-container>\n       </div>\n      <ng-template #arrowRigth>\n        <div class=\"btn-arrow\">&rarr;</div>\n      </ng-template>\n    </div>\n    <div class=\"\" (click)=\"return()\">\n        <div *ngIf=\"templateArrowLeft;else arrowLeft\">\n          <ng-container [ngTemplateOutlet]=\"templateArrowLeft\">\n          </ng-container>\n        </div>\n        <ng-template #arrowLeft>\n          <div class=\"btn-arrow\">&larr;</div>\n        </ng-template>\n    </div>\n  </div>\n    <div class=\"container-items\" [style.minHeight]=\"minHeight\">\n      <div *ngFor=\"let item of selectedItems.totalItems\" [ngClass]=\"{ choosed: selectedItems.isSelected(item,2) }\"  (click)=\"selectedItems.select(item)\">\n        <div *ngIf=\"templateItem;else noTemplateItem\">\n          <ng-container [ngTemplateOutlet]=\"templateItem\" [ngOutletContext]=\"{ data: item }\">\n          </ng-container>\n        </div>\n        <ng-template #noTemplateItem>\n          {{item.name}}\n        </ng-template>\n      </div>\n    </div>\n</div>"}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["selectedItems"]}]}],"selectedItemsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"minHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"templateItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["templateItem"]}]}],"templateArrowLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["templateArrowLeft"]}]}],"templateArrowRight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["templateArrowRight"]}]}],"ngOnInit":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"return":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgxDualListboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-dual-listbox","styles":["\n    *{\n        box-sizing: border-box;\n    }\n    .container-dualListBox{\n        display: -webkit-box; \n        display: -moz-box;\n        display: -ms-flexbox;\n        display: -webkit-flex; \n        display: flex;\n\n        -webkit-box-align: center;\n        -moz-box-align: center;\n        -ms-flex-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n     }\n     .container-dualListBox > div{\n             height: 100%;\n             max-height: 100%;\n             display: flex;\n             flex-direction: column;\n             place-content: flex-start;\n     }\n     .container-items{\n        align-items: flex-start;\n        width:40%;\n        border: 1px solid #ccc8c8;\n     }\n     .container-buttons{\n        align-items: center;\n        width:20%;\n     }\n     .btn-arrow{\n           border: 1px solid #afa7a7;\n           background: #9c9797;\n           color: white;\n           padding: 3px;\n           margin: 5px;\n           width:90px;\n           text-align: center;\n     }\n    .choosed{\n           width: 100%;\n           background: #91949c;\n           color: white;\n     }"],"template":"\n  <div class=\"container-dualListBox\">\n    <div class=\"container-items\" [style.minHeight]=\"minHeight\">\n      <div *ngFor=\"let item of availableItems.totalItems\" [ngClass]=\"{ choosed: availableItems.isSelected(item,1) }\" (click)=\"availableItems.select(item)\">\n        <div *ngIf=\"templateItem;else noTemplateItem\">\n          <ng-container [ngTemplateOutlet]=\"templateItem\" [ngOutletContext]=\"{ data: item }\">\n          </ng-container>\n        </div>\n        <ng-template #noTemplateItem>\n          {{item.name}}\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"container-buttons\">\n       <div class=\"\" (click)=\"select()\">\n       <div *ngIf=\"templateArrowRight;else arrowRigth\">\n          <ng-container [ngTemplateOutlet]=\"templateArrowRight\">\n          </ng-container>\n       </div>\n      <ng-template #arrowRigth>\n        <div class=\"btn-arrow\">&rarr;</div>\n      </ng-template>\n    </div>\n    <div class=\"\" (click)=\"return()\">\n        <div *ngIf=\"templateArrowLeft;else arrowLeft\">\n          <ng-container [ngTemplateOutlet]=\"templateArrowLeft\">\n          </ng-container>\n        </div>\n        <ng-template #arrowLeft>\n          <div class=\"btn-arrow\">&larr;</div>\n        </ng-template>\n    </div>\n  </div>\n    <div class=\"container-items\" [style.minHeight]=\"minHeight\">\n      <div *ngFor=\"let item of selectedItems.totalItems\" [ngClass]=\"{ choosed: selectedItems.isSelected(item,2) }\"  (click)=\"selectedItems.select(item)\">\n        <div *ngIf=\"templateItem;else noTemplateItem\">\n          <ng-container [ngTemplateOutlet]=\"templateItem\" [ngOutletContext]=\"{ data: item }\">\n          </ng-container>\n        </div>\n        <ng-template #noTemplateItem>\n          {{item.name}}\n        </ng-template>\n      </div>\n    </div>\n</div>"}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["selectedItems"]}]}],"selectedItemsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"minHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"templateItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["templateItem"]}]}],"templateArrowLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["templateArrowLeft"]}]}],"templateArrowRight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["templateArrowRight"]}]}],"ngOnInit":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"return":[{"__symbolic":"method"}]}}}}]