ngx-mariem-datatable
Version:
Advanced table extension with sorting, filtering, paging and more... for Angular apps
100 lines • 8.87 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/datatable-row/datatable-row.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter } from "@angular/core";
export 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.disabledAttribut] ? 'icon-disabled' : ''\"\r\n [class]=\"\r\n ' cursor-pointer m-auto color-primary-onhover material-icons'\r\n \"\r\n >\r\n {{ child.iconClass }}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n</ng-container>\r\n",
styles: [""]
}] }
];
/** @nocollapse */
DatatableRowComponent.ctorParameters = () => [];
DatatableRowComponent.propDecorators = {
row: [{ type: Input }],
displayedColomnList: [{ type: Input }],
Actions: [{ type: Input }],
checkboxes: [{ type: Input }],
textalign: [{ type: Input }],
sortByItem: [{ type: Input }],
onrowClicked: [{ type: Output }],
onActionClicked: [{ type: Output }],
onckeckBoxClicked: [{ type: Output }]
};
if (false) {
/** @type {?} */
DatatableRowComponent.prototype._row;
/** @type {?} */
DatatableRowComponent.prototype.displayedColomnList;
/** @type {?} */
DatatableRowComponent.prototype.Actions;
/** @type {?} */
DatatableRowComponent.prototype.checkboxes;
/** @type {?} */
DatatableRowComponent.prototype.textalign;
/** @type {?} */
DatatableRowComponent.prototype.sortByItem;
/** @type {?} */
DatatableRowComponent.prototype.onrowClicked;
/** @type {?} */
DatatableRowComponent.prototype.onActionClicked;
/** @type {?} */
DatatableRowComponent.prototype.onckeckBoxClicked;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YXRhYmxlLXJvdy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtbWFyaWVtLWRhdGF0YWJsZS8iLCJzb3VyY2VzIjpbImxpYi9kYXRhdGFibGUtcm93L2RhdGF0YWJsZS1yb3cuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQVcvRSxNQUFNLE9BQU8scUJBQXFCO0lBbUJoQztRQVpBLFNBQUksR0FBUSxFQUFFLENBQUM7UUFDTix3QkFBbUIsR0FBZ0MsRUFBRSxDQUFDO1FBQ3RELFlBQU8sR0FBdUIsRUFBRSxDQUFDO1FBQ2pDLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFDNUIsY0FBUyxHQUFRLE1BQU0sQ0FBQzs7UUFJdkIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2xDLG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNyQyxzQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBRWxDLENBQUM7Ozs7O0lBbEJoQixJQUFhLEdBQUcsQ0FBQyxLQUFLO1FBQ3BCLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ3BCLENBQUM7Ozs7SUFDRCxJQUFJLEdBQUc7UUFDTCxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDbkIsQ0FBQzs7OztJQWVELFFBQVE7SUFDUixDQUFDOzs7OztJQUVELFVBQVUsQ0FBQyxHQUFHO1FBQ1osSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDOUIsQ0FBQzs7Ozs7O0lBRUQsYUFBYSxDQUFDLE1BQU0sRUFBRSxJQUFJO1FBQ3hCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7SUFDakUsQ0FBQzs7Ozs7SUFFRCxlQUFlLENBQUMsR0FBRztRQUNqQixJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ25DLENBQUM7OztZQXZDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsaytFQUE2Qzs7YUFFOUM7Ozs7O2tCQUVFLEtBQUs7a0NBT0wsS0FBSztzQkFDTCxLQUFLO3lCQUNMLEtBQUs7d0JBQ0wsS0FBSzt5QkFDTCxLQUFLOzJCQUdMLE1BQU07OEJBQ04sTUFBTTtnQ0FDTixNQUFNOzs7O0lBVlAscUNBQWU7O0lBQ2Ysb0RBQStEOztJQUMvRCx3Q0FBMEM7O0lBQzFDLDJDQUFxQzs7SUFDckMsMENBQWlDOztJQUNqQywyQ0FBeUI7O0lBR3pCLDZDQUE0Qzs7SUFDNUMsZ0RBQStDOztJQUMvQyxrREFBaUQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHtcclxuICBkYXRhdGFibGVfZGlzcGxheWVkQ29sb21uLFxyXG4gIGRhdGF0YWJsZV9hY3Rpb24sXHJcbn0gZnJvbSBcIi4uL2RhdGF0YWJsZS5tb2RlbFwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IFwiW2RhdGF0YWJsZS1yb3ddXCIsXHJcbiAgdGVtcGxhdGVVcmw6IFwiLi9kYXRhdGFibGUtcm93LmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL2RhdGF0YWJsZS1yb3cuY29tcG9uZW50LnNjc3NcIl0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEYXRhdGFibGVSb3dDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIHNldCByb3codmFsdWUpIHtcclxuICAgIHRoaXMuX3JvdyA9IHZhbHVlO1xyXG4gIH1cclxuICBnZXQgcm93KCkge1xyXG4gICAgcmV0dXJuIHRoaXMuX3JvdztcclxuICB9XHJcbiAgX3JvdzogYW55ID0ge307XHJcbiAgQElucHV0KCkgZGlzcGxheWVkQ29sb21uTGlzdDogZGF0YXRhYmxlX2Rpc3BsYXllZENvbG9tbltdID0gW107XHJcbiAgQElucHV0KCkgQWN0aW9uczogZGF0YXRhYmxlX2FjdGlvbltdID0gW107XHJcbiAgQElucHV0KCkgY2hlY2tib3hlczogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHRleHRhbGlnbjogYW55ID0gXCJsZWZ0XCI7XHJcbiAgQElucHV0KCkgc29ydEJ5SXRlbTogYW55O1xyXG5cclxuICAvLyB3aGVuIHJvdyBjbGlja2VkXHJcbiAgQE91dHB1dCgpIG9ucm93Q2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBAT3V0cHV0KCkgb25BY3Rpb25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBvbmNrZWNrQm94Q2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcbiBcclxuICByb3dDbGlja2VkKHJvdykge1xyXG4gICAgdGhpcy5vbnJvd0NsaWNrZWQuZW1pdChyb3cpO1xyXG4gIH1cclxuXHJcbiAgYWN0aW9uQ2xpY2tlZChhY3Rpb24sIGl0ZW0pIHtcclxuICAgIHRoaXMub25BY3Rpb25DbGlja2VkLmVtaXQoeyBpdGVtOiBpdGVtLCBhY3Rpb246IGFjdGlvbi50eXBlIH0pO1xyXG4gIH1cclxuXHJcbiAgY2tlY2tCb3hDbGlja2VkKHJvdykge1xyXG4gICAgdGhpcy5vbmNrZWNrQm94Q2xpY2tlZC5lbWl0KHJvdyk7XHJcbiAgfVxyXG59XHJcbiJdfQ==