ngx-wapp-components 1.8.2 → 1.8.3

package/src/lib/sidebar/w-sidebar/w-sidebar.component.scss

@@ -0,0 +1,89 @@
+@import './../../../styles/_variables.scss';
+
+:host ::ng-deep .wapp-sidebar .p-sidebar-header{
+    padding: 40px;
+    
+    .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon {
+        height: 24px;
+    }
+}
+
+:host ::ng-deep .wapp-sidebar .p-sidebar-content{
+    padding: 0px 40px;
+}
+
+:host ::ng-deep .p-sidebar-footer{
+    padding: 60px !important;
+}
+
+:host ::ng-deep .w-sidebar-content .col-1{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-2{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-3{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-4{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-5{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-6{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-7{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-8{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-9{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-10{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-11{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content .col-12{
+    padding: 4px 20px;
+}
+
+:host ::ng-deep .w-sidebar-content.grid{
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -20px;
+    margin-left: -20px;
+    margin-top: -4px;
+}
+
+.w-sidebar-icon{
+    margin-right: $spacingS;
+}
+
+.w-sidebar-img-container {
+    height: 24px;
+}
+
+.w-sidebar-span-img-container{
+    position: relative;
+}
+
+.w-sidebar-img-responsive{
+    max-width: 100%;
+}

package/src/lib/sidebar/w-sidebar/w-sidebar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WSidebarComponent } from './w-sidebar.component';
+
+describe('WSidebarComponent', () => {
+  let component: WSidebarComponent;
+  let fixture: ComponentFixture<WSidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WSidebarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WSidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/sidebar/w-sidebar/w-sidebar.component.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IconType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-sidebar',
+  templateUrl: './w-sidebar.component.html',
+  styleUrls: ['./w-sidebar.component.scss']
+})
+export class WSidebarComponent implements OnInit {
+  @Input('headerTitle') headerTitle!: string;
+  @Input('showCloseIcon') showCloseIcon: boolean = false; 
+  @Input('activeGrid') activeGrid: boolean = false;
+  @Input('closeOnOverlay') closeOnOverlay: boolean = false;
+  @Input('styleClass') styleClass: string = "w-full md:w-6 lg:w-5";
+  @Input('icon') icon!: string ;
+  @Input('iconWidth') iconWidth: number = 40; 
+  @Input('iconHeight') iconHeight: number = 40; 
+
+  iconType: typeof IconType = IconType;
+  
+  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  private _visible: boolean = false;
+  @Input()
+  get visible(): boolean {
+    return this._visible;
+  }
+
+  set visible(value: boolean) {
+    if (value !== this._visible) {
+      this._visible = value;
+      this.visibleChange.emit(this._visible);
+    }
+  }
+
+  constructor(){}
+  
+  ngOnInit(): void {}
+
+  onClose(){
+    this.visible = false;
+  }
+
+  getIconType(){
+    if(this.icon.includes("pi pi-")){
+      return IconType.pIcon;
+    }else if(this.isURL(this.icon)){
+      return IconType.urlIcon;
+    }else {
+      return IconType.wIcon;
+    }
+  }
+
+  private isURL(url: string) {
+    const patronURL = /^(ftp|http|https):\/\/[^ "]+$/;
+    return patronURL.test(url);
+  }
+}

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

@@ -0,0 +1,272 @@
+<ng-content select=".filter-panel"></ng-content>
+<div *ngIf="wappTableObject" [class.table-container]="wappTableObject.tableContainer">
+    <p-table class="w-table-styles" [ngClass]="{'w-table-no-buttons' : !wappTableObject.hasEditButton && !wappTableObject.hasDeleteButton && !wappTableObject.hasCopyButton && !wappTableObject.customButtonConfig}"
+            *ngIf="!loading; else loadingTable" #table 
+            [value]="elements" dataKey="{{wappTableObject.identificator}}" 
+            [paginator]="wappTableObject.hasPaginator"
+            [selection]="selectedElements" (selectionChange)="onSelectionChange($event)"
+            [selectAll]="selectAll" (selectAllChange)="onSelectAllChange($event)"
+            [totalRecords]="totalRecords" [showCurrentPageReport]="true" 
+            [rows]="rowsPerPage"
+            [currentPageReportTemplate]="wappTableObject.currentPageReportTemplate ? wappTableObject.currentPageReportTemplate + ' ' +  rowsPerPage + ' de ' + totalRecords! : 'Showing ' + rowsPerPage + ' of ' + totalRecords!"
+            [globalFilterFields]="wappTableObject.globalFilterFields!" responsiveLayout="scroll"
+            [rowHover]="true" [tableStyle]="{'min-width': wappTableObject.tableMinWidth!}"
+            styleClass="p-datatable-striped">
+        <ng-template pTemplate="caption" *ngIf="wappTableObject?.hasClearButton || wappTableObject.hasGlobalSearch || wappTableObject.hasTotalPagingSelector">
+            <span class="flex align-items-center table-paginator p-0">
+                <span *ngIf="wappTableObject.hasTotalPagingSelector" class="showing-per-page"> {{wappTableObject.currentPageReportTemplate}} </span>
+                <p-inputNumber *ngIf="wappTableObject.hasTotalPagingSelector"
+                    class="pl-2 showing-per-page" [size]="1" [(ngModel)]="rowsPerPage" [showButtons]="true" 
+                    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>
+                <span *ngIf="wappTableObject?.hasGlobalSearch" class="p-input-icon-left ml-auto">
+                    <i class="pi pi-search"></i>
+                    <input pInputText type="text" #filter (input)="onGlobalFilter(table, $event)" 
+                        [placeholder]="wappTableObject.searchPlaceholder" class="w-full height-input w-input"/>
+                </span>
+            </span>
+        </ng-template>
+        <ng-template pTemplate="header">
+                <tr>
+                    <th *ngIf="wappTableObject.hasCheckbox" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[0]) : 'text-center'">
+                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                    </th>
+                    <ng-container *ngIf="!wappTableObject.hasSortableColumns; else sortableColumns">
+                        <th *ngFor="let header of wappTableObject?.headers; index as 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])">
+                        {{header}}
+                        </th>
+                    </ng-container>
+                    <ng-template #sortableColumns>
+                        <ng-template ngFor let-filterType [ngForOf]="wappTableObject.headers" 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]}} 
+                                        <p-sortIcon *ngIf="wappTableObject.sortableNames[i] != null" [field]="wappTableObject.sortableNames[i]"></p-sortIcon>
+                            </th>
+                        </ng-template>
+                    </ng-template>
+                    <th *ngIf="wappTableObject.hasDeleteButton || wappTableObject.hasEditButton || wappTableObject.hasViewButton || wappTableObject.hasCopyButton"></th>
+                </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-element>
+            <tr [ngClass]="wappTableObject.hasSelectableRow ? 'p-selectable-row' : ''" (click)="wappTableObject.hasSelectableRow ? onElement(element) : ''">
+                <ng-template ngFor let-columnType [ngForOf]="wappTableObject.columnTypes!" let-i="index">
+                    <td *ngIf="columnType == tableColumnTypes?.Checkbox! &&  wappTableObject.hasCheckbox" [style]="'width: '+wappTableObject.columnWidths![i]"
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'">
+                        <div *ngIf="wappTableObject.disableCheckbox; else activeCheckbox">
+                            <p-tableCheckbox [value]="element" [disabled]="readProperty(element, wappTableObject.disableCheckbox)"></p-tableCheckbox>
+                        </div>
+                        <ng-template #activeCheckbox>
+                            <p-tableCheckbox [value]="element"></p-tableCheckbox>
+                        </ng-template>
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.Image" [style]="'width: '+wappTableObject.columnWidths[i]"
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                        <img *ngIf="readProperty(element, wappTableObject.columns[i])" 
+                                [src]="readProperty(element, wappTableObject.columns[i])" 
+                                class="element-image-width"/>
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.Text"  [style]="'width: '+wappTableObject.columnWidths[i]" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) }}
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.Number"  [style]="'width: '+wappTableObject.columnWidths[i]" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-right'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) }}
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.Currency" [style]="'width: '+wappTableObject.columnWidths[i]" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-right'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) | currency }}
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.Badge" [style]="'width: '+wappTableObject.columnWidths[i]" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            <w-badge [label]="readProperty(element, wappTableObject.columns[i])" [color]="'info'"></w-badge>                  
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.Boolean" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-center'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            <i class="pi" [ngClass]="getBooleanColumnClass(i, readProperty(element, wappTableObject.columns[i]))"></i>
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.Date" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) | wappDate }}
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.ShortDate" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) | wappDate : wappDateFormat.d }}
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.LongDate" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) | wappDate : wappDateFormat.D }}
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.GeneralDateTimeShortTime" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) | wappDate : wappDateFormat.g }}
+                    </td>
+                    <td *ngIf="columnType == tableColumnTypes.GeneralDateTimeLongTime" 
+                        [ngClass]="wappTableObject.columnAlign ? getTableColumnAlignClass(wappTableObject.columnAlign[i]) : 'text-left'"
+                        (click)="viewElement(element)" class="w-table-selectable-row">
+                            {{ readProperty(element, wappTableObject.columns[i]) | wappDate : wappDateFormat.G }}
+                    </td>
+                </ng-template>
+                <td *ngIf="wappTableObject.customButtonConfig?.hasCustomButton || wappTableObject?.hasEditButton || wappTableObject?.hasCopyButton || wappTableObject?.hasDeleteButton || wappTableObject?.hasViewButton">
+                    <div class="flex justify-content-end">
+                        <button *ngIf="wappTableObject?.hasViewButton" 
+                                [pTooltip]="wappTableObject.buttonTooltips?.viewTooltip!"
+                                [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
+                                pButton pRipple (click)="viewElement(element)" 
+                                icon="pi pi-eye" class="p-button-text p-button-info mr-2">
+                        </button>
+                        <button *ngIf="wappTableObject.customButtonConfig?.hasCustomButton"
+                                pButton pRipple (click)="customElement(element)"
+                                [pTooltip]="wappTableObject.buttonTooltips?.customTooltip!"
+                                [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
+                                [icon]="wappTableObject.customButtonConfig?.icon!"
+                                class="p-button-text p-button-info mr-2">
+                            </button>
+                        <button *ngIf="wappTableObject?.hasEditButton && !wappTableObject.disableEditProperty" 
+                                [pTooltip]="wappTableObject.buttonTooltips?.editTooltip!"
+                                [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
+                                pButton pRipple (click)="editElement(element)"
+                                icon="pi pi-pencil" class="p-button-text p-button-success mr-2">
+                        </button>
+                        <button *ngIf="wappTableObject.disableEditProperty" 
+                                pButton pRipple (click)="editElement(element)" [disabled]="readProperty(element, wappTableObject.disableEditProperty)"
+                                [pTooltip]="wappTableObject.buttonTooltips?.editTooltip!"
+                                [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
+                                icon="pi pi-pencil" class="p-button-text p-button-success mr-2">
+                        </button>
+                        <button *ngIf="wappTableObject?.hasCopyButton" 
+                                pButton pRipple (click)="confirmCopy($event, element)" 
+                                [pTooltip]="wappTableObject.buttonTooltips?.copyTooltip!"
+                                [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
+                                icon="pi pi-copy" class="p-button-text p-button-help mr-2">
+                        </button>
+                        <span *ngIf="wappTableObject?.hasDeleteButton">
+                            <button *ngIf="wappTableObject.disableDeleteProperty; else noDisableDelete" 
+                                    pButton pRipple (click)="confirmDelete($event, element)" [disabled]="readProperty(element, wappTableObject.disableDeleteProperty)"
+                                    [pTooltip]="wappTableObject.buttonTooltips?.deleteTooltip!"
+                                    [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
+                                    icon="pi pi-trash" class="p-button-text p-button-danger">
+                            </button>
+                            <ng-template #noDisableDelete>
+                                <button *ngIf="!wappTableObject?.disableDelete && !wappTableObject.disableDeleteProperty" 
+                                        [pTooltip]="wappTableObject.buttonTooltips?.deleteTooltip!"
+                                        [tooltipPosition]="wappTableObject.buttonTooltips?.position!"
+                                        pButton pRipple (click)="confirmDelete($event, element)"
+                                        icon="pi pi-trash" class="p-button-text p-button-danger">
+                                </button>
+                            </ng-template>
+                        </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>
+    
+    <ng-template #loadingTable>
+    <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"
+             styleClass="p-datatable-striped">
+        <ng-template *ngIf="wappTableObject?.hasClearButton || wappTableObject.hasGlobalSearch" pTemplate="caption">
+            <span class="flex align-items-center table-paginator p-0">
+                <span *ngIf="wappTableObject.hasTotalPagingSelector" class="showing-per-page"> {{wappTableObject.currentPageReportTemplate}} </span>
+                <p-inputNumber *ngIf="wappTableObject.hasTotalPagingSelector"
+                    class="pl-2 showing-per-page" [size]="1" [(ngModel)]="rowsPerPage" [showButtons]="true" 
+                    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>
+                <span *ngIf="wappTableObject?.hasGlobalSearch" 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>
+            </span>
+        </ng-template>
+        <ng-template pTemplate="header">
+        <tr>
+            <th *ngIf="!wappTableObject.hasColumnFilters && wappTableObject.hasCheckbox; else selectAllCheckbox">
+                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+            </th>
+            <ng-template #selectAllCheckbox><th></th></ng-template>
+            <th *ngFor="let header of wappTableObject?.headers">
+            {{header}}
+            </th>
+            <th *ngIf="wappTableObject?.hasDeleteButton || wappTableObject?.hasEditButton || wappTableObject?.hasViewButton"></th>
+        </tr>
+        </ng-template>
+        <ng-template pTemplate="body">
+            <tr height="70px">
+                <td *ngFor="let item of wappTableObject.columnTypes" [style.width]="item == tableColumnTypes.Checkbox ? '8rem' : ''" >
+                <p-tableCheckbox *ngIf="item == tableColumnTypes.Checkbox &&  wappTableObject.hasCheckbox"></p-tableCheckbox>
+                <p-skeleton *ngIf="item != tableColumnTypes.Checkbox"></p-skeleton>
+                </td>
+                <td *ngIf="wappTableObject.hasEditButton || wappTableObject.hasDeleteButton || wappTableObject.hasCopyButton || wappTableObject.hasViewButton">
+                <div class="flex justify-content-end">
+                    <button *ngIf="wappTableObject?.hasViewButton" 
+                        pButton pRipple 
+                        [pTooltip]="wappTableObject.buttonTooltips?.viewTooltip!"
+                        icon="pi pi-eye" class="p-button-text p-button-info mr-2">
+                    </button>
+                    <button *ngIf="wappTableObject.customButtonConfig?.hasCustomButton"
+                        pButton pRipple
+                        [pTooltip]="wappTableObject.buttonTooltips?.customTooltip!"
+                        [icon]="wappTableObject.customButtonConfig?.icon!"
+                        class="p-button-text p-button-info mr-2">
+                    </button>
+                    <button *ngIf="wappTableObject?.hasEditButton" 
+                            pButton pRipple
+                            [pTooltip]="wappTableObject.buttonTooltips?.editTooltip!"
+                            icon="pi pi-pencil" class="p-button-text p-button-success mr-2">
+                    </button>
+                    <button *ngIf="wappTableObject?.hasCopyButton" 
+                        pButton pRipple 
+                        [pTooltip]="wappTableObject.buttonTooltips?.copyTooltip!"
+                        icon="pi pi-copy" class="p-button-text p-button-help mr-2">
+                    </button>
+                    <button *ngIf="wappTableObject?.hasDeleteButton" 
+                            pButton pRipple
+                            [pTooltip]="wappTableObject.buttonTooltips?.deleteTooltip!"
+                            icon="pi pi-trash" class="p-button-text p-button-danger">
+                    </button>
+                </div>
+                </td>
+            </tr>
+        </ng-template>
+    </p-table>
+    </ng-template>
+</div>
+<p-confirmPopup></p-confirmPopup>