keevo-components 1.5.189 → 1.5.191

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

@@ -0,0 +1,473 @@
+<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

@@ -0,0 +1,240 @@
+// ::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;
+}