@etninfinite/core 1.0.1 → 1.0.2
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.
- package/fesm2022/etninfinite-core.mjs +113 -6
- package/fesm2022/etninfinite-core.mjs.map +1 -1
- package/index.d.ts +87 -5237
- package/package.json +5 -5
|
@@ -1,9 +1,24 @@
|
|
|
1
|
+
import * as i4 from '@angular/common';
|
|
1
2
|
import { CommonModule } from '@angular/common';
|
|
2
3
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Input, ViewEncapsulation, Component } from '@angular/core';
|
|
4
|
+
import { Input, ViewEncapsulation, Component, inject } from '@angular/core';
|
|
4
5
|
import * as i1 from 'primeng/button';
|
|
5
6
|
import { ButtonModule } from 'primeng/button';
|
|
6
|
-
import { definePreset } from '@
|
|
7
|
+
import { definePreset } from '@primeuix/themes';
|
|
8
|
+
import { FormsModule } from '@angular/forms';
|
|
9
|
+
import * as i1$1 from 'primeng/table';
|
|
10
|
+
import { TableModule } from 'primeng/table';
|
|
11
|
+
import * as i2 from 'primeng/multiselect';
|
|
12
|
+
import { MultiSelectModule } from 'primeng/multiselect';
|
|
13
|
+
import { InputTextModule } from 'primeng/inputtext';
|
|
14
|
+
import { SelectModule } from 'primeng/select';
|
|
15
|
+
import { IconFieldModule } from 'primeng/iconfield';
|
|
16
|
+
import { InputIconModule } from 'primeng/inputicon';
|
|
17
|
+
import * as i3 from 'primeng/tag';
|
|
18
|
+
import { TagModule } from 'primeng/tag';
|
|
19
|
+
import { ProgressBarModule } from 'primeng/progressbar';
|
|
20
|
+
import { ToastModule } from 'primeng/toast';
|
|
21
|
+
import { HttpClient } from '@angular/common/http';
|
|
7
22
|
|
|
8
23
|
class InfBtnComponent {
|
|
9
24
|
label = '';
|
|
@@ -13,10 +28,10 @@ class InfBtnComponent {
|
|
|
13
28
|
isRounded = false;
|
|
14
29
|
size;
|
|
15
30
|
variant;
|
|
16
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
17
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: InfBtnComponent, isStandalone: true, selector: "inf-btn", inputs: { label: "label", serverity: "serverity", isDisabled: "isDisabled", raised: "raised", isRounded: "isRounded", size: "size", variant: "variant" }, ngImport: i0, template: "<p-button\nstyleClass=\"inf-btn\"\nattr.aria-label=\"{{label}}\" \n[severity]=\"serverity\" \n[rounded]=\"isRounded\" \n[raised]=\"raised\" \n[disabled]=\"isDisabled\"\n[size]=\"size\"\n[variant]=\"variant\"\n[label]=\"label\"></p-button>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
18
33
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfBtnComponent, decorators: [{
|
|
20
35
|
type: Component,
|
|
21
36
|
args: [{ selector: 'inf-btn', imports: [CommonModule, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<p-button\nstyleClass=\"inf-btn\"\nattr.aria-label=\"{{label}}\" \n[severity]=\"serverity\" \n[rounded]=\"isRounded\" \n[raised]=\"raised\" \n[disabled]=\"isDisabled\"\n[size]=\"size\"\n[variant]=\"variant\"\n[label]=\"label\"></p-button>" }]
|
|
22
37
|
}], propDecorators: { label: [{
|
|
@@ -5449,9 +5464,101 @@ var index = {
|
|
|
5449
5464
|
|
|
5450
5465
|
const DefaultTheme = definePreset(index);
|
|
5451
5466
|
|
|
5467
|
+
class InfTable {
|
|
5468
|
+
tableData;
|
|
5469
|
+
apiUrl = '';
|
|
5470
|
+
paginator = false;
|
|
5471
|
+
rows = 5;
|
|
5472
|
+
rowsPerPageOptions = [5, 10, 20];
|
|
5473
|
+
stripedRows = false;
|
|
5474
|
+
showGridlines = false;
|
|
5475
|
+
http = inject(HttpClient);
|
|
5476
|
+
showLoading = false;
|
|
5477
|
+
ngOnInit() {
|
|
5478
|
+
if (this.apiUrl) {
|
|
5479
|
+
this.showLoading = true;
|
|
5480
|
+
this.http.get(this.apiUrl).subscribe({
|
|
5481
|
+
next: (data) => {
|
|
5482
|
+
this.tableData = data;
|
|
5483
|
+
this.showLoading = false;
|
|
5484
|
+
},
|
|
5485
|
+
error: (error) => {
|
|
5486
|
+
console.error("Error fetching table data:", error);
|
|
5487
|
+
this.showLoading = false;
|
|
5488
|
+
}
|
|
5489
|
+
});
|
|
5490
|
+
}
|
|
5491
|
+
}
|
|
5492
|
+
set data(input) {
|
|
5493
|
+
if (!input) {
|
|
5494
|
+
return;
|
|
5495
|
+
}
|
|
5496
|
+
if (typeof input === 'object') {
|
|
5497
|
+
this.tableData = input;
|
|
5498
|
+
}
|
|
5499
|
+
else {
|
|
5500
|
+
this.tableData = JSON.parse(input);
|
|
5501
|
+
}
|
|
5502
|
+
}
|
|
5503
|
+
toDynamicCellModel(toCast) {
|
|
5504
|
+
if (!toCast) {
|
|
5505
|
+
// throw an exception
|
|
5506
|
+
}
|
|
5507
|
+
return toCast;
|
|
5508
|
+
}
|
|
5509
|
+
toValues(cell) {
|
|
5510
|
+
return Object.values(cell);
|
|
5511
|
+
}
|
|
5512
|
+
hasFilter(headers) {
|
|
5513
|
+
return headers.some(h => h.filter !== null);
|
|
5514
|
+
}
|
|
5515
|
+
getUniqueOptions(field) {
|
|
5516
|
+
const split = field.split('.');
|
|
5517
|
+
const rootField = split[0];
|
|
5518
|
+
let subField = '';
|
|
5519
|
+
if (split.length >= 2) {
|
|
5520
|
+
subField = split[1];
|
|
5521
|
+
}
|
|
5522
|
+
const uniqueFields = this.tableData?.body.map((item) => {
|
|
5523
|
+
if (subField) {
|
|
5524
|
+
return item[rootField][subField];
|
|
5525
|
+
}
|
|
5526
|
+
else {
|
|
5527
|
+
return item[rootField];
|
|
5528
|
+
}
|
|
5529
|
+
});
|
|
5530
|
+
return uniqueFields;
|
|
5531
|
+
}
|
|
5532
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5533
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: InfTable, isStandalone: true, selector: "inf-table", inputs: { tableData: "tableData", apiUrl: "apiUrl", paginator: "paginator", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", stripedRows: "stripedRows", showGridlines: "showGridlines", data: "data" }, ngImport: i0, template: "@if (tableData) {\n\n <div class=\"inftable\" >\n @if(tableData.title){\n <h2>{{tableData.title}}</h2>\n }\n <p-table [columns]= \"tableData.headers\"\n [value]=\"tableData.body\"\n [stripedRows]=\"stripedRows\"\n [showGridlines]=\"showGridlines\"\n [rows]=\"rows\"\n [loading]=\"showLoading\"\n [rowsPerPageOptions]=\"rowsPerPageOptions\"\n [paginator]=\"paginator\">\n <ng-template #header let-columns>\n <tr>\n @for(col of columns; track col.label) {\n @if(col.sortable){\n <th [pSortableColumn]=\"col.sortOn\">\n <div class=\"sortable-column flex justify-between items-center gap-2\">\n {{col.label}}\n <p-sortIcon [field]=\"col.sortOn\"></p-sortIcon>\n </div>\n </th>\n }@else{\n <th>\n {{col.label}}\n </th>\n }\n }\n </tr>\n @if(hasFilter(tableData.headers)){\n <tr>\n @for(col of columns; track col.label){\n @if(col.filter && col.filter){\n <th>\n @if(col.filter.type === 'basic'){\n <p-columnFilter type=\"text\" [field]=\"col.filter.filterOn\" [placeholder]=\"col.filter.placeholder\" \n ariaLabel=\"{{col.filter.placeholder}}\" filterOn=\"input\"></p-columnFilter>\n }@else if (col.filter.type === 'multiselect') {\n <p-columnFilter [field]=\"col.filter.filterOn\" [placeholder]=\"col.filter.placeholder\" matchMode=\"in\" [showMenu]=\"false\" \n filterElement=\"multiselect\">\n <ng-template #filter let-filter=\"filterCallback\">\n @let uniqueOptions = getUniqueOptions(col.filter.filterOn);\n <p-multiSelect [options]=\"uniqueOptions\" (onChange)=\"filter($event.value)\" [style]=\"{'min-width':'12rem'}\" [showClear]=\"true\" [placeholder]=\"col.filter.placeholder\">\n <ng-template let-option #item>\n <div class=\"flex items-center gap-2\">\n <span>{{option}}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n </ng-template>\n </p-columnFilter>\n }\n </th>\n }@else {\n <th></th>\n }\n }\n </tr>\n }\n\n </ng-template>\n <ng-template #body let-row>\n <tr>\n @let attrValues = toValues(row);\n @for(attr of attrValues; track $index) {\n <td>\n @if(typeof attr === 'string'){\n {{attr}}\n }@else {\n @let data = toDynamicCellModel(attr);\n @if(data.type === 'tags'){\n <div class=\"tags flex gap-2 flex-wrap\">\n @for(tag of (data.tags); track tag) {\n <p-tag [value]=\"tag.label\" [severity]=\"tag.severity\" />\n }\n </div>\n }@else if(data.type === 'currency'){\n {{data.value | currency: data.currency?.format}}\n }@else if(data.type === 'date'){\n {{data.value | date:data.date?.format}}\n }@else if (data.type==='image') {\n <div class=\"flex items-center\">\n <img src=\"{{data.value}}\" alt=\"{{data.imgProps?.alt}}\" [width]=data.imgProps?.width [height]=\"data.imgProps?.height\" />\n </div>\n }\n @else{\n {{attr}}\n }\n }\n </td>\n }\n </tr>\n </ng-template>\n </p-table>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "ngmodule", type: ToastModule }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
|
|
5534
|
+
}
|
|
5535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfTable, decorators: [{
|
|
5536
|
+
type: Component,
|
|
5537
|
+
args: [{ selector: 'inf-table', imports: [CommonModule, TableModule, ButtonModule,
|
|
5538
|
+
MultiSelectModule, InputTextModule, SelectModule,
|
|
5539
|
+
InputIconModule, IconFieldModule, FormsModule, TagModule,
|
|
5540
|
+
ProgressBarModule, ToastModule], encapsulation: ViewEncapsulation.None, template: "@if (tableData) {\n\n <div class=\"inftable\" >\n @if(tableData.title){\n <h2>{{tableData.title}}</h2>\n }\n <p-table [columns]= \"tableData.headers\"\n [value]=\"tableData.body\"\n [stripedRows]=\"stripedRows\"\n [showGridlines]=\"showGridlines\"\n [rows]=\"rows\"\n [loading]=\"showLoading\"\n [rowsPerPageOptions]=\"rowsPerPageOptions\"\n [paginator]=\"paginator\">\n <ng-template #header let-columns>\n <tr>\n @for(col of columns; track col.label) {\n @if(col.sortable){\n <th [pSortableColumn]=\"col.sortOn\">\n <div class=\"sortable-column flex justify-between items-center gap-2\">\n {{col.label}}\n <p-sortIcon [field]=\"col.sortOn\"></p-sortIcon>\n </div>\n </th>\n }@else{\n <th>\n {{col.label}}\n </th>\n }\n }\n </tr>\n @if(hasFilter(tableData.headers)){\n <tr>\n @for(col of columns; track col.label){\n @if(col.filter && col.filter){\n <th>\n @if(col.filter.type === 'basic'){\n <p-columnFilter type=\"text\" [field]=\"col.filter.filterOn\" [placeholder]=\"col.filter.placeholder\" \n ariaLabel=\"{{col.filter.placeholder}}\" filterOn=\"input\"></p-columnFilter>\n }@else if (col.filter.type === 'multiselect') {\n <p-columnFilter [field]=\"col.filter.filterOn\" [placeholder]=\"col.filter.placeholder\" matchMode=\"in\" [showMenu]=\"false\" \n filterElement=\"multiselect\">\n <ng-template #filter let-filter=\"filterCallback\">\n @let uniqueOptions = getUniqueOptions(col.filter.filterOn);\n <p-multiSelect [options]=\"uniqueOptions\" (onChange)=\"filter($event.value)\" [style]=\"{'min-width':'12rem'}\" [showClear]=\"true\" [placeholder]=\"col.filter.placeholder\">\n <ng-template let-option #item>\n <div class=\"flex items-center gap-2\">\n <span>{{option}}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n </ng-template>\n </p-columnFilter>\n }\n </th>\n }@else {\n <th></th>\n }\n }\n </tr>\n }\n\n </ng-template>\n <ng-template #body let-row>\n <tr>\n @let attrValues = toValues(row);\n @for(attr of attrValues; track $index) {\n <td>\n @if(typeof attr === 'string'){\n {{attr}}\n }@else {\n @let data = toDynamicCellModel(attr);\n @if(data.type === 'tags'){\n <div class=\"tags flex gap-2 flex-wrap\">\n @for(tag of (data.tags); track tag) {\n <p-tag [value]=\"tag.label\" [severity]=\"tag.severity\" />\n }\n </div>\n }@else if(data.type === 'currency'){\n {{data.value | currency: data.currency?.format}}\n }@else if(data.type === 'date'){\n {{data.value | date:data.date?.format}}\n }@else if (data.type==='image') {\n <div class=\"flex items-center\">\n <img src=\"{{data.value}}\" alt=\"{{data.imgProps?.alt}}\" [width]=data.imgProps?.width [height]=\"data.imgProps?.height\" />\n </div>\n }\n @else{\n {{attr}}\n }\n }\n </td>\n }\n </tr>\n </ng-template>\n </p-table>\n </div>\n}\n" }]
|
|
5541
|
+
}], propDecorators: { tableData: [{
|
|
5542
|
+
type: Input
|
|
5543
|
+
}], apiUrl: [{
|
|
5544
|
+
type: Input
|
|
5545
|
+
}], paginator: [{
|
|
5546
|
+
type: Input
|
|
5547
|
+
}], rows: [{
|
|
5548
|
+
type: Input
|
|
5549
|
+
}], rowsPerPageOptions: [{
|
|
5550
|
+
type: Input
|
|
5551
|
+
}], stripedRows: [{
|
|
5552
|
+
type: Input
|
|
5553
|
+
}], showGridlines: [{
|
|
5554
|
+
type: Input
|
|
5555
|
+
}], data: [{
|
|
5556
|
+
type: Input
|
|
5557
|
+
}] } });
|
|
5558
|
+
|
|
5452
5559
|
/**
|
|
5453
5560
|
* Generated bundle index. Do not edit.
|
|
5454
5561
|
*/
|
|
5455
5562
|
|
|
5456
|
-
export { DefaultTheme, InfBtnComponent };
|
|
5563
|
+
export { DefaultTheme, InfBtnComponent, InfTable };
|
|
5457
5564
|
//# sourceMappingURL=etninfinite-core.mjs.map
|