sapenlinea-components 0.7.70 → 0.7.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5462,19 +5462,20 @@ class TableChart {
|
|
|
5462
5462
|
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
5463
5463
|
totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
|
|
5464
5464
|
itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
|
|
5465
|
+
collapsedRows = input(7, ...(ngDevMode ? [{ debugName: "collapsedRows" }] : []));
|
|
5465
5466
|
isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
5466
5467
|
localPage = signal(1, ...(ngDevMode ? [{ debugName: "localPage" }] : []));
|
|
5467
5468
|
toggleExpand() {
|
|
5468
5469
|
this.isExpanded.update((value) => !value);
|
|
5469
5470
|
if (!this.isExpanded()) {
|
|
5470
|
-
this.localPage.set(1);
|
|
5471
|
+
this.localPage.set(1);
|
|
5471
5472
|
}
|
|
5472
5473
|
}
|
|
5473
5474
|
displayedData = computed(() => {
|
|
5474
5475
|
const isExpanded = this.isExpanded();
|
|
5475
5476
|
const data = this.data();
|
|
5476
5477
|
if (!isExpanded) {
|
|
5477
|
-
return data.slice(0,
|
|
5478
|
+
return data.slice(0, this.collapsedRows());
|
|
5478
5479
|
}
|
|
5479
5480
|
const pageSize = this.itemsPerPage();
|
|
5480
5481
|
const start = (this.localPage() - 1) * pageSize;
|
|
@@ -5484,12 +5485,12 @@ class TableChart {
|
|
|
5484
5485
|
this.localPage.set(page);
|
|
5485
5486
|
}
|
|
5486
5487
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableChart, isStandalone: true, selector: "lib-table-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n <div class=\"table-chart-header\">\n <h3 class=\"table-chart-title\">{{ title() }}</h3>\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n @if (isExpanded()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-minimize-2\">\n <polyline points=\"4 14 10 14 10 20\" />\n <polyline points=\"20 10 14 10 14 4\" />\n <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-maximize-2\">\n <polyline points=\"15 3 21 3 21 9\" />\n <polyline points=\"9 21 3 21 3 15\" />\n <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n }\n </button>\n </div>\n <div class=\"chart-wrapper\">\n @if (data().length > 0) {\n <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n @if (isExpanded() && totalItems() > itemsPerPage()) {\n <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n }\n } @else {\n <div class=\"no-data\">\n <lib-not-found-section [showButton]=\"false\" />\n </div>\n }\n </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: Table, selector: "lib-table", inputs: ["columns", "data", "actions", "showActions", "statusToneMap", "statusEnumMap", "subColumns", "isRowExpandable", "expandedChildren", "rowIdKey", "showSelection", "showTotals"], outputs: ["optionSelected", "iconAction"] }, { kind: "component", type: NotFoundSection, selector: "lib-not-found-section", inputs: ["showButton", "buttonLabel"], outputs: ["openModal"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["page", "pageSize", "totalItems", "showPageSizeSelector", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }] });
|
|
5488
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableChart, isStandalone: true, selector: "lib-table-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, collapsedRows: { classPropertyName: "collapsedRows", publicName: "collapsedRows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n <div class=\"table-chart-header\">\n <h3 class=\"table-chart-title\">{{ title() }}</h3>\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n @if (isExpanded()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-minimize-2\">\n <polyline points=\"4 14 10 14 10 20\" />\n <polyline points=\"20 10 14 10 14 4\" />\n <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-maximize-2\">\n <polyline points=\"15 3 21 3 21 9\" />\n <polyline points=\"9 21 3 21 3 15\" />\n <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n }\n </button>\n </div>\n <div class=\"chart-wrapper\">\n @if (data().length > 0) {\n <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n @if (isExpanded() && totalItems() > itemsPerPage()) {\n <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n }\n } @else {\n <div class=\"no-data\">\n <lib-not-found-section [showButton]=\"false\" />\n </div>\n }\n </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: Table, selector: "lib-table", inputs: ["columns", "data", "actions", "showActions", "statusToneMap", "statusEnumMap", "subColumns", "isRowExpandable", "expandedChildren", "rowIdKey", "showSelection", "showTotals"], outputs: ["optionSelected", "iconAction"] }, { kind: "component", type: NotFoundSection, selector: "lib-not-found-section", inputs: ["showButton", "buttonLabel"], outputs: ["openModal"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["page", "pageSize", "totalItems", "showPageSizeSelector", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }] });
|
|
5488
5489
|
}
|
|
5489
5490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, decorators: [{
|
|
5490
5491
|
type: Component,
|
|
5491
5492
|
args: [{ selector: 'lib-table-chart', imports: [Table, NotFoundSection, PaginationComponent], template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n <div class=\"table-chart-header\">\n <h3 class=\"table-chart-title\">{{ title() }}</h3>\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n @if (isExpanded()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-minimize-2\">\n <polyline points=\"4 14 10 14 10 20\" />\n <polyline points=\"20 10 14 10 14 4\" />\n <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-maximize-2\">\n <polyline points=\"15 3 21 3 21 9\" />\n <polyline points=\"9 21 3 21 3 15\" />\n <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n }\n </button>\n </div>\n <div class=\"chart-wrapper\">\n @if (data().length > 0) {\n <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n @if (isExpanded() && totalItems() > itemsPerPage()) {\n <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n }\n } @else {\n <div class=\"no-data\">\n <lib-not-found-section [showButton]=\"false\" />\n </div>\n }\n </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
5492
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }] } });
|
|
5493
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], collapsedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedRows", required: false }] }] } });
|
|
5493
5494
|
|
|
5494
5495
|
const Colors = {
|
|
5495
5496
|
primary: '#4B5E05',
|