ngx-wapp-components 3.2.11-alpha.9 → 3.2.11

package/src/lib/tables/w-table/w-table.component.html

@@ -1,473 +0,0 @@
-<ng-content select=".filter-panel"></ng-content>
-@if (wappTableObject) {
-  <div [class.table-container]="wappTableObject.tableContainer">
-    @if (!loading) {
-      <p-table class="w-table-styles" [ngClass]="{'w-table-no-buttons' : !wappTableObject.hasEditButton && !wappTableObject.hasDeleteButton && !wappTableObject.hasCopyButton && !wappTableObject.customButtonConfig}"
-        #table
-        [value]="elements" 
-        dataKey="{{wappTableObject.identificator}}"
-        [paginator]="wappTableObject.hasPaginator"
-        [selection]="selectedElements" 
-        (selectionChange)="onSelectionChange($event)"
-        [selectAll]="selectAll" 
-        (selectAllChange)="onSelectAllChange($event)"
-        [showCurrentPageReport]="true"
-        [rows]="rowsPerPage" 
-        [currentPageReportTemplate]="wappTableObject.currentPageReportTemplate ? wappTableObject.currentPageReportTemplate + ' ' +  '{last}' + ' de ' + totalRecords! : 'Showing ' + '{last}' + ' of ' + totalRecords!"
-        [globalFilterFields]="wappTableObject.globalFilterFields!" responsiveLayout="scroll"
-        [rowHover]="wappTableObject.hasViewButton!" 
-        [tableStyle]="{'min-width': wappTableObject.tableMinWidth!}"
-        (onPage)="pageChange($event)"
-        [selectionMode]="singleRowSelection ? 'single' : 'multiple'"
-        stripedRows>
-        @if (wappTableObject?.hasClearButton || wappTableObject.hasGlobalSearch || wappTableObject.hasTotalPagingSelector) {
-          <ng-template #caption>
-            <span class="flex align-items-center table-paginator p-0">
-              @if (wappTableObject.hasTotalPagingSelector) {
-                <span class="showing-per-page"> {{wappTableObject.currentPageReportTemplate}} </span>
-              }
-              @if (wappTableObject.hasTotalPagingSelector) {
-                <p-inputnumber
-                  class="pl-2 showing-per-page" size="small" [(ngModel)]="rowsPerPage" [showButtons]="true" [inputStyle]="{ width: '3rem' }"
-                  buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="1" [min]="1" [max]="totalRecords!"
-                  decrementButtonClass="p-button-outlined"
-                  incrementButtonClass="p-button-outlined"
-                  incrementButtonIcon="pi pi-plus"
-                  decrementButtonIcon="pi pi-minus"
-                  mode="decimal">
-                </p-inputnumber>
-              }
-              @if (wappTableObject?.hasGlobalSearch) {
-                <p-iconfield class="p-input-icon-left ml-auto" iconPosition="left" class="ml-auto">
-                  <p-inputicon>
-                    <i class="pi pi-search"></i>
-                  </p-inputicon>
-                  <input
-                    pInputText
-                    type="text"
-                    (input)="onGlobalFilter(table, $event)"
-                    [placeholder]="wappTableObject.searchPlaceholder" class="w-full height-input w-input"
-                    />
-                </p-iconfield>
-              }
-            </span>
-          </ng-template>
-        }
-        <ng-template #header>
-          <tr>
-            @if (wappTableObject.hasCheckbox) {
-              <th
-                [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[0]) : 'text-center'">
-                @if (wappTableObject.hasSelectAllCheckbox == true && !singleRowSelection) {
-                  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-                }
-              </th>
-            }
-            @if (!wappTableObject.hasSortableColumns) {
-              @for (header of wappTableObject?.headers; track header; let i = $index) {
-                <th
-                  [class.image-header]="wappTableObject.columnTypes[wappTableObject.hasCheckbox ? i+1 : i] == tableColumnTypes.Image "
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[wappTableObject.hasCheckbox ? i+1 : i]) : getTableColumnAlignClassDefaultByColumnType(wappTableObject.columnTypes[wappTableObject.hasCheckbox ? i+1 : i])">
-                  {{header}}
-                </th>
-              }
-            } @else {
-              @for (filterType of wappTableObject.headers; track filterType; let i = $index) {
-                <th [pSortableColumn]="wappTableObject.sortableNames[i]"
-                  [class.image-header]="wappTableObject.columnTypes[wappTableObject.hasCheckbox ? i+1 : i] === tableColumnTypes.Image "
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[wappTableObject.hasCheckbox ? i+1 : i]) : getTableColumnAlignClassDefaultByColumnType(wappTableObject.columnTypes[wappTableObject.hasCheckbox ? i+1 : i])">
-                  {{wappTableObject.headers[i]}}
-                  @if (wappTableObject.sortableNames[i] != null) {
-                    <p-sortIcon [field]="wappTableObject.sortableNames[i]"></p-sortIcon>
-                  }
-                </th>
-              }
-            }
-            @if (wappTableObject.hasDeleteButton || wappTableObject.hasEditButton || wappTableObject.hasViewButton || wappTableObject.hasCopyButton) {
-              <th></th>
-            }
-          </tr>
-        </ng-template>
-        <ng-template #body let-element>
-          <tr [ngClass]="{'row-hover': wappTableObject.hasViewButton}"
-            (click)="wappTableObject.hasClickableRow ? onElement(element) : ''">
-            @for (columnType of wappTableObject.columnTypes!; track columnType; let i = $index) {
-              @if (columnType == tableColumnTypes?.Checkbox! &&  wappTableObject.hasCheckbox) {
-                <td [style]="'width: '+wappTableObject.columnWidths![i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'">
-                  @if (wappTableObject.disableCheckbox) {
-                    <div>
-                      @if (singleRowSelection) {
-                        <p-tableRadioButton [value]="element" [disabled]="readProperty(element, wappTableObject.disableCheckbox)"></p-tableRadioButton>
-                      } @else {
-                        <p-tableCheckbox [value]="element" [disabled]="readProperty(element, wappTableObject.disableCheckbox)"></p-tableCheckbox>
-                      }
-                    </div>
-                  } @else {
-                    @if (singleRowSelection) {
-                      <p-tableRadioButton [value]="element"></p-tableRadioButton>
-                    } @else {
-                      <p-tableCheckbox [value]="element"></p-tableCheckbox>
-                    }
-                  }
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Image) {
-                <td [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  @if (readProperty(element, wappTableObject.columns[i])) {
-                    <img
-                      [src]="readProperty(element, wappTableObject.columns[i])"
-                      class="element-image-width"/>
-                  }
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Text) {
-                <td  [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ readProperty(element, wappTableObject.columns[i]) }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Number) {
-                <td  [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-right'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ readProperty(element, wappTableObject.columns[i]) }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Percentage) {
-                <td  [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-right'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ readProperty(element, wappTableObject.columns[i]) | wappPercentage }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Currency) {
-                <td [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-right'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ readProperty(element, wappTableObject.columns[i]) | wappCurrency }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Badge) {
-                <td [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  <w-badge [label]="readProperty(element, wappTableObject.columns[i])" [color]="'info'"></w-badge>
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Enum) {
-                <td [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  @for (enum of wappTableObject.enumIcon; track enum; let ind = $index) {
-                    <div>
-                      @if (enum.enumValue == readProperty(element, wappTableObject.columns[i])) {
-                        <i [class]="'pi '+ enum.icon +' '+enum.iconColor "></i>
-                      }
-                    </div>
-                  }
-                </td>
-              }
-              @if (columnType == tableColumnTypes.ColoredBadge) {
-                <td [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  @for (badge of wappTableObject.coloredBadge; track badge; let ind = $index) {
-                    <div>
-                      @if (badge.coloredBadgeProperty == readProperty(element, wappTableObject.columns[i])) {
-                        <w-badge
-                        [label]="readProperty(element, wappTableObject.columns[i])" [color]="badge.color"></w-badge>
-                      }
-                    </div>
-                  }
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Boolean) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  <i class="pi" [ngClass]="getBooleanColumnClass(i, readProperty(element, wappTableObject.columns[i]))"></i>
-                </td>
-              }
-              @if (columnType == tableColumnTypes.SecondaryCheckbox) {
-                <td [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-lazy-selectable-row' : ''">
-                  <p-checkbox [(ngModel)]="element[wappTableObject.columns[i]]" [disabled]="!isElementSelected(element[wappTableObject.identificator])" [binary]="true" inputId="binary" (ngModelChange)="onSecondaryCheckboxChanges(element)"></p-checkbox>
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Date) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ dateConversionService.formatUTCDate(readProperty(element, wappTableObject.columns[i])) | wappDate }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.DateRaw) {
-                <td [style]="'width: '+wappTableObject.columnWidths[i]"
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-lazy-selectable-row' : ''">
-                  {{ readProperty(element, wappTableObject.columns[i]) | wappDate }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.ShortDate) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ dateConversionService.formatUTCDate(readProperty(element, wappTableObject.columns[i])) | wappDate : wappDateFormat.d }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.LongDate) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ dateConversionService.formatUTCDate(readProperty(element, wappTableObject.columns[i])) | wappDate : wappDateFormat.D }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.GeneralDateTimeShortTime) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ dateConversionService.formatUTCDate(readProperty(element, wappTableObject.columns[i])) | wappDate : wappDateFormat.g }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.GeneralDateTimeLongTime) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ dateConversionService.formatUTCDate(readProperty(element, wappTableObject.columns[i])) | wappDate : wappDateFormat.G }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.BuisinessDateTime) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  {{ readProperty(element, wappTableObject.columns[i]) | wappDate : wappDateFormat.Date }}
-                </td>
-              }
-              @if (columnType == tableColumnTypes.Week) {
-                <td
-                  [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
-                  (click)="wappTableObject.hasClickableRow ? viewElement(element) : ''" [class]="wappTableObject.hasClickableRow ? 'w-table-selectable-row' : ''">
-                  <w-button-week [value]="readProperty(element, wappTableObject.columns[i])" [translations]="wappTableObject.weekButtonTranslations ? wappTableObject.weekButtonTranslations : []"  [defaultEsp]="wappTableObject.weekButtonDefaultEsp ?? false"></w-button-week>
-                </td>
-              }
-            }
-            @if (wappTableObject.hasCustomButton || wappTableObject?.hasEditButton || wappTableObject?.hasCopyButton || wappTableObject?.hasDeleteButton || wappTableObject?.hasViewButton) {
-              <td>
-                <div class="w-table-buttons flex justify-content-end">
-                  @if (wappTableObject?.hasViewButton && !wappTableObject.disableViewProperty) {
-                    <w-button
-                      type="table" [tooltip]="wappTableObject.buttonTooltips?.viewTooltip!"
-                      [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                      (onClick)="viewElement(element)"
-                      icon="pi-eye" buttonClass="w-table-button-view">
-                    </w-button>
-                  }
-                  @if (wappTableObject.disableViewProperty) {
-                    <w-button
-                      type="table"
-                      [tooltip]="readProperty(element, wappTableObject.disableViewProperty) ? '' : wappTableObject.buttonTooltips?.viewTooltip!"
-                      [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                      (onClick)="viewElement(element)"
-                      [disabled]="readProperty(element, wappTableObject.disableViewProperty)"
-                      icon="pi-eye" buttonClass="w-table-button-view">
-                    </w-button>
-                  }
-                  @if (wappTableObject?.hasCustomButton) {
-                    @for (customButtonConfig of wappTableObject.customButtonConfig; track $index) {
-                      @if (!customButtonConfig?.disableProperty) {
-                        <w-button
-                          (onClick)="customElement({buttonId: customButtonConfig.buttonId, element: element})"
-                          type="table"
-                          [tooltip]="wappTableObject.buttonTooltips?.customTooltip![$index]"
-                          [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                          [icon]="customButtonConfig?.icon!"
-                          [buttonClass]="'w-table-button-view' + getButtonCustomColorClass(customButtonConfig.color!) ">
-                        </w-button>
-                      }
-                      @if (customButtonConfig?.disableProperty) {
-                        <w-button
-                          type="table"
-                          (onClick)="customElement({buttonId: customButtonConfig.buttonId, element: element})"
-                          [disabled]="readProperty(element, customButtonConfig?.disableProperty!)"
-                          [tooltip]="readProperty(element, customButtonConfig?.disableProperty!) ? '' : wappTableObject.buttonTooltips?.customTooltip![$index]"
-                          [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                          [icon]="customButtonConfig?.icon!"
-                          [buttonClass]="'w-table-button-view ' + getButtonCustomColorClass(customButtonConfig.color!)">
-                        </w-button>
-                      }                   
-                    }
-                  }
-                  @if (wappTableObject?.hasEditButton && !wappTableObject.disableEditProperty) {
-                    <w-button
-                      [tooltip]="wappTableObject.buttonTooltips?.editTooltip!"
-                      [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                      type="table" (onClick)="editElement(element)"
-                      icon="pi-pencil" buttonClass="w-table-button-edit">
-                    </w-button>
-                  }
-                  @if (wappTableObject.disableEditProperty) {
-                    <w-button
-                      type="table" (onClick)="editElement(element)"
-                      [disabled]="readProperty(element, wappTableObject.disableEditProperty)"
-                      [tooltip]="readProperty(element, wappTableObject.disableEditProperty) ? '' : wappTableObject.buttonTooltips?.editTooltip!"
-                      [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                      icon="pi-pencil" buttonClass="w-table-button-edit">
-                    </w-button>
-                  }
-                  @if (wappTableObject?.hasCopyButton) {
-                    <w-button
-                      type="table" (onClick)="confirmCopy($event, element)"
-                      [tooltip]="wappTableObject.buttonTooltips?.copyTooltip!"
-                      [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                      icon="pi-copy" buttonClass="w-table-button-view">
-                    </w-button>
-                  }
-                  @if (wappTableObject?.hasDeleteButton) {
-                    <span>
-                      @if (wappTableObject.disableDeleteProperty) {
-                        <w-button
-                          type="table" (onClick)="confirmDelete($event, element)"
-                          [disabled]="readProperty(element, wappTableObject.disableDeleteProperty)"
-                          [tooltip]="readProperty(element, wappTableObject.disableDeleteProperty) ? '' : wappTableObject.buttonTooltips?.deleteTooltip!"
-                          [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                          icon="pi-trash" buttonClass="w-table-button-delete">
-                        </w-button>
-                      } @else {
-                        @if (!wappTableObject?.disableDelete && !wappTableObject.disableDeleteProperty) {
-                          <w-button
-                            type="table" [tooltip]="wappTableObject.buttonTooltips?.deleteTooltip!"
-                            [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
-                            (onClick)="confirmDelete($event, element)"
-                            icon="pi-trash" buttonClass="w-table-button-delete">
-                          </w-button>
-                        }
-                      }
-                    </span>
-                  }
-                </div>
-              </td>
-            }
-          </tr>
-        </ng-template>
-        <ng-template pTemplate="emptymessage">
-          <tr class="w-table-lazy-empty-message-padding">
-            <td [attr.colspan]="calculateColspan()">{{wappTableObject.emptyMessage ? wappTableObject.emptyMessage : 'No matches.'}}</td>
-          </tr>
-        </ng-template>
-        <ng-template pTemplate="loadingbody">
-          <tr>
-            <td colspan="8">Loading elements.</td>
-          </tr>
-        </ng-template>
-      </p-table>
-    } @else {
-      <p-table class="w-table-styles" [value]="tableSkeletons" responsiveLayout="scroll" [paginator]="wappTableObject.hasPaginator" [rows]="rowsPerPage" [totalRecords]="totalRecords"
-        [showCurrentPageReport]="true"
-        [currentPageReportTemplate]="wappTableObject.currentPageReportTemplate ? wappTableObject.currentPageReportTemplate + ' ' +  rowsPerPage + ' de ' + totalRecords : 'Showing ' + rowsPerPage + ' of ' + totalRecords"
-        stripedRows>
-        @if (wappTableObject?.hasClearButton || wappTableObject.hasGlobalSearch) {
-          <ng-template pTemplate="caption">
-            <span class="flex align-items-center table-paginator p-0">
-              @if (wappTableObject.hasTotalPagingSelector) {
-                <span class="showing-per-page"> {{wappTableObject.currentPageReportTemplate}} </span>
-              }
-              @if (wappTableObject.hasTotalPagingSelector) {
-                <p-inputnumber
-                  class="pl-2 showing-per-page" size="small" [(ngModel)]="rowsPerPage" [showButtons]="true" [inputStyle]="{ width: '3rem' }"
-                  buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="1" [min]="1" [max]="totalRecords"
-                  decrementButtonClass="p-button-outlined"
-                  incrementButtonClass="p-button-outlined"
-                  incrementButtonIcon="pi pi-plus"
-                  decrementButtonIcon="pi pi-minus"
-                  mode="decimal">
-                  @if (wappTableObject?.hasGlobalSearch) {
-                    <span class="p-input-icon-left ml-auto">
-                      <i class="pi pi-search"></i>
-                      <input pInputText type="text" #filter
-                        [placeholder]="wappTableObject.searchPlaceholder" class="w-full height-input w-input"/>
-                    </span>
-                  }
-                </p-inputnumber>
-              }
-            </span>
-          </ng-template>
-        }
-        <ng-template pTemplate="header">
-          <tr>
-            @if (!wappTableObject.hasColumnFilters && wappTableObject.hasCheckbox) {
-              <th>
-                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-              </th>
-            }
-            @for (header of wappTableObject?.headers; track header) {
-              <th>
-                {{header}}
-              </th>
-            }
-            @if (wappTableObject?.hasDeleteButton || wappTableObject?.hasEditButton || wappTableObject?.hasViewButton) {
-              <th></th>
-            }
-          </tr>
-        </ng-template>
-        <ng-template pTemplate="body">
-          <tr height="70px">
-            @for (item of wappTableObject.columnTypes; track item) {
-              <td [style.width]="item == tableColumnTypes.Checkbox ? '8rem' : ''" >
-                @if (item == tableColumnTypes.Checkbox && wappTableObject.hasCheckbox) {
-                  <p-tableCheckbox></p-tableCheckbox>
-                }
-                @if (item != tableColumnTypes.Checkbox) {
-                  <p-skeleton></p-skeleton>
-                }
-              </td>
-            }
-            @if (wappTableObject.hasEditButton || wappTableObject.hasDeleteButton || wappTableObject.hasCopyButton || wappTableObject.hasViewButton) {
-              <td>
-                <div class="w-table-buttons flex justify-content-end">
-                  @if (wappTableObject?.hasViewButton) {
-                    <w-button
-                      [tooltip]="wappTableObject.buttonTooltips?.viewTooltip!"
-                      icon="pi-eye" type="table" buttonClass="w-table-button-view">
-                    </w-button>
-                  }
-                  @if (wappTableObject?.hasCustomButton) {
-                    @for (customButtonConfig of wappTableObject.customButtonConfig; track $index) {
-                        <w-button
-                          [tooltip]="wappTableObject.buttonTooltips?.customTooltip![$index]"
-                          [icon]="customButtonConfig?.icon!" type="table" [buttonClass]="'w-table-button-view ' + getButtonCustomColorClass(customButtonConfig.color!)">
-                        </w-button>
-                    }
-                  }
-                  @if (wappTableObject?.hasEditButton) {
-                    <w-button
-                      [tooltip]="wappTableObject.buttonTooltips?.editTooltip!"
-                      icon="pi-pencil" type="table" buttonClass="w-table-button-edit">
-                    </w-button>
-                  }
-                  @if (wappTableObject?.hasCopyButton) {
-                    <w-button
-                      [tooltip]="wappTableObject.buttonTooltips?.copyTooltip!"
-                      icon="pi-copy" type="table" buttonClass="w-table-button-view">
-                    </w-button>
-                  }
-                  @if (wappTableObject?.hasDeleteButton) {
-                    <w-button
-                      [tooltip]="wappTableObject.buttonTooltips?.deleteTooltip!"
-                      icon="pi-trash" type="table" buttonClass="w-table-button-delete">
-                    </w-button>
-                  }
-                </div>
-              </td>
-            }
-          </tr>
-        </ng-template>
-      </p-table>
-    }
-  </div>
-}
-<p-confirmpopup></p-confirmpopup>