{"__symbolic":"module","version":4,"metadata":{"IColumn":{"__symbolic":"interface"},"IRowAction":{"__symbolic":"interface"},"TiGridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":11,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":13,"character":8}],"exports":[{"__symbolic":"reference","name":"ɵa"}],"providers":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":19,"character":8}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"ti-grid","template":"<table class=\"table table-striped table-bordered\">\n  <thead *ngIf=\"columns\">\n  <tr>\n    <th style=\"width: 50px\" *ngIf=\"checkbox\"></th>\n    <th *ngFor=\"let column of columns\">\n      <div class=\"column-options-toggle\" *ngIf=\"column.showColumnFilter\">\n        <i class=\"fal fa-align-right column-options-toggle-btn\" (click)=\"toggleColumnOptions(columnActions)\"></i>\n        <div class=\"column-options\" #columnActions>\n          <ul>\n            <li>\n              <div class=\"filter\">\n                <select [(ngModel)]=\"column.filterOperator\">\n                  <option value=\"has\">Contains</option>\n                  <option value=\"=\">Equal to</option>\n                  <option value=\"!=\">Not Equal to</option>\n                  <option value=\">\">Greater than</option>\n                  <option value=\">=\">GT or Equal</option>\n                  <option value=\"<\">Less than</option>\n                  <option value=\"<=\">LT or Equal</option>\n                </select>\n                <input [(ngModel)]=\"column.showColumnFilter\" placeholder=\"Filter by\"/>\n              </div>\n            </li>\n            <li>\n              <div class=\"items-check\" *ngFor=\"let item of columnValues(column)\">\n                <div *ngIf=\"column.excludes.indexOf(item) === -1; else emptyCheckbox\">\n                  <div (click)=\"include(column, item)\">\n                    <i class=\"fal fa-check-square\"></i>\n                    <span>{{ item }}</span>\n                  </div>\n                </div>\n                <ng-template  #emptyCheckbox>\n                  <div (click)=\"exclude(column, item)\">\n                    <i  class=\"fal fa-square\"></i>\n                    <span>{{ item }}</span>\n                  </div>\n                </ng-template>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div (click)=\"toggleColumnSort(column)\">\n        <i class=\"fal fa-sort-amount-down m-r-5\" *ngIf=\"column.sort == 'desc'\"></i>\n        <i class=\"fal fa-sort-amount-up m-r-5\" *ngIf=\"column.sort == 'asc'\"></i>\n        <span class=\"column-title\">{{ column.title }}</span>\n        <span class=\"filter-badge\" (click)=\"column.filterText = ''\" *ngIf=\"column.filterText\">\n                    <span *ngIf=\"['=','has'].indexOf(column.filterOperator) < 0\">\n                    {{column.filterOperator}}\n                    </span>\n                    {{ column.filterText }} &nbsp; <i class=\"fal fa-times\"></i>\n                    </span>\n        <span class=\"filter-badge\" (click)=\"column.excludes = []\" *ngIf=\"column.excludes.length > 0\">\n                    excludes {{ column.excludes.join(', ') }} &nbsp; <i class=\"fal fa-times\"></i>\n                    </span>\n      </div>\n    </th>\n  </tr>\n  </thead>\n  <tbody (click)=\"hideColumnOptions()\">\n  <tr>\n    <th *ngIf=\"checkbox\" class=\"text-center p-0 va-middle\">\n      <i class=\"fal fa-search\"></i>\n    </th>\n    <th *ngFor=\"let column of columns\" class=\"p-0\">\n      <input class=\"form-control clean-input\"\n             [ngModel]=\"column?.filterText\"\n             (ngModelChange)=\"searchColumn($event, column)\"  >\n    </th>\n  </tr>\n  <tr *ngIf=\"selectedRow\">\n    <td colspan=\"100%\">\n                <span *ngFor=\"let action of rowActions\"\n                      (click)=\"action.onClick(selectedRow); selectedRow = null\"\n                      class=\"m-r-20 pointer {{action.classes}}\">\n                <i [class]=\"action.icon\"></i> &nbsp; {{ action.title }}\n                </span>\n    </td>\n  </tr>\n  <ng-container *ngFor=\"let row of filteredRows\">\n    <tr>\n      <td class=\"text-center\" *ngIf=\"checkbox\">\n        <i class=\"fal fa-check-square pointer\" (click)=\"selectedRow = null\" *ngIf=\"selectedRow === row\"></i>\n        <i class=\"fal fa-square pointer\"  (click)=\"selectedRow = row\" *ngIf=\"selectedRow !== row\"></i>\n      </td>\n      <td\n              *ngFor=\"let column of columns\"\n              (click)=\"onCellClicked(row, column)\"\n              class=\"{{ column.classes }} {{ column.onClick ? 'pointer' : '' }} text-{{column.align}}\">\n        <div [innerHTML]=\"column.template(row[column.field], column, row)\">\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <tr *ngIf=\"filteredRows.length === 0\">\n    <td class=\"no-records\" colspan=\"100%\">\n      <div *ngIf=\"!this.rows\">\n        <i class=\"fal fa-2x fa-spin fa-spinner-third\"></i>\n      </div>\n      <div *ngIf=\"this.rows\">\n        <div class=\"fal fa-5x fa-compress-alt\"></div>\n        <div>\n          No records\n        </div>\n      </div>\n    </td>\n  </tr>\n  </tbody>\n  <tfoot>\n  <tr>\n    <td colspan=\"100%\">\n      <div class=\"page-index\">\n                    <span *ngFor=\"let pg of pages; let i = index\">\n                        <ng-container *ngIf=\"i > 0 && pages[i] - pages[i-1] > 1\">\n                            ...\n                        </ng-container>\n                        <span (click)=\"refreshGrid(pg)\" class=\"page-index-selector {{ currentPage == pg ? 'active' : ''}}\">{{ pg }}</span>\n                    </span>\n      </div>\n      <div>Showing {{ (totalCount == 0 && currentPage == 1) ? 0 : (currentPage - 1) * pageSize + 1}}-{{ currentPage * pageSize > totalCount ? totalCount : currentPage * pageSize}} of {{totalCount}}</div>\n    </td>\n  </tr>\n  </tfoot>\n</table>\n","styles":["thead th{cursor:pointer;vertical-align:top;background:#17aaba;color:#f1f1f1;position:relative}th .column-title{padding-right:30px}.column-options-toggle{opacity:.3;position:absolute;right:1em;top:.75em}th:hover .column-options-toggle{opacity:1}.column-options{position:absolute;right:0;top:100%;width:300px;opacity:1;color:#000000FF;border:1px solid #ddd;background:#fff;display:none;transition:all .4s ease-out;box-shadow:10px 17.321px 57px 0 rgba(0,0,0,.08)}li,ul{list-style:none;margin:0;padding:0}ul li{padding:.5em 1em;display:block;border-bottom:1px solid #ddd}ul li ul li:last-child{border-bottom:none}ul li:hover{background:#f4f4f4}ul li div.filter{display:flex;flex-wrap:nowrap;align-items:flex-start}ul li div.filter input,ul li div.filter select,ul li div.filter span{padding:.25rem .75rem;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:50%;display:inline-block}ul li div.filter span{width:auto}.items-check>div{padding:.25em;border-bottom:1px solid #e5e5e5}.items-check>div i{margin-right:.5em;font-size:1.2em}.items-check:last-child div{border-bottom:none}.m-r-20{margin-right:20px}.m-r-5{margin-right:5px}.m-r-10{margin-right:10px}.pointer{cursor:pointer}.no-records{text-align:center;color:#495057;padding:20px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.va-middle{vertical-align:middle}.p-0{padding:0}input.form-control.clean-input{border-radius:0;margin:0;width:100%;border:0;background:0 0}input.form-control.clean-input:active,input.form-control.clean-input:focus{box-shadow:none}.filter-badge{font-size:.7em;border-radius:2px;width:auto;display:inline-block;background:#333;color:#e4e4e4;padding:.25em .5em;margin-left:1em;max-width:150px}.page-index{float:right}.page-index .page-index-selector{cursor:pointer;padding:0 .5em;display:inline-block;text-align:center;border:1px solid transparent}.page-index .page-index-selector.active{border:1px solid #495057}.page-index .page-index-selector:hover{background:#e4e4e4}"]}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"rowActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"currentPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"checkbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"customPaging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"gridStateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":146,"character":5}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"totalCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":156,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"fetchCurrentPage":[{"__symbolic":"method"}],"columnValues":[{"__symbolic":"method"}],"applyColumnFilter":[{"__symbolic":"method"}],"applyColumnSort":[{"__symbolic":"method"}],"getSortedIndices":[{"__symbolic":"method"}],"hideColumnOptions":[{"__symbolic":"method"}],"onCellClicked":[{"__symbolic":"method"}],"include":[{"__symbolic":"method"}],"exclude":[{"__symbolic":"method"}],"searchColumn":[{"__symbolic":"method"}],"toggleColumnOptions":[{"__symbolic":"method"}],"toggleColumnSort":[{"__symbolic":"method"}],"refreshGrid":[{"__symbolic":"method"}]}}},"origins":{"IColumn":"./lib/ti-grid.interfaces","IRowAction":"./lib/ti-grid.interfaces","TiGridModule":"./lib/ti-grid.module","ɵa":"./lib/ti-grid.component"},"importAs":"ti-grid"}