angular-bootstrap-italia
Version:
<p align="center"> <h1 align="center">Bootstrap Italia + Angular 9</h1>
65 lines • 7.71 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input, EventEmitter, Output } from '@angular/core';
let TableComponent = class TableComponent {
constructor() {
this.paginationChange = new EventEmitter();
this.detailSelected = new EventEmitter();
}
ngOnInit() {
// start loading
this.loading = true;
// check result
this.loadingSub = this.$rows.subscribe(newValue => {
if (newValue) {
this.loading = false;
}
});
}
ngOnChanges(changes) {
if (changes.pagination) {
this.loading = false;
}
}
ngOnDestroy() {
if (this.loadingSub) {
this.loadingSub.unsubscribe();
}
}
emitNewPagination(newPagination) {
this.loading = true;
this.paginationChange.emit(newPagination);
}
getElemKeys(elem) {
return Object.keys(elem);
}
onDetail(rowElem) {
this.detailSelected.emit(rowElem);
}
};
__decorate([
Input()
], TableComponent.prototype, "columns", void 0);
__decorate([
Input()
], TableComponent.prototype, "detailUpdate", void 0);
__decorate([
Input()
], TableComponent.prototype, "$rows", void 0);
__decorate([
Input()
], TableComponent.prototype, "pagination", void 0);
__decorate([
Output()
], TableComponent.prototype, "paginationChange", void 0);
__decorate([
Output()
], TableComponent.prototype, "detailSelected", void 0);
TableComponent = __decorate([
Component({
selector: 'lib-table',
template: "<div class=\"table-responsive my-5 shadow\">\r\n <table class=\"table mb-0 bg-white\">\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" *ngFor=\"let colItem of columns\">\r\n <span>{{ colItem.label }}</span>\r\n <!-- <svg class=\"icon icon-xs\">\r\n <use xlink:href=\"./assets/bootstrap-italia/svg/sprite.svg#it-expand\">\r\n </use>\r\n </svg> -->\r\n </th>\r\n <th scope=\"col\" *ngIf=\"detailUpdate\">\r\n <span> Azione </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngIf=\"loading\">\r\n <td [attr.colspan]=\"detailUpdate ? columns.length + 1 : columns.length\">\r\n <div class=\"progress progress-indeterminate\" style=\"width: 100%;\">\r\n <span class=\"sr-only\">In elaborazione...</span>\r\n <div class=\"progress-bar\" role=\"progressbar\"></div>\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n <tr *ngFor=\"let item of $rows | async\">\r\n <td class=\"align-middle\" *ngFor=\"let column of columns\">\r\n {{ item[column.key] }}\r\n </td>\r\n <td class=\"align-middle\" *ngIf=\"detailUpdate\">\r\n <a href=\"javascript:void(0);\" class=\"btn btn-secondary btn-xs btn-icon\" role=\"button\" aria-disabled=\"true\" (click)=\"onDetail(item)\">\r\n <svg class=\"icon icon-white\">\r\n <use xlink:href=\"./assets/bootstrap-italia/svg/sprite.svg#it-search\">\r\n </use>\r\n </svg>\r\n <span>Dettagli</span>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n<lib-table-pagination *ngIf=\"pagination\" [currentPagination]=\"pagination\"\r\n (paginationChange)=\"emitNewPagination($event)\"></lib-table-pagination>\r\n",
styles: [""]
})
], TableComponent);
export { TableComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYW5ndWxhci1ib290c3RyYXAtaXRhbGlhLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvdGFibGUvdGFibGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUErQyxNQUFNLGVBQWUsQ0FBQztBQVlwSCxJQUFhLGNBQWMsR0FBM0IsTUFBYSxjQUFjO0lBYXpCO1FBTlUscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN0QyxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFLOUIsQ0FBQztJQUVqQixRQUFRO1FBQ0wsZ0JBQWdCO1FBQ2hCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBRXBCLGVBQWU7UUFDZixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxFQUFFO1lBQ2hELElBQUksUUFBUSxFQUFFO2dCQUNaLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO2FBQ3RCO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFVBQVUsRUFBRTtZQUN0QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztTQUN0QjtJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ25CLElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDL0I7SUFDSCxDQUFDO0lBRUQsaUJBQWlCLENBQUMsYUFBMEI7UUFDMUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDcEIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRUQsV0FBVyxDQUFDLElBQVk7UUFDdEIsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzNCLENBQUM7SUFFRCxRQUFRLENBQUMsT0FBZTtRQUN0QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNwQyxDQUFDO0NBRUYsQ0FBQTtBQWxEVTtJQUFSLEtBQUssRUFBRTsrQ0FBMkM7QUFDMUM7SUFBUixLQUFLLEVBQUU7b0RBQXVCO0FBQ3RCO0lBQVIsS0FBSyxFQUFFOzZDQUEwQjtBQUN6QjtJQUFSLEtBQUssRUFBRTtrREFBeUI7QUFFdkI7SUFBVCxNQUFNLEVBQUU7d0RBQXVDO0FBQ3RDO0lBQVQsTUFBTSxFQUFFO3NEQUFxQztBQVJuQyxjQUFjO0lBTDFCLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxXQUFXO1FBQ3JCLDgwREFBcUM7O0tBRXRDLENBQUM7R0FDVyxjQUFjLENBb0QxQjtTQXBEWSxjQUFjIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIE9uSW5pdCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XHJcblxyXG4vLyBNb2RlbHNcclxuaW1wb3J0IHsgSVBhZ2luYXRpb24gfSBmcm9tICcuL3RhYmxlLXBhZ2luYXRpb24vcGFnaW5hdGlvbi5tb2RlbCc7XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItdGFibGUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJsZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdGFibGUuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVGFibGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcclxuXHJcbiAgQElucHV0KCkgY29sdW1uczogeyBsYWJlbDogc3RyaW5nLCBrZXk6IHN0cmluZyB9W107XHJcbiAgQElucHV0KCkgZGV0YWlsVXBkYXRlOiBib29sZWFuO1xyXG4gIEBJbnB1dCgpICRyb3dzOiBPYnNlcnZhYmxlPGFueVtdPjtcclxuICBASW5wdXQoKSBwYWdpbmF0aW9uOiBJUGFnaW5hdGlvbjtcclxuXHJcbiAgQE91dHB1dCgpIHBhZ2luYXRpb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIGRldGFpbFNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICBsb2FkaW5nOiBib29sZWFuO1xyXG4gIGxvYWRpbmdTdWI6IFN1YnNjcmlwdGlvbjtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICAgLy8gc3RhcnQgbG9hZGluZ1xyXG4gICAgIHRoaXMubG9hZGluZyA9IHRydWU7XHJcblxyXG4gICAgIC8vIGNoZWNrIHJlc3VsdFxyXG4gICAgIHRoaXMubG9hZGluZ1N1YiA9IHRoaXMuJHJvd3Muc3Vic2NyaWJlKG5ld1ZhbHVlID0+IHtcclxuICAgICAgIGlmIChuZXdWYWx1ZSkge1xyXG4gICAgICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZTtcclxuICAgICAgIH1cclxuICAgICB9KTtcclxuICB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgIGlmIChjaGFuZ2VzLnBhZ2luYXRpb24pIHtcclxuICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2U7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmxvYWRpbmdTdWIpIHtcclxuICAgICAgdGhpcy5sb2FkaW5nU3ViLnVuc3Vic2NyaWJlKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBlbWl0TmV3UGFnaW5hdGlvbihuZXdQYWdpbmF0aW9uOiBJUGFnaW5hdGlvbikge1xyXG4gICAgdGhpcy5sb2FkaW5nID0gdHJ1ZTtcclxuICAgIHRoaXMucGFnaW5hdGlvbkNoYW5nZS5lbWl0KG5ld1BhZ2luYXRpb24pO1xyXG4gIH1cclxuXHJcbiAgZ2V0RWxlbUtleXMoZWxlbTogb2JqZWN0KSB7XHJcbiAgICByZXR1cm4gT2JqZWN0LmtleXMoZWxlbSk7XHJcbiAgfVxyXG5cclxuICBvbkRldGFpbChyb3dFbGVtOiBvYmplY3QpIHtcclxuICAgIHRoaXMuZGV0YWlsU2VsZWN0ZWQuZW1pdChyb3dFbGVtKTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==