ngx-mariem-datatable
Version:
Advanced table extension with sorting, filtering, paging and more... for Angular apps
1,073 lines (1,070 loc) • 84.3 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, Pipe, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
import { DatePipe, CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: lib/animations/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var customAnimation = animation([
style({
opacity: '{{opacity}}',
transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
}),
animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
], {
params: {
duration: '200ms',
delay: '0ms',
opacity: '0',
scale: '1',
x: '0',
y: '0',
z: '0'
}
});
/** @type {?} */
var Animations = [
trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
trigger('animateStagger', [
state('50', style('*')),
state('100', style('*')),
state('200', style('*')),
transition('void => 50', query('@*', [
stagger('50ms', [
animateChild()
])
], { optional: true })),
transition('void => 100', query('@*', [
stagger('100ms', [
animateChild()
])
], { optional: true })),
transition('void => 200', query('@*', [
stagger('200ms', [
animateChild()
])
], { optional: true }))
]),
trigger('fadeInOut', [
state('0', style({
display: 'none',
opacity: 0
})),
state('1', style({
display: 'block',
opacity: 1
})),
transition('1 => 0', animate('300ms ease-out')),
transition('0 => 1', animate('300ms ease-in'))
]),
trigger('slideInOut', [
state('0', style({
height: '0px',
display: 'none'
})),
state('1', style({
height: '*',
display: 'block'
})),
transition('1 => 0', animate('300ms ease-out')),
transition('0 => 1', animate('300ms ease-in'))
]),
trigger('slideIn', [
transition('void => left', [
style({
transform: 'translateX(100%)'
}),
animate('300ms ease-in', style({
transform: 'translateX(0)'
}))
]),
transition('left => void', [
style({
transform: 'translateX(0)'
}),
animate('300ms ease-in', style({
transform: 'translateX(-100%)'
}))
]),
transition('void => right', [
style({
transform: 'translateX(-100%)'
}),
animate('300ms ease-in', style({
transform: 'translateX(0)'
}))
]),
transition('right => void', [
style({
transform: 'translateX(0)'
}),
animate('300ms ease-in', style({
transform: 'translateX(100%)'
}))
]),
]),
trigger('slideInLeft', [
state('void', style({
transform: 'translateX(-100%)',
display: 'none'
})),
state('*', style({
transform: 'translateX(0)',
display: 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('slideInRight', [
state('void', style({
transform: 'translateX(100%)',
display: 'none'
})),
state('*', style({
transform: 'translateX(0)',
display: 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('slideInTop', [
state('void', style({
transform: 'translateY(-100%)',
display: 'none'
})),
state('*', style({
transform: 'translateY(0)',
display: 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('slideInBottom', [
state('void', style({
transform: 'translateY(100%)',
display: 'none'
})),
state('*', style({
transform: 'translateY(0)',
display: 'flex'
})),
transition('void => *', animate('300ms')),
transition('* => void', animate('300ms'))
]),
trigger('expandCollapse', [
state('void', style({
height: '0px'
})),
state('*', style({
height: '*'
})),
transition('void => *', animate('300ms ease-out')),
transition('* => void', animate('300ms ease-in'))
]),
// -----------------------------------------------------------------------------------------------------
// @ Router animations
// -----------------------------------------------------------------------------------------------------
trigger('routerTransitionLeft', [
transition('* => *', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
query('content > :enter', [
style({
transform: 'translateX(100%)',
opacity: 0
})
], { optional: true }),
sequence([
group([
query('content > :leave', [
style({
transform: 'translateX(0)',
opacity: 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateX(-100%)',
opacity: 0
}))
], { optional: true }),
query('content > :enter', [
style({ transform: 'translateX(100%)' }),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateX(0%)',
opacity: 1
}))
], { optional: true })
]),
query('content > :leave', animateChild(), { optional: true }),
query('content > :enter', animateChild(), { optional: true })
])
])
]),
trigger('routerTransitionRight', [
transition('* => *', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
query('content > :enter', [
style({
transform: 'translateX(-100%)',
opacity: 0
})
], { optional: true }),
sequence([
group([
query('content > :leave', [
style({
transform: 'translateX(0)',
opacity: 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateX(100%)',
opacity: 0
}))
], { optional: true }),
query('content > :enter', [
style({ transform: 'translateX(-100%)' }),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateX(0%)',
opacity: 1
}))
], { optional: true })
]),
query('content > :leave', animateChild(), { optional: true }),
query('content > :enter', animateChild(), { optional: true })
])
])
]),
trigger('routerTransitionUp', [
transition('* => *', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
query('content > :enter', [
style({
transform: 'translateY(100%)',
opacity: 0
})
], { optional: true }),
group([
query('content > :leave', [
style({
transform: 'translateY(0)',
opacity: 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateY(-100%)',
opacity: 0
}))
], { optional: true }),
query('content > :enter', [
style({ transform: 'translateY(100%)' }),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateY(0%)',
opacity: 1
}))
], { optional: true })
]),
query('content > :leave', animateChild(), { optional: true }),
query('content > :enter', animateChild(), { optional: true })
])
]),
trigger('routerTransitionDown', [
transition('* => *', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
query('content > :enter', [
style({
transform: 'translateY(-100%)',
opacity: 0
})
], { optional: true }),
sequence([
group([
query('content > :leave', [
style({
transform: 'translateY(0)',
opacity: 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateY(100%)',
opacity: 0
}))
], { optional: true }),
query('content > :enter', [
style({ transform: 'translateY(-100%)' }),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
transform: 'translateY(0%)',
opacity: 1
}))
], { optional: true })
]),
query('content > :leave', animateChild(), { optional: true }),
query('content > :enter', animateChild(), { optional: true })
])
])
]),
trigger('routerTransitionFade', [
transition('* => *', group([
query('content > :enter, content > :leave ', [
style({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
})
], { optional: true }),
query('content > :enter', [
style({
opacity: 0
})
], { optional: true }),
query('content > :leave', [
style({
opacity: 1
}),
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
opacity: 0
}))
], { optional: true }),
query('content > :enter', [
style({
opacity: 0
}),
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({
opacity: 1
}))
], { optional: true }),
query('content > :enter', animateChild(), { optional: true }),
query('content > :leave', 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 EventEmitter();
//when action clicked
this.onActionClicked = new EventEmitter();
//when link clicked
this.onlinkClicked = new EventEmitter();
//when Toggle All clicked
this.onToggleAllClicked = new EventEmitter();
//when Toggle clicked
this.onToggleClicked = new 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 EventEmitter();
//************server Side pagination///////////////////
this.numberOfRecords = 0; //required when serverSidePagination true
//required when serverSidePagination true
this.serverSidePagination = false;
this.startDisplay = new EventEmitter();
//************server Side pagination///////////////////////
//************server Side search///////////////////
this.serverSidesearch = false;
this.search = new 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: 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: ChangeDetectionStrategy.OnPush,
encapsulation: 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: Output }],
onActionClicked: [{ type: Output }],
onlinkClicked: [{ type: Output }],
onToggleAllClicked: [{ type: Output }],
onToggleClicked: [{ type: Output }],
smallCells: [{ type: Input }],
hideParentAction: [{ type: Input }],
loadingList: [{ type: Input }],
nbRows: [{ type: Input }],
childListLabel: [{ type: Input }],
hideTheader: [{ type: Input }],
textalign: [{ type: Input }],
regroupbylabel: [{ type: Input }],
regroupby: [{ type: Input }],
datatable: [{ type: Input }],
datatableChange: [{ type: Output }],
numberOfRecords: [{ type: Input }],
serverSidePagination: [{ type: Input }],
startDisplay: [{ type: Output }],
serverSidesearch: [{ type: Input }],
search: [{ type: Output }],
displayedColomn: [{ type: Input }],
Actions: [{ type: Input }],
nothingToShowMessage: [{ type: Input }],
paginationmessag: [{ type: Input }],
showBoundaryLinks: [{ type: Input }],
itemsPerPage: [{ type: Input }],
maxSize: [{ type: Input }],
checkboxes: [{ type: Input }],
checkboxesMultiselect: [{ type: Input }],
pagination: [{ type: Input }],
Advancedfilter: [{ type: Input }],
visibility: [{ type: Input }],
searchvalue: [{ type: 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.prototype.regroupbylabel;
/** @type {?} */
NgxMariemDatatableComponent.prototype.regroupbylist;
/** @type {?} */
NgxMariemDatatableComponent.prototype.regroupby;
/** @type {?} */
NgxMariemDatatableComponent.prototype.display;
/** @type {?} */
NgxMariemDatatableComponent.prototype._datatable;
/** @type {?} */
NgxMariemDatatableComponent.prototype.datatableChange;
/** @type {?} */
NgxMariemDatatableComponent.prototype.numberOfRecords;
/** @type {?} */
NgxMariemDatatableComponent.prototype.serverSidePagination;
/** @type {?} */
NgxMariemDatatableComponent.prototype.startDisplay;
/** @type {?} */
NgxMariemDatatableComponent.prototype.serverSidesearch;
/** @type {?} */
NgxMariemDatatableComponent.prototype.search;
/** @type {?} */
NgxMariemDatatableComponent.prototype.displayedColomnList;
/** @type {?} */
NgxMariemDatatableComponent.prototype._Actions;
/** @type {?} */
NgxMariemDatatableComponent.prototype.nothingToShowMessage;
/** @type {?} */
NgxMariemDatatableComponent.prototype.paginationmessag;
/** @type {?} */
NgxMariemDatatableComponent.prototype.showBoundaryLinks;
/** @type {?} */
NgxMariemDatatableComponent.prototype._itemsPerPage;
/** @type {?} */
NgxMariemDatatableComponent.prototype.maxSize;
/** @type {?} */
NgxMariemDatatableComponent.prototype.checkboxes;
/** @type {?} */
NgxMariemDatatableComponent.prototype.checkboxesMultiselect;
/** @type {?} */
NgxMariemDatatableComponent.prototype.pagination;
/** @type {?} */
NgxMariemDatatableComponent.prototype.nameOnExtract;
/** @type {?} */
NgxMariemDatatableComponent.prototype.Advancedfilter;
/** @type {?} */
NgxMariemDatatableComponent.prototype.visibility;
/** @type {?} */
NgxMariemDatatableComponent.prototype.datatableexist;
/** @type {?} */
NgxMariemDatatableComponent.prototype.searchexist;
/** @type {?} */
NgxMariemDatatableComponent.prototype._searchvalue;
/** @type {?} */
NgxMariemDatatableComponent.prototype.sortByItem;
/** @type {?} */
NgxMariemDatatableComponent.prototype.startItem;
/** @type {?} */
NgxMariemDatatableComponent.prototype.endItem;
/** @type {?} */
NgxMariemDatatableComponent.prototype.dataChild;
/** @type {?} */
NgxMariemDatatableComponent.prototype.dataChildRow;
/** @type {?} */
NgxMariemDatatableComponent.prototype.é;
/** @type {?} */
NgxMariemDatatableComponent.prototype.filtreopen;
/** @type {?} */
NgxMariemDatatableComponent.prototype.filters;
/** @type {?} */
NgxMariemDatatableComponent.prototype.associations;
/** @type {?} */
NgxMariemDatatableComponent.prototype.checkAll;
}
var filterData = /** @class */ (function () {
function filterData(datePipe) {
this.datePipe = datePipe;
}
/**
* @param {?} list
* @param {?} searchBody
* @return {?}
*/
filterData.prototype.transform = /**
* @param {?} list
* @param {?} searchBody
* @return {?}
*/
function (list, searchBody) {
return this.searchFilter(list, searchBody);
};
/**
* @param {?} list
* @param {?} searchBody
* @return {?}
*/
filterData.prototype.searchFilter = /**
* @param {?} list
* @param {?} searchBody
* @return {?}
*/
function (list, searchBody) {
var _this = this;
if (searchBody.serverSidesearch) {
return list;
}
if (searchBody.searchvalue.length == 0)
return list;
return list.filter((/**
* @param {?} el
* @return {?}
*/
function (el) {
/** @type {?} */
var value = false;
for (var index = 0; index < searchBody.displayedColomnList.length; index++) {
/** @type {?} */
var name_1 = searchBody.displayedColomnList[index].data;
/** @type {?} */
var type = searchBody.displayedColomnList[index].type;
value =
value ||
(el[name_1] &&
(type == "date"
? _this.datePipe.transform(new Date(el[name_1]), "dd/MM/yyyy")
: el[name_1])
.toString()
.toLowerCase()
.includes(searchBody.searchvalue.toLowerCase()));
}
return value;
}));
};
filterData.decorators = [
{ type: Pipe, args: [{ name: "filterData", pure: false },] }
];
/** @nocollapse */
filterData.ctorParameters = function () { return [
{ type: DatePipe }
]; };
return filterData;
}());
if (false) {
/**
* @type {?}
* @private
*/
filterData.prototype.datePipe;
}
var paginatePipe = /** @class */ (function () {
function paginatePipe() {
}
/**
* @param {?} list
* @param {?} filterObj
* @return {?}
*/
paginatePipe.prototype.transform = /**
* @param {?} list
* @param {?} filterObj
* @return {?}
*/
function (list, filterObj) {
if (filterObj.serverSidePagination || filterObj.endItem == "all") {
return list;
}
return list.slice(filterObj.startItem, filterObj.endItem);
};
paginatePipe.decorators = [
{ type: Pipe, args: [{ name: "paginate", pure: false },] }
];
return paginatePipe;
}());
var grouppigByPipe = /** @class */ (function () {
function grouppigByPipe() {
}
/**
* @param {?} list
* @param {?} filterObj
* @return {?}
*/
grouppigByPipe.prototype.transform = /**
* @param {?} list
* @param {?} filterObj
* @return {?}
*/
function (list, filterObj) {
if (!filterObj.regroupby) {
return list;
}