@obliczeniowo/elementary
Version:
Library made in Angular version 20
122 lines (116 loc) • 13.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Pipe, model, input, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@obliczeniowo/elementary/files';
import * as i1 from '@angular/platform-browser';
class SafePipeDirective {
sanitizer;
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
transform(value, type) {
switch (type) {
case 'html':
return this.sanitizer.bypassSecurityTrustHtml(value);
case 'style':
return this.sanitizer.bypassSecurityTrustStyle(value);
case 'script':
return this.sanitizer.bypassSecurityTrustScript(value);
case 'url':
return this.sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl':
return this.sanitizer.bypassSecurityTrustResourceUrl(value);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SafePipeDirective, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: SafePipeDirective, isStandalone: false, name: "safe" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SafePipeDirective, decorators: [{
type: Pipe,
args: [{
name: 'safe',
standalone: false
}]
}], ctorParameters: () => [{ type: i1.DomSanitizer }] });
class JsonDefTableComponent {
file;
/** Data in form of JSON string or TableData interface */
data = model();
/** Table json file url */
fileUrl = input();
currentSortIndex = -1;
cellSort(cell) {
if (cell.sort) {
this.sort(cell);
}
}
sort(cell) {
if (!this.data) {
return;
}
const data = { ...(this.data()) };
if (data.body && data.header) {
this.currentSortIndex = data.header[0].cells.findIndex(searchElement => searchElement.value === cell.value);
cell.sort.direction = (cell.sort.direction === 'ASC' && 'DESC') || 'ASC';
if (cell.sort.type === 'number') {
data.body = data.body.sort((a, b) => (a.cells[this.currentSortIndex].value || '').localeCompare(b.cells[this.currentSortIndex].value || ''));
}
else {
data.body = data.body.sort((a, b) => (a.cells[this.currentSortIndex].value || '').localeCompare(b.cells[this.currentSortIndex].value || ''));
}
if (cell.sort.direction === 'DESC') {
data.body = data.body.reverse();
}
this.data.set(data);
}
}
headerClass(cell) {
return { ...(cell.class && { [cell.class]: true } || {}), sort: !!cell.sort };
}
constructor(file) {
this.file = file;
}
async ngOnChanges(changes) {
if (changes.fileUrl && this.fileUrl()) {
const data = await this.file.loadJsonFile(this.fileUrl());
if (data) {
this.data.set(data);
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: JsonDefTableComponent, deps: [{ token: i1$1.OblFileService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: JsonDefTableComponent, isStandalone: false, selector: "obl-json-def-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fileUrl: { classPropertyName: "fileUrl", publicName: "fileUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange" }, usesOnChanges: true, ngImport: i0, template: "<table cellspacing=\"0\">\n @if (data()?.caption) {\n <caption>\n @if (data()?.caption?.name) {\n <ng-content [select]=\"data()?.caption?.name\"></ng-content>\n } @else {\n {{ data()?.caption?.value }}\n }\n </caption>\n }\n\n @if (data()?.header) {\n <thead>\n @for (row of data()?.header; track $index) {\n <tr>\n @for (cell of row.cells; track $index) {\n <th\n [style.width]=\"cell.width\"\n [colSpan]=\"cell.mergeX || 1\"\n [rowSpan]=\"cell.mergeY || 1\"\n [class.sort]=\"cell?.sort\"\n (click)=\"cellSort(cell)\"\n >\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n (cell?.name && cellContent) || cellValue;\n context: { $implicit: cell, className: headerClass(cell) }\n \"\n ></ng-container>\n @if (cell?.sort && $index === currentSortIndex) {\n <span class=\"sort\">\n {{ (cell.sort.direction === 'ASC' && '\u2191') || '\u2193' }}\n </span>\n }\n </div>\n </th>\n }\n </tr>\n }\n </thead>\n }\n\n @if (data()?.body) {\n <tbody>\n @for (row of data()?.body; track $index) {\n <tr>\n @for (cell of row.cells; track $index) {\n <td\n [class]=\"cell?.class\"\n [colSpan]=\"cell.mergeX || 1\"\n [rowSpan]=\"cell.mergeY || 1\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n (cell?.name && cellContent) || cellValue;\n context: { $implicit: cell }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tbody>\n }\n\n @if (data()?.foot) {\n <tfoot>\n @for (row of data()?.foot; track $index) {\n <tr>\n @for (cell of row.cells; track $index) {\n <td\n [class]=\"cell?.class\"\n [colSpan]=\"cell.mergeX || 1\"\n [rowSpan]=\"cell.mergeY || 1\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n (cell?.name && cellContent) || cellValue;\n context: { $implicit: cell }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n</table>\n\n<ng-template let-cell let-className=\"className\" #cellValue>\n <div [innerHTML]=\"cell.value | safe : 'html'\" [class]=\"className\"></div>\n</ng-template>\n\n<ng-template let-cell #cellContent>\n @if (cell?.name) {\n <ng-content [select]=\"cell.name\"></ng-content>\n }\n</ng-template>\n", styles: [":host{display:block;overflow:auto;margin-bottom:5px}table{margin:auto}td{padding:10px}.small-padding td{padding:5px}tbody td{background-color:var(--default-background-color, #e2e2e2);border:1px solid gray;color:var(--default-text-color)}tfoot td,thead th{border:1px solid gray;color:#fff;background-color:#000;padding:10px}thead th.sort div{display:flex;flex-wrap:nowrap;justify-content:space-between}tbody,thead{margin:0}td{width:20px;text-align:center}.range{max-width:100px}.right{text-align:right}.left,.left td{text-align:left}.right td{text-align:right}caption{padding:10px}a{color:#337ab7;text-decoration:none}a:href{text-decoration:solid}.center,td.center{text-align:center}td.left{text-align:left}td.right{text-align:right}.sort{cursor:pointer}.sort:hover{background-color:#272727}span.sort{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SafePipeDirective, name: "safe" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: JsonDefTableComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-json-def-table', standalone: false, template: "<table cellspacing=\"0\">\n @if (data()?.caption) {\n <caption>\n @if (data()?.caption?.name) {\n <ng-content [select]=\"data()?.caption?.name\"></ng-content>\n } @else {\n {{ data()?.caption?.value }}\n }\n </caption>\n }\n\n @if (data()?.header) {\n <thead>\n @for (row of data()?.header; track $index) {\n <tr>\n @for (cell of row.cells; track $index) {\n <th\n [style.width]=\"cell.width\"\n [colSpan]=\"cell.mergeX || 1\"\n [rowSpan]=\"cell.mergeY || 1\"\n [class.sort]=\"cell?.sort\"\n (click)=\"cellSort(cell)\"\n >\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n (cell?.name && cellContent) || cellValue;\n context: { $implicit: cell, className: headerClass(cell) }\n \"\n ></ng-container>\n @if (cell?.sort && $index === currentSortIndex) {\n <span class=\"sort\">\n {{ (cell.sort.direction === 'ASC' && '\u2191') || '\u2193' }}\n </span>\n }\n </div>\n </th>\n }\n </tr>\n }\n </thead>\n }\n\n @if (data()?.body) {\n <tbody>\n @for (row of data()?.body; track $index) {\n <tr>\n @for (cell of row.cells; track $index) {\n <td\n [class]=\"cell?.class\"\n [colSpan]=\"cell.mergeX || 1\"\n [rowSpan]=\"cell.mergeY || 1\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n (cell?.name && cellContent) || cellValue;\n context: { $implicit: cell }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tbody>\n }\n\n @if (data()?.foot) {\n <tfoot>\n @for (row of data()?.foot; track $index) {\n <tr>\n @for (cell of row.cells; track $index) {\n <td\n [class]=\"cell?.class\"\n [colSpan]=\"cell.mergeX || 1\"\n [rowSpan]=\"cell.mergeY || 1\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n (cell?.name && cellContent) || cellValue;\n context: { $implicit: cell }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n</table>\n\n<ng-template let-cell let-className=\"className\" #cellValue>\n <div [innerHTML]=\"cell.value | safe : 'html'\" [class]=\"className\"></div>\n</ng-template>\n\n<ng-template let-cell #cellContent>\n @if (cell?.name) {\n <ng-content [select]=\"cell.name\"></ng-content>\n }\n</ng-template>\n", styles: [":host{display:block;overflow:auto;margin-bottom:5px}table{margin:auto}td{padding:10px}.small-padding td{padding:5px}tbody td{background-color:var(--default-background-color, #e2e2e2);border:1px solid gray;color:var(--default-text-color)}tfoot td,thead th{border:1px solid gray;color:#fff;background-color:#000;padding:10px}thead th.sort div{display:flex;flex-wrap:nowrap;justify-content:space-between}tbody,thead{margin:0}td{width:20px;text-align:center}.range{max-width:100px}.right{text-align:right}.left,.left td{text-align:left}.right td{text-align:right}caption{padding:10px}a{color:#337ab7;text-decoration:none}a:href{text-decoration:solid}.center,td.center{text-align:center}td.left{text-align:left}td.right{text-align:right}.sort{cursor:pointer}.sort:hover{background-color:#272727}span.sort{margin-left:10px}\n"] }]
}], ctorParameters: () => [{ type: i1$1.OblFileService }] });
class JsonDefTableModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: JsonDefTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: JsonDefTableModule, declarations: [JsonDefTableComponent,
SafePipeDirective], imports: [CommonModule], exports: [JsonDefTableComponent,
SafePipeDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: JsonDefTableModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: JsonDefTableModule, decorators: [{
type: NgModule,
args: [{
declarations: [
JsonDefTableComponent,
SafePipeDirective
],
imports: [
CommonModule
],
exports: [
JsonDefTableComponent,
SafePipeDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { JsonDefTableComponent, JsonDefTableModule, SafePipeDirective };
//# sourceMappingURL=obliczeniowo-elementary-json-def-table.mjs.map