keevo-components 1.5.191 → 1.5.192

package/src/lib/tree-table/kv-treetable.component.html

@@ -1,649 +0,0 @@
-<div>
-  <p-treeTable
-    #tt
-    *ngIf="config"
-    [value]="dataSource"
-    styleClass="p-datatable-sm"
-    [columns]="config.columns"
-    [(selection)]="selectedItems"
-    [scrollable]="true"
-    selectionMode="checkbox"
-    [showCurrentPageReport]="true"
-    currentPageReportTemplate="{first} - {last} de {totalRecords}"
-    [rowsPerPageOptions]="rowsPerPageOptions"
-    [showFirstLastIcon]="showFirstLastIcon"
-    [paginator]="paginator"
-    [rows]="rows"
-    [totalRecords]="tamanhoTotalTree"
-    [lazy]="config.lazy"
-    (onLazyLoad)="paginate($event)"
-    rowGroupMode="rowspan"
-    responsiveLayout="stack"
-  >
-    <ng-template pTemplate="caption" *ngIf="config.enableCation">
-      <div
-        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12"
-      >
-        <div class="col-12 flex flex-column">
-          <div *ngIf="config.title" class="text-md font-bold my-3">
-            {{ config.title }}
-          </div>
-          <div *ngIf="config.subtitle" class="text-sm mb-4 font-medium">
-            {{ config.subtitle }}
-          </div>
-        </div>
-
-        <div 
-          [class]="
-            tamanhoTela < 768
-              ? 'flex flex-row align-items-center col-10 md:col-6 lg:col-4 justify-content-center'
-              : 'flex flex-row align-items-center col-12 md:col-6 lg:col-4 justify-content-center input-search'
-          "
-        >
-          <span
-            *ngIf="config.enableFilter"
-            class="block mt-2 md:mt-0 p-input-icon-left text-align-center"
-          >
-            <i
-              class="material-symbols-outlined icon-search"
-              style="display: inline-block"
-            >
-              search
-            </i>
-
-            <input
-              pInputText
-              pAutoFocus
-              [autofocus]="true"
-              type="text"
-              (input)="onGlobalFilter(tt, $event)"
-              placeholder="Pesquisar..."
-              class="w-full mb-1"
-              style="height: 40px"
-            />
-          </span>
-
-          <div *ngIf="config.enableToggleNodes">
-            <button
-              (click)="toggleNodes()"
-              id="recolherExpandirBtn"
-              [pTooltip]="isExpanded ? 'Recolher Todos' : 'Expandir Todos'"
-              pButton
-              class="recolherExpandirBtn toggle p-button-raised p-button-text"
-            >
-              <span
-                class="pi"
-                [ngClass]="{
-                  'pi-chevron-down': isExpanded,
-                  ' pi-chevron-right': !isExpanded
-                }"
-              >
-              </span>
-            </button>
-          </div>
-        </div>
-
-        <div class="flex flex-row col-1 justify-content-end">
-          <div *ngFor="let action of config.actionsLote" class="btns-options">
-            <button
-              id="actionLoteBtns"
-              pButton
-              *ngIf="
-                (selectedItems.length > 0 || action.showAcoesLote) &&
-                exibirCampo(action, this.action)
-              "
-              class="actionLoteBtns p-button-raised p-button-text"
-              (click)="action?.command(); activeItemLote(selectedItems)"
-              [pTooltip]="retornarCampo(action, selectedItems, 'tooltip')"
-              [tooltipPosition]="'bottom'"
-              [style.backgroundColor]="
-                retornarCampo(action, selectedItems, 'btnColor')
-              "
-              [disabled]="retornarCampo(action, selectedItems, 'disabled')"
-            >
-              <span
-                class="material-symbols-outlined md-22"
-                [style.color]="
-                  retornarCampo(action, selectedItems, 'iconBtnColor')
-                "
-              >
-                {{ retornarCampo(action, selectedItems, "icon") }}
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        <th
-          *ngFor="let col of columns; index as i"
-          [ttSortableColumn]="col.field"
-          [ttSortableColumnDisabled]="col.sortable === false"
-          class="text-sm"
-          [style.width]="col.width"
-        >
-          <div>
-            <div [ngClass]="{ flex: i == 0, 'gap-3': i == 0 }">
-              <div *ngIf="i == 0 && config.enableSelect">
-                <p-treeTableHeaderCheckbox
-                  (click)="activeItemLote(selectedItems)"
-                ></p-treeTableHeaderCheckbox>
-              </div>
-
-              <div
-                [class]="
-                  centralizarColunas(col) && alignColunasHeader(col) == ''
-                    ? 'flex flex-row justify-content-center'
-                    : 'flex flex-row'
-                "
-                [style]="alignColunasHeader(col)"
-              >
-                <span>{{ col.header }}</span>
-                <p-sortIcon
-                  *ngIf="col.sortable === true"
-                  [field]="col.field"
-                  style="font-size: 10px"
-                ></p-sortIcon>
-
-                <span
-                  *ngIf="col.headerTooltip"
-                  class="material-symbols-outlined flex align-items-center"
-                  [pTooltip]="col.headerTooltip"
-                  >info</span
-                >
-              </div>
-            </div>
-          </div>
-        </th>
-      </tr>
-    </ng-template>
-
-    <ng-template 
-      pTemplate="body"
-      let-rowNode
-      let-rowData="rowData"
-      let-columns="columns"
-      let-rowgroup="rowgroup"
-      let-rowspan="rowspan"
-    >
-
-      <tr 
-        [ttRow]="rowNode"
-        *ngIf="rowNode.level == 0"
-        [style.height]="espacamentoPai"
-      ></tr>
-
-      <tr [ttRow]="rowNode" (dblclick)="doubleClick($event, rowData, rowNode)">
-        <ng-container *ngFor="let col of columns; index as i" >
-          <td
-            [style.width]="col.width"
-            [ngClass]="{ 'margem-filho': rowNode.level != 0 }"
-            *ngIf="rowgroup && !col.template"
-            [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
-            class="rowTable"
-            [style]="
-              applyStyle(rowData, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-          >
-            <div
-              class="w-full-h-full flex"  
-              [style]="centralizarColunas(col)"
-              [ngClass]="{ 'justify-content-between': i == columns.length - 1 }"
-            >
-              <div class="w-full-h-full flex align-items-center" *ngIf="i == 0">
-                <p-treeTableCheckbox
-                  [disabled]="isDisabledCheckbox(rowData, rowNode)"
-                  (click)="activeItemLote(selectedItems)"
-                  [value]="rowNode"
-                  *ngIf="config.enableSelect == true"
-                ></p-treeTableCheckbox>
-
-                <p-treeTableToggler
-                  [rowNode]="rowNode"
-                  *ngIf="!rightCollapse"
-                ></p-treeTableToggler>
-                <p-treeTableToggler
-                  class="hiddenVisible"
-                  [rowNode]="rowNode"
-                  *ngIf="rightCollapse"
-                ></p-treeTableToggler>
-              </div>
-
-              <span
-                *ngIf="!isBooleanField(rowData, col); else booleanField"
-                [class]="returnRowClass(rowData, col)"
-              >
-                <span
-                  *ngIf="
-                    !isChipField(col) && !col.iconField && !isImageField(col)
-                  "
-                >
-                  <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
-                  {{ transformValue(rowData, col) }}
-                </span>
-
-                <div *ngIf="isChipField(col) && !col.iconField">
-                  <span
-                    [class]="returnClassChip(rowData, col)"
-                    [pTooltip]="returnTooltipIcon(rowData, col)"
-                    >{{ transformValue(rowData, col) }}</span
-                  >
-                </div>
-              </span>
-
-              <span *ngIf="isImageField(col)">
-                <span>
-                  <img class="image" [src]="loadImage(rowData, col)" />
-                </span>
-              </span>
-
-              <i
-                *ngIf="col.iconField"
-                [ngClass]="{
-                  'material-icons': col.indIconMaterial,
-                  'material-symbols-outlined mr-2': !col.indIconMaterial
-                }"
-                [pTooltip]="returnTooltipIcon(rowData, col)"
-              >
-                {{ returnClassIcon(rowData, col) }}
-              </i>
-
-              <ng-template #booleanField>
-                <i
-                  *ngIf="!col.iconField"
-                  [ngClass]="
-                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                  "
-                  ><span class="material-symbols-outlined">
-                    {{ rowData[col.field] ? "check" : "close" }}
-                  </span>
-                </i>
-              </ng-template>
-
-              <div
-                class="w-full-h-full flex"
-                *ngIf="
-                  i == columns.length - 1 &&
-                  config.actions &&
-                  config.actions.length > 0
-                "
-                [style]="
-                  applyStyle(rowData, { field: 'btns-options', header: '' })
-                "
-              >
-                <div
-                  class="flex flex-row justify-content-end w-full"
-                  *ngIf="acoesLinhaTabela"
-                >
-                  <div *ngFor="let action of config.actions">
-                    <button
-                      id="actionBtns"
-                      pButton
-                      *ngIf="exibirCampo(action, rowData)"
-                      class="actionBtns p-button-text p-button-raised"
-                      (click)="activeItem(rowData, rowNode); action?.command()"
-                      [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
-                      [tooltipPosition]="'bottom'"
-                      [disabled]="callDisabled(action, rowData)"
-                    >
-                      <span class="material-symbols-outlined md-19">
-                        {{ retornarCampo(action, rowData, "icon") }}</span
-                      >
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="flex flex-row justify-content-end w-full"
-                  *ngIf="!acoesLinhaTabela"
-                >
-                  <button
-                    id="moreVertBtn"
-                    pButton
-                    class="actionBtns p-button-text p-button-raised"
-                    (click)="menu.toggle($event); activeItem(rowData, rowNode)"
-                  >
-                    <span
-                      class="material-symbols-outlined"
-                      style="font-size: 20px"
-                    >
-                      more_horiz
-                    </span>
-                  </button>
-
-                  <div *ngFor="let action of config.actions">
-                    {{ criarMenusModal(rowData, rowNode) }}
-                  </div>
-
-                  <!-- <div *ngFor="let action of config.actions">
-                {{ criarMenusModal(rowData) }}
-              </div> -->
-
-                  <p-menu
-                    #menu
-                    [popup]="true"
-                    [model]="menuItems"
-                    appendTo="body"
-                  ></p-menu>
-                </div>
-              </div>
-            </div>
-          </td>
-
-          <td 
-            [style.width]="col.width"
-            [ngClass]="{
-              'margem-filho': rowNode.level != 0,
-              'justify-content-between': i == columns.length - 1
-            }"
-            *ngIf="!rowgroup && !col.grouped && !col.template"
-            [style]="
-              applyStyle(rowData, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-            class="rowTable"
-          >
-          <div
-              class="w-full-h-full flex justify-content-between"
-              [ngClass]="{ 'justify-content-between': i == columns.length - 1 }"
-            >
-              <!-- Toggle -->
-              <div class="w-full-h-full flex align-items-center d-toggle" *ngIf="i == 0">
-                <p-treeTableCheckbox
-                  [disabled]="isDisabledCheckbox(rowData, rowNode)"
-                  (click)="activeItemLote(selectedItems)"
-                  [value]="rowNode"
-                  *ngIf="config.enableSelect == true"
-                ></p-treeTableCheckbox>
-
-                <p-treeTableToggler
-                  [rowNode]="rowNode"
-                  *ngIf="!rightCollapse"
-                ></p-treeTableToggler>
-                <p-treeTableToggler
-                  class="hiddenVisible"
-                  [rowNode]="rowNode"
-                  *ngIf="rightCollapse"
-                ></p-treeTableToggler>
-              </div>
-
-              <!-- Texto -->
-              <div
-                class="w-full flex align-items-center"
-                [style]="centralizarColunas(col)"
-              >
-                <span
-                  *ngIf="!isBooleanField(rowData, col); else booleanField"
-                  [class]="returnRowClass(rowData, col)"
-                >
-                  <span
-                    *ngIf="
-                      !isChipField(col) && !col.iconField && !isImageField(col)
-                    "
-                  >
-                    <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
-                    {{ transformValue(rowData, col) }}
-                  </span>
-
-                  <div *ngIf="isChipField(col) && !col.iconField">
-                    <span
-                      [class]="returnClassChip(rowData, col)"
-                      [pTooltip]="returnTooltipIcon(rowData, col)"
-                    >
-                      {{ transformValue(rowData, col) }}</span
-                    >
-                  </div>
-                </span>
-
-                <span *ngIf="isImageField(col)">
-                  <span>
-                    <img class="image" [src]="loadImage(rowData, col)" />
-                  </span>
-                </span>
-
-                <i
-                  *ngIf="col.iconField"
-                  [ngClass]="{
-                    'material-icons': col.indIconMaterial,
-                    'material-symbols-outlined mr-2': !col.indIconMaterial
-                  }"
-                  [pTooltip]="returnTooltipIcon(rowData, col)"
-                >
-                  {{ returnClassIcon(rowData, col) }}
-                </i>
-
-                <ng-template #booleanField>
-                  <i
-                    *ngIf="!col.iconField"
-                    [ngClass]="
-                      rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                    "
-                    ><span class="material-symbols-outlined">
-                      {{ rowData[col.field] ? "check" : "close" }}
-                    </span>
-                  </i>
-                </ng-template>
-              </div>
-
-              <!-- Botao de ação -->
-              <div
-                class="w-full-h-full flex"
-                *ngIf="
-                  i == columns.length - 1 &&
-                  config.actions &&
-                  config.actions.length > 0
-                "
-                [style]="
-                  applyStyle(rowData, { field: 'btns-options', header: '' })
-                "
-              >
-                <div
-                  class="flex flex-row justify-content-end w-full"
-                  *ngIf="acoesLinhaTabela"
-                >
-                  <div *ngFor="let action of config.actions">
-                    <button
-                      id="actionBtns"
-                      pButton
-                      *ngIf="exibirCampo(action, rowData)"
-                      class="actionBtns p-button-text p-button-raised"
-                      (click)="activeItem(rowData, rowNode); action?.command()"
-                      [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
-                      [tooltipPosition]="'bottom'"
-                      [disabled]="callDisabled(action, rowData)"
-                    >
-                      <span class="material-symbols-outlined md-19">
-                        {{ retornarCampo(action, rowData, "icon") }}</span
-                      >
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="flex flex-row justify-content-end w-full"
-                  *ngIf="!acoesLinhaTabela"
-                >
-                  <button
-                    id="moreVertBtn"
-                    pButton
-                    class="actionBtns p-button-text p-button-raised"
-                    (click)="menu.toggle($event); activeItem(rowData, rowNode)"
-                  >
-                    <span
-                      class="material-symbols-outlined"
-                      style="font-size: 20px"
-                    >
-                      more_horiz
-                    </span>
-                  </button>
-
-                  <div *ngFor="let action of config.actions">
-                    {{ criarMenusModal(rowData, rowNode) }}
-                  </div>
-
-                  <!-- <div *ngFor="let action of config.actions">
-                  {{ criarMenusModal(rowData) }}
-                </div> -->
-
-                  <p-menu
-                    #menu
-                    [popup]="true"
-                    [model]="menuItems"
-                    appendTo="body"
-                  ></p-menu>
-                </div>
-              </div>
-            </div>
-          </td>
-
-          <td
-            [style.width]="col.width"
-            [ngClass]="{
-              'margem-filho': rowNode.level != 0,
-              'justify-content-between': i == columns.length - 1
-            }"
-            *ngIf="col.template"
-            [style]="
-              applyStyle(rowData, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-            class="rowTable"
-          >
-            <div class="flex" [style]="centralizarColunas(col)">
-              <div class="w-full-h-full flex align-items-center" *ngIf="i == 0">
-                <p-treeTableCheckbox
-                  [disabled]="isDisabledCheckbox(rowData, rowNode)"
-                  (click)="activeItemLote(selectedItems)"
-                  [value]="rowNode"
-                  *ngIf="config.enableSelect == true"
-                ></p-treeTableCheckbox>
-
-                <p-treeTableToggler
-                  [rowNode]="rowNode"
-                  *ngIf="!rightCollapse"
-                ></p-treeTableToggler>
-                <p-treeTableToggler
-                  class="hiddenVisible"
-                  [rowNode]="rowNode"
-                  *ngIf="rightCollapse"
-                ></p-treeTableToggler>
-              </div>
-              <ng-container
-                *ngIf="getCustomTemplate(col.template.name)"
-                [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-                [ngTemplateOutletContext]="{ $implicit: rowData }"
-              >
-              </ng-container>
-
-              <div
-                class="w-full-h-full flex"
-                *ngIf="
-                  i == columns.length - 1 &&
-                  config.actions &&
-                  config.actions.length > 0
-                "
-                [style]="
-                  applyStyle(rowData, { field: 'btns-options', header: '' })
-                "
-              >
-                <div
-                  class="flex flex-row justify-content-end w-full"
-                  *ngIf="acoesLinhaTabela"
-                >
-                  <div *ngFor="let action of config.actions">
-                    <button
-                      id="actionBtns"
-                      pButton
-                      *ngIf="exibirCampo(action, rowData)"
-                      class="actionBtns p-button-text p-button-raised"
-                      (click)="activeItem(rowData, rowNode); action?.command()"
-                      [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
-                      [tooltipPosition]="'bottom'"
-                      [disabled]="callDisabled(action, rowData)"
-                    >
-                      <span class="material-symbols-outlined md-19">
-                        {{ retornarCampo(action, rowData, "icon") }}</span
-                      >
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="flex flex-row justify-content-end w-full"
-                  *ngIf="!acoesLinhaTabela"
-                >
-                  <button
-                    id="moreVertBtn"
-                    pButton
-                    class="actionBtns p-button-text p-button-raised"
-                    (click)="menu.toggle($event); activeItem(rowData, rowNode)"
-                  >
-                    <span
-                      class="material-symbols-outlined"
-                      style="font-size: 20px"
-                    >
-                      more_horiz
-                    </span>
-                  </button>
-
-                  <div *ngFor="let action of config.actions">
-                    {{ criarMenusModal(rowData, rowNode) }}
-                  </div>
-
-                  <!-- <div *ngFor="let action of config.actions">
-                  {{ criarMenusModal(rowData) }}
-                </div> -->
-
-                  <p-menu
-                    #menu
-                    [popup]="true"
-                    [model]="menuItems"
-                    appendTo="body"
-                  ></p-menu>
-                </div>
-              </div>
-            </div>
-          </td>
-          
-        </ng-container>
-      </tr>
-
-    </ng-template>
-
-    <!-- :: Hotfix do bug da versão 15 do primeng, ao retirar esse bloco de codigo na versão 15 do primeng os icones de prev e next do paginator irão sumir ( resolvido na versão 16.0)  :: -->
-
-    <ng-template pTemplate="paginatorfirstpagelinkicon">
-      <span class="pi pi-angle-double-left"></span>
-    </ng-template>
-    <ng-template pTemplate="paginatorpreviouspagelinkicon">
-      <span class="pi pi-angle-left"></span>
-    </ng-template>
-    <ng-template pTemplate="paginatornextpagelinkicon">
-      <span class="pi pi-angle-right"></span>
-    </ng-template>
-    <ng-template pTemplate="paginatorlastpagelinkicon">
-      <span class="pi pi-angle-double-right"></span>
-    </ng-template>
-
-    <ng-template pTemplate="emptymessage" let-columns>
-      <tr>
-        <td [attr.colspan]="columns.length + 2" style="text-align: center">
-          Nenhum registro encontrado
-        </td>
-      </tr>
-    </ng-template>
-  </p-treeTable>
-</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"
-/>