dynamic-mat-table
Version:
dynamic-mat-table is an Angular component for presenting large and complex data with a lightning fast performance (at least 10x faster) and excellent level of control over the presentation.
58 lines • 8.49 kB
JavaScript
import { ChangeDetectionStrategy, Component, Output, Input, EventEmitter } from '@angular/core';
import { isNullorUndefined } from '../../../cores/type';
import { TableSetting } from '../../../models/table-setting.model';
export class RowMenuComponent {
constructor() {
this.rowActionChange = new EventEmitter();
this.actionMenus = [];
this.visibleActionMenus = [];
}
menuOnClick(e) {
e.stopPropagation();
e.preventDefault();
this.visibleActionMenus = [];
this.actionMenus.forEach(menu => {
const am = isNullorUndefined(this.rowActionMenu) || isNullorUndefined(this.rowActionMenu[menu.name]) ? menu : this.rowActionMenu[menu.name];
if (isNullorUndefined(am.visible) || am.visible) {
this.visibleActionMenus.push({
name: menu.name,
text: am.text || menu.text,
disabled: am.disabled || menu.disabled,
icon: am.icon || menu.icon,
color: am.color || menu.color
});
}
});
}
menuButton_OnClick(menu) {
setTimeout(() => {
this.rowActionChange.emit(menu);
});
}
}
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
RowMenuComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line: component-selector
selector: 'row-menu',
template: "<button class=\"clear\" type=\"button\" mat-icon-button #menuTrigger=\"matMenuTrigger\" (click)=\"menuOnClick($event)\"\r\n [matMenuTriggerFor]=\"menu\" [dir]=\"tableSetting.direction === 'rtl' ? 'ltr' : 'rtl'\">\r\n <mat-icon>more_horiz</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" [overlapTrigger]=\"false\" [dir]=\"tableSetting.direction === 'rtl' ? 'ltr' : 'rtl'\">\r\n <ng-template matMenuContent>\r\n <button mat-button type=\"button\" [class.ltr-menu]=\"tableSetting.direction === 'rtl'\" [color]=\"menu.color\"\r\n class=\"button-menu\" *ngFor=\"let menu of visibleActionMenus\" [disabled]=\"menu.disabled\"\r\n (click)=\"menuButton_OnClick(menu)\">\r\n <mat-icon>{{menu.icon}}</mat-icon>\r\n <span [class.text-align-right]=\"tableSetting.direction === 'rtl'\" class=\"text-align-left\">{{menu.text}}</span>\r\n </button>\r\n </ng-template>\r\n</mat-menu>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["@media print{.print-preview{background-color:#fff;position:fixed;width:100%;height:auto;z-index:99999999;margin:0;padding:0;top:0;left:0;overflow:visible;display:block}}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none}.ltr-menu span{float:left}.button-menu{width:100%;line-height:48px}.button-menu::ng-deep .mat-button-wrapper{display:flex}.button-menu::ng-deep .mat-button-wrapper span{display:inline-block;width:100%;text-align:left}.button-menu::ng-deep .mat-button-wrapper mat-icon{line-height:48px;height:48px;margin:0 5px}mat-button-wrapper .button-menu{display:inline-block!important}.text-align-left{text-align:left!important}.text-align-right{text-align:right!important}.mat-menu-panel{min-height:unset!important}:host{display:flex;align-items:center;justify-content:space-between}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
RowMenuComponent.ctorParameters = () => [];
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
RowMenuComponent.propDecorators = {
rowActionChange: [{ type: Output }],
actionMenus: [{ type: Input }],
tableSetting: [{ type: Input }],
rowActionMenu: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm93LW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHluYW1pYy1tYXQtdGFibGUvc3JjL2xpYi9keW5hbWljLW1hdC10YWJsZS9leHRlbnNpb25zL3Jvdy1tZW51L3Jvdy1tZW51LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRXhELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQVNuRSxNQUFNLE9BQU8sZ0JBQWdCO0lBTzNCO1FBTlUsb0JBQWUsR0FBa0MsSUFBSSxZQUFZLEVBQW1CLENBQUM7UUFDdEYsZ0JBQVcsR0FBc0IsRUFBRSxDQUFDO1FBRzdDLHVCQUFrQixHQUFzQixFQUFFLENBQUM7SUFHM0MsQ0FBQztJQUVELFdBQVcsQ0FBQyxDQUFDO1FBQ1gsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3BCLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUNuQixJQUFJLENBQUMsa0JBQWtCLEdBQUcsRUFBRSxDQUFDO1FBQzdCLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQzlCLE1BQU0sRUFBRSxHQUFvQixpQkFBaUIsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksaUJBQWlCLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUM3SixJQUFLLGlCQUFpQixDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUMsT0FBTyxFQUFFO2dCQUNoRCxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDO29CQUMzQixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7b0JBQ2YsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUk7b0JBQzFCLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxRQUFRO29CQUN0QyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSTtvQkFDMUIsS0FBSyxFQUFFLEVBQUUsQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUs7aUJBQzlCLENBQUMsQ0FBQzthQUNKO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsa0JBQWtCLENBQUMsSUFBcUI7UUFDdEMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2xDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7OztZQXZDRixTQUFTLFNBQUM7Z0JBQ1QsK0NBQStDO2dCQUMvQyxRQUFRLEVBQUUsVUFBVTtnQkFDcEIsMjVCQUF3QztnQkFFeEMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2FBQ2hEOzs7Ozs7Ozs7Ozs7OEJBRUUsTUFBTTswQkFDTixLQUFLOzJCQUNMLEtBQUs7NEJBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIE91dHB1dCwgSW5wdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBpc051bGxvclVuZGVmaW5lZCB9IGZyb20gJy4uLy4uLy4uL2NvcmVzL3R5cGUnO1xyXG5pbXBvcnQgeyBDb250ZXh0TWVudUl0ZW0gfSBmcm9tICcuLi8uLi8uLi9tb2RlbHMvY29udGV4dC1tZW51Lm1vZGVsJztcclxuaW1wb3J0IHsgVGFibGVTZXR0aW5nIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWxzL3RhYmxlLXNldHRpbmcubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBjb21wb25lbnQtc2VsZWN0b3JcclxuICBzZWxlY3RvcjogJ3Jvdy1tZW51JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcm93LW1lbnUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3Jvdy1tZW51LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBSb3dNZW51Q29tcG9uZW50PFQ+IHsgIFxyXG4gIEBPdXRwdXQoKSByb3dBY3Rpb25DaGFuZ2U6IEV2ZW50RW1pdHRlcjxDb250ZXh0TWVudUl0ZW0+ID0gbmV3IEV2ZW50RW1pdHRlcjxDb250ZXh0TWVudUl0ZW0+KCk7XHJcbiAgQElucHV0KCkgYWN0aW9uTWVudXM6IENvbnRleHRNZW51SXRlbVtdID0gW107XHJcbiAgQElucHV0KCkgdGFibGVTZXR0aW5nOiBUYWJsZVNldHRpbmc7XHJcbiAgQElucHV0KCkgcm93QWN0aW9uTWVudT86IHsgW2tleTogc3RyaW5nXTogQ29udGV4dE1lbnVJdGVtOyB9O1xyXG4gIHZpc2libGVBY3Rpb25NZW51czogQ29udGV4dE1lbnVJdGVtW10gPSBbXTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgfVxyXG5cclxuICBtZW51T25DbGljayhlKSB7XHJcbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgdGhpcy52aXNpYmxlQWN0aW9uTWVudXMgPSBbXTtcclxuICAgIHRoaXMuYWN0aW9uTWVudXMuZm9yRWFjaChtZW51ID0+IHtcclxuICAgICAgY29uc3QgYW06IENvbnRleHRNZW51SXRlbSA9IGlzTnVsbG9yVW5kZWZpbmVkKHRoaXMucm93QWN0aW9uTWVudSkgfHwgaXNOdWxsb3JVbmRlZmluZWQodGhpcy5yb3dBY3Rpb25NZW51W21lbnUubmFtZV0pID8gbWVudSA6IHRoaXMucm93QWN0aW9uTWVudVttZW51Lm5hbWVdO1xyXG4gICAgICBpZiAoIGlzTnVsbG9yVW5kZWZpbmVkKGFtLnZpc2libGUpIHx8IGFtLnZpc2libGUpIHtcclxuICAgICAgICB0aGlzLnZpc2libGVBY3Rpb25NZW51cy5wdXNoKHtcclxuICAgICAgICAgIG5hbWU6IG1lbnUubmFtZSxcclxuICAgICAgICAgIHRleHQ6IGFtLnRleHQgfHwgbWVudS50ZXh0LFxyXG4gICAgICAgICAgZGlzYWJsZWQ6IGFtLmRpc2FibGVkIHx8IG1lbnUuZGlzYWJsZWQsXHJcbiAgICAgICAgICBpY29uOiBhbS5pY29uIHx8IG1lbnUuaWNvbixcclxuICAgICAgICAgIGNvbG9yOiBhbS5jb2xvciB8fCBtZW51LmNvbG9yXHJcbiAgICAgICAgfSk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgbWVudUJ1dHRvbl9PbkNsaWNrKG1lbnU6IENvbnRleHRNZW51SXRlbSkge1xyXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XHJcbiAgICAgIHRoaXMucm93QWN0aW9uQ2hhbmdlLmVtaXQobWVudSk7XHJcbiAgICB9KTtcclxuICB9XHJcbn1cclxuXHJcbiJdfQ==