chi-app-lib
Version:
This is a custom component (input dropdown grid textarea map captcha) published to npm.
146 lines • 14.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
export class GridComponent {
constructor() {
this.columns = [];
this.actionsColumns = [];
this.height = '400px';
this.openFilter = new EventEmitter();
this.clearFilter = new EventEmitter();
this.actionActor = new EventEmitter();
this.createDownloadUrl = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
// this.columnsToDisplay = this.displayedColumns.slice();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const name = changes.hasFilter;
if (name) {
this.hasFilter = changes.hasFilter.currentValue;
}
this.displayedColumns = this.columns.map((/**
* @param {?} c
* @return {?}
*/
c => c['columnDef']));
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.displayedColumns = this.columns.map((/**
* @param {?} c
* @return {?}
*/
c => c['columnDef']));
/** @type {?} */
const as = document.querySelectorAll('lib-grid .mat-cell a');
as.forEach((/**
* @param {?} a
* @return {?}
*/
a => {
if (as['innerHTML'] === '' || a.textContent === '') {
a.remove();
}
}));
}
/**
* @return {?}
*/
selectedFilter() {
this.openFilter.emit();
}
/**
* @return {?}
*/
removeFilter() {
this.clearFilter.emit();
}
/**
* @param {?} actor
* @param {?} row
* @return {?}
*/
actionColumn(actor, row) {
this.actionActor.emit({ actor: actor, row: row });
}
/**
* @return {?}
*/
onclickDownloadUrl() {
this.createDownloadUrl.emit();
}
}
GridComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-grid',
template: "<mat-table #table [dataSource]=\"data\">\n\n <ng-container *ngFor=\"let column of columns\" [cdkColumnDef]=\"column.columnDef\">\n <mat-header-cell *cdkHeaderCellDef [style.flex]=\"'0 0 ' + column.width\">\n <span *ngIf=\"column.columnDef != 'filter' && column.columnDef != 'actions' && column.columnDef != 'download'\">\n {{ column.header }}\n </span>\n <!-- filter -->\n <ng-container *ngIf=\"column.columnDef == 'filter'\">\n <button mat-raised-button color=\"primary\" (click)=\"selectedFilter()\" *ngIf=\"!hasFilter\">\n <img [src]=\"filterOfSrc\" *ngIf=\"filterOfSrc\">\n <span>\u0645\u062D\u062F\u0648\u062F\u0633\u0627\u0632\u06CC</span>\n </button>\n <button mat-raised-button color=\"primary\" (click)=\"removeFilter()\" *ngIf=\"hasFilter\">\n <img [src]=\"filterOnSrc\" *ngIf=\"filterOnSrc\">\n <span>\u0645\u062D\u062F\u0648\u062F\u0634\u062F\u0647</span>\n </button>\n </ng-container>\n <!-- download -->\n <ng-container *ngIf=\"column.columnDef == 'download'\">\n <a (click)=\"onclickDownloadUrl()\" href=\"{{downloadUrl}}\" [matTooltip]=\"downloadName\" class=\"download-file\">\n <img [src]=\"downloadOfSrc\" *ngIf=\"downloadOfSrc\" width=\"30px\">\n </a>\n </ng-container>\n </mat-header-cell>\n\n <mat-cell *cdkCellDef=\"let row\"\n [style.flex]=\"'0 0 ' + column.width\"\n dir=\"{{column.dir}}\"\n [matTooltip]=\"column.cell(row).length>15 ? column.cell(row) : ''\">\n <span *ngIf=\"column.type !='color' && column.type !='link' && column.columnDef!= 'actions' &&\n column.columnDef!= 'download' && column.columnDef!= 'filter'\"\n [style.fontWeight]=\"column.bold ? (column.bold(row) === 'true' ? 'bold' : 'normal') : 'normal'\">\n <i *ngIf=\"column.hasIcon\" class=\"material-icons\" [style.color]=\"column.color\">{{column.icon}}</i>\n <span *ngIf=\"column.type !='number'\">\n {{ column.cell(row)}}\n </span>\n <span *ngIf=\"column.type =='number'\">\n {{ column.cell(row) | number}}\n </span>\n\n </span>\n <i *ngIf=\"column.type =='color'\" class=\"material-icons\" [style.color]=\"column.cell(row)\">stop</i>\n\n <a *ngIf=\"column.type =='link'\" href=\"{{column.cell(row)}}\" target=\"_blank\"> {{column.cell(row)}}</a>\n\n <!-- actions -->\n <ng-container *ngIf=\"column.columnDef == 'actions'\">\n <a\n *ngFor=\"let actColumn of actionsColumns; let first = first; let last = last\"\n (click)=\"actionColumn(actColumn.actor, row)\">\n <span *ngIf=\"actColumn.show(row)\">\n {{ actColumn.name }}\n <!--<span *ngIf=\"!last\" class=\"spliter\">|</span>-->\n </span>\n\n </a>\n\n </ng-container>\n\n </mat-cell>\n </ng-container>\n\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\n\n</mat-table>\n<div class=\"no-results\" [style.display]=\"data.length == 0 ? '' : 'none'\">\n \u0645\u0648\u0631\u062F\u06CC \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F\n</div>\n",
styles: [".no-results{display:flex;height:50vh;justify-content:center;align-items:center;font-weight:700}.mat-table{width:100%;direction:rtl}.mat-table mat-footer-row,.mat-table mat-header-row,.mat-table mat-row,.mat-table td.mat-cell,.mat-table td.mat-footer-cell,.mat-table th.mat-header-cell{border-bottom-color:#ededed}.mat-table mat-footer-row,.mat-table mat-row{min-height:40px;padding-left:8px}.mat-table .mat-header-row{background-color:#d5dfe2;min-height:48px;border:0;padding-left:8px}.mat-table .mat-header-row .mat-header-cell{color:#333;font-weight:700}.mat-table .mat-header-row .mat-header-cell a.download-file{display:flex;align-items:center}.mat-table .mat-header-row .mat-header-cell button{font-size:11px;background-color:transparent;box-shadow:none;color:#a8acb0;padding:0 10px}.mat-table [dir=rtl] mat-cell:first-of-type,.mat-table [dir=rtl] mat-footer-cell:first-of-type,.mat-table [dir=rtl] mat-header-cell:first-of-type,.mat-table mat-cell:first-of-type,.mat-table mat-footer-cell:first-of-type,.mat-table mat-header-cell:first-of-type{padding-left:0;padding-right:0}.mat-table mat-cell:last-of-type,.mat-table mat-footer-cell:last-of-type,.mat-table mat-header-cell:last-of-type{padding-right:0;padding-left:0}.mat-table .mat-cell,.mat-table .mat-header-cell{justify-content:center;font-size:11px}.mat-table .mat-column-actions,.mat-table .mat-column-filter{justify-content:flex-end}.mat-table .mat-cell:empty,.mat-table .mat-header-cell:empty{display:none}.mat-table .mat-cell{color:#1d1c1c}.mat-table .mat-cell a{color:#2852a6;text-decoration:none;display:flex}.mat-table .mat-cell a:empty{display:none}.mat-table .mat-cell a:not(:empty)+a:not(:empty)::before{content:'|';padding-top:3px}.mat-table .mat-cell span{-ms-grid-row-align:center;align-self:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 10px}.mat-table .mat-cell i{font-size:20px}.mat-table .mat-cell span.spliter{padding:0 3px}::ng-deep .mat-tooltip-panel .mat-tooltip{background-color:#1d3b5d;font-size:11px;line-height:24px;text-align:right;max-width:400px;direction:rtl;opacity:.9;margin-top:-10px;padding:10px}"]
}] }
];
/** @nocollapse */
GridComponent.ctorParameters = () => [];
GridComponent.propDecorators = {
columns: [{ type: Input }],
actionsColumns: [{ type: Input }],
columnsToDisplay: [{ type: Input }],
data: [{ type: Input }],
height: [{ type: Input }],
hasFilter: [{ type: Input }],
filterOfSrc: [{ type: Input }],
filterOnSrc: [{ type: Input }],
downloadOfSrc: [{ type: Input }],
downloadUrl: [{ type: Input }],
downloadName: [{ type: Input }],
openFilter: [{ type: Output }],
clearFilter: [{ type: Output }],
actionActor: [{ type: Output }],
createDownloadUrl: [{ type: Output }]
};
if (false) {
/** @type {?} */
GridComponent.prototype.columns;
/** @type {?} */
GridComponent.prototype.actionsColumns;
/** @type {?} */
GridComponent.prototype.columnsToDisplay;
/** @type {?} */
GridComponent.prototype.data;
/** @type {?} */
GridComponent.prototype.height;
/** @type {?} */
GridComponent.prototype.hasFilter;
/** @type {?} */
GridComponent.prototype.filterOfSrc;
/** @type {?} */
GridComponent.prototype.filterOnSrc;
/** @type {?} */
GridComponent.prototype.downloadOfSrc;
/** @type {?} */
GridComponent.prototype.downloadUrl;
/** @type {?} */
GridComponent.prototype.downloadName;
/** @type {?} */
GridComponent.prototype.openFilter;
/** @type {?} */
GridComponent.prototype.clearFilter;
/** @type {?} */
GridComponent.prototype.actionActor;
/** @type {?} */
GridComponent.prototype.createDownloadUrl;
/** @type {?} */
GridComponent.prototype.displayedColumns;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9jaGktYXBwLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9ncmlkL2dyaWQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ1UsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFFekUsTUFBTSxlQUFlLENBQUM7QUFPdkIsTUFBTSxPQUFPLGFBQWE7SUFvQnhCO1FBbEJTLFlBQU8sR0FBYSxFQUFFLENBQUM7UUFDdkIsbUJBQWMsR0FBYSxFQUFFLENBQUM7UUFHOUIsV0FBTSxHQUFHLE9BQU8sQ0FBQztRQU9oQixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNyQyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDdEMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ3RDLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFNdEQsQ0FBQzs7OztJQUVELFFBQVE7UUFDTix5REFBeUQ7SUFDM0QsQ0FBQzs7Ozs7SUFFRCxXQUFXLENBQUMsT0FBc0I7O2NBQzFCLElBQUksR0FBaUIsT0FBTyxDQUFDLFNBQVM7UUFDNUMsSUFBSSxJQUFJLEVBQUU7WUFDUixJQUFJLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDO1NBQ2pEO1FBQ0QsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRzs7OztRQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxFQUFDLENBQUM7SUFDaEUsQ0FBQzs7OztJQUVELGVBQWU7UUFDYixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHOzs7O1FBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLEVBQUMsQ0FBQzs7Y0FDeEQsRUFBRSxHQUFHLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxzQkFBc0IsQ0FBQztRQUU1RCxFQUFFLENBQUMsT0FBTzs7OztRQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ2IsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQyxXQUFXLEtBQUssRUFBRSxFQUFFO2dCQUNsRCxDQUFDLENBQUMsTUFBTSxFQUFFLENBQUM7YUFDWjtRQUNILENBQUMsRUFBQyxDQUFDO0lBQ0wsQ0FBQzs7OztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7Ozs7SUFFRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUMxQixDQUFDOzs7Ozs7SUFFRCxZQUFZLENBQUMsS0FBSyxFQUFFLEdBQUc7UUFDckIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUMsQ0FBQyxDQUFDO0lBQ2xELENBQUM7Ozs7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2hDLENBQUM7OztZQWxFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFVBQVU7Z0JBQ3BCLGt2R0FBb0M7O2FBRXJDOzs7OztzQkFHRSxLQUFLOzZCQUNMLEtBQUs7K0JBQ0wsS0FBSzttQkFDTCxLQUFLO3FCQUNMLEtBQUs7d0JBQ0wsS0FBSzswQkFDTCxLQUFLOzBCQUNMLEtBQUs7NEJBQ0wsS0FBSzswQkFDTCxLQUFLOzJCQUNMLEtBQUs7eUJBQ0wsTUFBTTswQkFDTixNQUFNOzBCQUNOLE1BQU07Z0NBQ04sTUFBTTs7OztJQWRQLGdDQUFnQzs7SUFDaEMsdUNBQXVDOztJQUN2Qyx5Q0FBb0M7O0lBQ3BDLDZCQUFjOztJQUNkLCtCQUEwQjs7SUFDMUIsa0NBQW1COztJQUNuQixvQ0FBcUI7O0lBQ3JCLG9DQUFxQjs7SUFDckIsc0NBQXVCOztJQUN2QixvQ0FBcUI7O0lBQ3JCLHFDQUFzQjs7SUFDdEIsbUNBQStDOztJQUMvQyxvQ0FBZ0Q7O0lBQ2hELG9DQUFnRDs7SUFDaEQsMENBQXNEOztJQUV0RCx5Q0FBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBPdXRwdXQsIFNpbXBsZUNoYW5nZSxcbiAgU2ltcGxlQ2hhbmdlc1xufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWdyaWQnLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3JpZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2dyaWQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBHcmlkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuXG4gIEBJbnB1dCgpIGNvbHVtbnM6IHN0cmluZ1tdID0gW107XG4gIEBJbnB1dCgpIGFjdGlvbnNDb2x1bW5zOiBzdHJpbmdbXSA9IFtdO1xuICBASW5wdXQoKSBjb2x1bW5zVG9EaXNwbGF5OiBzdHJpbmdbXTtcbiAgQElucHV0KCkgZGF0YTtcbiAgQElucHV0KCkgaGVpZ2h0ID0gJzQwMHB4JztcbiAgQElucHV0KCkgaGFzRmlsdGVyO1xuICBASW5wdXQoKSBmaWx0ZXJPZlNyYztcbiAgQElucHV0KCkgZmlsdGVyT25TcmM7XG4gIEBJbnB1dCgpIGRvd25sb2FkT2ZTcmM7XG4gIEBJbnB1dCgpIGRvd25sb2FkVXJsO1xuICBASW5wdXQoKSBkb3dubG9hZE5hbWU7XG4gIEBPdXRwdXQoKSBvcGVuRmlsdGVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBjbGVhckZpbHRlciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgYWN0aW9uQWN0b3IgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQE91dHB1dCgpIGNyZWF0ZURvd25sb2FkVXJsID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgZGlzcGxheWVkQ29sdW1ucztcblxuICBjb25zdHJ1Y3RvcigpIHtcblxuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgLy8gdGhpcy5jb2x1bW5zVG9EaXNwbGF5ID0gdGhpcy5kaXNwbGF5ZWRDb2x1bW5zLnNsaWNlKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgY29uc3QgbmFtZTogU2ltcGxlQ2hhbmdlID0gY2hhbmdlcy5oYXNGaWx0ZXI7XG4gICAgaWYgKG5hbWUpIHtcbiAgICAgIHRoaXMuaGFzRmlsdGVyID0gY2hhbmdlcy5oYXNGaWx0ZXIuY3VycmVudFZhbHVlO1xuICAgIH1cbiAgICB0aGlzLmRpc3BsYXllZENvbHVtbnMgPSB0aGlzLmNvbHVtbnMubWFwKGMgPT4gY1snY29sdW1uRGVmJ10pO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuZGlzcGxheWVkQ29sdW1ucyA9IHRoaXMuY29sdW1ucy5tYXAoYyA9PiBjWydjb2x1bW5EZWYnXSk7XG4gICAgY29uc3QgYXMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdsaWItZ3JpZCAubWF0LWNlbGwgYScpO1xuXG4gICAgYXMuZm9yRWFjaChhID0+IHtcbiAgICAgIGlmIChhc1snaW5uZXJIVE1MJ10gPT09ICcnIHx8IGEudGV4dENvbnRlbnQgPT09ICcnKSB7XG4gICAgICAgIGEucmVtb3ZlKCk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBzZWxlY3RlZEZpbHRlcigpIHtcbiAgICB0aGlzLm9wZW5GaWx0ZXIuZW1pdCgpO1xuICB9XG5cbiAgcmVtb3ZlRmlsdGVyKCkge1xuICAgIHRoaXMuY2xlYXJGaWx0ZXIuZW1pdCgpO1xuICB9XG5cbiAgYWN0aW9uQ29sdW1uKGFjdG9yLCByb3cpIHtcbiAgICB0aGlzLmFjdGlvbkFjdG9yLmVtaXQoe2FjdG9yOiBhY3Rvciwgcm93OiByb3d9KTtcbiAgfVxuXG4gIG9uY2xpY2tEb3dubG9hZFVybCgpIHtcbiAgICB0aGlzLmNyZWF0ZURvd25sb2FkVXJsLmVtaXQoKTtcbiAgfVxuXG59XG4iXX0=