keevo-components 1.5.191 → 1.5.192

package/src/lib/table/table.component.html

@@ -1,473 +0,0 @@
-<div>
-
-  <p-panel
-    *ngIf="filtrosAvancados"
-    header="Filtros avançados"
-    [toggleable]="true"
-    [collapsed]="true"
-    collapsedIcon="pi pi-filter"
-    styleClass="bg-gray-200"
-    [style]="{'margin-bottom': '2px'}"
-  >
-    <ng-content></ng-content>
-  </p-panel>
-
-
-  <p-table
-    *ngIf="config"
-    #dt
-    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"
-    (onLazyLoad)="paginate($event)"
-    (selectionChange)="selectionChange($event)"
-    rowGroupMode="rowspan"
-    [groupRowsBy]="config.fieldGroup"
-    [showFirstLastIcon]="showFirstLastIcon"
-    [pageLinks]="pageLinksOptions"
-    [responsive]="true"
-    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'
-              : 'flex flex-row align-items-center col-12 md:col-6 lg:col-4 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(dt, $event)"
-              placeholder="Pesquisar..."
-              class="w-full mb-1"
-              style="height: 40px"
-            />
-          </span>
-
-          <!-- <button
-            pButton
-            #botaoFiltro
-            *ngIf="filtrosAvancados"
-            class="p-button-raised p-button-text actionLoteBtns"
-            (click)="filtrosAvancadosEvent(showFiltrosAvancados)"
-            [pTooltip]="'Filtros avançados'"
-          >
-            <span class="material-symbols-outlined md-22"> filter_alt </span>
-          </button> -->
-
-          <!-- <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>
-              <div
-                class="flex flex-column text-medium w-15rem"
-                *ngFor="let col of columns"
-              >
-                {{ 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>
-        </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
-          style="width: 4rem; border-left: solid 4px transparent"
-          *ngIf="config.enableSelect"
-        >
-          <p-tableHeaderCheckbox (click)="activeItemLote(selectedItems)"></p-tableHeaderCheckbox>
-        </th>
-
-        <th
-          *ngFor="let col of columns"
-          [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>
-            <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>
-        </th>
-        <th *ngIf="config.actions && config.actions.length > 0"></th>
-      </tr>
-    </ng-template>
-
-    <ng-template
-      pTemplate="body"
-      let-rowData
-      let-columns="columns"
-      let-rowgroup="rowgroup"
-      let-rowspan="rowspan"
-    >
-      <tr (dblclick)="doubleClick($event, rowData)">
-        <td
-          *ngIf="config.enableSelect"
-          [style]="applyStyle(rowData, { field: 'check-box', header: '' })"
-        >
-          <!--<p-tableCheckbox *ngIf="isVisibleCheckbox(rowData)"-->
-          <p-tableCheckbox
-            [value]="rowData"
-            [disabled]="isDisabledCheckbox(rowData)"
-            (click)="activeItemLote(selectedItems)"
-          ></p-tableCheckbox>
-        </td>
-
-        <ng-container *ngFor="let col of columns">
-          <td
-            *ngIf="rowgroup && !col.template"
-            [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
-            class="rowTable"
-            [style]="
-              applyStyle(rowData, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-          >
-            <span class="p-column-title">{{ col.header }}:</span>
-
-            <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>
-          </td>
-
-          <td
-            *ngIf="!rowgroup && !col.grouped && !col.template"
-            [style]="
-              applyStyle(rowData, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-            class="rowTable"
-          >
-            <span class="p-column-title">{{ col.header }}:</span>
-
-
-            <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>
-          </td>
-
-          <td
-            *ngIf="col.template"
-            [style]="
-              applyStyle(rowData, col) +
-              centralizarColunas(col) +
-              alignColunas(col)
-            "
-            class="rowTable"
-          >
-            <span class="p-column-title">{{ col.header }}:</span>
-            <ng-container
-              *ngIf="getCustomTemplate(col.template.name)"
-              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-              [ngTemplateOutletContext]="{ $implicit: rowData }"
-            >
-            </ng-container>
-          </td>
-        </ng-container>
-
-        <td
-          *ngIf="config.actions && config.actions.length > 0"
-          [style]="applyStyle(rowData, { field: 'btns-options', header: '' })"
-        >
-          <div
-            class="flex flex-row justify-content-end w-full gap-1"
-            *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); action?.command()"
-                [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
-                [tooltipPosition]="action.tooltipPosition ? action.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)"
-            >
-              <span
-                class="material-symbols-outlined"
-                style="font-size: 20px"
-              >
-                more_horiz
-              </span>
-            </button>
-
-            <div *ngFor="let action of config.actions">
-              {{ criarMenusModal(rowData) }}
-            </div>
-
-            <!-- <div *ngFor="let action of config.actions">
-              {{ criarMenusModal(rowData) }}
-            </div> -->
-
-            <p-menu
-              #menu
-              [popup]="true"
-              [model]="menuItems"
-              appendTo="body"
-            ></p-menu>
-          </div>
-        </td>
-      </tr>
-    </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-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"
-/>

package/src/lib/table/table.component.scss

@@ -1,240 +0,0 @@
-// ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar {
-//   height: 8px;
-//   width: 8px;
-//   background-color: rgba(222, 222, 222, 0.75);
-// }
-
-// ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar-thumb {
-//   border-radius: 6px;
-//   background-color: rgba(0, 0, 0, 0.5);
-// }
-
-.error-show {
-    background-color: red;
-    width: 5px;
-    height: 10px
-}
-
-.input-search {
-    position: relative;
-    right: 8px;
-}
-
-.btns-options {
-    position: relative;
-    left: 20px;
-}
-
-.chip-style {
-    border: solid 1px;
-}
-
-:host::ng-deep .p-card .p-card-content {
-    padding: 0;
-}
-
-
-.material-symbols-outlined.md-19 {
-    font-size: 19px;
-}
-
-.material-symbols-outlined.md-22 {
-    font-size: 22px;
-
-}
-
-.checkbox-container {
-    display: flex;
-    align-items: center;
-
-    gap: 2px;
-    margin-top: 5px;
-}
-
-#botaoFiltro:hover {
-    color: darkgray;
-}
-
-;
-
-.actionLoteBtns {
-    align-items: center;
-    background-color: transparent;
-    color: darkgray;
-    display: flex;
-    font-size: 16px;
-    width: 2rem;
-    height: 2rem;
-    top: 2px;
-    margin-left: 0.5rem;
-    justify-content: center;
-    text-decoration: none;
-    text-align: justify;
-    padding: 12px 12px;
-}
-
-#actionLoteBtns:hover {
-    background-color: #29B92D  !important;
-}
-
-.actionLoteBtns:hover {
-    background-color: #29B92D  !important;
-    
-}
-
-.actionBtns {
-    align-items: center;
-    background-color: transparent;
-    color: darkgray;
-    display: flex;
-    width: .8rem;
-    height: .8rem;
-    margin-left: 0.22rem;
-    justify-content: center;
-    text-decoration: none;
-    text-align: justify;
-    padding: 11px 11px;
-}
-
-:host::ng-deep .material-symbols-outlined {
-    font-family: 'Material Symbols Outlined';
-    font-weight: normal;
-    font-style: normal;
-    // font-size: 17px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    // -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-}
-
-#actionBtns:hover {
-    color: darkgray;
-}
-
-#moreVertBtn:hover {
-    color: darkgray;
-}
-
-.icon-search {
-    top: 20px;
-}
-
-.image {
-    border-style: solid;
-    border-width: 3.5px;
-    border-color: rgb(82, 137, 180);
-    border-radius: 100%;
-    height: 55px;
-    width: 55px;
-    padding: 0;
-    margin: 0;
-    vertical-align: middle;
-}
-
-
-/* Início: Estilização padrão da tabela */
-:host ::ng-deep .p-datatable-table {
-    border-spacing: 0px 2px;
-}
-
-:host ::ng-deep .p-datatable-header {
-    // background-color: #f2f2f2;
-    background-color: #eaeaea !important;
-    padding: 2px 13px 0 13px !important;
-    border-radius: 5px !important;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-    // background-color: #f2f2f2;
-    background-color: #eaeaea !important;
-}
-:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th:first-of-type {
-    border-radius: 5px 0 0px 5px;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th:last-child {
-    border-radius: 0 5px 5px 0;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-    border-bottom: 1px solid #ddd !important;
-    border-top: 1px solid #ddd !important;
-}
-:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:first-of-type {
-    border-left: solid 4px #5289B4 !important;
-    border-radius: 10px 0 0 10px !important;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:last-child {
-    border-radius:  0 10px 10px 0 !important;
-    border-right: 1px solid #ddd !important;
-}
-
-:host ::ng-deep .actionBtns, :host ::ng-deep .actionLoteBtns {
-    border-radius: 50%;
-    width: 2.5rem !important;
-    height: 2.5rem !important;
-    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
-}
-/* Final: Estilização padrão da tabela */
-
-@media only screen and (min-width: 768px) {
-    .actionLoteBtns {
-        top: -1px;
-    }
-}
-
-
-@media only screen and (max-width: 960px) {
-    .rowTable {
-        text-align: right !important;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-        
-        border-right: 1px solid #ddd !important;
-        border-bottom: 1px solid hsl(0, 0%, 91%) !important;
-        border-top: 0px solid !important;
-        line-height: 30px !important;
-        gap: 5px;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:has(p-tablecheckbox) {
-        border-bottom: 0px !important;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:has(img) {
-        justify-content: center !important;
-        align-items: center !important;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:has(img) .p-column-title {
-        display: none !important; 
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:first-of-type {
-        border-left: solid 4px #5289B4 !important;
-        border-radius: 10px 10px 0 0px !important;
-        border-top: 1px solid #ddd !important;
-        line-height: 0px !important;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:last-child {
-        border-radius:  0 0px 10px 10px !important;
-        border-bottom: 1px solid #ddd !important;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td:last-child div {
-       justify-content: center !important;
-       align-items: center !important;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-        border-left: solid 4px #5289B4 !important;
-    }
-    :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td .p-column-title {
-        font-weight: 600;
-    }
-}
-
-
-::ng-deep .p-panel.p-panel-toggleable .p-panel-header {
-    background-color: #EAEAEA !important;
-}