ngx-mariem-datatable
Version:
Advanced table extension with sorting, filtering, paging and more... for Angular apps
1,043 lines (1,040 loc) • 75.2 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 {?} */
const 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 {?} */
const 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
*/
class NgxMariemDatatableComponent {
constructor() {
// 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;
}
//data
/**
* @param {?} value
* @return {?}
*/
set datatable(value) {
if (value && this._datatable != value) {
if (this.regroupby && this.regroupbylabel) {
this.regroupbylist = [];
value.map((/**
* @param {?} el
* @return {?}
*/
(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;
}
}
//************server Side search///////////////////////
//columns to display from datatable
/**
* @param {?} value
* @return {?}
*/
set displayedColomn(value) {
/** @type {?} */
let searchexist = value.find((/**
* @param {?} el
* @return {?}
*/
(el) => {
return el.search == true;
}));
this.searchexist = searchexist ? true : false;
this.displayedColomnList = value.map((/**
* @param {?} el
* @return {?}
*/
(el) => {
return el;
}));
}
//list of actions
/**
* @param {?} value
* @return {?}
*/
set Actions(value) {
this._Actions = value;
this._Actions = value.map((/**
* @param {?} el
* @return {?}
*/
(el) => {
return el;
}));
}
/**
* @return {?}
*/
get Actions() {
return this._Actions;
}
//maximum number of items per page. If value less than 1 will display all items on one page
/**
* @param {?} value
* @return {?}
*/
set itemsPerPage(value) {
this._itemsPerPage = value;
// this.endItem = cloneDeep(value);
this.endItem = value;
this.startItem = 0;
}
/**
* @param {?} value
* @return {?}
*/
set searchvalue(value) {
// this._searchvalue = cloneDeep(value);
this._searchvalue = value;
this.refreshPagination();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
checkAllClicked() {
// this._datatable = cloneDeep(
// this._datatable.map((el) => {
// el.selected = this.checkAll;
// return el;
// })
// );
this._datatable = this._datatable.map((/**
* @param {?} el
* @return {?}
*/
(el) => {
el.selected = this.checkAll;
return el;
}));
this.datatableChanged();
}
/**
* @param {?} row
* @return {?}
*/
ckeckBoxClicked(row) {
if (!this.checkboxesMultiselect) {
this._datatable = this._datatable.map((/**
* @param {?} el
* @return {?}
*/
(el) => {
if (el.selected && el.id != row.id) {
el.selected = false;
}
return el;
}));
}
/** @type {?} */
let allschecked = this._datatable.find((/**
* @param {?} el
* @return {?}
*/
(el) => !el.selected));
this.checkAll = allschecked ? false : true;
this.datatableChanged();
}
/**
* @return {?}
*/
datatableChanged() {
this.datatableChange.emit(this._datatable);
}
/**
* @param {?} item
* @return {?}
*/
rowClicked(item) {
this.onRowClicked.emit(item);
}
/**
* @param {?} event
* @return {?}
*/
actionClicked(event) {
this.onActionClicked.emit(event);
}
/**
* @param {?} data
* @return {?}
*/
sortAsc(data) {
this._datatable.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => {
if (typeof a[data] == "number")
return a[data] - b[data];
/** @type {?} */
let item1 = a[data] ? a[data].toUpperCase() : "";
/** @type {?} */
let item2 = b[data] ? b[data].toUpperCase() : "";
if (item1 < item2) {
return -1;
}
if (item1 > item2) {
return 1;
}
return 0;
}));
}
/**
* @param {?} data
* @return {?}
*/
sortDesc(data) {
this._datatable.sort((/**
* @param {?} b
* @param {?} a
* @return {?}
*/
(b, a) => {
if (typeof a[data] == "number")
return a[data] - b[data];
/** @type {?} */
let item1 = a[data] ? a[data].toUpperCase() : "";
/** @type {?} */
let item2 = b[data] ? b[data].toUpperCase() : "";
if (item1 < item2) {
return -1;
}
if (item1 > item2) {
return 1;
}
return 0;
}));
}
/**
* @param {?} title
* @return {?}
*/
sortBy(title) {
/** @type {?} */
let 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 {?}
*/
pageChanged(event) {
this.startItem = (event.page - 1) * event.itemsPerPage;
this.endItem = event.page * event.itemsPerPage;
if (this.serverSidePagination) {
this.startDisplay.emit(this.startItem);
}
}
/**
* @return {?}
*/
refreshPagination() {
this.startItem = 0;
this.endItem = this._itemsPerPage;
if (this.serverSidePagination) {
this.startDisplay.emit(this.startItem);
}
}
/**
* @param {?} event
* @return {?}
*/
searchServerSide(event) {
this.searchvalue = event.target.value;
this.startItem = 0;
this.endItem = 10;
this.search.emit(this.searchvalue);
}
/**
* @param {?} event
* @return {?}
*/
filtersChange(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;
}
}
/**
* @return {?}
*/
get searchvalue() {
return this._searchvalue;
}
}
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 = () => [];
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 }]
};
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;
}
class filterData {
/**
* @param {?} datePipe
*/
constructor(datePipe) {
this.datePipe = datePipe;
}
/**
* @param {?} list
* @param {?} searchBody
* @return {?}
*/
transform(list, searchBody) {
return this.searchFilter(list, searchBody);
}
/**
* @param {?} list
* @param {?} searchBody
* @return {?}
*/
searchFilter(list, searchBody) {
if (searchBody.serverSidesearch) {
return list;
}
if (searchBody.searchvalue.length == 0)
return list;
return list.filter((/**
* @param {?} el
* @return {?}
*/
(el) => {
/** @type {?} */
let value = false;
for (let index = 0; index < searchBody.displayedColomnList.length; index++) {
/** @type {?} */
const name = searchBody.displayedColomnList[index].data;
/** @type {?} */
const type = searchBody.displayedColomnList[index].type;
value =
value ||
(el[name] &&
(type == "date"
? this.datePipe.transform(new Date(el[name]), "dd/MM/yyyy")
: el[name])
.toString()
.toLowerCase()
.includes(searchBody.searchvalue.toLowerCase()));
}
return value;
}));
}
}
filterData.decorators = [
{ type: Pipe, args: [{ name: "filterData", pure: false },] }
];
/** @nocollapse */
filterData.ctorParameters = () => [
{ type: DatePipe }
];
if (false) {
/**
* @type {?}
* @private
*/
filterData.prototype.datePipe;
}
class paginatePipe {
/**
* @param {?} list
* @param {?} filterObj
* @return {?}
*/
transform(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 },] }
];
class grouppigByPipe {
/**
* @param {?} list
* @param {?} filterObj
* @return {?}
*/
transform(list, filterObj) {
if (!filterObj.regroupby) {
return list;
}
return list.filter((/**
* @param {?} el
* @return {?}
*/
(el) => {
return el[filterObj.regroupbylabel] == filterObj.groupeby;
}));
}
}
grouppigByPipe.decorators = [
{ type: Pipe, args: [{ name: "grouppigBy" },] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/datatable-row/datatable-row.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DatatableRowComponent {
constructor() {
this._row = {};
this.displayedColomnList = [];
this.Actions = [];
this.checkboxes = false;
this.textalign = "left";
// when row clicked
this.onrowClicked = new EventEmitter();
this.onActionClicked = new EventEmitter();
this.onckeckBoxClicked = new EventEmitter();
}
/**
* @param {?} value
* @return {?}
*/
set row(value) {
this._row = value;
}
/**
* @return {?}
*/
get row() {
return this._row;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} row
* @return {?}
*/
rowClicked(row) {
this.onrowClicked.emit(row);
}
/**
* @param {?} action
* @param {?} item
* @return {?}
*/
actionClicked(action, item) {
this.onActionClicked.emit({ item: item, action: action.type });
}
/**
* @param {?} row
* @return {?}
*/
ckeckBoxClicked(row) {
this.onckeckBoxClicked.emit(row);
}
}
DatatableRowComponent.decorators = [
{ type: Component, args: [{
selector: "[datatable-row]",
template: "<!-- row content -->\r\n<ng-container>\r\n <td\r\n *ngIf=\"checkboxes\"\r\n datatable-checkbox-template\r\n [row]=\"row\"\r\n (onckeckBoxClicked)=\"ckeckBoxClicked($event)\"\r\n ></td>\r\n <ng-container *ngFor=\"let title of displayedColomnList\">\r\n <td\r\n *ngIf=\"title.type == 'text' || title.type == 'badge'\"\r\n >\r\n <span\r\n [class]=\"row[title.data + '_class']\"\r\n [ngClass]=\"{ badge: title.type == 'badge' }\"\r\n >\r\n {{ row[title.data] }}\r\n </span>\r\n </td>\r\n <!-- date piped -->\r\n <td *ngIf=\"title.type == 'date'\">\r\n <span>\r\n {{ row[title.data] | date: \"dd/MM/yyyy\" }}\r\n </span>\r\n </td>\r\n <!-- checkbox -->\r\n <td\r\n *ngIf=\"title.type == 'checkbox'\"\r\n datatable-inputcheckbox-template\r\n [row]=\"row\"\r\n [title]=\"title.data\"\r\n [textalign]=\"textalign\"\r\n style=\"display: flex; justify-content: center; padding-top: 1rem\"\r\n ></td>\r\n <td *ngIf=\"title.type == 'icon'\">\r\n <i class=\"material-icons icon-satatus\">\r\n {{ row[title.data] }}\r\n </i>\r\n </td>\r\n <td *ngIf=\"title.type == 'customTemplate'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n title.template;\r\n context: {\r\n row: row\r\n }\r\n \"\r\n >\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- actions List -->\r\n\r\n <ng-container *ngFor=\"let action of Actions\">\r\n <td class=\"p-0\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let child of action.childrens; let x = index\">\r\n <div\r\n placement=\"left\"\r\n class=\"actionitem\"\r\n [style.border-right]=\"\r\n x + 1 == action.childrens.length ? 'none' : ''\r\n \"\r\n >\r\n <span\r\n (click)=\"\r\n !row[child.disabledAttribut] ? actionClicked(child, row) : ''\r\n \"\r\n [style.text-align]=\"'center'\"\r\n [ngClass]=\"row[child.disabledAttribu