[{"__symbolic":"module","version":4,"metadata":{"DataTableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"farris-datatable","template":"<div class=\"filter-row\" [style.width]=\"width + 'px'\" *ngIf=\"showFilterBar\"> <form style=\"display: flex; width: 100%;\"> <div class=\"search-fields\"> <select class=\"custom-select\" [(ngModel)]=\"searchData.field\" name=\"field\"> <option value=\"*\">{{allColumnsTitle}}</option> <option *ngFor=\"let col of searchFields\" value=\"{{col.value}}\">{{ col.label }}</option> </select> </div> <div class=\"search-text flex-fill\"> <input-group [groupText]=\"searchButtonText\" name=\"searchValue\" [(ngModel)]=\"searchData.value\" (clickHandle)=\"onSearch()\"></input-group> </div> </form> </div> <div [ngStyle]=\"{'height': tableHeight +'px', 'width': width +'px' }\" class=\"farris-datatable-container\"> <div class=\"farris-datatable\"> <div #tableHeader class=\"farris-table-header\"> <datatable-header #dtHeader [size]=\"size\" [columns]=\"columns\" [singleSelect]=\"singleSelect\" [data]=\"data\" (checkedAll)=\"onCheckAll($event)\"> <ng-content select=\"data-columns\"></ng-content> </datatable-header> </div> <div #scorllableBody class=\"farris-table-scorllable-body\" [style.height]=\"scorllableBodyHeight + 'px'\"> <perfect-scrollbar #perfectScrollbar [config]=\"{}\" (psScrollX)=\"onScrollX($event)\" (psScrollY)=\"onScrollY($event)\"> <ng-container [style.display]=\"data && data.length ? 'block': 'none'\"> <datatable-body #dtBody [rows]=\"pagination ? (data | paginate: paginationOptions) : data\" [size]=\"size\" [columns]=\"columns\" [striped]=\"striped\" [bordered]=\"bordered\" [rowClassName]=\"rowClassName\" [cellClassName]=\"cellClassName\"  (on-select-row)=\"onSelectRow($event)\"> </datatable-body> </ng-container> <ng-container *ngIf=\"!(data && data.length)\"> <h1 style=\"text-align:center;color:#ccc; margin-top: 50px;\"></h1> </ng-container> </perfect-scrollbar> </div> <div class=\"farris-table-header\" *ngIf=\"footer\"> <ng-template [ngTemplateOutlet]=\"footer\"> </ng-template> </div> <div *ngIf=\"pagination\" #tablePager class=\"farris-table-pager\"> <pagination-controls #pager [id]=\"paginationOptions.id\" [maxSize]=\"maxSize\" [directionLinks]=\"directionLinks\" [autoHide]=\"autoHide\" [responsive]=\"responsive\" [previousLabel]=\"labels.previousLabel\" [nextLabel]=\"labels.nextLabel\" [screenReaderPaginationLabel]=\"labels.screenReaderPaginationLabel\" [screenReaderPageLabel]=\"labels.screenReaderPageLabel\" [screenReaderCurrentLabel]=\"labels.screenReaderCurrentLabel\" (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"> </pagination-controls> </div> <div #dragLine *ngIf=\"resizableColumns\" class=\"column-resizer-helper\"></div> </div> </div>","styles":[".farris-ui-datatable { display: flex; flex-direction: column; height: 100%; font-size: 13px; } .farris-ui-datatable table { border-collapse: collapse; width: 100%; table-layout: fixed; } .farris-ui-datatable .farris-table-header, .farris-ui-datatable .farris-table-footer { position: relative; min-height: 34px; } .farris-ui-datatable .farris-table-header thead > tr > th, .farris-ui-datatable .farris-table-footer thead > tr > th { padding: 0.571em 0.857em; border: 1px solid #c8c8c8; font-weight: 700; color: #333333; background-color: #ffffff; border-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .farris-ui-datatable .farris-table-header thead > tr > th .tt-checkbox, .farris-ui-datatable .farris-table-footer thead > tr > th .tt-checkbox { margin-right: 0; vertical-align: top; min-height: 1rem; } .farris-ui-datatable .farris-table-header thead > tr > th:first-child, .farris-ui-datatable .farris-table-footer thead > tr > th:first-child { border-left: 0; } .farris-ui-datatable .farris-table-header thead > tr > th:last-child, .farris-ui-datatable .farris-table-footer thead > tr > th:last-child { border-right: 0; } .farris-ui-datatable .farris-table-header .checkbox-cell, .farris-ui-datatable .farris-table-footer .checkbox-cell { width: 40px; } .farris-ui-datatable .farris-table-scorllable-body { overflow: hidden; } .farris-ui-datatable .farris-table-scorllable-body .ui-table-tbody tr > td { background: inherit; border: 1px solid #c8c8c8; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .farris-ui-datatable .farris-table-scorllable-body .ui-table-tbody .tt-checkbox { margin-right: 0; vertical-align: top; } .farris-ui-datatable .farris-table-scorllable-body .ui-table-tbody .checkbox-cell { width: 40px; } .farris-ui-datatable .farris-table-scorllable-body .row-hight-light { background-color: #b7d7ff; color: #000; } .farris-ui-datatable .farris-table-scorllable-body .ui-table-tbody tr:not(.row-hight-light):hover { cursor: pointer; background-color: #e7f2ff; } .farris-ui-datatable .farris-table-scorllable-body .ui-table-tbody > tr:first-child > td { border-top: 0; } .farris-ui-datatable .farris-table-scorllable-body table > .ui-table-tbody > tr > td:last-child { border-right: 0; } .farris-ui-datatable .farris-table-scorllable-body table > .ui-table-tbody > tr > td:first-child { border-left: 0; } .farris-ui-datatable .farris-table-pager { background-color: #f3f3f3; height: 50px; min-height: 50px; width: 100%; border-top: 1px solid #c8c8c8; } .filter-row { display: flex; margin: 10px 0; } .filter-row .search-fields { min-width: 140px; } .filter-row .search-text { flex: 1; margin-left: 10px; } .filter-row .search-text .btn-outline-secondary { border-color: #CED4DA; } .filter-row .search-text .btn-outline-secondary:focus { box-shadow: none; } .filter-row .search-text .btn-outline-secondary:active { box-shadow: none; } .filter-row .form-control:focus { border-color: #CED4DA; box-shadow: none; } .filter-row .custom-select:focus { box-shadow: none; } .farris-datatable { position: relative; } .resizable-column { background-clip: padding-box; position: relative; } .column-resizer { display: block; position: absolute !important; top: 0; right: 0; margin: 0; width: .5em; height: 100%; padding: 0; cursor: col-resize; border: 1px solid transparent; } .column-resizer-helper { width: 1px; position: absolute; z-index: 10; display: none; background-color: #6c757d; opacity: .6; } .farris-table-fixed-header, .farris-table-fixed-body { position: absolute; top: 0; left: 0; overflow: hidden; box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2); } .farris-table-fixed-right-header, .farris-table-fixed-right-body { position: absolute; top: 0; right: 0; overflow: hidden; box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2); } .td-hidden { visibility: hidden; } .datatable-icon-search { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADf0lEQVR4AeyaA/DdThDHt3YHf7M2kttv7fZ1WNsd1e0YtUe13THrdlTbtm3bTK295+TyUz47etrL97KX27d7FBAQEBAQEBAQkCxl/+M+mIwF2Myn+QU/wVnehAWYzH2sfyh1YymM4ANwoth+jABTasSuzrvhxGe8265OqYlyhbEUToK2VBWgVEEWjMArOIkbv8AIykIpC/7i7XCSN96Ovyjl4Cq4A8el3eEqlDKgPV7D8cBeoz35j6oaJfLv8BSuV76s+rtgzoI58ZdVRoUwme9F/P4rVZX8xS4Y6XJ4BZoiG4UB2dCUV0T41b3yhcg/kC3CdrUqdjyjBlaFlXBAyjYIxoaN5FYUJ6pz2PAbR/5gVeJ3egjY1SgBUEMPQX5nVSIfyMTHtLl7YBejBLGL4YEm4RhlItOoxvrMqfpJeaqv30nVmEzDGzQBA5P2NVD6wnrT8V9cG3IfuQB7NX8lySQ8Wg7oLhGwq2n+RpNJcE0Mt4xcwsuEx6tkjvIl5HzZdcglqOtjEHF3MdRdDx57mbSMtpc5ATPFUHPIAzBXeJ1hTsBGMZQnabBqJ1bBRnMCLohtp5YnAmqJablIppD5i1XcyN5yl0wht/4S+cgDSuQTIfSWTCGT4DJ5yQPK5JWJeVoPoYdkClwUi7g2eYCqLQRcNidgvYjWDt5UN4TXDeYEzBBzNdfIRjbXv1TijgelwSy4K+5AVzIFSmr/oELkEhWSPq0yZA6+ZTqdxjUyCY/REupq7qqr0h9PIYnZIMJeV/72aQJAZuG1moT+lCTor13+VjINN/KsrBIKUyBrSMbJhCNeFLa4qF7YwhbyA1R2X1q0q4UrLTLIHzAuXHE3/sSCO4RrjfBU8osy2bEfThhbyVXiaMeG7xGcKZrf18ZqMg0OuwnWwQlrz1DS98Z29BaTCpUva/3zb66COdXf5cuqEE8RkoUAP54/YSPZa+Oh5B92NQ/arA/5rXinH/mH9Q9vdXX5F63iaAonBSVQFjWcXyTZH56BX+kDcFJWAqkCSRz2WMlF6QtwUkaCfCrtj3uhblPt6AfgpJAECRgjYxx4OswDUYQEPCylJciF3QeTMf/TkbMnX7apLTxatVR/k8R/Cabg9+3PMREAIADDQDShjBH5jBXAQrmPgjzC7wQEhLkQEBAQ7kMIoJOQ/UpC9nsJe3QVQu1+CO/vS5IkSQd2zX60cmQg4gAAAABJRU5ErkJggg==); display: inline-block; background-repeat: no-repeat; background-size: contain; } @media (min-width: 576px) { .td-sm-hidden { visibility: hidden !important; } .td-sm-visible { visibility: visible !important; } } @media (min-width: 768px) { .td-md-hidden { visibility: hidden !important; } .td-md-visible { visibility: visible !important; } } @media (min-width: 992px) { .td-lg-hidden { visibility: hidden !important; } .td-lg-visible { visibility: visible !important; } } @media (min-width: 1200px) { .td-xl-hidden { visibility: hidden !important; } .td-xl-visible { visibility: visible !important; } } "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":20,"character":19},"member":"None"}}]}],"members":{"keydownEnterEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5},"arguments":["keydown-enter-edit"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"allColumnsTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"fill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"pagination":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"pageIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"pageList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"searchFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"showFilterBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"remote":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"singleSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"idField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"hover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"striped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"bordered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"rowClassName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"cellClassName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"scorllableBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":87,"character":5},"arguments":["scorllableBody"]}]}],"tableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":88,"character":5},"arguments":["tableHeader"]}]}],"tablePager":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":5},"arguments":["tablePager"]}]}],"dtHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":90,"character":5},"arguments":["dtHeader"]}]}],"dtBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":91,"character":5},"arguments":["dtBody"]}]}],"dtLeftBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":92,"character":5},"arguments":["dtLeftBody"]}]}],"dtRightBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":93,"character":5},"arguments":["dtRightBody"]}]}],"dtLeftFixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":94,"character":5},"arguments":["dtLeftFixed"]}]}],"dtRightFixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":95,"character":5},"arguments":["dtRightFixed"]}]}],"pager":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":96,"character":5},"arguments":["pager"]}]}],"pageChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":5}}]}],"pageSizeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":99,"character":5}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":100,"character":5}}]}],"sortChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":5}}]}],"rowDblClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":102,"character":5}}]}],"selectRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":103,"character":5},"arguments":["on-select-row"]}]}],"cellClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":5},"arguments":["on-edit-grid"]}]}],"rowsRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":105,"character":5},"arguments":[{"__symbolic":"reference","module":"./datatable-row.component","name":"RowDirective","line":105,"character":21}]}]}],"columnsRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":106,"character":5},"arguments":[{"__symbolic":"reference","module":"./datatable-column.component","name":"ColumnDirective","line":106,"character":21}]}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":108,"character":5},"arguments":["footer"]}]}],"dragLine":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":111,"character":5},"arguments":["dragLine"]}]}],"resizableColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"perfectScrollbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":172,"character":5},"arguments":["perfectScrollbar"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./datatable.service","name":"DataTableService","line":175,"character":37},{"__symbolic":"reference","module":"../../common","name":"IdService","line":175,"character":74},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":175,"character":97}]}],"ngOnInit":[{"__symbolic":"method"}],"setBodyHeight":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getContainerOffset":[{"__symbolic":"method"}],"beginDrag":[{"__symbolic":"method"}],"moveDrag":[{"__symbolic":"method"}],"stopDrag":[{"__symbolic":"method"}],"resizeColumn":[{"__symbolic":"method"}],"resizeColGroup":[{"__symbolic":"method"}],"onScrollX":[{"__symbolic":"method"}],"onScrollY":[{"__symbolic":"method"}],"onPageChange":[{"__symbolic":"method"}],"onPageSizeChange":[{"__symbolic":"method"}],"onSearch":[{"__symbolic":"method"}],"onCheckAll":[{"__symbolic":"method"}],"selectRow":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"onCellClick":[{"__symbolic":"method"}],"onSelectRow":[{"__symbolic":"method"}],"addRows":[{"__symbolic":"method"}],"removeRows":[{"__symbolic":"method"}]}}}}]