ngx-mariem-datatable
Version:
Advanced table extension with sorting, filtering, paging and more... for Angular apps
884 lines (882 loc) • 94.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/common'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define('ngx-mariem-datatable', ['exports', '@angular/core', '@angular/animations', '@angular/common', '@angular/forms'], factory) :
(global = global || self, factory(global['ngx-mariem-datatable'] = {}, global.ng.core, global.ng.animations, global.ng.common, global.ng.forms));
}(this, (function (exports, core, animations, common, forms) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: lib/animations/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var customAnimation = animations.animation([
animations.style({
opacity: '{{opacity}}',
transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
}),
animations.animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style('*'))
], {
params: {
duration: '200ms',
delay: '0ms',
opacity: '0',
scale: '1',
x: '0',
y: '0',
z: '0'
}
});
/** @type {?} */
var Animations = [
animations.trigger('animate', [animations.transition('void => *', [animations.useAnimation(customAnimation)])]),
animations.trigger('animateStagger', [
animations.state('50', animations.style('*')),
animations.state('100', animations.style('*')),
animations.state('200', animations.style('*')),
animations.transition('void => 50', animations.query('@*', [
animations.stagger('50ms', [
animations.animateChild()
])
], { optional: true })),
animations.transition('void => 100', animations.query('@*', [
animations.stagger('100ms', [
animations.animateChild()
])
], { optional: true })),
animations.transition('void => 200', animations.query('@*', [
animations.stagger('200ms', [
animations.animateChild()
])
], { optional: true }))
]),
animations.trigger('fadeInOut', [
animations.state('0', animations.style({
display: 'none',
opacity: 0
})),
animations.state('1', animations.style({
display: 'block',
opacity: 1
})),
animations.transition('1 => 0', animations.animate('300ms ease-out')),
animations.transition('0 => 1', animations.animate('300ms ease-in'))
]),
animations.trigger('slideInOut', [
animations.state('0', animations.style({
height: '0px',
display: 'none'
})),
animations.state('1', animations.style({
height: '*',
display: 'block'
})),
animations.transition('1 => 0', animations.animate('300ms ease-out')),
animations.transition('0 => 1', animations.animate('300ms ease-in'))
]),
animations.trigger('slideIn', [
animations.transition('void => left', [
animations.style({
transform: 'translateX(100%)'
}),
animations.animate('300ms ease-in', animations.style({
transform: 'translateX(0)'
}))
]),
animations.transition('left => void', [
animations.style({
transform: 'translateX(0)'
}),
animations.animate('300ms ease-in', animations.style({
transform: 'translateX(-100%)'
}))
]),
animations.transition('void => right', [
animations.style({
transform: 'translateX(-100%)'
}),
animations.animate('300ms ease-in', animations.style({
transform: 'translateX(0)'
}))
]),
animations.transition('right => void', [
animations.style({
transform: 'translateX(0)'
}),
animations.animate('300ms ease-in', animations.style({
transform: 'translateX(100%)'
}))
]),
]),
animations.trigger('slideInLeft', [
animations.state('void', animations.style({
transform: 'translateX(-100%)',
display: 'none'
})),
animations.state('*', animations.style({
transform: 'translateX(0)',
display: 'flex'
})),
animations.transition('void => *', animations.animate('300ms')),
animations.transition('* => void', animations.animate('300ms'))
]),
animations.trigger('slideInRight', [
animations.state('void', animations.style({
transform: 'translateX(100%)',
display: 'none'
})),
animations.state('*', animations.style({
transform: 'translateX(0)',
display: 'flex'
})),
animations.transition('void => *', animations.animate('300ms')),
animations.transition('* => void', animations.animate('300ms'))
]),
animations.trigger('slideInTop', [
animations.state('void', animations.style({
transform: 'translateY(-100%)',
display: 'none'
})),
animations.state('*', animations.style({
transform: 'translateY(0)',
display: 'flex'
})),
animations.transition('void => *', animations.animate('300ms')),
animations.transition('* => void', animations.animate('300ms'))
]),
animations.trigger('slideInBottom', [
animations.state('void', animations.style({
transform: 'translateY(100%)',
display: 'none'
})),
animations.state('*', animations.style({
transform: 'translateY(0)',
display: 'flex'
})),
animations.transition('void => *', animations.animate('300ms')),
animations.transition('* => void', animations.animate('300ms'))
]),
animations.trigger('expandCollapse', [
animations.state('void', animations.style({
height: '0px'
})),
animations.state('*', animations.style({
height: '*'
})),
animations.transition('void => *', animations.animate('300ms ease-out')),
animations.transition('* => void', animations.animate('300ms ease-in'))
]),
// -----------------------------------------------------------------------------------------------------
// @ Router animations
// -----------------------------------------------------------------------------------------------------
animations.trigger('routerTransitionLeft', [
animations.transition('* => *', [
animations.query('content > :enter, content > :leave', [
animations.style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
animations.query('content > :enter', [
animations.style({
transform: 'translateX(100%)',
opacity: 0
})
], { optional: true }),
animations.sequence([
animations.group([
animations.query('content > :leave', [
animations.style({
transform: 'translateX(0)',
opacity: 1
}),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateX(-100%)',
opacity: 0
}))
], { optional: true }),
animations.query('content > :enter', [
animations.style({ transform: 'translateX(100%)' }),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateX(0%)',
opacity: 1
}))
], { optional: true })
]),
animations.query('content > :leave', animations.animateChild(), { optional: true }),
animations.query('content > :enter', animations.animateChild(), { optional: true })
])
])
]),
animations.trigger('routerTransitionRight', [
animations.transition('* => *', [
animations.query('content > :enter, content > :leave', [
animations.style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
animations.query('content > :enter', [
animations.style({
transform: 'translateX(-100%)',
opacity: 0
})
], { optional: true }),
animations.sequence([
animations.group([
animations.query('content > :leave', [
animations.style({
transform: 'translateX(0)',
opacity: 1
}),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateX(100%)',
opacity: 0
}))
], { optional: true }),
animations.query('content > :enter', [
animations.style({ transform: 'translateX(-100%)' }),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateX(0%)',
opacity: 1
}))
], { optional: true })
]),
animations.query('content > :leave', animations.animateChild(), { optional: true }),
animations.query('content > :enter', animations.animateChild(), { optional: true })
])
])
]),
animations.trigger('routerTransitionUp', [
animations.transition('* => *', [
animations.query('content > :enter, content > :leave', [
animations.style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
animations.query('content > :enter', [
animations.style({
transform: 'translateY(100%)',
opacity: 0
})
], { optional: true }),
animations.group([
animations.query('content > :leave', [
animations.style({
transform: 'translateY(0)',
opacity: 1
}),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateY(-100%)',
opacity: 0
}))
], { optional: true }),
animations.query('content > :enter', [
animations.style({ transform: 'translateY(100%)' }),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateY(0%)',
opacity: 1
}))
], { optional: true })
]),
animations.query('content > :leave', animations.animateChild(), { optional: true }),
animations.query('content > :enter', animations.animateChild(), { optional: true })
])
]),
animations.trigger('routerTransitionDown', [
animations.transition('* => *', [
animations.query('content > :enter, content > :leave', [
animations.style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
animations.query('content > :enter', [
animations.style({
transform: 'translateY(-100%)',
opacity: 0
})
], { optional: true }),
animations.sequence([
animations.group([
animations.query('content > :leave', [
animations.style({
transform: 'translateY(0)',
opacity: 1
}),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateY(100%)',
opacity: 0
}))
], { optional: true }),
animations.query('content > :enter', [
animations.style({ transform: 'translateY(-100%)' }),
animations.animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
transform: 'translateY(0%)',
opacity: 1
}))
], { optional: true })
]),
animations.query('content > :leave', animations.animateChild(), { optional: true }),
animations.query('content > :enter', animations.animateChild(), { optional: true })
])
])
]),
animations.trigger('routerTransitionFade', [
animations.transition('* => *', animations.group([
animations.query('content > :enter, content > :leave ', [
animations.style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
animations.query('content > :enter', [
animations.style({
opacity: 0
})
], { optional: true }),
animations.query('content > :leave', [
animations.style({
opacity: 1
}),
animations.animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
opacity: 0
}))
], { optional: true }),
animations.query('content > :enter', [
animations.style({
opacity: 0
}),
animations.animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)', animations.style({
opacity: 1
}))
], { optional: true }),
animations.query('content > :enter', animations.animateChild(), { optional: true }),
animations.query('content > :leave', animations.animateChild(), { optional: true })
]))
])
];
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-mariem-datatable.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxMariemDatatableComponent = /** @class */ (function () {
function NgxMariemDatatableComponent() {
// when row clicked
this.onRowClicked = new core.EventEmitter();
//when action clicked
this.onActionClicked = new core.EventEmitter();
//when link clicked
this.onlinkClicked = new core.EventEmitter();
//when Toggle All clicked
this.onToggleAllClicked = new core.EventEmitter();
//when Toggle clicked
this.onToggleClicked = new core.EventEmitter();
//toDisplay Small Cells
this.smallCells = false;
//to Hide actions in parent child row
this.hideParentAction = false;
//loading List
this.loadingList = false;
this.nbRows = 4;
this.hideTheader = false;
this.textalign = "left";
//Regroupping
this.regroupbylabel = "";
this.regroupbylist = [""];
this.regroupby = false;
this.display = [true];
this._datatable = [];
this.datatableChange = new core.EventEmitter();
//************server Side pagination///////////////////
this.numberOfRecords = 0; //required when serverSidePagination true
//required when serverSidePagination true
this.serverSidePagination = false;
this.startDisplay = new core.EventEmitter();
//************server Side pagination///////////////////////
//************server Side search///////////////////
this.serverSidesearch = false;
this.search = new core.EventEmitter();
this.displayedColomnList = [];
this._Actions = [];
//Empty list message
this.nothingToShowMessage = "Pas de résultats";
//pagination message
this.paginationmessag = "";
//if false first and last buttons will be hidden
this.showBoundaryLinks = true;
this._itemsPerPage = 10;
//limit number for page links in pager
this.maxSize = 5;
//if true datatable items should contain id & selected columns
this.checkboxes = false;
this.checkboxesMultiselect = true;
//set if show pagination or not
this.pagination = true;
// @Input() filterInside: boolean = false;
//******For PDF/Exel && CSV files ///
this.nameOnExtract = "Liste";
// @Input() showExtracttns: boolean = true;
//******For PDF/Exel && CSV files ///
this.Advancedfilter = true;
this.visibility = true;
this.datatableexist = false;
this.searchexist = false;
this._searchvalue = "";
this.startItem = 0;
this.endItem = 10;
this.dataChild = [];
this.dataChildRow = [];
this.filtreopen = true;
this.filters = [];
this.associations = [];
this.checkAll = false;
}
Object.defineProperty(NgxMariemDatatableComponent.prototype, "datatable", {
//data
set:
//data
/**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (value && this._datatable != value) {
if (this.regroupby && this.regroupbylabel) {
this.regroupbylist = [];
value.map((/**
* @param {?} el
* @return {?}
*/
function (el) {
if (_this.regroupbylist.indexOf(el[_this.regroupbylabel]) < 0)
_this.regroupbylist.push(el[_this.regroupbylabel]);
_this.display.push(true);
}));
}
// this._datatable = cloneDeep(value);
this._datatable = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMariemDatatableComponent.prototype, "displayedColomn", {
//************server Side search///////////////////////
//columns to display from datatable
set:
//************server Side search///////////////////////
//columns to display from datatable
/**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var searchexist = value.find((/**
* @param {?} el
* @return {?}
*/
function (el) {
return el.search == true;
}));
this.searchexist = searchexist ? true : false;
this.displayedColomnList = value.map((/**
* @param {?} el
* @return {?}
*/
function (el) {
return el;
}));
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMariemDatatableComponent.prototype, "Actions", {
get: /**
* @return {?}
*/
function () {
return this._Actions;
},
//list of actions
set:
//list of actions
/**
* @param {?} value
* @return {?}
*/
function (value) {
this._Actions = value;
this._Actions = value.map((/**
* @param {?} el
* @return {?}
*/
function (el) {
return el;
}));
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMariemDatatableComponent.prototype, "itemsPerPage", {
//maximum number of items per page. If value less than 1 will display all items on one page
set:
//maximum number of items per page. If value less than 1 will display all items on one page
/**
* @param {?} value
* @return {?}
*/
function (value) {
this._itemsPerPage = value;
// this.endItem = cloneDeep(value);
this.endItem = value;
this.startItem = 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMariemDatatableComponent.prototype, "searchvalue", {
get: /**
* @return {?}
*/
function () {
return this._searchvalue;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
// this._searchvalue = cloneDeep(value);
this._searchvalue = value;
this.refreshPagination();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgxMariemDatatableComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
NgxMariemDatatableComponent.prototype.checkAllClicked = /**
* @return {?}
*/
function () {
var _this = this;
// this._datatable = cloneDeep(
// this._datatable.map((el) => {
// el.selected = this.checkAll;
// return el;
// })
// );
this._datatable = this._datatable.map((/**
* @param {?} el
* @return {?}
*/
function (el) {
el.selected = _this.checkAll;
return el;
}));
this.datatableChanged();
};
/**
* @param {?} row
* @return {?}
*/
NgxMariemDatatableComponent.prototype.ckeckBoxClicked = /**
* @param {?} row
* @return {?}
*/
function (row) {
if (!this.checkboxesMultiselect) {
this._datatable = this._datatable.map((/**
* @param {?} el
* @return {?}
*/
function (el) {
if (el.selected && el.id != row.id) {
el.selected = false;
}
return el;
}));
}
/** @type {?} */
var allschecked = this._datatable.find((/**
* @param {?} el
* @return {?}
*/
function (el) { return !el.selected; }));
this.checkAll = allschecked ? false : true;
this.datatableChanged();
};
/**
* @return {?}
*/
NgxMariemDatatableComponent.prototype.datatableChanged = /**
* @return {?}
*/
function () {
this.datatableChange.emit(this._datatable);
};
/**
* @param {?} item
* @return {?}
*/
NgxMariemDatatableComponent.prototype.rowClicked = /**
* @param {?} item
* @return {?}
*/
function (item) {
this.onRowClicked.emit(item);
};
/**
* @param {?} event
* @return {?}
*/
NgxMariemDatatableComponent.prototype.actionClicked = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.onActionClicked.emit(event);
};
/**
* @param {?} data
* @return {?}
*/
NgxMariemDatatableComponent.prototype.sortAsc = /**
* @param {?} data
* @return {?}
*/
function (data) {
this._datatable.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) {
if (typeof a[data] == "number")
return a[data] - b[data];
/** @type {?} */
var item1 = a[data] ? a[data].toUpperCase() : "";
/** @type {?} */
var item2 = b[data] ? b[data].toUpperCase() : "";
if (item1 < item2) {
return -1;
}
if (item1 > item2) {
return 1;
}
return 0;
}));
};
/**
* @param {?} data
* @return {?}
*/
NgxMariemDatatableComponent.prototype.sortDesc = /**
* @param {?} data
* @return {?}
*/
function (data) {
this._datatable.sort((/**
* @param {?} b
* @param {?} a
* @return {?}
*/
function (b, a) {
if (typeof a[data] == "number")
return a[data] - b[data];
/** @type {?} */
var item1 = a[data] ? a[data].toUpperCase() : "";
/** @type {?} */
var item2 = b[data] ? b[data].toUpperCase() : "";
if (item1 < item2) {
return -1;
}
if (item1 > item2) {
return 1;
}
return 0;
}));
};
/**
* @param {?} title
* @return {?}
*/
NgxMariemDatatableComponent.prototype.sortBy = /**
* @param {?} title
* @return {?}
*/
function (title) {
/** @type {?} */
var data = title.data;
title.sorted = title.sorted ? !title.sorted : true;
this.sortByItem = title;
if (title.sorted) {
this.sortAsc(data);
}
else {
this.sortDesc(data);
}
};
/**
* @param {?} event
* @return {?}
*/
NgxMariemDatatableComponent.prototype.pageChanged = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.startItem = (event.page - 1) * event.itemsPerPage;
this.endItem = event.page * event.itemsPerPage;
if (this.serverSidePagination) {
this.startDisplay.emit(this.startItem);
}
};
/**
* @return {?}
*/
NgxMariemDatatableComponent.prototype.refreshPagination = /**
* @return {?}
*/
function () {
this.startItem = 0;
this.endItem = this._itemsPerPage;
if (this.serverSidePagination) {
this.startDisplay.emit(this.startItem);
}
};
/**
* @param {?} event
* @return {?}
*/
NgxMariemDatatableComponent.prototype.searchServerSide = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.searchvalue = event.target.value;
this.startItem = 0;
this.endItem = 10;
this.search.emit(this.searchvalue);
};
/**
* @param {?} event
* @return {?}
*/
NgxMariemDatatableComponent.prototype.filtersChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
// this.filters = cloneDeep(event.filters);
// this.associations = cloneDeep(event.associations);
this.filters = event.filters;
this.associations = event.associations;
if (this.filters.length == 0) {
this.filtreopen = !this.filtreopen;
}
};
NgxMariemDatatableComponent.decorators = [
{ type: core.Component, args: [{
selector: "ngx-mariem-datatable",
template: "<div\r\n id=\"ngx-datatable\"\r\n class=\"position-relative\"\r\n [style.text-align]=\"textalign\"\r\n>\r\n <div class=\"table-container table-responsive-sm\">\r\n <table class=\"table\" [@animateStagger]=\"{ value: '50' }\">\r\n <thead>\r\n <tr\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n *ngIf=\"!hideTheader\"\r\n >\r\n <th class=\"w-2rem\" *ngIf=\"checkboxes\">\r\n <span *ngIf=\"checkboxesMultiselect\" class=\"checkboxTemplate\">\r\n <input\r\n [(ngModel)]=\"checkAll\"\r\n (change)=\"checkAllClicked()\"\r\n [id]=\"'checkAll'\"\r\n class=\"w-0 field-checkbox\"\r\n type=\"checkbox\"\r\n [name]=\"'checkAll'\"\r\n />\r\n <label [for]=\"'checkAll'\"></label>\r\n </span>\r\n </th>\r\n <th\r\n class=\"p3\"\r\n [ngClass]=\"{\r\n 'bg-blue-light thsorted': title == sortByItem\r\n }\"\r\n *ngFor=\"let title of displayedColomnList\"\r\n >\r\n <span\r\n (click)=\"title.sort && !loadingList ? sortBy(title) : ''\"\r\n class=\"title-header p3 cursor-pointer\"\r\n [ngClass]=\"{\r\n sorting: title.sort && !loadingList && title != sortByItem,\r\n sorting_asc:\r\n title == sortByItem && title.sorted && !loadingList,\r\n sorting_desc:\r\n title == sortByItem && !title.sorted && !loadingList\r\n }\"\r\n >\r\n {{ title.value }}\r\n <!-- <i class=\"sortIcon material-icons\">\r\n {{\r\n title == sortByItem\r\n ? title.sorted && !loadingList\r\n ? \"keyboard_arrow_up\"\r\n : \"keyboard_arrow_down\"\r\n : \"\"\r\n }}\r\n </i> -->\r\n </span>\r\n </th>\r\n <th class=\"p3 action\" *ngFor=\"let action of Actions\">\r\n <span class=\"color-primary block p3 cursor-pointer\">\r\n {{ action.value }}\r\n </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngIf=\"loadingList\">\r\n <tr\r\n loading-rows\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n [displayedColomnList]=\"displayedColomnList\"\r\n [nbRows]=\"nbRows\"\r\n [Actions]=\"Actions\"\r\n [checkboxes]=\"checkboxes\"\r\n ></tr>\r\n <tr\r\n loading-rows\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n [displayedColomnList]=\"displayedColomnList\"\r\n [Actions]=\"Actions\"\r\n [checkboxes]=\"checkboxes\"\r\n ></tr>\r\n <tr\r\n loading-rows\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n [displayedColomnList]=\"displayedColomnList\"\r\n [Actions]=\"Actions\"\r\n [checkboxes]=\"checkboxes\"\r\n ></tr>\r\n <tr\r\n loading-rows\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n [displayedColomnList]=\"displayedColomnList\"\r\n [Actions]=\"Actions\"\r\n [checkboxes]=\"checkboxes\"\r\n ></tr>\r\n </ng-container>\r\n <ng-container *ngIf=\"!loadingList\">\r\n <ng-container\r\n *ngFor=\"let groupeby of regroupbylist; let gbIndex = index\"\r\n >\r\n <ng-container *ngIf=\"display[gbIndex]\">\r\n <tr\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n class=\"tr-small\"\r\n *ngIf=\"regroupby\"\r\n >\r\n <td\r\n (click)=\"display[gbIndex] = !display[gbIndex]\"\r\n [ngClass]=\"\r\n display[gbIndex]\r\n ? 'collapsed-group-opened'\r\n : 'collapsed-group-closed'\r\n \"\r\n class=\"collapsed-group\"\r\n [attr.colspan]=\"\r\n displayedColomnList.length +\r\n Actions.length +\r\n (checkboxes ? 1 : 0)\r\n \"\r\n >\r\n {{ groupeby }}\r\n </td>\r\n </tr>\r\n <ng-container\r\n *ngFor=\"\r\n let row of _datatable\r\n | grouppigBy\r\n : {\r\n groupeby: groupeby,\r\n regroupbylabel: regroupbylabel,\r\n regroupby: regroupby\r\n }\r\n | filterData\r\n : {\r\n searchvalue: searchvalue,\r\n displayedColomnList: displayedColomnList,\r\n serverSidesearch: serverSidesearch,\r\n filters: filters,\r\n associations: associations\r\n }\r\n | paginate\r\n : {\r\n startItem: startItem,\r\n endItem: pagination && !regroupby ? endItem : 'all',\r\n serverSidePagination: serverSidePagination\r\n };\r\n let rowindex = index\r\n \"\r\n >\r\n <tr\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n datatable-row\r\n [row]=\"row\"\r\n [displayedColomnList]=\"displayedColomnList\"\r\n [sortByItem]=\"sortByItem\"\r\n [Actions]=\"Actions\"\r\n [textalign]=\"textalign\"\r\n [checkboxes]=\"checkboxes\"\r\n (rowClicked)=\"rowClicked($event)\"\r\n (onActionClicked)=\"actionClicked($event)\"\r\n (onckeckBoxClicked)=\"ckeckBoxClicked($event)\"\r\n [class]=\"row.rowClass\"\r\n [ngClass]=\"{\r\n rowSelected: row.selected,\r\n 'tr-small': smallCells\r\n }\"\r\n (click)=\"rowClicked(row)\"\r\n ></tr>\r\n </ng-container>\r\n </ng-container>\r\n <tr\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n *ngIf=\"\r\n (\r\n _datatable\r\n | filterData\r\n : {\r\n searchvalue: searchvalue,\r\n displayedColomnList: displayedColomnList,\r\n\r\n serverSidesearch: serverSidesearch,\r\n filters: filters,\r\n associations: associations\r\n }\r\n ).length == 0\r\n \"\r\n class=\"odd\"\r\n >\r\n <td\r\n [style.background]=\"'#fff'\"\r\n valign=\"top\"\r\n [attr.colspan]=\"\r\n displayedColomnList.length +\r\n Actions.length +\r\n (checkboxes ? 1 : 0)\r\n \"\r\n class=\"dataTables_empty\"\r\n >\r\n {{ nothingToShowMessage }}\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n <!-- //pagination section -->\r\n\r\n <div\r\n *ngIf=\"pagination && !loadingList\"\r\n [@animate]=\"{ value: '*', params: { y: '100%' } }\"\r\n [attr.colspan]=\"\r\n displayedColomnList.length + Actions.length + (checkboxes ? 1 : 0)\r\n \"\r\n datatable-footer\r\n [totalItems]=\"\r\n serverSidePagination\r\n ? numberOfRecords\r\n : (\r\n _datatable\r\n | filterData\r\n : {\r\n searchvalue: searchvalue,\r\n displayedColomnList: displayedColomnList,\r\n serverSidesearch: serverSidesearch,\r\n filters: filters,\r\n associations: associations\r\n }\r\n )?.length\r\n \"\r\n [itemsPerPage]=\"_itemsPerPage\"\r\n [endItem]=\"endItem\"\r\n [startItem]=\"startItem\"\r\n [maxSize]=\"maxSize\"\r\n [showBoundaryLinks]=\"showBoundaryLinks\"\r\n (onpageChanged)=\"pageChanged($event)\"\r\n class=\"footer-table\"\r\n ></div>\r\n <!-- //pagination section -->\r\n </div>\r\n</div>\r\n",
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
animations: [Animations],
styles: ["@charset \"UTF-8\";#ngx-datatable{line-height:1.42857143;color:rgba(0,0,0,.87);font-size:.8rem;font-weight:400;background-color:#fdfdfd;box-shadow:.25rem .1875rem .3rem 0 #c5c5c585;overflow:auto}#ngx-datatable .w-2rem{width:2rem}#ngx-datatable .bg-light-datatable{background:#f6f8f9}#ngx-datatable .thsorted{border-radius:.75rem .75rem 0 0}#ngx-datatable .dropdown-item.active,#ngx-datatable .dropdown-item:active{color:#000!important;background-color:#fdfdfd!important}#ngx-datatable .actionitem{flex:1;border-right:.0625rem solid #dee2e6;display:flex;padding:.6875rem .625rem;opacity:.6}#ngx-datatable .action{text-align:center}#ngx-datatable .checkboxTemplate{display:flex;justify-content:left;width:1.125rem;margin:auto}#ngx-datatable .isParent{background-color:rgba(221,221,221,.75)!important}#ngx-datatable .datatableinfolist{float:left;text-align:left;padding:.5rem .75rem}#ngx-datatable .table{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);border-radius:.25rem;background:#ffff;border:none;margin-bottom:0;border-collapse:collapse;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;width:100%;color:#000}#ngx-datatable .table .searchInput{color:#000;background-image:url(img/search.png);background-position:99.1% center;background-repeat:no-repeat;font-size:.6875rem;font-weight:400;width:100%;outline:0;padding:0 .9375rem 0 .3125rem;border:.0625rem solid #ccc;height:1.125rem}#ngx-datatable .sorting_asc{background:url(img/sorting/sort_asc.png) 99.6% center no-repeat}#ngx-datatable .sorting_desc{background:url(img/sorting/sort_desc.png) 99.6% center no-repeat}#ngx-datatable .sorting{background:url(img/sorting/sort_both.png) 99.6% center no-repeat}#ngx-datatable .sorting,#ngx-datatable .sorting_asc,#ngx-datatable .sorting_desc{padding-right:.625rem!important;background-position:98% 50%}#ngx-datatable .sortIcon{font-size:1rem;color:#fff;background:#363636;border-radius:50%}#ngx-datatable .inputnumber{text-align:center}#ngx-datatable .inputnumber:focus{border:.0625rem solid;background:#fff!important}#ngx-datatable .linkValue{color:#428bca;cursor:pointer}#ngx-datatable .linkValue:hover{text-decoration:underline}#ngx-datatable th span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:99%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#ngx-datatable .icon:hover{opacity:.6}#ngx-datatable .p3{padding:.1875rem}#ngx-datatable .cursor-pointer{cursor:pointer}#ngx-datatable tr{height:1rem;min-height:1rem;border:.0625rem solid #dee2e6}#ngx-datatable tbody tr:hover{cursor:pointer;background:#c0c0c01f}#ngx-datatable .tr-small{height:1.75rem!important;min-height:1.75rem!important}#ngx-datatable .childDatatable{padding:.75rem!important;background:#fff}#ngx-datatable .childDatatable tr{height:1.375rem;min-height:1.375rem}#ngx-datatable .childDatatable td{padding:.1875rem .625rem;font-size:.625rem}#ngx-datatable .childDatatable .collapsed-group-closed:after,#ngx-datatable .childDatatable .collapsed-group-opened:after{left:1.25rem}#ngx-datatable .table-bordered-h td{border-bottom:none!important;border-top:none!important}#ngx-datatable .table-bordered-white tbody{background:#fff}#ngx-datatable .table-bordered-white td{border-top:none!important}#ngx-datatable .collapsed-group{text-align:left;padding-left:1.25rem;cursor:pointer;background:#f2f2f2;position:relative;box-shadow:.0625rem .125rem .0625rem 0 #c1c1c170}#ngx-datatable .collapsed-group-closed:after{font-family:FontAwesome;content:\"\uF196\";width:.8125rem;height:.625rem;position:absolute;left:.4375rem}#ngx-datatable .collapsed-group-opened:after{font-family:FontAwesome;content:\"\uF147\";width:.8125rem;height:.625rem;position:absolute;left:.4375rem}#ngx-datatable .footer-table{height:2.75rem;display:flex;justify-content:space-between;align-items:center}#ngx-datatable .search-wrapper .search input{background:#fff;color:rgba(0,0,0,.87);width:100%;height:3rem;min-height:3rem;max-height:3rem;padding:0 1rem;border:none;outline:0}#ngx-datatable .search-wrapper .search{width:100%;height:3rem;line-height:3rem;padding:0 1.125rem}#ngx-datatable .mat-icon{font-size:1.5rem;color:rgba(0,0,0,.54)}@font-face{font-family:\"Material Icons\";font-style:normal;font-weight:400;src:url(iconfont/MaterialIcons-Regular.eot);src:local(\"Material Icons\"),local(\"MaterialIcons-Regular\"),url(iconfont/MaterialIcons-Regular.woff2) format(\"woff2\"),url(iconfont/MaterialIcons-Regular.woff) format(\"woff\"),url(iconfont/MaterialIcons-Regular.ttf) format(\"truetype\")}.material-icons{font-family:\"Material Icons\";font-weight:400;font-style:normal;font-size:1.5rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}.table td,.table th{padding:.5625rem .625rem .625rem;line-height:calc(30 / 16);vertical-align:top}"]
}] }
];
/** @nocollapse */
NgxMariemDatatableComponent.ctorParameters = function () { return []; };
NgxMariemDatatableComponent.propDecorators = {
onRowClicked: [{ type: core.Output }],
onActionClicked: [{ type: core.Output }],
onlinkClicked: [{ type: core.Output }],
onToggleAllClicked: [{ type: core.Output }],
onToggleClicked: [{ type: core.Output }],
smallCells: [{ type: core.Input }],
hideParentAction: [{ type: core.Input }],
loadingList: [{ type: core.Input }],
nbRows: [{ type: core.Input }],
childListLabel: [{ type: core.Input }],
hideTheader: [{ type: core.Input }],
textalign: [{ type: core.Input }],
regroupbylabel: [{ type: core.Input }],
regroupby: [{ type: core.Input }],
datatable: [{ type: core.Input }],
datatableChange: [{ type: core.Output }],
numberOfRecords: [{ type: core.Input }],
serverSidePagination: [{ type: core.Input }],
startDisplay: [{ type: core.Output }],
serverSidesearch: [{ type: core.Input }],
search: [{ type: core.Output }],
displayedColomn: [{ type: core.Input }],
Actions: [{ type: core.Input }],
nothingToShowMessage: [{ type: core.Input }],
paginationmessag: [{ type: core.Input }],
showBoundaryLinks: [{ type: core.Input }],
itemsPerPage: [{ type: core.Input }],
maxSize: [{ type: core.Input }],
checkboxes: [{ type: core.Input }],
checkboxesMultiselect: [{ type: core.Input }],
pagination: [{ type: core.Input }],
Advancedfilter: [{ type: core.Input }],
visibility: [{ type: core.Input }],
searchvalue: [{ type: core.Input }]
};
return NgxMariemDatatableComponent;
}());
if (false) {
/** @type {?} */
NgxMariemDatatableComponent.prototype.onRowClicked;
/** @type {?} */
NgxMariemDatatableComponent.prototype.onActionClicked;
/** @type {?} */
NgxMariemDatatableComponent.prototype.onlinkClicked;
/** @type {?} */
NgxMariemDatatableComponent.prototype.onToggleAllClicked;
/** @type {?} */
NgxMariemDatatableComponent.prototype.onToggleClicked;
/** @type {?} */
NgxMariemDatatableComponent.prototype.smallCells;
/** @type {?} */
NgxMariemDatatableComponent.prototype.hideParentAction;
/** @type {?} */
NgxMariemDatatableComponent.prototype.loadingList;
/** @type {?} */
NgxMariemDatatableComponent.prototype.nbRows;
/** @type {?} */
NgxMariemDatatableComponent.prototype.childListLabel;
/** @type {?} */
NgxMariemDatatableComponent.prototype.hideTheader;
/** @type {?} */
NgxMariemDatatableComponent.prototype.textalign;
/** @type {?} */
NgxMariemDatatableComponent.protot