@angular-generic-table/column-settings/bundles/angular-generic-table-column-settings.umd.min.js

angular-generic-table extension that makes it easy to toggle column visibility and reoder columns.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("ng2-dragula"),require("@angular/common"),require("@angular-generic-table/core")):"function"==typeof define&&define.amd?define("@angular-generic-table/column-settings",["exports","@angular/core","ng2-dragula","@angular/common","@angular-generic-table/core"],t):t((e["angular-generic-table"]=e["angular-generic-table"]||{},e["angular-generic-table"]["column-settings"]={}),e.ng.core,e.DragulaModule,e.ng.common,e.GenericTableModule)}(this,function(e,i,t,n,r){"use strict";var l=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e};function o(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,l=n.call(e),o=[];try{for(;(void 0===t||0<t--)&&!(i=l.next()).done;)o.push(i.value)}catch(a){r={error:a}}finally{try{i&&!i.done&&(n=l["return"])&&n.call(l)}finally{if(r)throw r.error}}return o}function a(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(o(arguments[t]));return e}var s=function(){function e(){}return e.prototype.getColumnOrder=function(e,t){return e.columnOrder<t.columnOrder?-1:e.columnOrder>t.columnOrder||"undefined"==typeof e.columnOrder?1:0},e.prototype.getEnabled=function(e){return!1!==e.enabled&&!0!==e.lockSettings?e:null},e.prototype.transform=function(e){return e.filter(this.getEnabled).sort(this.getColumnOrder)},e.decorators=[{type:i.Pipe,args:[{name:"gtColumn"}]}],e}(),g=function(){function e(e,t){var n=this;this.dragulaService=e,this.changeDetectorRef=t,this.gtHeaderClasses="px-3 pt-3 pb-2 table-bordered border-left-0 border-right-0 border-bottom-0 alert-info",this.gtWrapperClasses="px-3 pb-3 table-bordered border-left-0 border-right-0 border-top-0 alert-info",this.overlay=!0,this.gtDefaultTexts={title:"Columns",help:"Double click to toggle visibility, drag and drop to reorder."},this.gtTexts=this.gtDefaultTexts,this.gtEvent=new i.EventEmitter,this.active=!1,this.reordered=!1,this.extend=function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},e.drop.subscribe(function(e){e[0]===n.bagId&&n._onDrop(e.slice(1))})}return Object.defineProperty(e.prototype,"genericTable",{get:function(){return this._genericTable},set:function(e){this._genericTable=e},enumerable:!0,configurable:!0}),e.prototype.onResize=function(){this.offset=this._getTableHeadHeight(),this.heightAdjust=this._getColumnSettingsHeaderHeight()},e.prototype.ngOnInit=function(){this.bagId=this.generateId(),this.gtTexts=this.extend(this.gtDefaultTexts,this.gtTexts)},e.prototype.toggleColumnSettings=function(){var e=this;this.active=!this.active,this.active&&(this.offset=this._getTableHeadHeight(),setTimeout(function(){e.heightAdjust=e._getColumnSettingsHeaderHeight()},0))},e.prototype.toggleColumnVisibility=function(e){var t=this;e.visible="undefined"!=typeof e.visible&&!e.visible,this._genericTable.redraw(),this.gtEvent.emit({name:"gt-column-visibility-change",value:{column:l({},e),settings:a(this._genericTable.gtSettings)}}),setTimeout(function(){t.offset=t._getTableHeadHeight()},0)},e.prototype._onDrop=function(e){this.reordered=!0;for(var t=o(e,2),n=(t[0],t[1]),i={},r=0;r<n.children.length;r++)i[n.children[r].getAttribute("data-object-key")]=r;for(r=0;r<this._genericTable.gtSettings.length;r++)this._genericTable.gtSettings[r].columnOrder=i[this._genericTable.gtSettings[r].objectKey];this._genericTable.gtSettings=a(this._genericTable.gtSettings),this.changeDetectorRef.markForCheck(),this._genericTable.redraw(),this.gtEvent.emit({name:"gt-column-order-change",value:{settings:a(this._genericTable.gtSettings)}})},e.prototype._getTableHeadHeight=function(){try{return"THEAD"===this.elementView.elementRef.nativeElement.nextElementSibling.firstElementChild.firstElementChild.tagName?this.elementView.elementRef.nativeElement.nextElementSibling.firstElementChild.firstElementChild.offsetHeight+"px":"THEAD"===this.elementView.elementRef.nativeElement.nextElementSibling.firstElementChild.firstElementChild.firstElementChild.tagName?this.elementView.elementRef.nativeElement.nextElementSibling.firstElementChild.firstElementChild.firstElementChild.offsetHeight+"px":"0px"}catch(e){return"0px"}},e.prototype._getColumnSettingsHeaderHeight=function(){try{return this.gtColumnSettingsHeader.nativeElement.offsetHeight+"px"}catch(e){return"0px"}},e.prototype.generateId=function(){var n=(new Date).getTime();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=(n+16*Math.random())%16|0;return n=Math.floor(n/16),("x"===e?t:3&t|8).toString(16)})},e.decorators=[{type:i.Component,args:[{selector:"gt-column-settings",template:'\n        <ng-template #columnItem let-column let-index="index">\n            <span class="badge badge-secondary">{{index}}</span>\n            <span (dblclick)="toggleColumnVisibility(column)" class="badge" [ngClass]="{\'badge-success\':column.visible !== false, \'badge-danger\':column.visible === false}">{{genericTable.gtFields | gtProperty:column.objectKey:\'name\'}}</span>\n        </ng-template>\n        <div class="gt-column-settings">\n            <div class="gt-column-settings-panel"  *ngIf="active" [style.padding-top]="offset" [style.height]="\'calc(100% - \'+offset+\')\'">\n                <div #gtColumnSettingsHeader class="gt-column-settings-header border-bottom-0" [ngClass]="gtHeaderClasses">\n                    <button type="button" class="close" aria-label="Close" (click)="toggleColumnSettings()">\n                        <span aria-hidden="true">&times;</span>\n                    </button>\n                    <h6 class="gt-column-settings-title" *ngIf="gtTexts.title">{{gtTexts.title}}</h6>\n                    <small class="gt-column-settings-help form-text text-muted" *ngIf="gtTexts.help">{{gtTexts.help}}</small>\n                </div>\n                <div class="gt-column-settings-item-wrapper" [ngClass]="gtWrapperClasses" [dragula]=\'bagId\'  data-visible="true" [style.max-height]="\'calc(100% - \'+heightAdjust+\')\'">\n                    <div class="gt-column-settings-item pr-0 pr-sm-4" *ngFor="let i = index;let column of genericTable.gtSettings | gtColumn" [attr.data-object-key]="column.objectKey">\n                        <ng-template [ngTemplateOutlet]="gtColumnItem ? gtColumnItem:columnItem" [ngTemplateOutletContext]="{$implicit: column,index: this.reordered ? column.columnOrder+1:i+1, name: (genericTable.gtFields | gtProperty:column.objectKey:\'name\')}"></ng-template>\n                    </div>\n                </div>\n                <div class="gt-overlay" *ngIf="active && overlay" (click)="toggleColumnSettings()" [style.height]="\'calc(100% - -\'+offset+\')\'"></div>\n            </div>\n            <ng-template #genericTableElement [ngIf]="genericTable">\n                <ng-content></ng-content>\n            </ng-template>\n        </div>\n    '}]}],e.ctorParameters=function(){return[{type:t.DragulaService},{type:i.ChangeDetectorRef}]},e.propDecorators={genericTable:[{type:i.Input}],elementView:[{type:i.ViewChild,args:["genericTableElement"]}],gtColumnSettingsHeader:[{type:i.ViewChild,args:["gtColumnSettingsHeader"]}],gtHeaderClasses:[{type:i.Input}],gtWrapperClasses:[{type:i.Input}],overlay:[{type:i.Input}],gtColumnItem:[{type:i.Input}],gtTexts:[{type:i.Input}],gtEvent:[{type:i.Output}],onResize:[{type:i.HostListener,args:["window:resize",[]]}]},e}(),c=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[n.CommonModule,r.GenericTableModule,t.DragulaModule],declarations:[g,s],exports:[g,s]}]}],e}();e.ColumnSettingsModule=c,e.ɵa=s,e.ɵb=g,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-generic-table-column-settings.umd.min.js.map