keevo-components 2.0.180 → 2.0.181

package/src/lib/components/kv-table/kv-table.module.ts

@@ -1,25 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { NgModule } from '@angular/core';
-
-import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
-import { KvTableComponent } from './kv-table.component';
-import { PrimeNgModule } from '../../api/modules/primeng.module';
-import { KvButtonModule } from '../kv-button/kv-button.module';
-
-@NgModule({
-  declarations: [
-    KvTableComponent
-  ],
-  imports: [
-    CommonModule,
-    PrimeNgModule,
-    FormsModule,
-    KvInputsModule,
-    KvButtonModule
-  ],
-  exports: [
-    KvTableComponent
-  ]
-})
-export class KvTableModule { }

package/src/lib/components/kv-table-draggable/kv-table-draggable.component.html

@@ -1,673 +0,0 @@
-<div class="kv-table-container">
-  @if (config) {
-  <p-table
-    #dt
-    #table
-    styleClass="p-datatable-sm"
-    [value]="dataSource"
-    [(selection)]="selectedItems"
-    [rowSelectable]="isRowSelectable"
-    [columns]="config.columns"
-    [globalFilterFields]="globalFilterFields"
-    [rows]="rows()"
-    [paginator]="paginator"
-    [rowsPerPageOptions]="rowsPerPageOptions"
-    [showCurrentPageReport]="true"
-    currentPageReportTemplate="{first} - {last} de {totalRecords}"
-    [rowHover]="true"
-    [totalRecords]="totalRecords"
-    [lazy]="config.lazy"
-    [first]="first()"
-    (onLazyLoad)="paginate($event)"
-    (selectionChange)="selectionChange($event)"
-    (onSort)="onSort($event)"
-    (onPage)="onPage($event)"
-    rowGroupMode="rowspan"
-    [groupRowsBy]="config.fieldGroup"
-    [showFirstLastIcon]="widthPage() > 960 ? true : false"
-    [pageLinks]="widthPage() > 960 ? 2 : 1"
-    [responsive]="true"
-    [responsiveLayout]="responsiveLayout ? 'stack' : ''"
-    [scrollable]="isTableScrollable"
-    [scrollHeight]="scrollHeight"
-    [rowTrackBy]="rowTrackBy"
-
-    cdkDropList
-    [cdkDropListData]="dragDropData()"
-    (cdkDropListDropped)="drop($event)"
-    cdkDropListOrientation="vertical"
-  >
-    @if (config.enableCation) {
-    <ng-template pTemplate="caption">
-      <div
-        class="flex flex-row flex-wrap justify-content-between grid formgrid p-fluid col-12 m-0 mb-2"
-        [style.padding.rem]="0.1"
-      >
-        <div class="col-12 flex flex-column">
-          @if (config.title) {
-          <div class="text-md font-bold my-3">
-            {{ config.title }}
-          </div>
-          } @if (config.subtitle) {
-          <div class="text-sm mb-4 font-medium">
-            {{ config.subtitle }}
-          </div>
-          }
-        </div>
-
-        <div
-          class="flex flex-row align-items-center md:col-6 lg:col-4 {{
-            widthPage() < 768 ? 'col-10' : 'col-12'
-          }}  gap-1 p-0"
-        >
-          @if (config.enableFilter) {
-          <input
-            pInputText
-            pAutoFocus
-            [autofocus]="widthPage() > 800"
-            type="text"
-            (input)="onGlobalFilter(dt, $event)"
-            [placeholder]="searchPlaceholder"
-            autocomplete="off"
-            #inputField
-            class="text-sm col-6"
-          />
-          } @if(filterColumnsBtn) {
-          <div #botaoFiltro>
-            <kv-button
-              id="botaoFiltro"
-              [icon]="'align_vertical_top'"
-              (onClick)="abrirMenuFiltro($event)"
-              severity="tertiary"
-              pTooltip="Ocultar/Exibir colunas"
-              size="small"
-            >
-            </kv-button>
-          </div>
-
-          <div
-            #menuFiltroDiv
-            id="menuFiltroDiv"
-            [style.visibility]="'hidden'"
-            class="absolute z-4 bg-gray-200 menu-columns-filtro"
-          >
-            <p-card styleClass="p-1">
-              <div
-                class="flex flex-column text-medium w-15rem p-1"
-                *ngFor="let col of columnsFilter()"
-              >
-                {{ checkMenuFiltro(col) }}
-                <p-checkbox
-                  #filterColumns
-                  [label]="col.header"
-                  [binary]="true"
-                  class="checkbox-container"
-                  (onChange)="dinamicColumnSet($event, col)"
-                  [(ngModel)]="col.checked"
-                  *ngIf="!dinamicDisableColumn(col)"
-                ></p-checkbox>
-              </div>
-            </p-card>
-          </div>
-          } @if(filterButton()) {
-          <p-button
-            styleClass="kv-button small tertiary text-xs font-medium"
-            label="Filtrar"
-            icon="pi pi-filter"
-            [badge]="filterButtonBadge()"
-            badgeClass="text-gray-800"
-            class="text-xs"
-            (onClick)="op.toggle($event)"
-          ></p-button>
-          }
-
-          <p-overlayPanel #op>
-            <ng-content select="[filtro]"> </ng-content>
-          </p-overlayPanel>
-        </div>
-
-        <div class="flex flex-row col-2 justify-content-end gap-2 p-0">
-          @for (action of config.actionsLote; track i; let i = $index) {
-          <div class="flex align-items-center justify-content-center">
-            @if ((((selectedItems && selectedItems.length > 0) || action.showAcoesLote)) &&
-            (getOrExecute(action.visible, selectedItems) ?? true)) {
-            <kv-button
-              (onClick)="action?.command(); activeItemLote(selectedItems)"
-              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
-              [tooltipPosition]="'left'"
-              [disabled]="getOrExecute(action.disabled, selectedItems) || false"
-              [icon]="getOrExecute(action.icon, selectedItems)"
-              [severity]="action.severity || 'tertiary'"
-              size="small"
-              [label]="getOrExecute(action.label, selectedItems) || ''"
-              [items]="action.items || []"
-              [popup]="(action.items && action.items.length > 0) || false"
-            />
-            }
-          </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-    }
-
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        @if (enableDragDrop) {
-        <th style="width: 40px; text-align: center;" class="drag-handle-header">
-        </th>
-        }
-        @if (config.enableSelect) {
-        <th>
-          <p-tableHeaderCheckbox
-            (click)="activeItemLote(selectedItems)"
-            [disabled]="disabledHeaderCheckbox"
-          ></p-tableHeaderCheckbox>
-        </th>
-        } @for (col of columns; track $index) {
-        <th
-          [pSortableColumn]="col.field"
-          [pSortableColumnDisabled]="col.sortable === false"
-          [style.width]="col.width"
-        >
-          <div
-            class="flex flex-row align-items-center {{
-              col?.centralize && 'justify-content-center'
-            }}"
-          >
-            <span class="text-xs font-semibold">{{ col.header }}</span>
-            @if (col.sortable) {
-            <p-sortIcon [field]="col.field" class="pb-1"></p-sortIcon>
-            } @if (col.headerTooltip) {
-            <span
-              class="material-symbols-outlined flex align-items-center"
-              [pTooltip]="col.headerTooltip"
-              >info</span
-            >
-            }
-          </div>
-        </th>
-        } @if (config.actions && config.actions.length > 0) {
-        <th></th>
-        }
-      </tr>
-    </ng-template>
-
-    <ng-template
-      pTemplate="body"
-      let-rowData
-      let-columns="columns"
-      let-rowgroup="rowgroup"
-      let-rowspan="rowspan"
-      let-rowIndex="rowIndex"
-    >
-      <tr
-        cdkDrag
-        cdkDragLockAxis="y"
-        (cdkDragStarted)="onDragStarted($event)"
-        (cdkDragEnded)="onDragEnded()"
-        [cdkDragDisabled]="!enableDragDrop || dragDropDisabled(rowData)"
-        [cdkDragData]="selectedItems"
-
-        (dblclick)="doubleClick($event, rowData)"
-        [ngClass]="{
-          capitalize: tableCaptalized,
-          last: rowIndex === dataSource.length - 1
-        }"
-        class="tr-td {{ isDisabledRow(rowData) ? 'disabled-row' : '' }}"
-      >
-
-        @if (enableDragDrop) {
-        <td cdkDragHandle>
-          <span class="material-symbols-outlined text-sm">
-            drag_indicator
-          </span>
-        </td>
-        }
-
-          @if (config.enableSelect) {
-          <td style="width: 8px !important">
-            <p-tableCheckbox
-              [value]="rowData"
-              [disabled]="isDisabledCheckbox(rowData)"
-              (click)="activeItemLote(selectedItems)"
-            ></p-tableCheckbox>
-          </td>
-          } @for (col of columns; track $index) {
-          <ng-container>
-            @if (rowgroup && !col.template) {
-            <td
-              [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
-              [pTooltip]="returnTooltipRow(rowData, col)"
-              class="{{
-                col.styleClass
-                  ? col.styleClass(rowData, col, rowData[col.field])
-                  : ''
-              }}"
-            >
-              <span
-                *ngIf="!isBooleanField(rowData, col); else booleanField"
-                [class]="returnRowClass(rowData, col)"
-              >
-                @if (!isChipField(col) && !col.iconField && !isImageField(col) &&
-                !isEmptyDataSource()) {
-                <span
-                  class="flex flex-row gap-2 align-items-center {{
-                    col?.centralize && 'justify-content-center'
-                  }} text-xs {{ ellipsisText() && 'ellipsis-text' }}"
-                  [pTooltip]="
-                    col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                  "
-                  [tooltipPosition]="'bottom'"
-                  [style.max-width]="
-                    ellipsisText() && returnMaxWidth()(col.width)
-                  "
-                >
-                  @if(col.tagColor) {
-                  <div
-                    class="tag"
-                    [pTooltip]="
-                      col.tooltipTag &&
-                      col.tooltipTag(rowData, col, rowData[col.field])
-                    "
-                    [style.background-color]="
-                      col.tagColor(rowData, col, rowData[col.field])
-                    "
-                  ></div>
-
-                  } @if (col.icon) {
-                  <i [class]="col.icon + ' mr-2'"></i>
-                  }
-                  {{ transformValue(rowData, col) }}
-                </span>
-                } @if (isChipField(col) && !col.iconField) {
-                <div>
-                  <span
-                    [class]="returnClassChip(rowData, col)"
-                    [pTooltip]="returnTooltipIcon(rowData, col)"
-                    class="text-xs"
-                    >{{ transformValue(rowData, col) }}</span
-                  >
-                </div>
-                } @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
-                <div class="w-full">
-                  @if(!isSwitchField(col)) {
-
-                  <div
-                    class="w-full flex {{
-                      col.centralize && 'justify-content-center'
-                    }}"
-                  >
-                    <div [style.width]="widthRandom()(col, rowIndex) + '%'">
-                      <p-skeleton styleClass="w-full"></p-skeleton>
-                    </div>
-                  </div>
-
-                  } @else {
-                  <div class="flex flex-row justify-content-center">
-                    <div
-                      [style]="{
-                        height: '16.8px',
-                        width: '28.8px',
-                        'border-radius': '30px'
-                      }"
-                    >
-                      <p-skeleton styleClass="w-full"></p-skeleton>
-                    </div>
-                  </div>
-                  }
-                </div>
-                }
-              </span>
-
-              @if (isImageField(col)) {
-              <span>
-                <span>
-                  <img class="image" [src]="loadImage(rowData, col)" />
-                </span>
-              </span>
-              } @if (col.iconField) {
-              <i
-                [ngClass]="{
-                  'material-icons': col.indIconMaterial,
-                  'material-symbols-outlined mr-2': !col.indIconMaterial
-                }"
-                [pTooltip]="returnTooltipIcon(rowData, col)"
-              >
-                {{ returnClassIcon(rowData, col) }}
-              </i>
-              }
-
-              <ng-template #booleanField>
-                @if (!col.iconField && !isSwitchField(col)) {
-                <div
-                  class="flex flex-row gap-2 align-items-center {{
-                    col?.centralize && 'justify-content-center'
-                  }}"
-                  [pTooltip]="
-                    col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                  "
-                  [tooltipPosition]="'bottom'"
-                >
-                  <i
-                    [ngClass]="
-                      rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                    "
-                    ><span
-                      class="material-symbols-outlined text-lg font-semibold"
-                    >
-                      {{ rowData[col.field] ? "check" : "close" }}
-                    </span>
-                  </i>
-                </div>
-
-                } @if (isSwitchField(col)) {
-                <span
-                  [class]="
-                    returnRowClass(rowData, col) +
-                    ' flex flex-row align-items-center justify-content-center'
-                  "
-                  style="height: 25px"
-                >
-                  @if(col.switchDisable){
-                  <kv-switch
-                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                    [disabled]="col.switchDisable(rowData, col)"
-                    [switchValue]="transformValue(rowData, col)"
-                  >
-                  </kv-switch>
-                  } @else {
-                  <kv-switch
-                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                    [disabled]="col?.onlyReadField ?? true"
-                    [switchValue]="transformValue(rowData, col)"
-                  >
-                  </kv-switch>
-                  }
-                </span>
-                } @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
-                <div class="w-full">
-                  @if(!isSwitchField(col)) {
-                  <div
-                    class="w-full flex {{
-                      col.centralize && 'justify-content-center'
-                    }}"
-                  >
-                    <div [style.width]="widthRandom()(col, rowIndex) + '%'">
-                      <p-skeleton styleClass="w-full"></p-skeleton>
-                    </div>
-                  </div>
-
-                  } @else {
-                  <div class="flex flex-row justify-content-center">
-                    <div
-                      [style]="{
-                        height: '16.8px',
-                        width: '28.8px',
-                        'border-radius': '30px'
-                      }"
-                    >
-                      <p-skeleton styleClass="w-full"></p-skeleton>
-                    </div>
-                  </div>
-                  }
-                </div>
-                }
-              </ng-template>
-            </td>
-            } @if (!rowgroup && !col.grouped && !col.template) {
-            <td
-              #tableCell
-              class="rowTable {{
-                col.styleClass
-                  ? col.styleClass(rowData, col, rowData[col.field])
-                  : ''
-              }} "
-              [pTooltip]="returnTooltipRow(rowData, col)"
-            >
-              @if(!isEmptyDataSource()) {
-
-              <span
-                *ngIf="!isBooleanField(rowData, col); else booleanField"
-                [class]="
-                  returnRowClass(rowData, col) +
-                  ' flex flex-row gap-2 align-items-center ' +
-                  (col?.centralize && 'justify-content-center')
-                "
-                [pTooltip]="
-                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                "
-                [tooltipPosition]="'bottom'"
-                [style.max-width]="ellipsisText() && returnMaxWidth()(col.width)"
-              >
-                @if(col.tagColor) {
-                <div
-                  class="tag"
-                  [pTooltip]="
-                    col.tooltipTag &&
-                    col.tooltipTag(rowData, col, rowData[col.field])
-                  "
-                  [style.background-color]="
-                    col.tagColor(rowData, col, rowData[col.field])
-                  "
-                ></div>
-
-                } @if (!isChipField(col) && !col.iconField && !isImageField(col)){
-                <span class="text-xs {{ ellipsisText() && 'ellipsis-text' }}">
-                  @if (col.icon) {
-                  <i [class]="col.icon + ' mr-2'"></i>
-                  }
-                  {{ transformValue(rowData, col) }}
-                </span>
-                } @if (isChipField(col) && !col.iconField) {
-                <div>
-                  <span
-                    [class]="returnClassChip(rowData, col)"
-                    [pTooltip]="returnTooltipIcon(rowData, col)"
-                    class="text-xs"
-                  >
-                    {{ transformValue(rowData, col) }}</span
-                  >
-                </div>
-                }
-              </span>
-              } @if (isImageField(col)) {
-              <span>
-                <span>
-                  <img class="image" [src]="loadImage(rowData, col)" />
-                </span>
-              </span>
-              } @if (col.iconField) {
-              <i
-                [ngClass]="{
-                  'material-icons': col.indIconMaterial,
-                  'material-symbols-outlined mr-2': !col.indIconMaterial
-                }"
-                [pTooltip]="returnTooltipIcon(rowData, col)"
-              >
-                {{ returnClassIcon(rowData, col) }}
-              </i>
-              }
-
-              <ng-template #booleanField>
-                @if (!col.iconField && !isSwitchField(col)) {
-                <div
-                  class="flex flex-row gap-2 align-items-center {{
-                    col?.centralize && 'justify-content-center'
-                  }}"
-                  [pTooltip]="
-                    col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                  "
-                  [tooltipPosition]="'bottom'"
-                >
-                  <i
-                    [ngClass]="
-                      rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                    "
-                    ><span
-                      class="material-symbols-outlined text-lg font-semibold"
-                    >
-                      {{ rowData[col.field] ? "check" : "close" }}
-                    </span>
-                  </i>
-                </div>
-                } @if (isSwitchField(col)) {
-
-                <span
-                  [class]="
-                    returnRowClass(rowData, col) +
-                    ' flex flex-row align-items-center justify-content-center'
-                  "
-                  style="height: 25px"
-                >
-                  @if(col.switchDisable){
-                  <kv-switch
-                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                    [disabled]="col.switchDisable(rowData, col)"
-                    [switchValue]="transformValue(rowData, col)"
-                  >
-                  </kv-switch>
-                  } @else {
-                  <kv-switch
-                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                    [disabled]="col?.onlyReadField ?? true"
-                    [switchValue]="transformValue(rowData, col)"
-                  >
-                  </kv-switch>
-                  }
-                </span>
-                }
-              </ng-template>
-
-              @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
-              <div class="w-full">
-                @if(!isSwitchField(col)) {
-                <div
-                  class="w-full flex {{
-                    col.centralize && 'justify-content-center'
-                  }}"
-                >
-                  <div [style.width]="widthRandom()(col, rowIndex) + '%'">
-                    <p-skeleton styleClass="w-full"></p-skeleton>
-                  </div>
-                </div>
-
-                } @else {
-                <div class="flex flex-row justify-content-center">
-                  <div
-                    [style]="{
-                      height: '16.8px',
-                      width: '28.8px',
-                      'border-radius': '30px'
-                    }"
-                  >
-                    <p-skeleton styleClass="w-full"></p-skeleton>
-                  </div>
-                </div>
-                }
-              </div>
-              }
-            </td>
-            } @if (col.template) {
-            <td
-              class="rowTable {{
-                col.styleClass
-                  ? col.styleClass(rowData, col, rowData[col.field])
-                  : ''
-              }} "
-            >
-              @if (getCustomTemplate(col.template.name)) {
-
-              <div
-                class="flex flex-row gap-2 align-items-center {{
-                  col?.centralize && ' justify-content-center'
-                }}"
-                [pTooltip]="
-                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                "
-                [tooltipPosition]="'bottom'"
-              >
-                @if(col.tagColor) {
-                <div
-                  class="tag"
-                  [pTooltip]="col.tooltipTag && col.tooltipTag(rowData, col)"
-                  [style.background-color]="col.tagColor(rowData, col)"
-                ></div>
-                } @if(!isEmptyDataSource()) {
-
-                <div class="w-full">
-                  <ng-container
-                    [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-                    [ngTemplateOutletContext]="{ $implicit: rowData }"
-                  />
-                </div>
-                }
-              </div>
-
-              @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
-              <p-skeleton
-                [width]="widthRandom()(col, rowIndex) + '%'"
-              ></p-skeleton>
-              } }
-            </td>
-            }
-          </ng-container>
-          } @if (config.actions && config.actions.length > 0) {
-          <td>
-            <div class="flex flex-row justify-content-end w-full">
-              <span
-                class="material-symbols-outlined cursor-pointer icon-more"
-                (click)="menu.toggle($event); activeItem(rowData)"
-              >
-                <!-- more_vert -->
-                more_horiz
-              </span>
-
-              <p-tieredMenu
-                #menu
-                [popup]="true"
-                [model]="currentPageActions()[rowIndex]"
-                appendTo="body"
-              >
-                <ng-template let-item pTemplate="item">
-                  <div
-                    [pTooltip]="item.tooltip"
-                    tooltipPosition="left"
-                    class="cursor-pointer"
-                  >
-                    <span class="text-xs">
-                      {{ item.label }}
-                    </span>
-                  </div>
-                </ng-template>
-              </p-tieredMenu>
-              <!-- <span pTooltip="{{ tableActions[rowIndex - actionsOffset][0]?.tooltip }}" tooltipPosition="top">a</span> -->
-            </div>
-          </td>
-          }
-        </tr>
-    </ng-template>
-
-    <ng-template pTemplate="emptymessage" let-columns>
-      <tr>
-        <td
-          [attr.colspan]="columns.length + (enableDragDrop ? 1 : 0) + (config.enableSelect ? 1 : 0) + (config.actions && config.actions.length > 0 ? 1 : 0)"
-          style="text-align: center; border-radius: 10px !important"
-        >
-          <p class="font-medium m-0 text-xs">Nenhum registro encontrado</p>
-        </td>
-      </tr>
-    </ng-template>
-  </p-table>
-  }
-</div>
-
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/icon?family=Material+Icons"
-/>
-
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
-/>