kwikui
Version:
KwikID's UI Component Library in Angular
55 lines • 10.3 kB
JavaScript
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { throwErrorMessage } from "../../../../helpers/kwikui.common.helpers";
import { DEFAULT_VALUES, VALIDATE_KEY_VALUES } from "./table.constants";
import { isValidKeyValue } from "./table.validation";
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/addon-table";
import * as i2 from "@angular/common";
import * as i3 from "@taiga-ui/cdk";
export class KwikUITableComponent {
constructor() {
this.columns = DEFAULT_VALUES.columns;
this.data = DEFAULT_VALUES.data;
this.headers = DEFAULT_VALUES.headers;
this.id = DEFAULT_VALUES.id;
this.onClick = new EventEmitter();
}
ngOnInit() { }
ngOnChanges(changes) {
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
}
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES[key] && !isValidKeyValue(key, value)) {
this[key] = DEFAULT_VALUES[key];
throwErrorMessage("kwikui-table", this.id, key, value, DEFAULT_VALUES[key]);
}
}
handleOnClick(e) {
this.onClick.emit(e);
}
}
/** @nocollapse */ KwikUITableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUITableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUITableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUITableComponent, selector: "kwikui-table", inputs: { columns: "columns", data: "data", headers: "headers", id: "id" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<table\n tuiTable\n [columns]=\"columns\"\n>\n <thead>\n <tr tuiThGroup>\n <ng-container *ngFor=\"let header of columns\">\n <th\n *tuiHead=\"header\"\n tuiTh\n >{{ headers[header] }}</th\n >\n </ng-container>\n </tr>\n </thead>\n <tbody\n *tuiLet=\"data | tuiTableSort as sortedUsers\"\n tuiTbody\n [data]=\"sortedUsers\"\n >\n <tr\n *ngFor=\"let item of sortedUsers; let index = index\"\n (click)=\"handleOnClick(item)\"\n tuiTr\n >\n <ng-container *ngFor=\"let header of columns\">\n <td\n *tuiCell=\"header\"\n tuiTd\n >{{ item[header] }}</td\n >\n </ng-container>\n </tr>\n </tbody>\n</table>\n", styles: ["thead{border:1px solid var(--tui-base-04)!important}td,th{white-space:nowrap;border-color:transparent;border-right-color:var(--tui-base-04)}th{border-bottom-color:var(--tui-base-04)}td:last-child,th:last-child{border-right-color:transparent}tbody{border-color:transparent}tr:nth-child(even) td{background:var(--tui-base-02)}tr:hover td{cursor:pointer;background:var(--tui-base-03)}.alive,.deceased{display:flex;align-items:center;text-transform:capitalize}.alive:before,.deceased:before{content:\"\";width:.5rem;height:.5rem;border-radius:100%;margin-right:.5rem;background:var(--tui-base-04)}.alive:before{background:var(--tui-success-fill)}.remove{opacity:0}tr:hover .remove,tr:focus-within .remove{opacity:1}\n"], components: [{ type: i1.TuiThGroupComponent, selector: "tr[tuiThGroup]" }, { type: i1.TuiThComponent, selector: "th[tuiTh]", inputs: ["sorter", "resizable", "sticky", "requiredSort"] }, { type: i1.TuiTbodyComponent, selector: "tbody[tuiTbody]", inputs: ["data", "heading", "open"], outputs: ["openChange"] }, { type: i1.TuiTrComponent, selector: "tr[tuiTr]" }, { type: i1.TuiTdComponent, selector: "th[tuiTd], td[tuiTd]" }], directives: [{ type: i1.TuiTableDirective, selector: "table[tuiTable]", inputs: ["columns", "size", "direction", "sorter"], outputs: ["directionChange", "sorterChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.TuiHeadDirective, selector: "[tuiHead]", inputs: ["tuiHead"] }, { type: i3.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i1.TuiCellDirective, selector: "ng-template[tuiCell]", inputs: ["tuiCell"] }], pipes: { "tuiTableSort": i1.TuiTableSortPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUITableComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-table",
templateUrl: "./table.component.html",
styleUrls: ["./table.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { columns: [{
type: Input
}], data: [{
type: Input
}], headers: [{
type: Input
}], id: [{
type: Input
}], onClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva3dpa3VpL3NyYy9saWIvY29tcG9uZW50cy9jb3JlL3RhYmxlcy90YWJsZS90YWJsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rd2lrdWkvc3JjL2xpYi9jb21wb25lbnRzL2NvcmUvdGFibGVzL3RhYmxlL3RhYmxlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBRVAsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDOUUsT0FBTyxFQUFFLGNBQWMsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3hFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7Ozs7QUFPckQsTUFBTSxPQUFPLG9CQUFvQjtJQVcvQjtRQVZTLFlBQU8sR0FBZSxjQUFjLENBQUMsT0FBTyxDQUFDO1FBRTdDLFNBQUksR0FBZSxjQUFjLENBQUMsSUFBSSxDQUFDO1FBRXZDLFlBQU8sR0FBVyxjQUFjLENBQUMsT0FBTyxDQUFDO1FBRXpDLE9BQUUsR0FBVyxjQUFjLENBQUMsRUFBRSxDQUFDO1FBRTlCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBRTdCLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFbkIsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLEtBQUssTUFBTSxNQUFNLElBQUksTUFBTSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUM1QyxNQUFNLEdBQUcsR0FBVyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDOUIsTUFBTSxLQUFLLEdBQVEsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQztZQUMxQyxJQUFJLENBQUMscUJBQXFCLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ3hDO0lBQ0gsQ0FBQztJQUVPLHFCQUFxQixDQUFDLEdBQVcsRUFBRSxLQUFVO1FBQ25ELElBQUksbUJBQW1CLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFO1lBQzVELElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxjQUFjLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDaEMsaUJBQWlCLENBQ2YsY0FBYyxFQUNkLElBQUksQ0FBQyxFQUFFLEVBQ1AsR0FBRyxFQUNILEtBQUssRUFDTCxjQUFjLENBQUMsR0FBRyxDQUFDLENBQ3BCLENBQUM7U0FDSDtJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsQ0FBTTtRQUNsQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN2QixDQUFDOztxSUF0Q1Usb0JBQW9CO3lIQUFwQixvQkFBb0Isc0xDbEJqQyw2dUJBbUNBOzRGRGpCYSxvQkFBb0I7a0JBTGhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7b0JBQ3hCLFdBQVcsRUFBRSx3QkFBd0I7b0JBQ3JDLFNBQVMsRUFBRSxDQUFDLHdCQUF3QixDQUFDO2lCQUN0QzswRUFFVSxPQUFPO3NCQUFmLEtBQUs7Z0JBRUcsSUFBSTtzQkFBWixLQUFLO2dCQUVHLE9BQU87c0JBQWYsS0FBSztnQkFFRyxFQUFFO3NCQUFWLEtBQUs7Z0JBRUksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgU2ltcGxlQ2hhbmdlc1xufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgdGhyb3dFcnJvck1lc3NhZ2UgfSBmcm9tIFwiLi4vLi4vLi4vLi4vaGVscGVycy9rd2lrdWkuY29tbW9uLmhlbHBlcnNcIjtcbmltcG9ydCB7IERFRkFVTFRfVkFMVUVTLCBWQUxJREFURV9LRVlfVkFMVUVTIH0gZnJvbSBcIi4vdGFibGUuY29uc3RhbnRzXCI7XG5pbXBvcnQgeyBpc1ZhbGlkS2V5VmFsdWUgfSBmcm9tIFwiLi90YWJsZS52YWxpZGF0aW9uXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJrd2lrdWktdGFibGVcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi90YWJsZS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vdGFibGUuY29tcG9uZW50LnNjc3NcIl1cbn0pXG5leHBvcnQgY2xhc3MgS3dpa1VJVGFibGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGNvbHVtbnM6IEFycmF5PGFueT4gPSBERUZBVUxUX1ZBTFVFUy5jb2x1bW5zO1xuXG4gIEBJbnB1dCgpIGRhdGE6IEFycmF5PGFueT4gPSBERUZBVUxUX1ZBTFVFUy5kYXRhO1xuXG4gIEBJbnB1dCgpIGhlYWRlcnM6IG9iamVjdCA9IERFRkFVTFRfVkFMVUVTLmhlYWRlcnM7XG5cbiAgQElucHV0KCkgaWQ6IHN0cmluZyA9IERFRkFVTFRfVkFMVUVTLmlkO1xuXG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgZm9yIChjb25zdCBjaGFuZ2Ugb2YgT2JqZWN0LmVudHJpZXMoY2hhbmdlcykpIHtcbiAgICAgIGNvbnN0IGtleTogc3RyaW5nID0gY2hhbmdlWzBdO1xuICAgICAgY29uc3QgdmFsdWU6IGFueSA9IGNoYW5nZVsxXS5jdXJyZW50VmFsdWU7XG4gICAgICB0aGlzLnZhbGlkYXRlSW5wdXRQcm9wZXJ0eShrZXksIHZhbHVlKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHZhbGlkYXRlSW5wdXRQcm9wZXJ0eShrZXk6IHN0cmluZywgdmFsdWU6IGFueSk6IHZvaWQge1xuICAgIGlmIChWQUxJREFURV9LRVlfVkFMVUVTW2tleV0gJiYgIWlzVmFsaWRLZXlWYWx1ZShrZXksIHZhbHVlKSkge1xuICAgICAgdGhpc1trZXldID0gREVGQVVMVF9WQUxVRVNba2V5XTtcbiAgICAgIHRocm93RXJyb3JNZXNzYWdlKFxuICAgICAgICBcImt3aWt1aS10YWJsZVwiLFxuICAgICAgICB0aGlzLmlkLFxuICAgICAgICBrZXksXG4gICAgICAgIHZhbHVlLFxuICAgICAgICBERUZBVUxUX1ZBTFVFU1trZXldXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIGhhbmRsZU9uQ2xpY2soZTogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoZSk7XG4gIH1cbn1cbiIsIjx0YWJsZVxuICB0dWlUYWJsZVxuICBbY29sdW1uc109XCJjb2x1bW5zXCJcbj5cbiAgPHRoZWFkPlxuICAgIDx0ciB0dWlUaEdyb3VwPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaGVhZGVyIG9mIGNvbHVtbnNcIj5cbiAgICAgICAgPHRoXG4gICAgICAgICAgKnR1aUhlYWQ9XCJoZWFkZXJcIlxuICAgICAgICAgIHR1aVRoXG4gICAgICAgICAgPnt7IGhlYWRlcnNbaGVhZGVyXSB9fTwvdGhcbiAgICAgICAgPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC90cj5cbiAgPC90aGVhZD5cbiAgPHRib2R5XG4gICAgKnR1aUxldD1cImRhdGEgfCB0dWlUYWJsZVNvcnQgYXMgc29ydGVkVXNlcnNcIlxuICAgIHR1aVRib2R5XG4gICAgW2RhdGFdPVwic29ydGVkVXNlcnNcIlxuICA+XG4gICAgPHRyXG4gICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzb3J0ZWRVc2VyczsgbGV0IGluZGV4ID0gaW5kZXhcIlxuICAgICAgKGNsaWNrKT1cImhhbmRsZU9uQ2xpY2soaXRlbSlcIlxuICAgICAgdHVpVHJcbiAgICA+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBoZWFkZXIgb2YgY29sdW1uc1wiPlxuICAgICAgICA8dGRcbiAgICAgICAgICAqdHVpQ2VsbD1cImhlYWRlclwiXG4gICAgICAgICAgdHVpVGRcbiAgICAgICAgICA+e3sgaXRlbVtoZWFkZXJdIH19PC90ZFxuICAgICAgICA+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L3RyPlxuICA8L3Rib2R5PlxuPC90YWJsZT5cbiJdfQ==