ngx-st-tables 17.0.0 → 17.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/local-table/configurations/configurations.component.mjs +5 -5
- package/esm2022/lib/components/local-table/local-table.component.mjs +3 -3
- package/esm2022/lib/components/select-table/select-table.component.mjs +9 -8
- package/fesm2022/ngx-st-tables.mjs +9 -9
- package/fesm2022/ngx-st-tables.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -8,11 +8,11 @@ import * as i6$1 from '@angular/material/table';
|
|
|
8
8
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
9
9
|
import * as i2$1 from '@angular/router';
|
|
10
10
|
import { RouterModule } from '@angular/router';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i3 from '@angular/common';
|
|
12
12
|
import { CommonModule } from '@angular/common';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i1 from '@angular/material/button';
|
|
14
14
|
import { MatButtonModule } from '@angular/material/button';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i2 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
17
|
import * as i8 from '@angular/material/form-field';
|
|
18
18
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
@@ -107,11 +107,11 @@ class ConfigurationsComponent {
|
|
|
107
107
|
this.changeConfig.emit(this.selectedConfig?.configId || null);
|
|
108
108
|
}
|
|
109
109
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfigurationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: { configurationsSettings: "configurationsSettings", configurations: "configurations", initSelectedConfig: "initSelectedConfig" }, outputs: { createNewConfig: "createNewConfig", removeConfig: "removeConfig", changeConfig: "changeConfig" }, ngImport: i0, template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\n @if (!creatingConfiguration && !removingConfiguration) {\n <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\n <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\n <mat-select\n [(ngModel)]=\"selectedConfig\"\n (ngModelChange)=\"selectedConfigChanged()\"\n >\n <mat-option [value]=\"null\"></mat-option>\n @for (config of configurations; track config) {\n <mat-option [value]=\"config\">{{ config.configName }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"showCreateConfiguration()\"\n >\n <mat-icon> add </mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n [disabled]=\"!selectedConfig\"\n (click)=\"deleteConfiguration()\"\n >\n <mat-icon> delete </mat-icon>\n </button>\n }\n\n @if (creatingConfiguration) {\n <mat-form-field class=\"col-auto\">\n <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\n <input matInput [(ngModel)]=\"createConfigurationName\" />\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"saveCreateConfiguration()\"\n [disabled]=\"!createConfigurationName\"\n >\n <mat-icon> done </mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"hideCreateConfiguration()\"\n >\n <mat-icon> close </mat-icon>\n </button>\n }\n\n @if (removingConfiguration) {\n <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\n {{ configurationsSettings.deleteWarningTitle }}\n </p>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"acceptDeleteConfiguration()\"\n >\n <mat-icon> done </mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"declineDeleteConfiguration()\"\n >\n <mat-icon> close </mat-icon>\n </button>\n }\n</div>\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"], dependencies: [{ kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
|
|
111
111
|
}
|
|
112
112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfigurationsComponent, decorators: [{
|
|
113
113
|
type: Component,
|
|
114
|
-
args: [{ selector: 'st-configurations[configurationsSettings]', template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\
|
|
114
|
+
args: [{ selector: 'st-configurations[configurationsSettings]', template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\n @if (!creatingConfiguration && !removingConfiguration) {\n <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\n <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\n <mat-select\n [(ngModel)]=\"selectedConfig\"\n (ngModelChange)=\"selectedConfigChanged()\"\n >\n <mat-option [value]=\"null\"></mat-option>\n @for (config of configurations; track config) {\n <mat-option [value]=\"config\">{{ config.configName }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"showCreateConfiguration()\"\n >\n <mat-icon> add </mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n [disabled]=\"!selectedConfig\"\n (click)=\"deleteConfiguration()\"\n >\n <mat-icon> delete </mat-icon>\n </button>\n }\n\n @if (creatingConfiguration) {\n <mat-form-field class=\"col-auto\">\n <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\n <input matInput [(ngModel)]=\"createConfigurationName\" />\n </mat-form-field>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"saveCreateConfiguration()\"\n [disabled]=\"!createConfigurationName\"\n >\n <mat-icon> done </mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"hideCreateConfiguration()\"\n >\n <mat-icon> close </mat-icon>\n </button>\n }\n\n @if (removingConfiguration) {\n <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\n {{ configurationsSettings.deleteWarningTitle }}\n </p>\n <button\n mat-icon-button\n class=\"col-auto green-icon\"\n (click)=\"acceptDeleteConfiguration()\"\n >\n <mat-icon> done </mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"col-auto red-icon\"\n (click)=\"declineDeleteConfiguration()\"\n >\n <mat-icon> close </mat-icon>\n </button>\n }\n</div>\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"] }]
|
|
115
115
|
}], ctorParameters: () => [], propDecorators: { configurationsSettings: [{
|
|
116
116
|
type: Input
|
|
117
117
|
}], configurations: [{
|
|
@@ -333,11 +333,11 @@ class LocalTableComponent {
|
|
|
333
333
|
this.setDisplayedColumns();
|
|
334
334
|
}
|
|
335
335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalTableComponent, deps: [{ token: LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
336
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\r\n <div class=\"row align-items-center\">\r\n <div\r\n class=\"col row align-items-center\"\r\n style=\"padding: 0\"\r\n *ngIf=\"configurationsSettings || allowPickColumns\"\r\n >\r\n <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n <button\r\n mat-icon-button\r\n class=\"col-auto\"\r\n [matMenuTriggerFor]=\"columnsMenu\"\r\n >\r\n <span class=\"material-icons-outlined\"> view_week </span>\r\n </button>\r\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n <ng-container *ngFor=\"let column of columnsArray\">\r\n <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\r\n <mat-checkbox\r\n [(ngModel)]=\"column.visible\"\r\n (ngModelChange)=\"columnVisibleChanged(column)\"\r\n style=\"margin-top: 5px\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n {{ column.translateColumnName }}\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n\r\n <st-configurations\r\n *ngIf=\"configurationsSettings\"\r\n [configurationsSettings]=\"configurationsSettings\"\r\n [configurations]=\"configurations\"\r\n [initSelectedConfig]=\"initConfig\"\r\n (createNewConfig)=\"newConfigCreated($event)\"\r\n (removeConfig)=\"configRemoved($event)\"\r\n (changeConfig)=\"configChanged($event)\"\r\n ></st-configurations>\r\n </div>\r\n\r\n <div\r\n class=\"col\"\r\n style=\"padding: 0; margin-bottom: -15px\"\r\n *ngIf=\"globalSearchSettings?.show\"\r\n >\r\n <mat-form-field>\r\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\r\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"clearSearch()\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n >\r\n <ng-container\r\n [matColumnDef]=\"column\"\r\n *ngFor=\"let column of displayedColumns\"\r\n >\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{\r\n columns[column].width ? 'width:' + columns[column].width : ''\r\n }}\"\r\n mat-sort-header\r\n [disabled]=\"!columns[column].sort\"\r\n >\r\n {{ columns[column].translateColumnName }}\r\n <span\r\n class=\"material-icons search-icon\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"columns[column].search\"\r\n >\r\n search\r\n </span>\r\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n <mat-form-field class=\"col\">\r\n <mat-label>{{ columns[column].searchLabel || 'Search' }}</mat-label>\r\n <input\r\n matInput\r\n (keyup)=\"applySearch()\"\r\n [(ngModel)]=\"searchModel\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"searchModel = ''\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </mat-menu>\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n style=\"{{\r\n columns[column].width ? 'width:' + columns[column].width : ''\r\n }}\"\r\n >\r\n <div\r\n class=\"actions-container\"\r\n style=\"overflow-y: hidden\"\r\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n >\r\n <ng-container *ngFor=\"let action of columns[column].actions\">\r\n <ng-container *ngIf=\"checkIfActionVisible(element, action)\">\r\n <button\r\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\r\n class=\"col-auto\"\r\n mat-icon-button\r\n type=\"button\"\r\n *ngIf=\"!action.url && action.action\"\r\n matTooltip=\"{{ action.tooltipName || '' }}\"\r\n [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n (click)=\"action.action(element)\"\r\n >\r\n <span class=\"material-icons\">{{ action.iconName }}</span>\r\n </button>\r\n\r\n <a *ngIf=\"action.url\" [routerLink]=\"action.url\">\r\n <button\r\n class=\"col-auto\"\r\n mat-icon-button\r\n type=\"button\"\r\n matTooltip=\"{{ action.tooltipName || '' }}\"\r\n [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n >\r\n <span class=\"material-icons\">{{ action.iconName }}</span>\r\n </button>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!columns[column].actions\">\r\n <ng-container *ngIf=\"columns[column].translateValue\">\r\n <p style=\"margin: 0; padding: 0\">\r\n {{ columns[column].translateValue![element[column]] || '' }}\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columns[column].translateValue\">\r\n <ng-container\r\n *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n >\r\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n <p style=\"margin: 0; padding: 0\">\r\n {{ element[column] | stDateTimeFormatPipe }}\r\n </p>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n (click)=\"\r\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\r\n \"\r\n ></tr>\r\n </table>\r\n <mat-paginator\r\n [pageIndex]=\"pageIndex\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n (page)=\"pageChanged($event)\"\r\n [showFirstLastButtons]=\"true\"\r\n ></mat-paginator>\r\n</div>\r\n", styles: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
336
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n @if (configurationsSettings || allowPickColumns) {\n <div class=\"col row align-items-center\" style=\"padding: 0\">\n @if (allowPickColumns) {\n <div class=\"col-auto\" style=\"padding: 0\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <mat-icon> view_week </mat-icon>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n @for (column of columnsArray; track column) {\n @if (!column.notShowInColumnPick) {\n <div mat-menu-item>\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n }\n }\n </mat-menu>\n </div>\n }\n @if (configurationsSettings) {\n <st-configurations\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n }\n </div>\n }\n\n @if (globalSearchSettings?.show) {\n <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\n <mat-form-field>\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n @if (columns[column].search) {\n <mat-icon\n class=\"search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n search\n </mat-icon>\n }\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{\n columns[column].searchLabel || 'Search'\n }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n @if (columns[column].actions && columns[column].actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n >\n @for (action of columns[column].actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!columns[column].actions) {\n @if (columns[column].translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n }\n @if (!columns[column].translateValue) {\n @if (!columns[column].type || columns[column].type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n }\n @if (columns[column].type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
337
337
|
}
|
|
338
338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalTableComponent, decorators: [{
|
|
339
339
|
type: Component,
|
|
340
|
-
args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\
|
|
340
|
+
args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\n <div class=\"row align-items-center\">\n @if (configurationsSettings || allowPickColumns) {\n <div class=\"col row align-items-center\" style=\"padding: 0\">\n @if (allowPickColumns) {\n <div class=\"col-auto\" style=\"padding: 0\">\n <button\n mat-icon-button\n class=\"col-auto\"\n [matMenuTriggerFor]=\"columnsMenu\"\n >\n <mat-icon> view_week </mat-icon>\n </button>\n <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\n @for (column of columnsArray; track column) {\n @if (!column.notShowInColumnPick) {\n <div mat-menu-item>\n <mat-checkbox\n [(ngModel)]=\"column.visible\"\n (ngModelChange)=\"columnVisibleChanged(column)\"\n style=\"margin-top: 5px\"\n (click)=\"$event.stopPropagation()\"\n >\n {{ column.translateColumnName }}\n </mat-checkbox>\n </div>\n }\n }\n </mat-menu>\n </div>\n }\n @if (configurationsSettings) {\n <st-configurations\n [configurationsSettings]=\"configurationsSettings\"\n [configurations]=\"configurations\"\n [initSelectedConfig]=\"initConfig\"\n (createNewConfig)=\"newConfigCreated($event)\"\n (removeConfig)=\"configRemoved($event)\"\n (changeConfig)=\"configChanged($event)\"\n ></st-configurations>\n }\n </div>\n }\n\n @if (globalSearchSettings?.show) {\n <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\n <mat-form-field>\n <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\n <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"clearSearch()\"\n >\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n mat-sort-header\n [disabled]=\"!columns[column].sort\"\n >\n {{ columns[column].translateColumnName }}\n @if (columns[column].search) {\n <mat-icon\n class=\"search-icon\"\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n search\n </mat-icon>\n }\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <mat-form-field class=\"col\">\n <mat-label>{{\n columns[column].searchLabel || 'Search'\n }}</mat-label>\n <input\n matInput\n (keyup)=\"applySearch()\"\n [(ngModel)]=\"searchModel\"\n (click)=\"$event.stopPropagation()\"\n />\n <button\n matSuffix\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"searchModel = ''\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </mat-menu>\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{\n columns[column].width ? 'width:' + columns[column].width : ''\n }}\"\n >\n @if (columns[column].actions && columns[column].actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\n >\n @for (action of columns[column].actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!!!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!columns[column].actions) {\n @if (columns[column].translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ columns[column].translateValue![element[column]] || '' }}\n </p>\n }\n @if (!columns[column].translateValue) {\n @if (!columns[column].type || columns[column].type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\n }\n @if (columns[column].type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n (page)=\"pageChanged($event)\"\n [showFirstLastButtons]=\"true\"\n ></mat-paginator>\n</div>\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
341
341
|
}], ctorParameters: () => [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }], propDecorators: { paginator: [{
|
|
342
342
|
type: ViewChild,
|
|
343
343
|
args: [MatPaginator]
|
|
@@ -422,11 +422,11 @@ class SelectTableComponent {
|
|
|
422
422
|
return !!this.rowSelected.find(activeRow => activeRow === row);
|
|
423
423
|
}
|
|
424
424
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
425
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectTableComponent, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\n {{ title }} {{ required ? '*' : '' }}\n </p>\n\n <div class=\"search-form row align-items-center\">\n <div class=\"col-sm-12 col-md row align-items-center\">\n <mat-form-field class=\"col\">\n <input\n matInput\n placeholder=\"{{ searchLabel }}\"\n [formControl]=\"search\"\n />\n </mat-form-field>\n <div class=\"clear col-auto\">\n <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n </div>\n </div>\n\n <table mat-table [dataSource]=\"tableSource\">\n @for (col of columns; track col) {\n <ng-container [matColumnDef]=\"col\">\n <th mat-header-cell *matHeaderCellDef>\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\n </th>\n <td mat-cell *matCellDef=\"let element\">\n @if (col === 'active') {\n @if (checkActiveRow(element)) {\n <mat-icon class=\"active-row\">done</mat-icon>\n }\n }\n @if (col !== 'active') {\n {{ element[col] }}\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: columns\"\n (click)=\"rowClick(row)\"\n [ngClass]=\"{ active: checkActiveRow(row) }\"\n ></tr>\n </table>\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\n</div>\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
426
426
|
}
|
|
427
427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, decorators: [{
|
|
428
428
|
type: Component,
|
|
429
|
-
args: [{ selector: 'ngx-st-select-table', template: "<div class=\"shared-table-selector\">\
|
|
429
|
+
args: [{ selector: 'ngx-st-select-table', template: "<div class=\"shared-table-selector\">\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\n {{ title }} {{ required ? '*' : '' }}\n </p>\n\n <div class=\"search-form row align-items-center\">\n <div class=\"col-sm-12 col-md row align-items-center\">\n <mat-form-field class=\"col\">\n <input\n matInput\n placeholder=\"{{ searchLabel }}\"\n [formControl]=\"search\"\n />\n </mat-form-field>\n <div class=\"clear col-auto\">\n <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n </div>\n </div>\n\n <table mat-table [dataSource]=\"tableSource\">\n @for (col of columns; track col) {\n <ng-container [matColumnDef]=\"col\">\n <th mat-header-cell *matHeaderCellDef>\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\n </th>\n <td mat-cell *matCellDef=\"let element\">\n @if (col === 'active') {\n @if (checkActiveRow(element)) {\n <mat-icon class=\"active-row\">done</mat-icon>\n }\n }\n @if (col !== 'active') {\n {{ element[col] }}\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: columns\"\n (click)=\"rowClick(row)\"\n [ngClass]=\"{ active: checkActiveRow(row) }\"\n ></tr>\n </table>\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\n</div>\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
430
430
|
}], ctorParameters: () => [], propDecorators: { paginator: [{
|
|
431
431
|
type: ViewChild,
|
|
432
432
|
args: [MatPaginator]
|