ngx-wapp-components 1.8.2 → 1.8.4

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

@@ -0,0 +1,253 @@
+<ng-content select=".filter-panel"></ng-content>
+<div *ngIf="wappTableLazyLoadingObject" [class.table-container]="wappTableLazyLoadingObject.tableContainer">
+    <p-table class="w-table-styles"
+            [ngClass]="{'w-table-no-buttons' : !wappTableLazyLoadingObject.hasEditButton && !wappTableLazyLoadingObject.hasDeleteButton && !wappTableLazyLoadingObject.hasCopyButton && !wappTableLazyLoadingObject.customButtonConfig && !wappTableLazyLoadingObject.hasViewButton }"
+            #table [value]="elements" 
+            dataKey="{{wappTableLazyLoadingObject.identificator}}"
+            [lazy]="true" 
+            (onLazyLoad)="loadElements($event)"
+            [selection]="selectedElements" (selectionChange)="onSelectionChange($event)"
+            [selectAll]="selectAll" (selectAllChange)="onSelectAllChange($event)"
+            [paginator]="wappTableLazyLoadingObject.hasPaginator!"
+            [rows]="rowsPerPage" 
+            [currentPageReportTemplate]="wappTableLazyLoadingObject.currentPageReportTemplate ? wappTableLazyLoadingObject.currentPageReportTemplate + ' ' +  rowsPerPage + ' de ' + totalRecords! : 'Showing ' + rowsPerPage + ' of ' + totalRecords!"
+            [totalRecords]="totalRecords"
+            [showCurrentPageReport]="true"
+            [loading]="loading"
+            [showLoader]="false"
+            [globalFilterFields]="wappTableLazyLoadingObject.globalFilterFields!"
+            [tableStyle]="{'min-width': wappTableLazyLoadingObject.tableMinWidth!}"
+            styleClass="p-datatable-striped">
+        <ng-template *ngIf="wappTableLazyLoadingObject.hasClearButton || wappTableLazyLoadingObject.hasGlobalSearch" pTemplate="caption">
+            <span class="flex align-items-center table-paginator p-0">
+                <span *ngIf="wappTableLazyLoadingObject.hasTotalPagingSelector" class="showing-per-page"> {{wappTableLazyLoadingObject.currentPageReportTemplate}} </span>
+                <p-inputNumber *ngIf="wappTableLazyLoadingObject.hasTotalPagingSelector"
+                    class="pl-2 showing-per-page" [size]="1" [(ngModel)]="rowsPerPage" [showButtons]="true" 
+                    buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="1" [min]="1" [max]="maxRowsPerPage"
+                    decrementButtonClass="p-button-outlined" 
+                    incrementButtonClass="p-button-outlined" 
+                    incrementButtonIcon="pi pi-plus" 
+                    decrementButtonIcon="pi pi-minus" 
+                    mode="decimal"
+                    (ngModelChange)="reloadElements()">
+                </p-inputNumber>
+                <span *ngIf="wappTableLazyLoadingObject?.hasGlobalSearch" class="p-input-icon-left ml-auto">
+                    <i class="pi pi-search"></i>
+                    <input class="height-input w-input" pInputText type="text" (input)="table.filterGlobal($event, 'contains')" placeholder="{{wappTableLazyLoadingObject.searchPlaceholder}}" />
+                </span>
+            </span>
+        </ng-template>
+    <ng-template pTemplate="header">
+        <tr>
+            <th *ngIf="!wappTableLazyLoadingObject.hasColumnFilters && wappTableLazyLoadingObject.hasCheckbox; else noCheckbox"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[0]) : 'text-center'">
+                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+            </th>
+
+            <ng-template #noCheckbox><th *ngIf="wappTableLazyLoadingObject.hasCheckbox"></th></ng-template>
+
+            <ng-container *ngIf="!wappTableLazyLoadingObject.hasSortableColumns; else something">
+                <th *ngFor="let header of wappTableLazyLoadingObject?.headers; index as i" [class]="header == ('Imagen' || 'Image') ? 'image-header': ''" 
+                        [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[wappTableLazyLoadingObject.hasCheckbox ? i+1 : i]) : getTableColumnAlignClassDefaultByColumnType(wappTableLazyLoadingObject.columnTypes[wappTableLazyLoadingObject.hasCheckbox ? i+1 : i])">
+                    {{header}}
+                </th>
+            </ng-container>
+
+            <ng-template #something>
+                <ng-template #something ngFor let-filterType [ngForOf]="wappTableLazyLoadingObject.headers" let-i="index"> 
+                    <th [pSortableColumn]="wappTableLazyLoadingObject.sortableNames[i]" [class]="wappTableLazyLoadingObject.headers[i] == ('Imagen' || 'Image') ? 'image-header': ''" 
+                            [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[wappTableLazyLoadingObject.hasCheckbox ? i+1 : i]) : getTableColumnAlignClassDefaultByColumnType(wappTableLazyLoadingObject.columnTypes[wappTableLazyLoadingObject.hasCheckbox ? i+1 : i])">
+                                {{wappTableLazyLoadingObject.headers[i]}} 
+                                <p-sortIcon *ngIf="wappTableLazyLoadingObject.sortableNames[i] != null" [field]="wappTableLazyLoadingObject.sortableNames[i]"></p-sortIcon>
+                    </th>
+                </ng-template>
+            </ng-template>
+            <th *ngIf="wappTableLazyLoadingObject.hasDeleteButton || wappTableLazyLoadingObject.hasEditButton || wappTableLazyLoadingObject.hasViewButton || wappTableLazyLoadingObject.hasCopyButton || wappTableLazyLoadingObject.customButtonConfig?.hasCustomButton"></th>
+        </tr>
+
+        <tr *ngIf="wappTableLazyLoadingObject.hasColumnFilters">
+            <th *ngIf="wappTableLazyLoadingObject.hasCheckbox" [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[0]) : 'text-left'">
+                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+            </th>
+            <th *ngIf="wappTableLazyLoadingObject.hasImage" 
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[wappTableLazyLoadingObject.hasCheckbox ? 1 : 0]) : getTableColumnAlignClassDefaultByColumnType(wappTableLazyLoadingObject.columnTypes[wappTableLazyLoadingObject.hasCheckbox ? 1 : 0])">
+            </th>
+            <ng-template ngFor let-filterType [ngForOf]="wappTableLazyLoadingObject.columnFilterTypes" let-i="index">
+                <th *ngIf="filterType == tableColumnFilterTypes.Text" 
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'">
+                    <p-columnFilter type="text" [field]="wappTableLazyLoadingObject.filterNames[i]"></p-columnFilter>
+                </th>
+                <th *ngIf="filterType == tableColumnFilterTypes.Multiselect" [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'">
+                    <p-columnFilter [field]="wappTableLazyLoadingObject.filterNames[i]" matchMode="in" [showMenu]="false">
+                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                            <p-multiSelect [ngModel]="value" appendTo="body" [options]="wappTableLazyLoadingObject.selectFilterElements[i]" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name" [maxSelectedLabels]="1" [selectedItemsLabel]="'{0} items'">
+                                <ng-template let-option pTemplate="item">
+                                    <div class="p-multiselect-representative-option">
+                                        <span class="ml-1">{{option.name}}</span>
+                                    </div>
+                                </ng-template>
+                            </p-multiSelect>
+                        </ng-template>
+                    </p-columnFilter>
+                </th>
+                <th *ngIf="filterType == tableColumnFilterTypes.None"></th>
+                <th *ngIf="filterType == tableColumnFilterTypes.Boolean" [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-center'">
+                    <p-columnFilter type="boolean" [field]="wappTableLazyLoadingObject.filterNames[i]"></p-columnFilter>
+                </th>
+                <th *ngIf="filterType == tableColumnFilterTypes.Date" [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'">
+                    <p-columnFilter type="date" [field]="wappTableLazyLoadingObject.filterNames[i]"></p-columnFilter>
+                </th>
+            </ng-template>
+            <th *ngIf="wappTableLazyLoadingObject.hasDeleteButton || wappTableLazyLoadingObject.hasEditButton || wappTableLazyLoadingObject.hasViewButton || wappTableLazyLoadingObject.hasCopyButton || wappTableLazyLoadingObject.customButtonConfig?.hasCustomButton"></th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-element let-index="index">
+        <tr *ngIf="!loading">
+        <ng-template ngFor let-columnType [ngForOf]="wappTableLazyLoadingObject.columnTypes" let-i="index">
+            <td *ngIf="columnType == tableColumnTypes.Checkbox && wappTableLazyLoadingObject.hasCheckbox" [style]="'width: '+wappTableLazyLoadingObject.columnWidths[i]" class="text-center">
+                <div *ngIf="wappTableLazyLoadingObject.disableCheckbox; else activeCheckbox">
+                    <p-tableCheckbox [value]="element" [disabled]="readProperty(element, wappTableLazyLoadingObject.disableCheckbox)"></p-tableCheckbox>
+                </div>
+                <ng-template #activeCheckbox>
+                    <p-tableCheckbox [value]="element"></p-tableCheckbox>
+                </ng-template>
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.Image" [style]="'width: '+wappTableLazyLoadingObject.columnWidths[i]"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-center'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                <img *ngIf="readProperty(element, wappTableLazyLoadingObject.columns[i])" 
+                        [src]="readProperty(element, wappTableLazyLoadingObject.columns[i])" 
+                        class="element-image-width"/>
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.Text"  [style]="'width: '+wappTableLazyLoadingObject.columnWidths[i]"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) }}
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.Number"  [style]="'width: '+wappTableLazyLoadingObject.columnWidths[i]"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-right'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) }}
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.Currency" [style]="'width: '+wappTableLazyLoadingObject.columnWidths[i]"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) | currency }}
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.Badge" [style]="'width: '+wappTableLazyLoadingObject.columnWidths[i]"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-center'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                <w-badge [label]="readProperty(element, wappTableLazyLoadingObject.columns[i])" [color]="'info'"></w-badge>                  
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.Boolean"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-center'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                <i class="pi" [ngClass]="getBooleanColumnClass(i, readProperty(element, wappTableLazyLoadingObject.columns[i]))"></i>
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.Date"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) | wappDate }}
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.ShortDate"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) | wappDate : wappDateFormat.d }}
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.LongDate"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) | wappDate : wappDateFormat.D }}
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.GeneralDateTimeShortTime"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) | wappDate : wappDateFormat.g }}
+            </td>
+            <td *ngIf="columnType == tableColumnTypes.GeneralDateTimeLongTime"
+                [ngClass]="wappTableLazyLoadingObject.columnAlign ? getTableColumnAlignClass(wappTableLazyLoadingObject.columnAlign[i]) : 'text-left'"
+                (click)="viewElement(element)" class="w-table-lazy-selectable-row">
+                {{ readProperty(element, wappTableLazyLoadingObject.columns[i]) | wappDate : wappDateFormat.G }}
+            </td>
+        </ng-template>
+        <td>
+            <div class="flex justify-content-end align-items-end">
+            <button *ngIf="wappTableLazyLoadingObject?.hasViewButton" 
+                    pButton pRipple (click)="viewElement(element)"
+                    [pTooltip]="wappTableLazyLoadingObject.buttonTooltips?.viewTooltip!"
+                    [tooltipPosition]="wappTableLazyLoadingObject.buttonTooltips?.position!" 
+                    icon="pi pi-eye" class="p-button-text p-button-info mr-2">
+            </button>
+            <button *ngIf="wappTableLazyLoadingObject.customButtonConfig?.hasCustomButton"
+                    pButton pRipple (click)="customElement(element)"
+                    [icon]="wappTableLazyLoadingObject.customButtonConfig?.icon!"
+                    [pTooltip]="wappTableLazyLoadingObject.buttonTooltips?.customTooltip!"
+                    [tooltipPosition]="wappTableLazyLoadingObject.buttonTooltips?.position!"
+                    class="p-button-text p-button-info mr-2">
+            </button>
+            <button *ngIf="wappTableLazyLoadingObject.hasEditButton && !wappTableLazyLoadingObject.disableEditProperty" 
+                    pButton pRipple (click)="editElement(element)"
+                    [pTooltip]="wappTableLazyLoadingObject.buttonTooltips?.editTooltip!"
+                    [tooltipPosition]="wappTableLazyLoadingObject.buttonTooltips?.position!"
+                    icon="pi pi-pencil" class="p-button-text p-button-success mr-2">
+            </button>
+            <button *ngIf="wappTableLazyLoadingObject.hasEditButton && wappTableLazyLoadingObject.disableEditProperty" 
+                    pButton pRipple (click)="editElement(element)" [disabled]="readProperty(element, wappTableLazyLoadingObject.disableEditProperty)"
+                    [pTooltip]="wappTableLazyLoadingObject.buttonTooltips?.editTooltip!"
+                    [tooltipPosition]="wappTableLazyLoadingObject.buttonTooltips?.position!"
+                    icon="pi pi-pencil" class="p-button-text p-button-success mr-2">
+            </button>
+            <button *ngIf="wappTableLazyLoadingObject?.hasCopyButton" 
+                    pButton pRipple (click)="confirmCopy($event, element)" 
+                    [pTooltip]="wappTableLazyLoadingObject.buttonTooltips?.copyTooltip!"
+                    [tooltipPosition]="wappTableLazyLoadingObject.buttonTooltips?.position!"
+                    icon="pi pi-copy" class="p-button-text p-button-help mr-2">
+            </button>
+            <span *ngIf="wappTableLazyLoadingObject?.hasDeleteButton">
+                <button *ngIf="wappTableLazyLoadingObject.disableDeleteProperty; else noDisableDelete" 
+                        pButton pRipple (click)="confirmDelete($event, element)" [disabled]="readProperty(element, wappTableLazyLoadingObject.disableDeleteProperty)"
+                        [pTooltip]="wappTableLazyLoadingObject.buttonTooltips?.deleteTooltip!"
+                        [tooltipPosition]="wappTableLazyLoadingObject.buttonTooltips?.position!"
+                        icon="pi pi-trash" class="p-button-text p-button-danger">
+                </button>
+                <ng-template #noDisableDelete>
+                    <button pButton pRipple (click)="confirmDelete($event, element)"
+                            [pTooltip]="wappTableLazyLoadingObject.buttonTooltips?.deleteTooltip!"
+                            [tooltipPosition]="wappTableLazyLoadingObject.buttonTooltips?.position!"
+                            icon="pi pi-trash" class="p-button-text p-button-danger">
+                    </button>
+                </ng-template>
+            </span>
+            </div>
+        </td>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="loadingbody">
+            <tr height="70px" *ngFor="let n of [0,1,2,3,4]">
+                <td *ngFor="let item of wappTableLazyLoadingObject.columnTypes" [style.width]="item == tableColumnTypes.Checkbox ? '8rem' : ''" >
+                <p-tableCheckbox *ngIf="item == tableColumnTypes.Checkbox && wappTableLazyLoadingObject.hasCheckbox"></p-tableCheckbox>
+                <p-skeleton *ngIf="item == tableColumnTypes.Image" width="6rem" height="4rem"></p-skeleton>
+                <p-skeleton *ngIf="item != tableColumnTypes.Checkbox && item != tableColumnTypes.Image"></p-skeleton>
+                </td>
+                <td *ngIf="wappTableLazyLoadingObject.hasEditButton || wappTableLazyLoadingObject.hasDeleteButton">
+                <div class="flex justify-content-end">
+                    <button *ngIf="wappTableLazyLoadingObject?.hasEditButton" 
+                            pButton pRipple
+                            icon="pi pi-pencil" class="p-button-text p-button-success mr-2">
+                    </button>
+                    <button *ngIf="wappTableLazyLoadingObject?.hasDeleteButton" 
+                            pButton pRipple
+                            icon="pi pi-trash" class="p-button-text p-button-danger">
+                    </button>
+                </div>
+                </td>
+            </tr>
+    </ng-template>
+    <ng-template pTemplate="emptymessage">
+        <tr class="w-table-lazy-empty-message-padding">
+            <td [attr.colspan]="calculateColspan()">{{wappTableLazyLoadingObject.emptyMessage ? wappTableLazyLoadingObject.emptyMessage : 'No matches.'}}</td>
+        </tr>
+    </ng-template>
+    </p-table>
+</div>
+<p-confirmPopup></p-confirmPopup>

package/src/lib/tables/w-table-lazy/w-table-lazy.component.scss

@@ -0,0 +1,295 @@
+@import '../../../styles/_variables.scss';
+
+.table-container {
+    padding: $spacingM $spacingL $spacingL $spacingL;
+    background-color: $white;
+    border-radius: $borderRadius;
+    box-shadow: $boxShadowContainer;
+}
+.w-table-lazy-selectable-row {
+    cursor: pointer;
+}
+.showing-per-page {
+    color: $text500;
+    font-weight: map-get($caption, font-weight);
+}
+::ng-deep .w-table-styles .p-paginator-bottom > span:first-child {
+    margin-right: auto;
+}
+::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page {
+    color: $text500;
+    border-radius: $borderRadius;
+    height: $spacingXXXL;
+    width: $spacingXXXL;
+    max-width: $spacingXXXL;
+    min-width: $spacingXXXL;
+}
+::ng-deep .w-table-styles .p-paginator {
+	border-width: $spacingZero;
+    padding: $spacingM $spacingL $spacingZero $spacingL;
+}
+::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background-color: $primaryLightColor;
+    color: $black846;
+    height: $spacingXXXL;
+    width: $spacingXXXL;
+    max-width: $spacingXXXL;
+    min-width: $spacingXXXL;
+}
+::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: $paginatorBackgroundHoverColor;
+    border-color: transparent; 
+    color: $black846;
+    height: $spacingXXXL;
+    width: $spacingXXXL;
+    max-width: $spacingXXXL;
+    min-width: $spacingXXXL;
+}
+
+::ng-deep .w-table-styles .p-paginator .p-paginator-current {
+    color: $text500;
+    padding: $spacingZero;
+}
+::ng-deep .w-table-styles .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: $black; //ToDo quitar una vez implementado size en wapp icon
+    margin-left: 0.5rem;
+}
+::ng-deep .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
+	color: $black800;
+}
+::ng-deep .w-table-styles .p-datatable .p-sortable-column:focus {
+	box-shadow: inset 0 0 0 0;
+	outline: 0 none;
+}
+::ng-deep .w-table-styles .p-datatable .p-datatable-thead > tr > th {
+    @extend .w-table-th-text;
+    background: $white;
+}
+::ng-deep .w-table-styles .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+    background: $black50;
+}
+::ng-deep .w-table-styles .p-datatable .p-paginator-bottom {
+    justify-content: normal !important;
+}
+::ng-deep .w-table-styles .p-datatable .p-paginator-bottom > button {
+    color: $text500;
+}
+::ng-deep .w-table-styles .p-datatable .p-datatable-header {
+    background: $white;
+    border-width: $spacingZero;
+    padding: $spacingZero $spacingZero $spacingM $spacingZero !important;
+    font-weight: map-get($caption, font-weight);
+}
+::ng-deep .w-table-styles p-inputnumber, .p-inputnumber {
+    height: $spacingXXXL;
+}
+::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
+    width: $spacingXXXL;
+}
+::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
+    width: $spacingXXXL;
+}
+::ng-deep .wapp-table-styles .showing-per-page .p-button.p-inputnumber-button-up {
+    border-radius: $borderRadius;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+::ng-deep .wapp-table-styles .showing-per-page .p-button.p-inputnumber-button-down {
+    border-radius: $borderRadius;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-inputnumber-input {
+    border-width: $borderWidth 0px $borderWidth 0px;
+    border-color: $black200;
+    color: $black300;
+    text-align: center;
+}
+::ng-deep .w-table-styles .p-button.p-button-outlined {
+    color: $black200;
+    border-width: $borderWidth;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-datatable-tbody > tr > td {
+    @extend .w-table-td-text;
+	border: $borderWidth solid #e2e8f0;
+	border-width: $tableBorderWidth;
+	padding-left: $spacingXS;
+	padding-right: $spacingXS;
+    padding-top: $spacingXSM;
+    padding-bottom: calc($spacingXSM - $tableBorder);
+}
+
+::ng-deep .w-table-no-buttons .p-datatable .p-datatable-tbody > tr > td {
+	padding-left: $spacingXS !important;
+	padding-right: $spacingXS !important;
+    padding-top: $spacingM !important;
+    padding-bottom: calc($spacingM - $tableBorder) !important;
+}
+
+::ng-deep .w-table-styles{
+    .p-checkbox{
+        height: 16px;
+        width: 16px; 
+        border-width: $borderWidth;
+
+        .p-checkbox-box{
+            height: 16px;
+            width: 16px;
+            border-radius: $checkboxBorderRadius;
+            border: $borderWidth solid $black300;
+
+            .p-checkbox-icon{                
+                @extend .w-control-button-small-icon-text;
+            }
+            
+            &.p-highlight {
+                border-color: $secondary400;
+                background: $secondary400;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+
+                &.p-focus {
+                    background-color: $secondary400;
+                    @extend .focus;
+                    border: $borderWidth solid $secondary50;
+                }
+
+                &:not(.p-highlight).p-focus {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+    
+                &.p-highlight:hover {    
+                    border-color: $secondary400;
+                    background: $secondary400;
+                }
+            }
+        }
+    }
+}
+
+::ng-deep .w-table-styles .p-inputtext:enabled:focus {
+	outline: 0 none;
+	outline-offset: 0;
+	box-shadow: 0 0 0 0 $black;
+    background-color: $black100;
+	border-color: $black100;
+    color: $black;
+}
+
+::ng-deep .w-table-styles .p-inputtext:enabled:hover {
+    border-color: $black200;
+}
+
+::ng-deep .w-table-styles .p-button.p-button-outlined:enabled:hover {
+    color: $black200;
+    border: $borderWidth solid;
+    background-color: $black100;
+}
+
+::ng-deep .w-table-styles .p-button.p-button-outlined:enabled:hover > .p-button-icon {
+    color: $text846;
+}
+
+::ng-deep .w-table-styles .p-button.p-button-outlined > .pi {
+	font-size: 0.7rem; //Quitar este selector cuando esté listo la directiva para tamaños de wapp icon
+    font-weight: bolder;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-datatable-thead > tr > th:hover {
+	color: $black800;
+	background: $white;
+}
+
+.element-image-width {
+    max-height: 32px;
+    width: auto;
+    vertical-align: middle;
+}
+
+.image-header{
+    text-align: center !important;
+}
+//Estos estilos se van al reemplazar por input por w-input
+.height-input {
+    height: $spacingXXXL;
+}
+.w-input {
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    border-color: $black200; 
+    gap: 16px;
+}
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $text700;;
+}
+::-moz-placeholder { /* Firefox 19+ */
+    color: $text700;
+}
+:-ms-input-placeholder { /* IE 10+ */
+    color: $text700;
+}
+:-moz-placeholder { /* Firefox 18- */
+    color: $text700;
+}
+.w-input:hover {
+    border: $borderWidth solid $primaryColor !important;
+}
+.w-input:focus {
+    box-shadow:  0px 0px 3px 3px $primary50 !important;
+    background-color: transparent !important;
+}
+.pi-search {
+	left: calc($spacingS - $borderWidth);
+	color: $black700 !important;
+}
+
+::ng-deep .w-table-styles .p-avatar img {
+	width: $spacingXXXL !important;
+	height: $spacingXXXL !important;
+}
+:host ::ng-deep .w-table-styles .p-avatar {
+    border: 1px solid $black200;
+}
+
+::ng-deep .p-datatable .p-datatable-thead > tr > th {
+    padding: $spacingM $spacingXS;
+    border: $borderWidth solid $black200;
+    border-width: $spacingZero $spacingZero $borderWidth $spacingZero;
+    font-weight: 700;
+    color: $black;
+    background: $white;
+    transition: box-shadow 0.2s;
+  }
+
+::ng-deep .p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            color: $text500;
+        }
+    }
+}
+
+::ng-deep .p-sortable-column {
+    &:not(.p-highlight):hover {
+        .p-sortable-column-icon {
+            color: $black800;
+        }
+    }
+}
+
+::ng-deep .p-datatable .p-datatable-tbody > tr.w-table-lazy-empty-message-padding > td {
+	padding-left: $spacingS !important;
+	padding-right: $spacingS !important;
+    padding-top: $spacingM !important;
+    padding-bottom: calc($spacingM - $tableBorder) !important;
+}

package/src/lib/tables/w-table-lazy/w-table-lazy.component.spec.ts

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