keevo-components 2.0.107 → 2.0.108

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

@@ -1,634 +0,0 @@
-<div>
-  @if (filtrosAvancados) {
-  <p-panel
-    header="Filtros avançados"
-    [toggleable]="true"
-    [collapsed]="true"
-    (collapsedChange)="collapsedAll = !collapsedAll"
-    [style]="{ 'margin-bottom': '2px' }"
-  >
-    <ng-template pTemplate="headericons">
-      @if (!collapsedAll) {
-      <i class="pi pi-filter"></i>
-      }
-      <!-- Ícone quando o painel está aberto -->
-      @if (collapsedAll) {
-      <i class="pi pi-minus"></i>
-      }
-      <!-- Ícone quando o painel está fechado -->
-    </ng-template>
-    <ng-content></ng-content>
-  </p-panel>
-  } @if (config) {
-  <p-table
-    #dt
-    styleClass="p-datatable-sm"
-    [value]="dataSource"
-    [(selection)]="selectedItems"
-    [rowSelectable]="isRowSelectable"
-    rowGroupMode="subheader"
-    [groupRowsBy]="config.fieldGroup"
-    [columns]="config.columns"
-    [lazy]="config.lazy"
-    (onLazyLoad)="paginate($event)"
-    (selectionChange)="selectionChange($event)"
-    (onSort)="onSort($event)"
-    [sortField]="config.fieldGroup"
-    sortMode="single"
-    [dataKey]="config.fieldGroup"
-    [expandedRowKeys]="expandedRows"
-    [paginator]="paginator"
-    [rows]="rows"
-    [rowsPerPageOptions]="rowsPerPageOptions"
-    [totalRecords]="totalRecords"
-    [globalFilterFields]="globalFilterFields"
-    [showCurrentPageReport]="true"
-    currentPageReportTemplate="{first} - {last} de {totalRecords}"
-    [rowHover]="true"
-    [pageLinks]="pageLinksOptions"
-    [responsive]="true"
-    [responsiveLayout]="responsiveLayout ? 'stack' : ''"
-    [scrollable]="isTableScrollable"
-    [scrollHeight]="scrollHeight"
-    [rowTrackBy]="rowTrackBy"
-    [showFirstLastIcon]="showFirstLastIcon"
-    [rowExpandMode]="rowExpandMode"
-  >
-    @if (config.enableCation) {
-    <ng-template pTemplate="caption">
-      <div
-        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 p-0 m-0"
-        [style.background-color]="'#EAEAEA'"
-      >
-        <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 {{
-            tamanhoTela < 768 ? 'col-10' : 'col-12'
-          }} mt-1 mb-2 "
-        >
-          @if (config.enableFilter) {
-          <span class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-
-            <input
-              pInputText
-              pAutoFocus
-              [autofocus]="true"
-              type="text"
-              (input)="onGlobalFilter(dt, $event)"
-              placeholder="Pesquisar..."
-              class="h-2rem"
-            />
-          </span>
-          }
-
-          <!-- <div
-            #menuFiltroDiv
-            id = "menuFiltroDiv"
-            [style.visibility]="'hidden'"
-            class="absolute z-4 bg-gray-200"
-            (click)="onClickEvent($event)"
-          > -->
-
-          <div
-            #menuFiltroDiv
-            id="menuFiltroDiv"
-            [style.visibility]="'hidden'"
-            class="absolute z-4 bg-gray-200 menu-columns-filtro"
-          >
-            <p-card>
-              @for (col of columns; track col) {
-              <div class="flex flex-column text-medium w-15rem">
-                {{ checkMenuFiltro(col) }}
-                @if (!dinamicDisableColumn(col)) {
-                <p-checkbox
-                  #filterColumns
-                  [label]="col.header"
-                  [binary]="true"
-                  class="checkbox-container"
-                  (onChange)="dinamicColumnSet($event, col)"
-                  [(ngModel)]="col.checked"
-                ></p-checkbox>
-                }
-              </div>
-              }
-            </p-card>
-          </div>
-        </div>
-
-        <div class="flex flex-row col-1 justify-content-end p-0">
-          <div class="flex flex-row gap-2 btns-options mr-2">
-          @if(showButtonCollapsed){
-            <kv-button
-              [icon]="iconCollapsed"
-              (onClick)="executeCollapsed()"
-              [severity]="(config.actionsLote)&&(config.actionsLote.length>0) ? 'tertiary' : 'primary'"
-              [pTooltip]="collapsedAll ? 'Recolher tudo' : 'Expandir tudo'"
-            />
-          }
-          @for (action of config.actionsLote; track i; let i = $index) {
-          
-            
-            @if ((selectedItems.length > 0 || action.showAcoesLote) &&
-            (getOrExecute(action.visible, selectedItems) ?? true)) {
-
-              <kv-button
-                (onClick)="action?.command(); activeItemLote(selectedItems)"
-                [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
-                [tooltipPosition]="
-                (getOrExecute(action.tooltip, selectedItems)?.length ??
-                  0 > 7) &&
-                config.actionsLote &&
-                i == config.actionsLote.length - 1
-                  ? 'left'
-                  : 'bottom'
-                "
-                [disabled]="getOrExecute(action.disabled, selectedItems)?true:false"
-                [icon]="getOrExecute(action.icon, selectedItems)"
-                [severity]="action.severity ? action.severity : 'primary'"
-              />
-          }
-        }
-      </div>
-        </div>
-      </div>
-    </ng-template>
-    } 
-    @if (config.enableSelect || showTopHeader ){
-      <ng-template pTemplate="header">
-        <tr>
-        @if(config.enableSelect){
-          <th [style.width]="showTopHeader?'25px':'100%'"  [attr.colspan]="showTopHeader?'1':'12'" >
-            <div class="w-full">
-              <input
-                type="checkbox"
-                [checked]="isAllSelected()"
-                [indeterminate]="isAllIndeterminate()"
-                (click)="selectAll($event)"
-              />
-            </div>
-          </th>
-        }
-        @if(showTopHeader){
-          @if (isTableRowExpanded) {
-            <th
-              [style.width]="3"
-              class="text-sm fixed-header" 
-            ></th>
-          }
-          @for (col of columns; track $index) {
-            <th
-              [pSortableColumn]="col.field"
-              [pSortableColumnDisabled]="col.sortable === false"
-              [style.width]="col.width"
-              class="text-sm fixed-header"
-            >
-              <div
-                [class]="
-                  centralizarColunas(col) && alignColunasHeader(col) == ''
-                    ? 'flex flex-row justify-content-center'
-                    : 'flex flex-row'
-                "
-                [style]="alignColunasHeader(col)"
-              >
-                <span [ngClass]="{ 'text-xs font-medium': isTableRowExpanded }">{{ col.header }}</span>
-                @if (col.sortable) {
-                <p-sortIcon
-                  [field]="'data.' + col.field"
-                  style="font-size: 10px"
-                ></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 [style.width]="'40px'" ></th>
-          }
-        }
-        </tr>
-      </ng-template>
-    }
-
-    <ng-template
-      pTemplate="groupheader"
-      let-group
-      let-rowIndex="rowIndex"
-      let-expanded="expanded"
-    >
-     @if (!isTableRowExpanded) {
-      <tr>
-        <td colspan="12" class="groupheader">
-          <div class="flex flex-row align-items-center w-full">
-            <button
-              type="button"
-              pButton
-              pRipple
-              [pRowToggler]="group"
-              class="p-button-text p-button-rounded p-button-plain mr-2"
-              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
-            ></button>
-            @if (config.fieldGroupColorFunction){
-            <div
-              class="tag"
-              [style.background-color]="config.fieldGroupColorFunction(group)"
-            ></div>
-            }
-            <span class="font-bold ml-2">{{
-              group[config.fieldGroup || 0]
-            }}</span>
-          </div>
-        </td>
-      </tr>
-     } @else {
-      <tr>
-          <td>
-            @if(isVisibleExpandTolggle(group)){
-              <button
-                type="button"
-                pButton
-                pRipple
-                [pRowToggler]="group"
-                (click)="scrollExpandedContent()"
-                class="p-button-text p-button-rounded p-button-plain icone"
-                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
-              >
-              </button> 
-              
-             }
-            </td>
-
-            @for (col of columns; track $index) {
-              <ng-container>
-                @if (!col.template) {
-                <td
-                  class="rowTable"
-                  [style]="
-                    applyStyle(group, col) +
-                    centralizarColunas(col) +
-                    alignColunas(col)
-                  "
-                  [pTooltip]="returnTooltipRow(group, col)"
-                >
-                  
-                  <span
-                    *ngIf="!isBooleanField(group, col); else booleanField"
-                    [class]="returnRowClass(group, col)"
-                  >
-                    @if (!isChipField(col) && !col.iconField && !isImageField(col)) {
-                    
-                    <span class="text-xs" >
-                      @if (col.icon) {
-                      <i [class]="col.icon + ' mr-2'"></i>
-                      }
-                      {{ transformValue(group, col) }}
-                    </span>
-                    } @if (isChipField(col) && !col.iconField) {
-                    <div>
-                      <span
-                        [class]="returnClassChip(group, col)"
-                        [pTooltip]="returnTooltipIcon(group, col)"
-                        >{{ transformValue(group, col) }}</span
-                      >
-                    </div>
-                    }
-                  </span>
-  
-                  @if (isImageField(col)) {
-                  <span>
-                    <span>
-                      <img class="image" [src]="loadImage(group, col)" />
-                    </span>
-                  </span>
-                  } @if (col.iconField) {
-                  <i
-                    [ngClass]="{
-                      'material-icons': col.indIconMaterial,
-                      'material-symbols-outlined mr-2': !col.indIconMaterial
-                    }"
-                    [pTooltip]="returnTooltipIcon(group, col)"
-                  >
-                    {{ returnClassIcon(group, col) }}
-                  </i>
-                  }
-        
-                  <ng-template #booleanField>
-                    @if (!col.iconField && !isSwitchField(col)) {
-                    <i
-                      [ngClass]="group[col.field] ? 'text-green-500' : 'text-red-500'"
-                      ><span class="material-symbols-outlined">
-                        {{ group[col.field] ? "check" : "close" }}
-                      </span>
-                    </i>
-                    } @if (isSwitchField(col)) {
-                    <span [class]="returnRowClass(group, col)">
-                      <kv-switch
-                        (onSwitchChange)="onSwitchChange($event, group, col)"
-                        [disabled]="col?.onlyReadField ?? true"
-                        [switchValue]="transformValue(group, col)"
-                      >
-                      </kv-switch>
-                    </span>
-                    }
-                  </ng-template>
-                </td>
-                } 
-                @if (col.template) {
-                <td
-                  [style]="
-                    applyStyle(group, col) +
-                    centralizarColunas(col) +
-                    alignColunas(col)
-                  "
-                  class="rowTable"
-                >
-                  <span class="p-column-title">{{ col.header }}:</span>
-                  @if (getCustomTemplate(col.template.name)) {
-                  <ng-container
-                    [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-                    [ngTemplateOutletContext]="{ $implicit: group }"
-                  />
-                  }
-                </td>
-                }
-              </ng-container>
-            }
-      </tr>
-    }
-
-
-      @if(expanded && !showTopHeader){
-      <tr style="height: 40px">
-        @if (config.enableSelect) {
-        <th class="flex align-items-left pl-2">
-          <!-- <p-tableHeaderCheckbox
-            (click)="activeItemLote(selectedItems)"
-          ></p-tableHeaderCheckbox> -->
-          <input
-            type="checkbox"
-            [checked]="
-              isAllGroupSelected(
-                config.fieldGroup || 0,
-                group[config.fieldGroup || 0]
-              )
-            "
-            [indeterminate]="
-              isGroupIndeterminate(
-                config.fieldGroup || 0,
-                group[config.fieldGroup || 0]
-              )
-            "
-            (click)="
-              selectGroup(
-                $event,
-                config.fieldGroup || 0,
-                group[config.fieldGroup || 0]
-              )
-            "
-          />
-        </th>
-        } 
-        @for (col of columns; track $index) {
-        <th
-          [pSortableColumn]="col.field"
-          [pSortableColumnDisabled]="col.sortable === false"
-          [style.width]="col.width"
-          class="text-sm"
-        >
-          <div
-            [class]="
-              centralizarColunas(col) && alignColunasHeader(col) == ''
-                ? 'flex flex-row justify-content-center'
-                : 'flex flex-row'
-            "
-            [style]="alignColunasHeader(col)"
-          >
-            <span>{{ col.header }}</span>
-            @if (col.sortable) {
-            <p-sortIcon
-              [field]="'data.' + col.field"
-              style="font-size: 10px"
-            ></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="rowexpansion" let-group>
-      @if (!isTableRowExpanded) {
-        <tr
-        (dblclick)="doubleClick($event, group)"
-        [ngClass]="{ capitalize: tableCaptalized }"
-      >
-        @if (config.enableSelect) {
-        <td [style]="applyStyle(group, { field: 'check-box', header: '' })">
-          <!--<p-tableCheckbox *ngIf="isVisibleCheckbox(group.data)"-->
-          <!-- <p-tableCheckbox
-            [value]="group"
-            [disabled]="isDisabledCheckbox(group)"
-            (click)="activeItemLote(selectedItems)"
-          ></p-tableCheckbox>
-           -->
-          <input
-            type="checkbox"
-            [value]="group"
-            [checked]="isSelected(group)"
-            (click)="selectItem($event, group)"
-          />
-        </td>
-        } 
-        @for (col of columns; track $index) {
-        <ng-container>
-          @if (!col.template) {
-          <td
-            class="rowTable"
-            [style]="
-              applyStyle(group, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-            [pTooltip]="returnTooltipRow(group, col)"
-          >
-            <span class="p-column-title">{{ col.header }}:</span>
-
-            <span
-              *ngIf="!isBooleanField(group, col); else booleanField"
-              [class]="returnRowClass(group, col)"
-            >
-              @if (!isChipField(col) && !col.iconField && !isImageField(col)) {
-              <span>
-                @if (col.icon) {
-                <i [class]="col.icon + ' mr-2'"></i>
-                }
-                {{ transformValue(group, col) }}
-              </span>
-              } @if (isChipField(col) && !col.iconField) {
-              <div>
-                <span
-                  [class]="returnClassChip(group, col)"
-                  [pTooltip]="returnTooltipIcon(group, col)"
-                  >{{ transformValue(group, col) }}</span
-                >
-              </div>
-              }
-            </span>
-
-            @if (isImageField(col)) {
-            <span>
-              <span>
-                <img class="image" [src]="loadImage(group, col)" />
-              </span>
-            </span>
-            } @if (col.iconField) {
-            <i
-              [ngClass]="{
-                'material-icons': col.indIconMaterial,
-                'material-symbols-outlined mr-2': !col.indIconMaterial
-              }"
-              [pTooltip]="returnTooltipIcon(group, col)"
-            >
-              {{ returnClassIcon(group, col) }}
-            </i>
-            }
-
-            <ng-template #booleanField>
-              @if (!col.iconField && !isSwitchField(col)) {
-              <i
-                [ngClass]="group[col.field] ? 'text-green-500' : 'text-red-500'"
-                ><span class="material-symbols-outlined">
-                  {{ group[col.field] ? "check" : "close" }}
-                </span>
-              </i>
-              } @if (isSwitchField(col)) {
-              <span [class]="returnRowClass(group, col)">
-                <kv-switch
-                  (onSwitchChange)="onSwitchChange($event, group, col)"
-                  [disabled]="col?.onlyReadField ?? true"
-                  [switchValue]="transformValue(group, col)"
-                >
-                </kv-switch>
-              </span>
-              }
-            </ng-template>
-          </td>
-          } 
-          @if (col.template) {
-          <td
-            [style]="
-              applyStyle(group, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-            class="rowTable"
-          >
-            <span class="p-column-title">{{ col.header }}:</span>
-            @if (getCustomTemplate(col.template.name)) {
-            <ng-container
-              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-              [ngTemplateOutletContext]="{ $implicit: group }"
-            />
-            }
-          </td>
-          }
-        </ng-container>
-        } 
-        @if (config.actions && config.actions.length > 0) {
-        <td [style]="applyStyle(group, { field: 'btns-options', header: '' })">
-          <div class="flex flex-row justify-content-end w-full">
-            <!-- <button
-                    id="moreVertBtn"
-                    pButton
-                    class="actionBtns p-button-text p-button-raised"
-                    (click)="menu.toggle($event); activeItem(group)"
-                  > -->
-
-            <span
-              class="material-symbols-outlined cursor-pointer icon-more-horiz"
-              style="font-size: 25px"
-              (click)="
-                returnRowDataActions(group);
-                menu.toggle($event);
-                activeItem(group)
-              "
-            >
-              more_horiz
-            </span>
-
-            <!-- </button> -->
-
-            <p-tieredMenu
-              #menu
-              [popup]="true"
-              [model]="menuItems"
-              appendTo="body"
-            ></p-tieredMenu>
-          </div>
-        </td>
-        }
-      </tr>
-      }
-
-      @if (isTableRowExpanded) {
-
-        <tr>
-          <td
-            #expandedContent
-            [attr.colspan]="columns.length + 2"
-            style="text-align: start; border-radius: 10px !important;"
-          >
-            <div style="width: 100%;">
-              @if (getCustomTemplate(config.templateRowExpanded.name)) {
-              <ng-container
-                [ngTemplateOutlet]="getCustomTemplate(config.templateRowExpanded.name)"
-                [ngTemplateOutletContext]="{ $implicit: group }"
-              />
-              }
-            </div>
-          </td>
-        </tr>
-  
-   }
-    </ng-template>
-
-    <ng-template pTemplate="emptymessage" let-columns>
-      <tr>
-        <td
-          [attr.colspan]="columns.length + 2"
-          style="text-align: center; border-radius: 10px !important"
-        >
-          <p class="font-medium m-0">Nenhum registro encontrado</p>
-        </td>
-      </tr>
-    </ng-template>
-  </p-table>
-  }
-</div>