spiderly 19.0.8 → 19.1.0-preview
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/spiderly.mjs +97 -36
- package/fesm2022/spiderly.mjs.map +1 -1
- package/lib/components/layout/layout.component.d.ts +8 -4
- package/lib/components/layout/topbar/topbar.component.d.ts +14 -5
- package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts +1 -1
- package/lib/components/spiderly-data-view/spiderly-data-view.component.d.ts +16 -8
- package/lib/controls/spiderly-checkbox/spiderly-checkbox.component.d.ts +5 -2
- package/lib/modules/spiderly-transloco.module.d.ts +1 -0
- package/package.json +1 -1
- package/styles/components/layout/topbar/topbar.component.scss +6 -0
- package/styles/components/spiderly-data-view/spiderly-data-view.component.scss +6 -0
- package/styles/controls/spiderly-checkbox/spiderly-checkbox.component.scss +23 -0
package/fesm2022/spiderly.mjs
CHANGED
|
@@ -66,7 +66,7 @@ import * as i7 from 'primeng/avatar';
|
|
|
66
66
|
import { AvatarModule } from 'primeng/avatar';
|
|
67
67
|
import * as i8 from 'primeng/badge';
|
|
68
68
|
import { BadgeModule } from 'primeng/badge';
|
|
69
|
-
import * as
|
|
69
|
+
import * as i4$b from 'primeng/menubar';
|
|
70
70
|
import { MenubarModule } from 'primeng/menubar';
|
|
71
71
|
import { NgxSpinnerService } from 'ngx-spinner';
|
|
72
72
|
|
|
@@ -707,7 +707,7 @@ class SpiderlyTranslocoModule {
|
|
|
707
707
|
return {
|
|
708
708
|
ngModule: SpiderlyTranslocoModule,
|
|
709
709
|
providers: [
|
|
710
|
-
provideTranslocoPreloadLangs(['
|
|
710
|
+
provideTranslocoPreloadLangs(config.preloadLangs ?? ['en']),
|
|
711
711
|
provideTransloco({
|
|
712
712
|
config: {
|
|
713
713
|
availableLangs: config?.availableLangs ?? [
|
|
@@ -1029,6 +1029,17 @@ class SpiderlyCheckboxComponent extends BaseControl {
|
|
|
1029
1029
|
this.fakeLabel = true;
|
|
1030
1030
|
this.initializeToFalse = false;
|
|
1031
1031
|
this.inlineLabel = false;
|
|
1032
|
+
this.onChange = new EventEmitter();
|
|
1033
|
+
this.change = (event) => {
|
|
1034
|
+
if (this.control.value === false)
|
|
1035
|
+
this.control.setValue(null);
|
|
1036
|
+
else if (this.control.value === true)
|
|
1037
|
+
this.control.setValue(false);
|
|
1038
|
+
else
|
|
1039
|
+
this.control.setValue(true);
|
|
1040
|
+
event.checked = this.control.value;
|
|
1041
|
+
this.onChange.next(event);
|
|
1042
|
+
};
|
|
1032
1043
|
}
|
|
1033
1044
|
ngOnInit() {
|
|
1034
1045
|
if (this.initializeToFalse == true)
|
|
@@ -1036,7 +1047,7 @@ class SpiderlyCheckboxComponent extends BaseControl {
|
|
|
1036
1047
|
super.ngOnInit();
|
|
1037
1048
|
}
|
|
1038
1049
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required\"></required>\r\n </div>\r\n <div
|
|
1050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column gap-2\">\r\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required\"></required>\r\n </div>\r\n <div style=\"margin-top: 0.5rem; position: relative;\">\r\n <p-checkbox\r\n [class]=\"control.value === false ? 'p-checkbox-false' : ''\"\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n [formControl]=\"control\"\r\n [value]=\"inlineLabel ? label : null\"\r\n [id]=\"label\"\r\n [binary]=\"true\"\r\n (onChange)=\"change($event)\"\r\n />\r\n <i \r\n *ngIf=\"control.value === false\" \r\n class=\"pi pi-times p-checkbox-false-icon\" \r\n [style.color]=\"control.disabled ? 'var(--p-checkbox-icon-disabled-color)' : 'var(--p-checkbox-icon-checked-color)'\"\r\n ></i>\r\n </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
|
|
1040
1051
|
}
|
|
1041
1052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, decorators: [{
|
|
1042
1053
|
type: Component,
|
|
@@ -1047,13 +1058,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
|
|
|
1047
1058
|
CheckboxModule,
|
|
1048
1059
|
TooltipModule,
|
|
1049
1060
|
RequiredComponent
|
|
1050
|
-
], template: "<div class=\"flex flex-column gap-2\">\r\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required\"></required>\r\n </div>\r\n <div
|
|
1061
|
+
], template: "<div class=\"flex flex-column gap-2\">\r\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required\"></required>\r\n </div>\r\n <div style=\"margin-top: 0.5rem; position: relative;\">\r\n <p-checkbox\r\n [class]=\"control.value === false ? 'p-checkbox-false' : ''\"\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n [formControl]=\"control\"\r\n [value]=\"inlineLabel ? label : null\"\r\n [id]=\"label\"\r\n [binary]=\"true\"\r\n (onChange)=\"change($event)\"\r\n />\r\n <i \r\n *ngIf=\"control.value === false\" \r\n class=\"pi pi-times p-checkbox-false-icon\" \r\n [style.color]=\"control.disabled ? 'var(--p-checkbox-icon-disabled-color)' : 'var(--p-checkbox-icon-checked-color)'\"\r\n ></i>\r\n </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"] }]
|
|
1051
1062
|
}], ctorParameters: () => [{ type: i1$2.TranslocoService }], propDecorators: { fakeLabel: [{
|
|
1052
1063
|
type: Input
|
|
1053
1064
|
}], initializeToFalse: [{
|
|
1054
1065
|
type: Input
|
|
1055
1066
|
}], inlineLabel: [{
|
|
1056
1067
|
type: Input
|
|
1068
|
+
}], onChange: [{
|
|
1069
|
+
type: Output
|
|
1057
1070
|
}] } });
|
|
1058
1071
|
|
|
1059
1072
|
class SpiderlyColorpickComponent extends BaseControl {
|
|
@@ -3404,8 +3417,10 @@ class SpiderlyDataTableComponent {
|
|
|
3404
3417
|
case 'boolean':
|
|
3405
3418
|
return rowData[col.field] == true ? this.translocoService.translate('Yes') : this.translocoService.translate('No');
|
|
3406
3419
|
case 'numeric':
|
|
3407
|
-
// TODO make decimal pipe
|
|
3420
|
+
// TODO: make decimal pipe
|
|
3408
3421
|
return rowData[col.field];
|
|
3422
|
+
case 'blob':
|
|
3423
|
+
return getHtmlImgDisplayString64(rowData[col.field]);
|
|
3409
3424
|
default:
|
|
3410
3425
|
return null;
|
|
3411
3426
|
}
|
|
@@ -3517,7 +3532,7 @@ class SpiderlyDataTableComponent {
|
|
|
3517
3532
|
}
|
|
3518
3533
|
}
|
|
3519
3534
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, deps: [{ token: i3.Router }, { token: i1$6.DialogService }, { token: i3.ActivatedRoute }, { token: SpiderlyMessageService }, { token: i1$2.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", getTableDataObservableMethod: "getTableDataObservableMethod", exportTableDataToExcelObservableMethod: "exportTableDataToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"> \r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"table-header overflow-auto\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n </div>\r\n <div style=\"display: flex; gap: 8px;\">\r\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n <div style=\"display: flex; gap: 8px;\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n </div>\r\n </th>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{col.name}}\r\n <p-columnFilter *ngIf=\"col.filterType != null\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n [matchMode]=\"getColMatchMode(col.filterType)\"\r\n >\r\n <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == 'multiple'\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n </td>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <td [pTooltip]=\"getRowData(rowData, col)\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n </ng-container>\r\n </div>\r\n {{getRowData(rowData, col)}}\r\n </td>\r\n <td *ngIf=\"col.editable\">\r\n <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"loadingbody\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorright\">\r\n <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "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", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
|
|
3535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", getTableDataObservableMethod: "getTableDataObservableMethod", exportTableDataToExcelObservableMethod: "exportTableDataToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"> \r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"table-header overflow-auto\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n </div>\r\n <div style=\"display: flex; gap: 8px;\">\r\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n <div style=\"display: flex; gap: 8px;\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n </div>\r\n </th>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{col.name}}\r\n <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n [matchMode]=\"getColMatchMode(col.filterType)\"\r\n >\r\n <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == 'multiple'\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n </td>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <td [pTooltip]=\"col.filterType !== 'blob' ? getRowData(rowData, col) : ''\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n <img height=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n </ng-container>\r\n <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n {{getRowData(rowData, col)}}\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"col.editable\">\r\n <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"loadingbody\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorright\">\r\n <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "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", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
|
|
3521
3536
|
}
|
|
3522
3537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
|
|
3523
3538
|
type: Component,
|
|
@@ -3531,7 +3546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
|
|
|
3531
3546
|
MultiSelectModule,
|
|
3532
3547
|
CheckboxModule,
|
|
3533
3548
|
TooltipModule,
|
|
3534
|
-
], template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"> \r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"table-header overflow-auto\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n </div>\r\n <div style=\"display: flex; gap: 8px;\">\r\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n <div style=\"display: flex; gap: 8px;\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n </div>\r\n </th>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{col.name}}\r\n <p-columnFilter *ngIf=\"col.filterType != null\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n [matchMode]=\"getColMatchMode(col.filterType)\"\r\n >\r\n <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == 'multiple'\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n </td>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <td [pTooltip]=\"getRowData(rowData, col)\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n </ng-container>\r\n </div>\r\n
|
|
3549
|
+
], template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"> \r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"table-header overflow-auto\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i class=\"{{tableIcon}} text-2xl primary-color\"></i>\r\n <h5 style=\"margin: 0px;\">{{tableTitle}}</h5>\r\n </div>\r\n <div style=\"display: flex; gap: 8px;\">\r\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n <div style=\"display: flex; gap: 8px;\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n </div>\r\n </th>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{col.name}}\r\n <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n [matchMode]=\"getColMatchMode(col.filterType)\"\r\n >\r\n <ng-container *ngIf=\"isDropOrMulti(col.filterType)\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == 'multiple'\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData.id, rowData.index)\" [ngModel]=\"isRowSelected(rowData.id)\" [binary]=\"true\"></p-checkbox>\r\n </td>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <td [pTooltip]=\"col.filterType !== 'blob' ? getRowData(rowData, col) : ''\" [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n <img height=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n </ng-container>\r\n <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n {{getRowData(rowData, col)}}\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"col.editable\">\r\n <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"loadingbody\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorright\">\r\n <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
|
|
3535
3550
|
}], ctorParameters: () => [{ type: i3.Router }, { type: i1$6.DialogService }, { type: i3.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1$2.TranslocoService }, { type: undefined, decorators: [{
|
|
3536
3551
|
type: Inject,
|
|
3537
3552
|
args: [LOCALE_ID]
|
|
@@ -3638,15 +3653,21 @@ class AllClickEvent {
|
|
|
3638
3653
|
}
|
|
3639
3654
|
|
|
3640
3655
|
class SpiderlyDataViewComponent {
|
|
3641
|
-
constructor(
|
|
3642
|
-
this.router = router;
|
|
3643
|
-
this.route = route;
|
|
3656
|
+
constructor(translocoService, locale) {
|
|
3644
3657
|
this.translocoService = translocoService;
|
|
3645
3658
|
this.locale = locale;
|
|
3646
3659
|
this.rows = 10;
|
|
3647
3660
|
this.filters = [];
|
|
3648
|
-
this.showCardWrapper = true;
|
|
3649
3661
|
this.onLazyLoad = new EventEmitter();
|
|
3662
|
+
this.showCardWrapper = true;
|
|
3663
|
+
/**
|
|
3664
|
+
* Whether to display additional data on the right side of the paginator.
|
|
3665
|
+
* Defaults to `false`.
|
|
3666
|
+
*/
|
|
3667
|
+
this.showPaginatorRightData = false;
|
|
3668
|
+
this.showTotalRecordsNumber = false;
|
|
3669
|
+
this.applyFiltersIcon = 'pi pi-filter';
|
|
3670
|
+
this.clearFiltersIcon = 'pi pi-filter-slash';
|
|
3650
3671
|
this.loading = true;
|
|
3651
3672
|
this.matchModeDateOptions = [];
|
|
3652
3673
|
this.matchModeNumberOptions = [];
|
|
@@ -3729,9 +3750,6 @@ class SpiderlyDataViewComponent {
|
|
|
3729
3750
|
return [];
|
|
3730
3751
|
}
|
|
3731
3752
|
}
|
|
3732
|
-
navigateToDetails(rowId) {
|
|
3733
|
-
this.router.navigate([rowId], { relativeTo: this.route });
|
|
3734
|
-
}
|
|
3735
3753
|
reload() {
|
|
3736
3754
|
this.loading = true;
|
|
3737
3755
|
this.items = null;
|
|
@@ -3746,8 +3764,8 @@ class SpiderlyDataViewComponent {
|
|
|
3746
3764
|
clearFilters() {
|
|
3747
3765
|
this.table.clear();
|
|
3748
3766
|
}
|
|
3749
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, deps: [{ token:
|
|
3750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", getTableDataObservableMethod: "getTableDataObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table \r\n #dt \r\n [value]=\"items\" \r\n [rows]=\"rows\" \r\n [rowHover]=\"true\" \r\n responsiveLayout=\"scroll\" \r\n [lazy]=\"true\"\r\n (onLazyLoad)=\"lazyLoad($event)\" \r\n [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n [loading]=\"(items === undefined || loading === true)\" \r\n dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"\r\n [filterDelay]=\"500\"\r\n > \r\n <ng-template #caption>\r\n <div *ngIf=\"filters.length !== 0\">\r\n <div class=\"data-view-grid\">\r\n @for (filter of filters; track $index) {\r\n <div>\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n <div>\r\n <label>\r\n {{filter.name}}\r\n </label>\r\n </div>\r\n\r\n <p-columnFilter *ngIf=\"filter.filterType != null\" [type]=\"filter.filterType\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.filterType)\" [matchModeOptions]=\"getMatchModeOptions(filter.filterType)\" \r\n >\r\n <!-- Multiselect -->\r\n <ng-container *ngIf=\"filter.filterType == 'multiselect'\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div style=\"display: flex; gap: 12px;\">\r\n <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" icon=\"pi pi-search\"></spiderly-button>\r\n <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" icon=\"pi pi-filter-slash\"></spiderly-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #body let-rowData let-index=\"rowIndex\">\r\n <tr class=\"card\" style=\"padding: 0; margin-bottom: 0;\">\r\n <td (click)=\"navigateToDetails(rowData.id)\" style=\"display: block; border: 0; cursor: pointer;\">\r\n <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "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", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
|
|
3767
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, deps: [{ token: i1$2.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3768
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getTableDataObservableMethod: "getTableDataObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table \r\n #dt \r\n [value]=\"items\" \r\n [rows]=\"rows\" \r\n [rowHover]=\"false\" \r\n responsiveLayout=\"scroll\" \r\n [lazy]=\"true\"\r\n (onLazyLoad)=\"lazyLoad($event)\" \r\n [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n [loading]=\"(items === undefined || loading === true)\" \r\n dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"\r\n [filterDelay]=\"500\"\r\n [paginator]=\"true\"\r\n > \r\n <ng-template #caption>\r\n <div *ngIf=\"filters.length !== 0\">\r\n <div class=\"data-view-grid\">\r\n @for (filter of filters; track $index) {\r\n <div>\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n <div>\r\n <label>\r\n {{filter.name}}\r\n </label>\r\n </div>\r\n\r\n <p-columnFilter *ngIf=\"filter.filterType != null\" [type]=\"filter.filterType\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.filterType)\" [matchModeOptions]=\"getMatchModeOptions(filter.filterType)\" \r\n >\r\n <ng-container *ngIf=\"filter.filterType == 'multiselect'\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div style=\"display: flex; gap: 12px;\">\r\n <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #body let-rowData let-index=\"rowIndex\">\r\n <tr style=\"padding: 0; margin-bottom: 0;\">\r\n <td style=\"display: block; border: 0; padding: 0;\">\r\n <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n {{t('NoRecordsFound')}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "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", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
|
|
3751
3769
|
}
|
|
3752
3770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, decorators: [{
|
|
3753
3771
|
type: Component,
|
|
@@ -3765,8 +3783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
|
|
|
3765
3783
|
InputTextModule,
|
|
3766
3784
|
InputNumberModule,
|
|
3767
3785
|
SelectModule,
|
|
3768
|
-
], template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table \r\n #dt \r\n [value]=\"items\" \r\n [rows]=\"rows\" \r\n [rowHover]=\"
|
|
3769
|
-
}], ctorParameters: () => [{ type:
|
|
3786
|
+
], template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table \r\n #dt \r\n [value]=\"items\" \r\n [rows]=\"rows\" \r\n [rowHover]=\"false\" \r\n responsiveLayout=\"scroll\" \r\n [lazy]=\"true\"\r\n (onLazyLoad)=\"lazyLoad($event)\" \r\n [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n [loading]=\"(items === undefined || loading === true)\" \r\n dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"\r\n [filterDelay]=\"500\"\r\n [paginator]=\"true\"\r\n > \r\n <ng-template #caption>\r\n <div *ngIf=\"filters.length !== 0\">\r\n <div class=\"data-view-grid\">\r\n @for (filter of filters; track $index) {\r\n <div>\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n <div>\r\n <label>\r\n {{filter.name}}\r\n </label>\r\n </div>\r\n\r\n <p-columnFilter *ngIf=\"filter.filterType != null\" [type]=\"filter.filterType\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.filterType)\" [matchModeOptions]=\"getMatchModeOptions(filter.filterType)\" \r\n >\r\n <ng-container *ngIf=\"filter.filterType == 'multiselect'\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div style=\"display: flex; gap: 12px;\">\r\n <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #body let-rowData let-index=\"rowIndex\">\r\n <tr style=\"padding: 0; margin-bottom: 0;\">\r\n <td style=\"display: block; border: 0; padding: 0;\">\r\n <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n {{t('NoRecordsFound')}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
|
|
3787
|
+
}], ctorParameters: () => [{ type: i1$2.TranslocoService }, { type: undefined, decorators: [{
|
|
3770
3788
|
type: Inject,
|
|
3771
3789
|
args: [LOCALE_ID]
|
|
3772
3790
|
}] }], propDecorators: { table: [{
|
|
@@ -3778,10 +3796,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
|
|
|
3778
3796
|
type: Input
|
|
3779
3797
|
}], filters: [{
|
|
3780
3798
|
type: Input
|
|
3781
|
-
}], showCardWrapper: [{
|
|
3782
|
-
type: Input
|
|
3783
3799
|
}], onLazyLoad: [{
|
|
3784
3800
|
type: Output
|
|
3801
|
+
}], showCardWrapper: [{
|
|
3802
|
+
type: Input
|
|
3803
|
+
}], showPaginatorRightData: [{
|
|
3804
|
+
type: Input
|
|
3805
|
+
}], showTotalRecordsNumber: [{
|
|
3806
|
+
type: Input
|
|
3807
|
+
}], applyFiltersIcon: [{
|
|
3808
|
+
type: Input
|
|
3809
|
+
}], clearFiltersIcon: [{
|
|
3810
|
+
type: Input
|
|
3785
3811
|
}], getTableDataObservableMethod: [{
|
|
3786
3812
|
type: Input
|
|
3787
3813
|
}], cardBody: [{
|
|
@@ -4124,16 +4150,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
|
|
|
4124
4150
|
}] } });
|
|
4125
4151
|
|
|
4126
4152
|
class TopBarComponent {
|
|
4127
|
-
constructor(config) {
|
|
4153
|
+
constructor(authService, config) {
|
|
4154
|
+
this.authService = authService;
|
|
4128
4155
|
this.config = config;
|
|
4156
|
+
this.menu = [];
|
|
4129
4157
|
this.companyName = this.config.companyName;
|
|
4130
4158
|
this.logoPath = this.config.logoPath;
|
|
4131
|
-
|
|
4159
|
+
/**
|
|
4160
|
+
* Determines whether to show background color on hover
|
|
4161
|
+
* for root menu items. Defaults to `false`.
|
|
4162
|
+
*/
|
|
4163
|
+
this.showHoverBgOnRootItems = false;
|
|
4164
|
+
this.permissionSubscription = null;
|
|
4165
|
+
this.hideMenuItemsBasedOnPermissions = (menu, currentUserPermissionCodes) => {
|
|
4166
|
+
menu.forEach(menuItem => {
|
|
4167
|
+
if (menuItem.items) {
|
|
4168
|
+
this.hideMenuItemsBasedOnPermissions(menuItem.items, currentUserPermissionCodes);
|
|
4169
|
+
}
|
|
4170
|
+
if (typeof menuItem.hasPermission === 'function') {
|
|
4171
|
+
menuItem.visible = menuItem.hasPermission(currentUserPermissionCodes);
|
|
4172
|
+
}
|
|
4173
|
+
});
|
|
4174
|
+
};
|
|
4132
4175
|
}
|
|
4133
4176
|
ngOnInit() {
|
|
4177
|
+
this.permissionSubscription = this.authService.currentUserPermissionCodes$.subscribe((currentUserPermissionCodes) => {
|
|
4178
|
+
this.hideMenuItemsBasedOnPermissions(this.menu, currentUserPermissionCodes);
|
|
4179
|
+
});
|
|
4180
|
+
}
|
|
4181
|
+
ngOnDestroy() {
|
|
4182
|
+
if (this.permissionSubscription) {
|
|
4183
|
+
this.permissionSubscription.unsubscribe();
|
|
4184
|
+
}
|
|
4134
4185
|
}
|
|
4135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\r\n <nav class=\"topbar\">\r\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n <ng-template #start>\r\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n </ng-template>\r\n <ng-template #end>\r\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n <div>\r\n <ng-content select=\"[ACTIONS]\"></ng-content>\r\n </div>\r\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n </div>\r\n </ng-template>\r\n </p-menubar>\r\n </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .p-menubar-item-link{padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type:
|
|
4186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ token: AuthBaseService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4187
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\r\n <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\r\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n <ng-template #start>\r\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n </ng-template>\r\n <ng-template #end>\r\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n <div>\r\n <ng-content select=\"[ACTIONS]\"></ng-content>\r\n </div>\r\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n </div>\r\n </ng-template>\r\n </p-menubar>\r\n </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$b.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout"] }] }); }
|
|
4137
4188
|
}
|
|
4138
4189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, decorators: [{
|
|
4139
4190
|
type: Component,
|
|
@@ -4143,8 +4194,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
|
|
|
4143
4194
|
MenubarModule,
|
|
4144
4195
|
AvatarModule,
|
|
4145
4196
|
ProfileAvatarComponent,
|
|
4146
|
-
], template: "<div class=\"topbar-wrapper\">\r\n <nav class=\"topbar\">\r\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n <ng-template #start>\r\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n </ng-template>\r\n <ng-template #end>\r\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n <div>\r\n <ng-content select=\"[ACTIONS]\"></ng-content>\r\n </div>\r\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n </div>\r\n </ng-template>\r\n </p-menubar>\r\n </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .p-menubar-item-link{padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"] }]
|
|
4147
|
-
}], ctorParameters: () => [{ type: ConfigBaseService }], propDecorators: { menu: [{
|
|
4197
|
+
], template: "<div class=\"topbar-wrapper\">\r\n <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\r\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n <ng-template #start>\r\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n </ng-template>\r\n <ng-template #end>\r\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n <div>\r\n <ng-content select=\"[ACTIONS]\"></ng-content>\r\n </div>\r\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n </div>\r\n </ng-template>\r\n </p-menubar>\r\n </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"] }]
|
|
4198
|
+
}], ctorParameters: () => [{ type: AuthBaseService }, { type: ConfigBaseService }], propDecorators: { menu: [{
|
|
4199
|
+
type: Input
|
|
4200
|
+
}], showHoverBgOnRootItems: [{
|
|
4148
4201
|
type: Input
|
|
4149
4202
|
}] } });
|
|
4150
4203
|
|
|
@@ -4157,6 +4210,11 @@ class SpiderlyLayoutComponent {
|
|
|
4157
4210
|
this.sideMenu = [];
|
|
4158
4211
|
this.topMenu = [];
|
|
4159
4212
|
this.isSideMenuLayout = true;
|
|
4213
|
+
/**
|
|
4214
|
+
* Determines whether to show background color on hover
|
|
4215
|
+
* for root top menu items. Defaults to `false`.
|
|
4216
|
+
*/
|
|
4217
|
+
this.showHoverBgOnRootTopMenuItems = false;
|
|
4160
4218
|
this.onAfterNgDestroy = () => { };
|
|
4161
4219
|
this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
|
|
4162
4220
|
if (!this.menuOutsideClickListener) {
|
|
@@ -4256,7 +4314,7 @@ class SpiderlyLayoutComponent {
|
|
|
4256
4314
|
this.onAfterNgDestroy();
|
|
4257
4315
|
}
|
|
4258
4316
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, deps: [{ token: LayoutBaseService }, { token: i0.Renderer2 }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n <div class=\"layout-sidebar\">\r\n <sidebar [menu]=\"sideMenu\"></sidebar>\r\n </div>\r\n <div class=\"layout-main-container\">\r\n <div class=\"layout-main\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <footer></footer>\r\n </div>\r\n <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n <spiderly-topbar [menu]=\"topMenu\">\r\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n </spiderly-topbar>\r\n <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n <router-outlet></router-outlet>\r\n </main>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu"] }] }); }
|
|
4317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n <div class=\"layout-sidebar\">\r\n <sidebar [menu]=\"sideMenu\"></sidebar>\r\n </div>\r\n <div class=\"layout-main-container\">\r\n <div class=\"layout-main\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <footer></footer>\r\n </div>\r\n <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n </spiderly-topbar>\r\n <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n <router-outlet></router-outlet>\r\n </main>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
|
|
4260
4318
|
}
|
|
4261
4319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, decorators: [{
|
|
4262
4320
|
type: Component,
|
|
@@ -4267,11 +4325,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
|
|
|
4267
4325
|
FooterComponent,
|
|
4268
4326
|
SideMenuTopBarComponent,
|
|
4269
4327
|
TopBarComponent,
|
|
4270
|
-
], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n <div class=\"layout-sidebar\">\r\n <sidebar [menu]=\"sideMenu\"></sidebar>\r\n </div>\r\n <div class=\"layout-main-container\">\r\n <div class=\"layout-main\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <footer></footer>\r\n </div>\r\n <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n <spiderly-topbar [menu]=\"topMenu\">\r\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n </spiderly-topbar>\r\n <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n <router-outlet></router-outlet>\r\n </main>\r\n</div>" }]
|
|
4328
|
+
], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n <div class=\"layout-sidebar\">\r\n <sidebar [menu]=\"sideMenu\"></sidebar>\r\n </div>\r\n <div class=\"layout-main-container\">\r\n <div class=\"layout-main\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <footer></footer>\r\n </div>\r\n <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n </spiderly-topbar>\r\n <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n <router-outlet></router-outlet>\r\n </main>\r\n</div>" }]
|
|
4271
4329
|
}], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.Renderer2 }, { type: i3.Router }], propDecorators: { menu: [{
|
|
4272
4330
|
type: Input
|
|
4273
4331
|
}], isSideMenuLayout: [{
|
|
4274
4332
|
type: Input
|
|
4333
|
+
}], showHoverBgOnRootTopMenuItems: [{
|
|
4334
|
+
type: Input
|
|
4275
4335
|
}], appSidebar: [{
|
|
4276
4336
|
type: ViewChild,
|
|
4277
4337
|
args: [AppSidebarComponent]
|
|
@@ -4571,6 +4631,14 @@ const unauthorizedInterceptor = (req, next) => {
|
|
|
4571
4631
|
translocoService.translate('ServerLostConnectionDetails'), translocoService.translate('ServerLostConnectionTitle'));
|
|
4572
4632
|
return of(err.message);
|
|
4573
4633
|
}
|
|
4634
|
+
else if (err.status == 400) {
|
|
4635
|
+
messageService.warningMessage(errorResponse.message ?? translocoService.translate('BadRequestDetails'), translocoService.translate('Warning'));
|
|
4636
|
+
return of(err.message);
|
|
4637
|
+
}
|
|
4638
|
+
else if (err.status == 401) {
|
|
4639
|
+
messageService.warningMessage(errorResponse.message ?? translocoService.translate('LoginRequired'), translocoService.translate('Warning'));
|
|
4640
|
+
return of(err.message);
|
|
4641
|
+
}
|
|
4574
4642
|
else if (err.status == 403) {
|
|
4575
4643
|
messageService.warningMessage(translocoService.translate('PermissionErrorDetails'), translocoService.translate('PermissionErrorTitle'));
|
|
4576
4644
|
return of(err.message);
|
|
@@ -4579,14 +4647,7 @@ const unauthorizedInterceptor = (req, next) => {
|
|
|
4579
4647
|
messageService.warningMessage(translocoService.translate('NotFoundDetails'), translocoService.translate('NotFoundTitle'));
|
|
4580
4648
|
return of(err.message);
|
|
4581
4649
|
}
|
|
4582
|
-
else if (err.status ==
|
|
4583
|
-
messageService.warningMessage(errorResponse.message ?? translocoService.translate('BadRequestDetails'), translocoService.translate('Warning'));
|
|
4584
|
-
if (err.status == 401) {
|
|
4585
|
-
// authService.logout();
|
|
4586
|
-
}
|
|
4587
|
-
return of(err.message);
|
|
4588
|
-
}
|
|
4589
|
-
else if (err.status == 419) { // FT: We don't want to show error message to the user, we just log him out.
|
|
4650
|
+
else if (err.status == 419) { // Access token expired
|
|
4590
4651
|
return of(err.message);
|
|
4591
4652
|
}
|
|
4592
4653
|
else {
|