ngx-easy-table
Version:
Angular easy table
2 lines • 51.7 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/common"),require("@angular/core"),require("@angular/cdk/drag-drop"),require("ngx-pagination"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/scrolling")):"function"==typeof define&&define.amd?define("ngx-easy-table",["exports","@angular/common","@angular/core","@angular/cdk/drag-drop","ngx-pagination","rxjs","rxjs/operators","@angular/cdk/scrolling"],n):n((e=e||self)["ngx-easy-table"]={},e.ng.common,e.ng.core,e.ng.cdk["drag-drop"],e.ngxPagination,e.rxjs,e.rxjs.operators,e.ng.cdk.scrolling)}(this,function(e,n,t,o,i,a,l,r){"use strict";var s=function(){return(s=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e}).apply(this,arguments)};function c(e,n){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var o,i,a=t.call(e),l=[];try{for(;(void 0===n||n-- >0)&&!(o=a.next()).done;)l.push(o.value)}catch(e){i={error:e}}finally{try{o&&!o.done&&(t=a.return)&&t.call(a)}finally{if(i)throw i.error}}return l}function g(){for(var e=[],n=0;n<arguments.length;n++)e=e.concat(c(arguments[n]));return e}var d={TINY:"tiny",BIG:"big",NORMAL:"normal"},u={LIGHT:"light",DARK:"dark"},p={onPagination:"onPagination",onOrder:"onOrder",onGlobalSearch:"onGlobalSearch",onSearch:"onSearch",onClick:"onClick",onDoubleClick:"onDoubleClick",onCheckboxSelect:"onCheckboxSelect",onRadioSelect:"onRadioSelect",onCheckboxToggle:"onCheckboxToggle",onSelectAll:"onSelectAll",onInfiniteScrollEnd:"onInfiniteScrollEnd",onColumnResizeMouseDown:"onColumnResizeMouseDown",onColumnResizeMouseUp:"onColumnResizeMouseUp",onRowDrop:"onRowDrop",onRowCollapsedShow:"onRowCollapsedShow",onRowCollapsedHide:"onRowCollapsedHide",onRowContextMenu:"onRowContextMenu"};var h={rowContextMenuClicked:"rowContextMenuClicked",setInputValue:"setInputValue",toolPanelClicked:"toolPanelClicked",toggleRowIndex:"toggleRowIndex",toggleCheckbox:"toggleCheckbox",onGlobalSearch:"onGlobalSearch",setPaginationCurrentPage:"setPaginationCurrentPage",getPaginationCurrentPage:"getPaginationCurrentPage",getPaginationTotalItems:"getPaginationTotalItems",getNumberOfRowsPerPage:"getNumberOfRowsPerPage",getPaginationLastPage:"getPaginationLastPage",setPaginationRange:"setPaginationRange",setPaginationPreviousLabel:"setPaginationPreviousLabel",setPaginationNextLabel:"setPaginationNextLabel",setPaginationDisplayLimit:"setPaginationDisplayLimit",setTableClass:"setTableClass",setRowClass:"setRowClass",setCellClass:"setCellClass",setRowStyle:"setRowStyle",setCellStyle:"setCellStyle",sortBy:"sortBy"};var f={searchEnabled:!1,headerEnabled:!0,orderEnabled:!0,orderEventOnly:!1,paginationEnabled:!0,exportEnabled:!1,clickEvent:!0,selectRow:!1,selectCol:!1,selectCell:!1,rows:10,additionalActions:!1,serverPagination:!1,isLoading:!1,detailsTemplate:!1,groupRows:!1,paginationRangeEnabled:!0,collapseAllRows:!1,checkboxes:!1,radio:!1,resizeColumn:!1,fixedColumnWidth:!0,horizontalScroll:!1,draggable:!1,logger:!1,showDetailsArrow:!1,showContextMenu:!1,persistState:!1,paginationMaxSize:5,threeWaySort:!1,tableLayout:{style:d.NORMAL,theme:u.LIGHT,borderless:!1,hover:!0,striped:!1}},m=function(){function e(){}return e.config=f,e.decorators=[{type:t.Injectable}],e}();var x=function(){function e(){this.updateRange=new t.EventEmitter,this.ranges=[5,10,25,50,100],this.showRange=!1,this.screenReaderPaginationLabel="Pagination",this.screenReaderPageLabel="page",this.screenReaderCurrentLabel="You are on page",this.previousLabel="",this.nextLabel="",this.directionLinks=!0}return e.prototype.onClick=function(e){this.paginationRange&&!this.paginationRange.nativeElement.contains(e)&&(this.showRange=!1)},e.prototype.ngOnChanges=function(e){var n=e.config;n&&n.currentValue&&(this.selectedLimit=this.config.rows)},e.prototype.onPageChange=function(e){this.updateRange.emit({page:e,limit:this.selectedLimit})},e.prototype.changeLimit=function(e,n){n||(this.showRange=!this.showRange),this.selectedLimit=e,this.updateRange.emit({page:1,limit:e})},e.decorators=[{type:t.Component,args:[{selector:"pagination",template:'<div class="ngx-pagination-wrapper"\n [style.display]="config.paginationEnabled ? \'\' : \'none\'"\n [class.ngx-table__table--dark-pagination-wrapper]="config.tableLayout.theme === \'dark\'">\n <div class="ngx-pagination-steps">\n <pagination-template\n #paginationDirective="paginationApi"\n id="pagination-controls"\n [id]="id"\n [class.ngx-table__table--dark-pagination]="config.tableLayout.theme === \'dark\'"\n [maxSize]="config.paginationMaxSize || 5"\n (pageChange)="onPageChange($event)">\n <ul class="ngx-pagination"\n role="navigation"\n [attr.aria-label]="screenReaderPaginationLabel"\n [class.responsive]="true">\n <li class="pagination-previous" [class.disabled]="paginationDirective.isFirstPage()" *ngIf="directionLinks">\n <a tabindex="0" *ngIf="1 < paginationDirective.getCurrent()" (keyup.enter)="paginationDirective.previous()"\n (click)="paginationDirective.previous()"\n [attr.aria-label]="previousLabel + \' \' + screenReaderPageLabel">\n {{ previousLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf="paginationDirective.isFirstPage()">\n {{ previousLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>\n </span>\n </li>\n <li class="small-screen">\n {{ paginationDirective.getCurrent() }} / {{ paginationDirective.getLastPage() }}\n </li>\n <li [class.current]="paginationDirective.getCurrent() === page.value"\n [class.ellipsis]="page.label === \'...\'"\n *ngFor="let page of paginationDirective.pages">\n <a tabindex="0" (keyup.enter)="paginationDirective.setCurrent(page.value)"\n (click)="paginationDirective.setCurrent(page.value)"\n *ngIf="paginationDirective.getCurrent() !== page.value">\n <span class="show-for-sr">{{ screenReaderPageLabel }} </span>\n <span>{{ page.label }}</span>\n </a>\n <ng-container *ngIf="paginationDirective.getCurrent() === page.value">\n <span class="show-for-sr">{{ screenReaderCurrentLabel }} </span>\n <span>{{ page.label }}</span>\n </ng-container>\n </li>\n <li class="pagination-next" [class.disabled]="paginationDirective.isLastPage()" *ngIf="directionLinks">\n <a tabindex="0" *ngIf="!paginationDirective.isLastPage()" (keyup.enter)="paginationDirective.next()"\n (click)="paginationDirective.next()"\n [attr.aria-label]="nextLabel + \' \' + screenReaderPageLabel">\n {{ nextLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf="paginationDirective.isLastPage()">\n {{ nextLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>\n </span>\n </li>\n </ul>\n </pagination-template>\n </div>\n <div class="ngx-pagination-range"\n #paginationRange\n [class.ngx-table__table--dark-pagination-range]="config.tableLayout.theme === \'dark\'"\n *ngIf="config.paginationRangeEnabled">\n <div class="ngx-dropdown ngx-pagination-range-dropdown"\n id="rowAmount">\n <div class="ngx-btn-group">\n <div class="ngx-pagination-range-dropdown-button"\n (click)="showRange = !showRange">\n {{selectedLimit}} <i class="ngx-icon ngx-icon-arrow-down"></i>\n </div>\n <ul class="ngx-menu" *ngIf="showRange">\n <li class="ngx-pagination-range-dropdown-button-item"\n [class.ngx-pagination-range--selected]="limit === selectedLimit"\n (click)="changeLimit(limit, false)"\n *ngFor="let limit of ranges">\n <span>{{limit}}</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n</div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],e.propDecorators={paginationDirective:[{type:t.ViewChild,args:["paginationDirective",{static:!0}]}],paginationRange:[{type:t.ViewChild,args:["paginationRange",{static:!1}]}],pagination:[{type:t.Input}],config:[{type:t.Input}],id:[{type:t.Input}],updateRange:[{type:t.Output}],onClick:[{type:t.HostListener,args:["document:click",["$event.target"]]}]},e}();var b=function(){function e(){}return e.doGroupRows=function(e,n){var t=[];return a.from(e).pipe(l.groupBy(function(e){return e[n]}),l.flatMap(function(e){return e.pipe(l.reduce(function(e,n){return g(e,[n])},[]))})).subscribe(function(e){return t.push(e)}),t},e.decorators=[{type:t.Injectable}],e}(),w=function(){function e(){}return e.prototype.setRowClass=function(e){var n="#table > tbody > tr:nth-child("+e.row+")",t=document.querySelector(n);t&&t.classList.add(e.className)},e.prototype.setCellClass=function(e){var n="#table > tbody > tr:nth-child("+e.row+") > td:nth-child("+e.cell+")",t=document.querySelector(n);t&&t.classList.add(e.className)},e.prototype.setRowStyle=function(e){var n="#table > tbody > tr:nth-child("+e.row+")",t=document.querySelector(n);t&&(t.style[e.attr]=e.value)},e.prototype.setCellStyle=function(e){var n="#table > tbody > tr:nth-child("+e.row+") > td:nth-child("+e.cell+")",t=document.querySelector(n);t&&(t.style[e.attr]=e.value)},e.prototype.pinnedWidth=function(e,n){if(e)return 150*n+"px"},e.decorators=[{type:t.Injectable}],e}();var y=function(){function e(e,n,o){var i=this;this.cdr=e,this.scrollDispatcher=n,this.styleService=o,this.unsubscribe=new a.Subject,this.filterCount=-1,this.filteredCountSubject=new a.Subject,this.tableClass=null,this.grouped=[],this.isSelected=!1,this.page=1,this.count=0,this.sortState=new Map,this.sortKey=null,this.rowContextMenuPosition={top:null,left:null,value:null},this.sortBy={key:"",order:"asc"},this.selectedDetailsTemplateRowId=new Set,this.selectedCheckboxes=new Set,this.loadingHeight="30px",this.id="table",this.event=new t.EventEmitter,this.subscription=this.filteredCountSubject.pipe(l.takeUntil(this.unsubscribe)).subscribe(function(e){i.filterCount=e,i.cdr.detectChanges()})}return e.prototype.onContextMenuClick=function(e){this.contextMenu&&!this.contextMenu.nativeElement.contains(e)&&(this.rowContextMenuPosition={top:null,left:null,value:null})},e.prototype.ngOnInit=function(){this.columns||console.error("[columns] property required!"),this.configuration?this.config=this.configuration:this.config=m.config,this.limit=this.config.rows,this.groupRowsBy&&(this.grouped=b.doGroupRows(this.data,this.groupRowsBy)),this.doDecodePersistedState()},e.prototype.ngOnDestroy=function(){this.unsubscribe.next(),this.unsubscribe.complete()},e.prototype.ngAfterViewInit=function(){var e=this,n=this.config.infiniteScrollThrottleTime?this.config.infiniteScrollThrottleTime:200;this.scrollDispatcher.scrolled().pipe(l.takeUntil(this.unsubscribe),l.throttleTime(n),l.filter(function(n){return!!n&&e.viewPort&&e.viewPort.getRenderedRange().end===e.viewPort.getDataLength()})).subscribe(function(){e.emitEvent(p.onInfiniteScrollEnd,null)})},e.prototype.ngOnChanges=function(e){var n=e.configuration,t=e.data,o=e.pagination,i=e.groupRowsBy;if(this.toggleRowIndex=e.toggleRowIndex,n&&n.currentValue&&(this.config=n.currentValue),t&&t.currentValue&&this.doApplyData(t),o&&o.currentValue){var a=o.currentValue,l=a.count,r=a.limit,s=a.offset;this.count=l,this.limit=r,this.page=s}if(i&&i.currentValue&&(this.grouped=b.doGroupRows(this.data,this.groupRowsBy)),this.toggleRowIndex&&this.toggleRowIndex.currentValue){var c=this.toggleRowIndex.currentValue;this.collapseRow(c.index)}},e.prototype.orderBy=function(e){if((void 0===e.orderEnabled||e.orderEnabled)&&(this.sortKey=e.key,this.config.orderEnabled&&""!==this.sortKey)){this.setColumnOrder(this.sortKey),this.config.orderEventOnly||e.orderEventOnly?(this.sortBy.key="",this.sortBy.order=""):(this.sortBy.key=this.sortKey,this.sortBy.order=this.sortState.get(this.sortKey)),this.config.serverPagination||(this.data=g(this.data),this.sortBy=s({},this.sortBy));var n={key:this.sortKey,order:this.sortState.get(this.sortKey)};this.emitEvent(p.onOrder,n)}},e.prototype.onClick=function(e,n,t,o,i){if(this.config.selectRow&&(this.selectedRow=i),this.config.selectCol&&o&&(this.selectedCol=o),this.config.selectCell&&o&&(this.selectedRow=i,this.selectedCol=o),this.config.clickEvent){var a={event:e,row:n,key:t,rowId:i,colId:o};this.emitEvent(p.onClick,a)}},e.prototype.onDoubleClick=function(e,n,t,o,i){var a={event:e,row:n,key:t,rowId:i,colId:o};this.emitEvent(p.onDoubleClick,a)},e.prototype.onCheckboxSelect=function(e,n,t){var o={event:e,row:n,rowId:t};this.emitEvent(p.onCheckboxSelect,o)},e.prototype.onRadioSelect=function(e,n,t){var o={event:e,row:n,rowId:t};this.emitEvent(p.onRadioSelect,o)},e.prototype.onSelectAll=function(){this.isSelected=!this.isSelected,this.emitEvent(p.onSelectAll,this.isSelected)},e.prototype.onSearch=function(e){this.config.serverPagination||(this.term=e),this.emitEvent(p.onSearch,e)},e.prototype.onGlobalSearch=function(e){this.config.serverPagination||(this.globalSearchTerm=e),this.emitEvent(p.onGlobalSearch,e)},e.prototype.onPagination=function(e){this.page=e.page,this.limit=e.limit,this.emitEvent(p.onPagination,e)},e.prototype.toggleCheckbox=function(e){this.selectedCheckboxes.has(e)?this.selectedCheckboxes.delete(e):this.selectedCheckboxes.add(e)},e.prototype.collapseRow=function(e){this.selectedDetailsTemplateRowId.has(e)?(this.selectedDetailsTemplateRowId.delete(e),this.emitEvent(p.onRowCollapsedHide,e)):(this.selectedDetailsTemplateRowId.add(e),this.emitEvent(p.onRowCollapsedShow,e))},e.prototype.doDecodePersistedState=function(){if(this.config.persistState){var e=localStorage.getItem(p.onPagination),n=localStorage.getItem(p.onOrder),t=localStorage.getItem(p.onSearch);if(e&&this.onPagination(JSON.parse(e)),n){var o=JSON.parse(n),i=o.key,a=o.order;this.bindApi({type:h.sortBy,value:{column:i,order:a}})}t&&this.bindApi({type:h.setInputValue,value:JSON.parse(t)})}},e.prototype.isRowCollapsed=function(e){return!!this.config.collapseAllRows||this.selectedDetailsTemplateRowId.has(e)},Object.defineProperty(e.prototype,"isLoading",{get:function(){var e=document.getElementById(this.id);return e&&e.rows&&e.rows.length>3&&this.getLoadingHeight(e.rows),this.config.isLoading},enumerable:!0,configurable:!0}),e.prototype.getLoadingHeight=function(e){var n=this.config.searchEnabled?1:0,t=this.config.headerEnabled?1:0;this.loadingHeight=(e.length-n-t)*(e[3].offsetHeight-1)-2+"px"},Object.defineProperty(e.prototype,"arrowDefinition",{get:function(){return this.config.showDetailsArrow||void 0===this.config.showDetailsArrow},enumerable:!0,configurable:!0}),e.prototype.onRowContextMenu=function(e,n,t,o,i){if(this.config.showContextMenu){e.preventDefault();var a={event:e,row:n,key:t,rowId:i,colId:o};this.rowContextMenuPosition={top:e.y-10+"px",left:e.x-10+"px",value:a},this.emitEvent(p.onRowContextMenu,a)}},e.prototype.doApplyData=function(e){var n=this.columns.find(function(e){return!!e.orderBy});n?(this.sortState.set(this.sortKey,"asc"===n.orderBy?"desc":"asc"),this.orderBy(n)):this.data=g(e.currentValue)},e.prototype.onDrop=function(e){this.emitEvent(p.onRowDrop,e),o.moveItemInArray(this.data,e.previousIndex,e.currentIndex)},e.prototype.apiEvent=function(e){return this.bindApi(e)},e.prototype.bindApi=function(e){var n=this;switch(e.type){case h.rowContextMenuClicked:this.rowContextMenuPosition={top:null,left:null,value:null};break;case h.toolPanelClicked:break;case h.toggleRowIndex:this.collapseRow(e.value);break;case h.toggleCheckbox:this.toggleCheckbox(e.value);break;case h.setInputValue:this.config.searchEnabled&&e.value.forEach(function(e){var n=document.getElementById("search_"+e.key);n?n.value=e.value:console.error("Column '"+e.key+"' not available in the DOM. Have you misspelled a name?")}),this.onSearch(e.value),this.cdr.detectChanges();break;case h.onGlobalSearch:this.onGlobalSearch(e.value),this.cdr.detectChanges();break;case h.setRowClass:if(Array.isArray(e.value)){e.value.forEach(function(e){return n.styleService.setRowClass(e)});break}this.styleService.setRowClass(e.value),this.cdr.detectChanges();break;case h.setCellClass:if(Array.isArray(e.value)){e.value.forEach(function(e){return n.styleService.setCellClass(e)});break}this.styleService.setCellClass(e.value);break;case h.setRowStyle:if(Array.isArray(e.value)){e.value.forEach(function(e){return n.styleService.setRowStyle(e)});break}this.styleService.setRowStyle(e.value);break;case h.setCellStyle:if(Array.isArray(e.value)){e.value.forEach(function(e){return n.styleService.setCellStyle(e)});break}this.styleService.setCellStyle(e.value);break;case h.setTableClass:this.tableClass=e.value,this.cdr.detectChanges();break;case h.getPaginationTotalItems:return this.paginationComponent.paginationDirective.getTotalItems();case h.getPaginationCurrentPage:return this.paginationComponent.paginationDirective.getCurrent();case h.getPaginationLastPage:return this.paginationComponent.paginationDirective.getLastPage();case h.getNumberOfRowsPerPage:return this.paginationComponent.paginationDirective.isLastPage()?this.paginationComponent.paginationDirective.getTotalItems()%this.limit:this.limit;case h.setPaginationCurrentPage:this.paginationComponent.paginationDirective.setCurrent(e.value);break;case h.setPaginationRange:this.paginationComponent.ranges=e.value;break;case h.setPaginationPreviousLabel:this.paginationComponent.previousLabel=e.value;break;case h.setPaginationNextLabel:this.paginationComponent.nextLabel=e.value;break;case h.setPaginationDisplayLimit:this.paginationComponent.changeLimit(e.value,!0);break;case h.sortBy:var t={title:"",key:e.value.column,orderBy:e.value.order};this.orderBy(t),this.cdr.detectChanges()}},e.prototype.setColumnOrder=function(e){switch(this.sortState.get(e)){case"":case void 0:this.sortState.set(e,"desc");break;case"asc":this.config.threeWaySort?this.sortState.set(e,""):this.sortState.set(e,"desc");break;case"desc":this.sortState.set(e,"asc")}if(this.sortState.size>1){var n=this.sortState.get(e);this.sortState.clear(),this.sortState.set(e,n)}},e.prototype.emitEvent=function(e,n){this.event.emit({event:e,value:n}),this.config.persistState&&localStorage.setItem(e,JSON.stringify(n)),this.config.logger&&console.log({event:e,value:n})},e.decorators=[{type:t.Component,args:[{selector:"ngx-table",providers:[m,b,w],template:'<div class="ngx-container">\n <table [id]="id"\n [ngClass]="(tableClass === null || tableClass === \'\') ? \'ngx-table\' : tableClass"\n [class.ngx-table__table--tiny]="config.tableLayout.style === \'tiny\'"\n [class.ngx-table__table--normal]="config.tableLayout.style === \'normal\'"\n [class.ngx-table__table--big]="config.tableLayout.style === \'big\'"\n [class.ngx-table__table--borderless]="config.tableLayout.borderless"\n [class.ngx-table__table--dark]="config.tableLayout.theme === \'dark\'"\n [class.ngx-table__table--hoverable]="config.tableLayout.hover"\n [class.ngx-table__table--striped]="config.tableLayout.striped"\n [class.ngx-table__horizontal-scroll]="config.horizontalScroll && !isLoading">\n <thead\n [class.ngx-infinite-scroll-viewport-thead]="config.infiniteScroll"\n table-thead\n [config]="config"\n [sortKey]="sortKey"\n [sortState]="sortState"\n [selectAllTemplate]="selectAllTemplate"\n [filtersTemplate]="filtersTemplate"\n [additionalActionsTemplate]="additionalActionsTemplate"\n [columns]="columns"\n (selectAll)="onSelectAll()"\n (filter)="onSearch($event)"\n (order)="orderBy($event)"\n (event)="emitEvent($event.event, $event.value)"\n >\n </thead>\n <tbody *ngIf="data && !isLoading && !config.rowReorder">\n <ng-container *ngIf="rowTemplate">\n <ul class="ngx-table__table-row-context-menu"\n [ngStyle]="{\'position\': \'absolute\', \'top\': rowContextMenuPosition.top, \'left\': rowContextMenuPosition.left }"\n *ngIf="rowContextMenuPosition.top">\n <ng-container\n [ngTemplateOutlet]="rowContextMenu"\n [ngTemplateOutletContext]="{ $implicit: rowContextMenuPosition.value}">\n </ng-container>\n </ul>\n <ng-container *ngIf="!config.infiniteScroll">\n <ng-container *ngFor="let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index">\n <tr\n (click)="onClick($event, row, \'\', null, rowIndex)"\n #contextMenu\n (contextmenu)="onRowContextMenu($event, row, \'\', null, rowIndex)"\n (dblclick)="onDoubleClick($event, row, \'\', null, rowIndex)"\n [class.ngx-table__table-row--selected]="rowIndex === selectedRow && !config.selectCell">\n <ng-container\n [ngTemplateOutlet]="rowTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, index: rowIndex }">\n </ng-container>\n <td *ngIf="config.detailsTemplate">\n <span class="ngx-icon"\n *ngIf="arrowDefinition"\n [ngClass]="isRowCollapsed(rowIndex) ? \'ngx-icon-arrow-down\' : \'ngx-icon-arrow-right\'"\n (click)="collapseRow(rowIndex)">\n </span>\n </td>\n </tr>\n <tr\n *ngIf="(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows">\n <td [attr.colspan]="columns.length + 1">\n <ng-container\n [ngTemplateOutlet]="detailsTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, index: rowIndex }">\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <cdk-virtual-scroll-viewport\n itemSize="50"\n *ngIf="config.infiniteScroll"\n class="ngx-infinite-scroll-viewport">\n <ng-container *cdkVirtualFor="let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject;\n let rowIndex = index">\n <tr\n (click)="onClick($event, row, \'\', null, rowIndex)"\n #contextMenu\n (contextmenu)="onRowContextMenu($event, row, \'\', null, rowIndex)"\n (dblclick)="onDoubleClick($event, row, \'\', null, rowIndex)"\n [class.ngx-table__table-row--selected]="rowIndex === selectedRow && !config.selectCell">\n <ng-container\n [ngTemplateOutlet]="rowTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, index: rowIndex }">\n </ng-container>\n <td *ngIf="config.detailsTemplate">\n <span class="ngx-icon"\n *ngIf="arrowDefinition"\n [ngClass]="isRowCollapsed(rowIndex) ? \'ngx-icon-arrow-down\' : \'ngx-icon-arrow-right\'"\n (click)="collapseRow(rowIndex)">\n </span>\n </td>\n </tr>\n <tr\n *ngIf="(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows">\n <td [attr.colspan]="columns.length + 1">\n <ng-container\n [ngTemplateOutlet]="detailsTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, index: rowIndex }">\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf="!rowTemplate && !config.groupRows">\n <ul class="ngx-table__table-row-context-menu"\n [ngStyle]="{\'position\': \'absolute\', \'top\': rowContextMenuPosition.top, \'left\': rowContextMenuPosition.left }"\n *ngIf="rowContextMenuPosition.top">\n <ng-container\n [ngTemplateOutlet]="rowContextMenu"\n [ngTemplateOutletContext]="{ $implicit: rowContextMenuPosition.value}">\n </ng-container>\n </ul>\n <ng-container *ngIf="!config.infiniteScroll">\n <ng-container\n *ngFor="let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index">\n <tr [class.ngx-table__table-row--selected]="rowIndex === selectedRow && !config.selectCell">\n <td *ngIf="config.checkboxes">\n <label class="ngx-form-checkbox">\n <input type="checkbox"\n id="checkbox-{{rowIndex}}"\n [checked]="isSelected || selectedCheckboxes.has(rowIndex)"\n (change)="onCheckboxSelect($event, row, rowIndex)">\n <em class="ngx-form-icon"></em>\n </label>\n </td>\n <td *ngIf="config.radio">\n <label>\n <input type="radio"\n id="radio-{{rowIndex}}"\n name="radio"\n (change)="onRadioSelect($event, row, rowIndex)">\n </label>\n </td>\n <ng-container *ngFor="let column of columns; let colIndex = index">\n <td (click)="onClick($event, row, column.key, colIndex, rowIndex)"\n #contextMenu\n (contextmenu)="onRowContextMenu($event, row, column.key, colIndex, rowIndex)"\n (dblclick)="onDoubleClick($event, row, column.key, colIndex, rowIndex)"\n [class.pinned-left]="column.pinned"\n [ngClass]="column.cssClass ? column.cssClass.name : \'\'"\n [style.left]="styleService.pinnedWidth(column.pinned, colIndex)"\n [class.ngx-table__table-col--selected]="colIndex === selectedCol && !config.selectCell"\n [class.ngx-table__table-cell--selected]="colIndex === selectedCol && rowIndex === selectedRow && !config.selectCol && !config.selectRow"\n >\n <div *ngIf="!column.cellTemplate">{{ row | render:column.key }}</div>\n <ng-container\n *ngIf="column.cellTemplate"\n [ngTemplateOutlet]="column.cellTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, rowIndex: rowIndex }">\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf="config.additionalActions || config.detailsTemplate">\n <span class="ngx-icon"\n *ngIf="arrowDefinition"\n [ngClass]="isRowCollapsed(rowIndex) ? \'ngx-icon-arrow-down\' : \'ngx-icon-arrow-right\'"\n (click)="collapseRow(rowIndex)">\n </span>\n </td>\n </tr>\n <tr\n *ngIf="(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows">\n <td *ngIf="config.checkboxes || config.radio"></td>\n <td [attr.colspan]="columns.length + 1">\n <ng-container\n [ngTemplateOutlet]="detailsTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, index: rowIndex }">\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n \x3c!-- infinite scroll --\x3e\n <cdk-virtual-scroll-viewport\n itemSize="50"\n *ngIf="config.infiniteScroll"\n class="ngx-infinite-scroll-viewport">\n <ng-container\n *cdkVirtualFor="let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject;\n let rowIndex = index">\n <tr [class.ngx-table__table-row--selected]="rowIndex === selectedRow && !config.selectCell">\n <td *ngIf="config.checkboxes">\n <label class="ngx-form-checkbox">\n <input type="checkbox"\n id="checkbox-infinite-scroll-{{rowIndex}}"\n [checked]="isSelected || selectedCheckboxes.has(rowIndex)"\n (change)="onCheckboxSelect($event, row, rowIndex)">\n <em class="ngx-form-icon"></em>\n </label>\n </td>\n <td *ngIf="config.radio">\n <label>\n <input type="radio"\n id="radio-infinite-scroll-{{rowIndex}}"\n name="radio"\n (change)="onRadioSelect($event, row, rowIndex)">\n </label>\n </td>\n <ng-container *ngFor="let column of columns; let colIndex = index">\n <td (click)="onClick($event, row, column.key, colIndex, rowIndex)"\n #contextMenu\n (contextmenu)="onRowContextMenu($event, row, column.key, colIndex, rowIndex)"\n (dblclick)="onDoubleClick($event, row, column.key, colIndex, rowIndex)"\n [class.pinned-left]="column.pinned"\n [ngClass]="column.cssClass ? column.cssClass.name : \'\'"\n [style.left]="styleService.pinnedWidth(column.pinned, colIndex)"\n [class.ngx-table__table-col--selected]="colIndex === selectedCol && !config.selectCell"\n [class.ngx-table__table-cell--selected]="colIndex === selectedCol && rowIndex === selectedRow && !config.selectCol && !config.selectRow"\n >\n <div *ngIf="!column.cellTemplate">{{ row | render:column.key }}</div>\n <ng-container\n *ngIf="column.cellTemplate"\n [ngTemplateOutlet]="column.cellTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, rowIndex: rowIndex }">\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf="config.additionalActions || config.detailsTemplate">\n <span class="ngx-icon"\n *ngIf="arrowDefinition"\n [ngClass]="isRowCollapsed(rowIndex) ? \'ngx-icon-arrow-down\' : \'ngx-icon-arrow-right\'"\n (click)="collapseRow(rowIndex)">\n </span>\n </td>\n </tr>\n <tr\n *ngIf="(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows">\n <td *ngIf="config.checkboxes || config.radio"></td>\n <td [attr.colspan]="columns.length + 1">\n <ng-container\n [ngTemplateOutlet]="detailsTemplate"\n [ngTemplateOutletContext]="{ $implicit: row, index: rowIndex }">\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf="!rowTemplate && config.groupRows">\n <ng-container\n *ngFor="let group of grouped | sort:sortBy:config | search:term:filteredCountSubject:config | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index">\n <tr>\n <ng-container *ngIf="!groupRowsHeaderTemplate">\n <td [attr.colspan]="columns.length">\n <div>{{group[0][groupRowsBy]}} ({{group.length}})</div>\n </td>\n </ng-container>\n <ng-container\n *ngIf="groupRowsHeaderTemplate"\n [ngTemplateOutlet]="groupRowsHeaderTemplate"\n [ngTemplateOutletContext]="{\n total: group.length,\n key: groupRowsBy,\n value: group[0] ? group[0][groupRowsBy] : \'\',\n group: group,\n index: rowIndex\n }">\n </ng-container>\n <td>\n <span class="ngx-icon"\n *ngIf="arrowDefinition"\n [ngClass]="isRowCollapsed(rowIndex) ? \'ngx-icon-arrow-down\' : \'ngx-icon-arrow-right\'"\n (click)="collapseRow(rowIndex)">\n </span>\n </td>\n </tr>\n <ng-container *ngIf="selectedDetailsTemplateRowId.has(rowIndex)">\n <tr *ngFor="let row of group">\n <td *ngFor="let column of columns">\n {{ row | render:column.key }}\n \x3c!-- TODO allow users to add groupRowsTemplateRef --\x3e\n </td>\n <td></td>\n </tr>\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody *ngIf="data && !config.isLoading && config.rowReorder"\n class="ngx-draggable-row-area"\n cdkDropList\n (cdkDropListDropped)="onDrop($event)">\n <ng-container *ngIf="!rowTemplate && !config.groupRows">\n <ng-container\n *ngFor="let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index">\n <tr class="ngx-draggable-row" cdkDrag cdkDragLockAxis="y">\n <td *ngIf="config.checkboxes">\n <label class="ngx-form-checkbox">\n <input type="checkbox"\n id="checkbox-draggable-{{rowIndex}}"\n [checked]="isSelected || selectedCheckboxes.has(rowIndex)"\n (change)="onCheckboxSelect($event, row, rowIndex)">\n <em class="ngx-form-icon"></em>\n </label>\n </td>\n <td *ngIf="config.radio">\n <label>\n <input type="radio"\n id="radio-draggable-{{rowIndex}}"\n name="radio"\n (change)="onRadioSelect($event, row, rowIndex)">\n </label>\n </td>\n <ng-container *ngFor="let column of columns; let colIndex = index">\n <td (click)="onClick($event, row, column.key, colIndex, rowIndex)"\n (dblclick)="onDoubleClick($event, row, column.key, colIndex, rowIndex)"\n [class.ngx-table__table-col--selected]="colIndex === selectedCol && !config.selectCell"\n [class.ngx-table__table-cell--selected]="colIndex === selectedCol && rowIndex === selectedRow && !config.selectCol && !config.selectRow"\n >\n <div>{{ row | render:column.key }}</div>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody *ngIf="filterCount === 0">\n <tr class="ngx-table__body-empty">\n <ng-container\n *ngIf="noResultsTemplate"\n [ngTemplateOutlet]="noResultsTemplate">\n </ng-container>\n <td [attr.colspan]="columns && columns.length + 1" *ngIf="!noResultsTemplate">\n <div class="ngx-table__table-no-results">\n No results\n </div>\n </td>\n </tr>\n </tbody>\n <tbody *ngIf="isLoading">\n <tr class="ngx-table__body-loading">\n <ng-container\n *ngIf="loadingTemplate"\n [ngTemplateOutlet]="loadingTemplate">\n </ng-container>\n <td [attr.colspan]="columns && columns.length + 1" *ngIf="!loadingTemplate">\n <div [style.height]="loadingHeight"\n class="ngx-table__table-loader-wrapper">\n <div class="ngx-table__table-loader"></div>\n </div>\n </td>\n </tr>\n </tbody>\n <tfoot *ngIf="summaryTemplate">\n <tr>\n <ng-container\n [ngTemplateOutlet]="summaryTemplate"\n [ngTemplateOutletContext]="{ total: data.length, limit: limit, page: page }">\n </ng-container>\n </tr>\n </tfoot>\n </table>\n <pagination\n [attr.id]="\'pagination\' + id"\n [id]="id"\n #paginationComponent\n [config]="config"\n [pagination]="pagination"\n (updateRange)="onPagination($event)">\n </pagination>\n</div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],e.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:r.ScrollDispatcher},{type:w}]},e.propDecorators={configuration:[{type:t.Input}],data:[{type:t.Input}],pagination:[{type:t.Input}],groupRowsBy:[{type:t.Input}],id:[{type:t.Input}],toggleRowIndex:[{type:t.Input}],detailsTemplate:[{type:t.Input}],summaryTemplate:[{type:t.Input}],groupRowsHeaderTemplate:[{type:t.Input}],filtersTemplate:[{type:t.Input}],selectAllTemplate:[{type:t.Input}],noResultsTemplate:[{type:t.Input}],loadingTemplate:[{type:t.Input}],additionalActionsTemplate:[{type:t.Input}],rowContextMenu:[{type:t.Input}],columns:[{type:t.Input}],event:[{type:t.Output}],rowTemplate:[{type:t.ContentChild,args:[t.TemplateRef,{static:!0}]}],paginationComponent:[{type:t.ViewChild,args:["paginationComponent",{static:!1}]}],contextMenu:[{type:t.ViewChild,args:["contextMenu",{static:!1}]}],viewPort:[{type:t.ViewChild,args:[r.CdkVirtualScrollViewport,{static:!1}]}],onContextMenuClick:[{type:t.HostListener,args:["document:click",["$event.target"]]}]},e}();var v=function(){function e(){this.update=new t.EventEmitter}return e.prototype.unifyKey=function(e){return e.replace(".","_")},e.prototype.onSearch=function(e){this.update.emit([{value:e.value,key:this.column.key}])},e.decorators=[{type:t.Component,args:[{selector:"table-header",template:'<label for="search_{{ unifyKey(column.key) }}">\n <input type="text"\n id="search_{{ unifyKey(column.key) }}"\n aria-label="Search"\n placeholder="{{ column.placeholder ? column.placeholder : column.title }}"\n class="ngx-table__header-search"\n #input\n (input)="onSearch(input)"\n >\n</label>\n'}]}],e.propDecorators={column:[{type:t.Input}],update:[{type:t.Output}]},e}();var C=function(){function e(){}return e.prototype.transform=function(e,n,t){if(t.next(0),void 0!==e){if(void 0===n||0===Object.keys(n).length||""===n)return t.next(e.length),e;var o=e.filter(function(e){var t=JSON.stringify(Object.values(e));return n.split(",").some(function(e){return t.toLocaleLowerCase().indexOf(e.trim().toLocaleLowerCase())>-1})});return t.next(o.length),o}},e.decorators=[{type:t.Pipe,args:[{name:"global"}]}],e}(),I=function(){function e(){}return e.getPath=function(e,n){return e.reduce(function(e,n){return e&&void 0!==e[n]?e[n]:null},n)},e.decorators=[{type:t.Injectable}],e}(),k=function(){function e(){}return e.prototype.transform=function(e,n){var t=n.split(".");return I.getPath(t,e)},e.decorators=[{type:t.Pipe,args:[{name:"render"}]}],e}(),S=function(){function e(){this.filters={}}return e.prototype.transform=function(e,n,t,o){var i=this;if(t.next(0),void 0!==e)return void 0===n?(t.next(e.length),e):(n.forEach(function(e){i.filters[e.key]=e.value.toString().toLocaleLowerCase(),0!==Object.keys(e).length&&""!==e.value||delete i.filters[e.key]}),o&&o.groupRows?e.map(function(e){return i.filterGroup(e,t)}):this.filterGroup(e,t))},e.prototype.filterGroup=function(e,n){var t=this,o=e.filter(function(e){return Object.keys(t.filters).every(function(n){var o=n.split("."),i=I.getPath(o,e),a="object"==typeof i?JSON.stringify(i):i.toString().toLocaleLowerCase();return t.filters[n].split(",").some(function(e){return a.indexOf(e.trim())>-1})})});return n.next(o.length),o},e.decorators=[{type:t.Pipe,args:[{name:"search"}]}],e}();var R=function(){function e(){this.defaultArray=[]}return e.isNaN=function(e,n){return isNaN(parseFloat(e))||!isFinite(e)||isNaN(parseFloat(n))||!isFinite(n)},e.compare=function(n,t,o){var i=o.split("."),a=I.getPath(i,n),l=I.getPath(i,t),r=(a+"").toLowerCase(),s=(l+"").toLowerCase();return e.isNaN(a,l)?r.localeCompare(s):parseFloat(a)<parseFloat(l)?-1:parseFloat(a)>parseFloat(l)?1:0},e.prototype.transform=function(e,n,t){return 0===this.defaultArray.length&&(this.defaultArray=e),n.key&&""!==n.key?""===n.order?this.defaultArray:"asc"===n.order?this.sortAsc(e,n,t):this.sortDesc(e,n,t):e},e.prototype.sortAsc=function(n,t,o){return o&&o.groupRows?n.map(function(n){return n.sort(function(n,o){return e.compare(n,o,t.key)})}):n.sort(function(n,o){return e.compare(n,o,t.key)})},e.prototype.sortDesc=function(n,t,o){return o&&o.groupRows?n.map(function(n){return n.sort(function(n,o){return e.compare(o,n,t.key)})}):n.sort(function(n,o){return e.compare(o,n,t.key)})},e.decorators=[{type:t.Pipe,args:[{name:"sort"}]}],e}();var T=function(){function e(e){this.styleService=e,this.menuActive=!1,this.openedHeaderActionTemplate=null,this.onSelectAllBinded=this.onSelectAll.bind(this),this.filter=new t.EventEmitter,this.order=new t.EventEmitter,this.selectAll=new t.EventEmitter,this.event=new t.EventEmitter}return e.prototype.onClick=function(e){this.additionalActionMenu&&!this.additionalActionMenu.nativeElement.contains(e)&&(this.menuActive=!1)},e.prototype.getColumnDefinition=function(e){return e.searchEnabled||void 0===e.searchEnabled},e.prototype.orderBy=function(e){this.order.emit(e)},e.prototype.isOrderEnabled=function(e){var n=void 0===e.orderEnabled||!!e.orderEnabled;return this.config.orderEnabled&&n},e.prototype.columnDrop=function(e){o.moveItemInArray(this.columns,e.previousIndex,e.currentIndex)},e.prototype.onSearch=function(e){this.filter.emit(e)},e.prototype.getColumnWidth=function(e){return e.width?e.width:this.config.fixedColumnWidth?100/this.columns.length+"%":null},e.prototype.onSelectAll=function(){this.selectAll.emit()},e.prototype.onMouseDown=function(e,n){this.config.resizeColumn&&(this.th=n,this.startOffset=n.offsetWidth-e.pageX,this.event.emit({event:p.onColumnResizeMouseDown,value:e}))},e.prototype.onMouseMove=function(e){this.config.resizeColumn&&this.th&&this.th.style&&(this.th.style.width=this.startOffset+e.pageX+"px",this.th.style.cursor="col-resize",this.th.style["user-select"]="none")},e.prototype.onMouseUp=function(e){this.config.resizeColumn&&(this.event.emit({event:p.onColumnResizeMouseUp,value:e}),this.th.style.cursor="default",this.th=void 0)},e.prototype.showHeaderActionTemplateMenu=function(e){e.headerActionTemplate||console.error("Column [headerActionTemplate] property not defined"),this.openedHeaderActionTemplate!==e.key?this.openedHeaderActionTemplate=e.key:this.openedHeaderActionTemplate=null},e.prototype.showMenu=function(){this.additionalActionsTemplate||console.error("[additionalActionsTemplate] property not defined"),this.menuActive=!this.menuActive},e.decorators=[{type:t.Component,args:[{selector:"[table-thead]",template:'<tr class="ngx-table__header" *ngIf="config.headerEnabled && !config.columnReorder">\n <th *ngIf="config.checkboxes || config.radio" [style.width]="\'3%\'">\n <ng-container\n *ngIf="selectAllTemplate && config.checkboxes"\n [ngTemplateOutlet]="selectAllTemplate"\n [ngTemplateOutletContext]="{ $implicit: onSelectAllBinded }">\n </ng-container>\n <label class="ngx-form-checkbox"\n for="selectAllCheckboxes"\n *ngIf="!selectAllTemplate && config.checkboxes">\n <input type="checkbox" id="selectAllCheckboxes" (change)="onSelectAll()">\n <em class="ngx-form-icon" id="selectAllCheckbox"></em>\n </label>\n </th>\n <ng-container *ngFor="let column of columns; let colIndex = index; let last = last">\n <th class="ngx-table__header-cell"\n [class.pinned-left]="column.pinned"\n [ngClass]="column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : \'\'"\n [style.left]="styleService.pinnedWidth(column.pinned, colIndex)"\n #th\n [style.width]="getColumnWidth(column)"\n (mousedown)="onMouseDown($event, th)"\n (mouseup)="onMouseUp($event)"\n (mousemove)="onMouseMove($event)">\n <div (click)="orderBy(column)" style="display: inline" [class.pointer]="isOrderEnabled(column)">\n <div class="ngx-table__header-title">{{ column.title }}<span> </span>\n <em class="ngx-icon ngx-icon-pin" *ngIf="column.pinned"></em>\n <div [style.display]="config.orderEnabled ? \'inline\' : \'none\' ">\n <em *ngIf="sortKey === column.key && this.sortState.get(sortKey) === \'asc\'"\n class="ngx-icon ngx-icon-arrow-up">\n </em>\n <em *ngIf="sortKey === column.key && this.sortState.get(sortKey) === \'desc\'"\n class="ngx-icon ngx-icon-arrow-down">\n </em>\n </div>\n </div>\n </div>\n <div class="ngx-dropdown"\n *ngIf="!!column.headerActionTemplate">\n <a class="ngx-btn ngx-btn-link" (click)="showHeaderActionTemplateMenu(column)">\n <span class="ngx-icon ngx-icon-more"></span>\n </a>\n <div class="ngx-menu ngx-table__table-menu"\n *ngIf="column.key === openedHeaderActionTemplate">\n <ng-container\n [ngTemplateOutlet]="column.headerActionTemplate">\n </ng-container>\n </div>\n </div>\n <div class="ngx-table__column-resizer" *ngIf="config.resizeColumn && !last"></div>\n </th>\n </ng-container>\n <th *ngIf="config.additionalActions || config.detailsTemplate || config.collapseAllRows || config.groupRows"\n class="ngx-table__header-cell-additional-actions">\n <div class="ngx-dropdown"\n #additionalActionMenu\n *ngIf="config.additionalActions">\n <a class="ngx-btn ngx-btn-link" (click)="showMenu()">\n <span class="ngx-icon ngx-icon-menu"></span>\n </a>\n <ul class="ngx-menu ngx-table__table-menu"\n *ngIf="menuActive">\n <ng-container\n *ngIf="additionalActionsTemplate"\n [ngTemplateOutlet]="additionalActionsTemplate">\n </ng-container>\n </ul>\n </div>\n </th>\n</tr>\n<tr class="ngx-table__header ngx-table__header--draggable"\n *ngIf="config.headerEnabled && config.columnReorder"\n cdkDropList\n cdkDropListOrientation="horizontal"\n (cdkDropListDropped)="columnDrop($event)"\n>\n <th [style.width]="\'3%\'">\n <ng-container\n *ngIf="selectAllTemplate && config.checkboxes"\n [ngTemplateOutlet]="selectAllTemplate"\n [ngTemplateOutletContext]="{ $implicit: onSelectAllBinded }">\n </ng-container>\n <label class="ngx-form-checkbox"\n for="selectAllCheckboxes"\n *ngIf="!selectAllTemplate && config.checkboxes">\n <input type="checkbox" id="selectAllCheckboxesDrag" (change)="onSelectAll()">\n <em class="ngx-form-icon" id="selectAllCheckboxDrag"></em>\n </label>\n </th>\n <ng-container *ngFor="let column of columns; let colIndex = index; let last = last">\n <th class="ngx-table__header-cell ngx-table__header-cell--draggable"\n cdkDragLockAxis="x"\n cdkDrag\n [class.pinned-left]="column.pinned"\n [ngClass]="column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : \'\'"\n [style.left]="styleService.pinnedWidth(column.pinned, colIndex)"\n #th\n [style.width]="getColumnWidth(column)"\n (mousedown)="onMouseDown($event, th)"\n (mouseup)="onMouseUp($event)"\n (mousemove)="onMouseMove($event)">\n <div (click)="orderBy(column)" style="display: inline"\n cdkDragHandle\n [class.pointer]="isOrderEnabled(column)">\n <div class="ngx-table__header-title">{{ column.title }}<span> </span>\n <em class="ngx-icon ngx-icon-pin" *ngIf="column.pinned"></em>\n <div [style.display]="config.orderEnabled ? \'inline\' : \'none\' ">\n <em *ngIf="sortKey === column.key && this.sortState.get(sortKey) === \'asc\'"\n class="ngx-icon ngx-icon-arrow-up">\n </em>\n <em *ngIf="sortKey === column.key && this.sortState.get(sortKey) === \'desc\'"\n class="ngx-icon ngx-icon-arrow-down">\n </em>\n </div>\n </div>\n </div>\n <div class="ngx-dropdown"\n *ngIf="!!column.headerActionTemplate">\n <a class="ngx-btn ngx-btn-link" (click)="showHeaderActionTemplateMenu(column)">\n <span class="ngx-icon ngx-icon-more"></span>\n </a>\n <div class="ngx-menu ngx-table__table-menu"\n *ngIf="column.key === openedHeaderActionTemplate">\n <ng-container\n [ngTemplateOutlet]="column.headerActionTemplate">\n </ng-container>\n </div>\n </div>\n <div class="ngx-table__column-resizer" *ngIf="config.resizeColumn && !last"></div>\n </th>\n </ng-container>\n <th *ngIf="config.additionalActions || config.detailsTemplate || config.collapseAllRows || config.groupRows"\n class="ngx-table__header-cell-additional-actions">\n <div class="ngx-dropdown"\n #additionalActionMenu\n *ngIf="config.additionalActions">\n <a class="ngx-btn ngx-btn-link" (click)="showMenu()">\n <span class="ngx-icon ngx-icon-menu"></span>\n </a>\n <ul class="ngx-menu ngx-table__table-menu"\n *ngIf="menuActive">\n <ng-container\n *ngIf="additionalActionsTemplate"\n [ngTemplateOutlet]="additionalActionsTemplate">\n </ng-container>\n </ul>\n </div>\n </th>\n</tr>\n<tr *ngIf="config.searchEnabled && !filtersTemplate"\n class="ngx-table__sort-header">\n <th *ngIf="config.checkboxes || config.radio"></th>\n <ng-container *ngFor="let column of columns; let colIndex = index">\n <th\n [ngClass]="column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : \'\'"\n [class.pinned-left]="column.pinned"\n [style.left]="styleService.pinnedWidth(column.pinned, colIndex)">\n <table-header\n *ngIf="getColumnDefinition(column)"\n (update)="onSearch($event)"\n [column]="column">\n </table-header>\n </th>\n </ng-container>\n <th *ngIf="config.additionalActions || config.detailsTemplate"></th>\n</tr>\n<ng-container *ngIf="filtersTemplate">\n <tr>\n <ng-container [ngTemplateOutlet]="filtersTemplate">\n </ng-container>\n </tr>\n</ng-container>\n',providers:[w],styles:["\n .cdk-drag-preview {\n text-align: left;\n padding-top: 9px;\n padding-left: 4px;\n color: #50596c;\n border: 1px solid #e7e9ed;\n }\n "]}]}],e.ctorParameters=function(){return[{type:w}]},e.propDecorators={config:[{type:t.Input}],columns:[{type:t.Input}],sortKey:[{type:t.Input}],sortState:[{type:t.Input}],selectAllTemplate:[{type:t.Input}],filtersTemplate:[{type:t.Input}],additionalActionsTemplate:[{type:t.Input}],filter:[{type:t.Output}],order:[{type:t.Output}],selectAll:[{type:t.Output}],event:[{type:t.Output}],th:[{type:t.ViewChild,args:["th",{static:!1}]}],additionalActionMenu:[{type:t.ViewChild,args:["additionalActionMenu",{static:!1}]}],onClick:[{type:t.HostListener,args:["document:click",["$event.target"]]}]},e}();var P=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[y,v,x,T,S,k,C,R],imports:[n.CommonModule,i.NgxPaginationModule,o.DragDropModule,r.ScrollingModule],exports:[y]}]}],e}(),A=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,P],bootstrap:[y],exports:[y],providers:[]}]}],e}();e.API=h,e.DefaultConfig=f,e.Event=p,e.STYLE=d,e.THEME=u,e.TableModule=A,e.ɵa=m,e.ɵb=P,e.ɵc=y,e.ɵd=b,e.ɵe=w,e.ɵf=v,e.ɵg=x,e.ɵh=T,e.ɵi=S,e.ɵj=k,e.ɵk=C,e.ɵl=R,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-easy-table.umd.min.js.map