ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
141 lines (136 loc) • 11.9 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/platform-browser';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class OTableComponent {
constructor(renderer, sanitizer) {
this.renderer = renderer;
this.sanitizer = sanitizer;
this.isValidateComponent = false;
this.id = 'o-table';
this.columns = [];
this.dataSource = [];
this.isBordered = false;
this.isStriped = false;
this.isScrollable = false;
this.customClasses = '';
this.dataSelectedChange = new EventEmitter();
this.inputCheckArr = [];
this.dataSelected = [];
}
ngOnInit() {
this.componentValidations();
}
ngAfterViewInit() {
this.checkboxRef.map((e) => {
this.inputCheckArr.push(e.nativeElement);
});
}
componentValidations() {
this.isValidateComponent = this.columns.length > 0 && this.dataSource.length > 0;
if (!this.isValidateComponent) {
throw new Error('The columns and dataSource must not be empty');
}
this.columns.map((e) => {
if (e.key === '' || e.value === '') {
this.isValidateComponent = false;
throw new Error('The columns must not have null values');
}
});
this.columns.map((e) => (e.value = e.value.trim()));
this.columns = this.columns.map((e) => {
e.value = e.value.charAt(0).toUpperCase() + e.value.slice(1).toLowerCase();
return e;
});
this.columns.map((e) => {
if (e.value.match(/^[a-zA-ZáéíóúÁÉÍÓÚñÑ ]*$/) && e.key.match(/^[a-zA-Z ]*$/)) {
this.isValidateComponent = true;
return e;
}
else {
this.isValidateComponent = false;
throw new Error('The columns value must not contain numbers or symbols and the key must not contain numbers, symbols or accents');
}
});
}
sanitizeHTML(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
onHeaderCheckboxChange(event) {
const target = event.target;
if (target) {
const isChecked = target.checked;
this.checkboxRef.toArray().forEach((checkbox) => {
checkbox.nativeElement.checked = isChecked;
});
if (isChecked) {
this.dataSelected = [...this.dataSource];
}
else {
this.dataSelected = [];
}
this.dataSelectedChange.emit(this.dataSelected);
}
}
onCheckboxChange(data, event) {
if (event && event.target && typeof event.target.checked === 'boolean') {
const isChecked = event.target.checked;
if (isChecked) {
this.dataSelected.push(data);
}
else {
const index = this.dataSelected.findIndex((item) => item === data);
if (index !== -1) {
this.dataSelected.splice(index, 1);
}
}
this.dataSelectedChange.emit(this.dataSelected);
}
}
}
OTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTableComponent, deps: [{ token: i0.Renderer2 }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
OTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OTableComponent, selector: "o-table", inputs: { id: "id", columns: "columns", dataSource: "dataSource", isBordered: "isBordered", isStriped: "isStriped", isScrollable: "isScrollable", customClasses: "customClasses", checkbox: "checkbox" }, outputs: { dataSelectedChange: "dataSelectedChange" }, viewQueries: [{ propertyName: "checkboxRef", predicate: ["checkbox"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'responsive-scroll': isScrollable }\" [class]=\"customClasses\" tabindex=\"0\">\r\n <table\r\n *ngIf=\"isValidateComponent\"\r\n class=\"table\"\r\n [ngClass]=\"{ 'table-borderless': !isBordered, 'table-striped': isStriped }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" *ngIf=\"checkbox?.isAllSelectable == true\" [ngClass]=\"checkbox.customClassesTh\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input\r\n class=\"custom-control-input\"\r\n type=\"checkbox\"\r\n id=\"{{ id }}-selectAllCheckbox\"\r\n name=\"{{ id }}-selectAllCheckbox\"\r\n value=\"\"\r\n (change)=\"onHeaderCheckboxChange($event)\"\r\n />\r\n <label\r\n [ngClass]=\"checkbox.customClassesLabel\"\r\n class=\"custom-control-label\"\r\n for=\"{{ id }}-selectAllCheckbox\"\r\n aria-label=\"Descripci\u00F3n para usuarios de lectores de pantalla\"\r\n >{{ checkbox.title }}</label\r\n >\r\n </div>\r\n </th>\r\n <th scope=\"col\" *ngIf=\"checkbox?.isAllSelectable == false\" [ngClass]=\"checkbox.customClassesTh\">\r\n {{ checkbox.title }}\r\n </th>\r\n <ng-container *ngFor=\"let column of columns\">\r\n <th scope=\"col\" [ngClass]=\"column.customClasses\">{{ column.value }}</th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of dataSource; let i = index\">\r\n <td *ngIf=\"checkbox\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input\r\n #checkbox\r\n class=\"custom-control-input\"\r\n type=\"checkbox\"\r\n id=\"{{ id }}-checkbox_{{ i }}\"\r\n name=\"{{ id }}-checkbox_{{ i }}\"\r\n value=\"\"\r\n (change)=\"onCheckboxChange(data, $event)\"\r\n />\r\n <label\r\n class=\"custom-control-label no-text\"\r\n for=\"{{ id }}-checkbox_{{ i }}\"\r\n aria-label=\"Descripci\u00F3n para usuarios de lectores de pantalla\"\r\n ></label>\r\n </div>\r\n </td>\r\n <ng-container *ngFor=\"let column of columns\">\r\n <td [ngClass]=\"data[column.key].customClasses\">\r\n <div *ngIf=\"data[column.key].data\" [innerHTML]=\"sanitizeHTML(data[column.key].data)\"></div>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTableComponent, decorators: [{
type: Component,
args: [{ selector: 'o-table', template: "<div [ngClass]=\"{ 'responsive-scroll': isScrollable }\" [class]=\"customClasses\" tabindex=\"0\">\r\n <table\r\n *ngIf=\"isValidateComponent\"\r\n class=\"table\"\r\n [ngClass]=\"{ 'table-borderless': !isBordered, 'table-striped': isStriped }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" *ngIf=\"checkbox?.isAllSelectable == true\" [ngClass]=\"checkbox.customClassesTh\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input\r\n class=\"custom-control-input\"\r\n type=\"checkbox\"\r\n id=\"{{ id }}-selectAllCheckbox\"\r\n name=\"{{ id }}-selectAllCheckbox\"\r\n value=\"\"\r\n (change)=\"onHeaderCheckboxChange($event)\"\r\n />\r\n <label\r\n [ngClass]=\"checkbox.customClassesLabel\"\r\n class=\"custom-control-label\"\r\n for=\"{{ id }}-selectAllCheckbox\"\r\n aria-label=\"Descripci\u00F3n para usuarios de lectores de pantalla\"\r\n >{{ checkbox.title }}</label\r\n >\r\n </div>\r\n </th>\r\n <th scope=\"col\" *ngIf=\"checkbox?.isAllSelectable == false\" [ngClass]=\"checkbox.customClassesTh\">\r\n {{ checkbox.title }}\r\n </th>\r\n <ng-container *ngFor=\"let column of columns\">\r\n <th scope=\"col\" [ngClass]=\"column.customClasses\">{{ column.value }}</th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of dataSource; let i = index\">\r\n <td *ngIf=\"checkbox\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input\r\n #checkbox\r\n class=\"custom-control-input\"\r\n type=\"checkbox\"\r\n id=\"{{ id }}-checkbox_{{ i }}\"\r\n name=\"{{ id }}-checkbox_{{ i }}\"\r\n value=\"\"\r\n (change)=\"onCheckboxChange(data, $event)\"\r\n />\r\n <label\r\n class=\"custom-control-label no-text\"\r\n for=\"{{ id }}-checkbox_{{ i }}\"\r\n aria-label=\"Descripci\u00F3n para usuarios de lectores de pantalla\"\r\n ></label>\r\n </div>\r\n </td>\r\n <ng-container *ngFor=\"let column of columns\">\r\n <td [ngClass]=\"data[column.key].customClasses\">\r\n <div *ngIf=\"data[column.key].data\" [innerHTML]=\"sanitizeHTML(data[column.key].data)\"></div>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n" }]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.DomSanitizer }]; }, propDecorators: { id: [{
type: Input
}], columns: [{
type: Input
}], dataSource: [{
type: Input
}], isBordered: [{
type: Input
}], isStriped: [{
type: Input
}], isScrollable: [{
type: Input
}], customClasses: [{
type: Input
}], checkbox: [{
type: Input
}], dataSelectedChange: [{
type: Output
}], checkboxRef: [{
type: ViewChildren,
args: ['checkbox']
}] } });
class OTableModule {
}
OTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OTableModule, declarations: [OTableComponent], imports: [CommonModule], exports: [OTableComponent] });
OTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTableModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTableModule, decorators: [{
type: NgModule,
args: [{
declarations: [OTableComponent],
imports: [CommonModule],
exports: [OTableComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OTableComponent, OTableModule };
//# sourceMappingURL=ngx-obelisco-example-table.mjs.map