keevo-components 1.8.541 → 1.8.543

package/src/lib/components/kv-layout/layout/kv-layout.component.html

@@ -1,507 +0,0 @@
-<div class="flex flex-row overflow-y-hidden w- full-container">
-  <div
-    [ngClass]="{ 'overlay-background': expandMenu() && widthPage() < 800 }"
-  ></div>
-  @if (showMenu) {
-  <div
-    [style]="{
-      minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'
-    }"
-  ></div>
-  } @if(showMenu) {
-  <p-sidebar
-    #sidebarRef
-    [visible]="true"
-    [showCloseIcon]="false"
-    [modal]="false"
-    [style]="{ width: expandMenu() ? '17rem' : '3.65rem' }"
-    class="sidebar-animation"
-    styleClass="transition-all"
-  >
-    <ng-template pTemplate="headless">
-      <div class="flex flex-column overflow-hidden">
-        <div
-          class="flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden"
-        >
-          <div
-            class="flex {{
-              expandMenu() ? 'flex-row' : 'flex-column'
-            }} align-items-center {{
-              expandMenu()
-                ? 'justify-content-between'
-                : 'justify-content-center'
-            }} py-3"
-          >
-            <!-- Logo para o menu expandido -->
-            <img
-              *ngIf="expandMenu() && logoMenuExpand"
-              alt="Card"
-              [src]="logoMenuExpand"
-              [style.height]="'3rem'"
-              width="auto"
-              class="cursor-pointer p-1"
-              (click)="navigateToDefaultRoute()"
-            />
-
-            <!-- Logo para o menu minimizado-->
-            <img
-              *ngIf="!expandMenu() && logoMenuHide"
-              alt="Card"
-              [src]="logoMenuHide"
-              [style.height]="'3rem'"
-              width="auto"
-              class="mb-2 p-1"
-              (click)="navigateToDefaultRoute()"
-            />
-
-            <!-- Toggle menu -->
-            <span
-              *ngIf="showExpandMenu"
-              class="material-symbols-outlined top-layout-icons p-1"
-              [pTooltip]="expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'"
-              [tooltipPosition]="'right'"
-              (click)="toggleMenu()"
-            >
-              menu
-            </span>
-          </div>
-
-          @if(showTrocaEmpresa){
-          <div
-            class="flex flex-row align-items-center {{
-              expandMenu()
-                ? 'justify-content-between'
-                : 'justify-content-center'
-            }}"
-          >
-            <div
-              class="flex flex-column cursor-pointer"
-              *ngIf="expandMenu() && selectedEmpresa"
-              (click)="changeEmpresa($event)"
-            >
-              <span
-                class="text-sm font-semibold mr-2"
-                [pTooltip]="this.selectedEmpresa.razaosocial"
-                [tooltipPosition]="'right'"
-              >
-                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
-              </span>
-              <span class="text-sm mt-1">{{
-                this.selectedEmpresa.cpfcnpj | cpfCnpj
-              }}</span>
-            </div>
-
-            <button
-              pButton
-              class="p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu"
-              (click)="changeEmpresa($event)"
-              [pTooltip]="'Trocar de empresa'"
-              [tooltipPosition]="'right'"
-            >
-              <i class="material-symbols-outlined"> sync_alt </i>
-            </button>
-          </div>
-          <p-divider type="solid"></p-divider>
-          }
-        </div>
-
-        <div class="list-none m-0 card-container overflow-y-auto max-h-full">
-          <!-- menus -->
-          <li
-            *ngFor="let menu of menus; let i = index"
-            [class]="expandMenu() ? 'px-2' : 'px-1'"
-          >
-            <!-- menu que não tem filho -->
-            <a
-              (click)="callRoute(menu.link)"
-              *ngIf="
-                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)
-              "
-              pRipple
-              [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
-              [tooltipPosition]="'right'"
-              class="menu-option"
-              [style.background-color]="menu.bgColor"
-              [class.justify-content-center]="!expandMenu()"
-            >
-              <i
-                class="content-option-menu material-symbols-outlined icon-menu {{
-                  expandMenu() ? 'ml-1 mr-2' : ''
-                }}  icon-hover-color {{ menu.textColor }}"
-                *ngIf="menu.icone"
-              >
-                {{ menu.icone }}
-              </i>
-              <span
-                class="content-option-menu text-base text-blue-900 font-semibold {{
-                  menu.textColor
-                }}"
-                *ngIf="expandMenu()"
-                >{{ menu.descricaomenu }}</span
-              >
-            </a>
-            <!-- menu com filho -->
-            <div *ngIf="menu.indmenupai">
-              <a
-                pRipple
-                pStyleClass="@next"
-                enterClass="hidden"
-                enterActiveClass="slidedown"
-                leaveToClass="hidden"
-                leaveActiveClass="slideup"
-                [style.background-color]="
-                  isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'
-                "
-                class="menu-option {{
-                  !expandMenu()
-                    ? 'justify-content-center'
-                    : 'justify-content-between'
-                }} "
-                [tooltipPosition]="'right'"
-                [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
-                (click)="
-                  expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())
-                "
-              >
-                <div class="flex flex-row align-items-center">
-                  <i
-                    class="content-option-menu material-symbols-outlined icon-menu {{
-                      expandMenu() ? 'ml-1 mr-2' : ''
-                    }} icon-hover-color"
-                    *ngIf="menu.icone"
-                    [class.text-white]="isSelectedMenuPai(menu)"
-                  >
-                    {{ menu.icone }}
-                  </i>
-                  <span
-                    class="text-base text-blue-900 font-semibold content-option-menu"
-                    *ngIf="expandMenu()"
-                    >{{ menu.descricaomenu }}</span
-                  >
-                </div>
-                <span
-                  class="pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu"
-                  *ngIf="expandMenu()"
-                ></span>
-              </a>
-
-              <!-- filhos -->
-              <div
-                class="list-none py-0 pl-3 pr-0 m-0 {{
-                  !(
-                    menuSelecionado()?.idmenupai == menu.idmenu &&
-                    this.expandMenu()
-                  ) && 'hidden'
-                }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
-              >
-                <li
-                  *ngFor="
-                    let filho of returnMenuChild(menu.idmenu);
-                    let iFilho = index
-                  "
-                >
-                  <a
-                    *ngIf="expandMenu()"
-                    (click)="callRoute(filho.link)"
-                    pRipple
-                    class="menu-option"
-                    [style.background-color]="filho.bgColor"
-                  >
-                    <i
-                      class="content-option-menu material-symbols-outlined icon-menu {{
-                        expandMenu() ? 'ml-1 mr-2' : ''
-                      }} icon-hover-color"
-                      *ngIf="filho.icone"
-                    >
-                      {{ filho.icone }}
-                    </i>
-                    <span
-                      class="content-option-menu text-medium text-blue-900 ml-4 {{
-                        filho.textColor
-                      }}"
-                      *ngIf="expandMenu()"
-                      >{{ filho.descricaomenu }}</span
-                    >
-                  </a>
-                </li>
-              </div>
-            </div>
-          </li>
-        </div>
-      </div>
-    </ng-template>
-  </p-sidebar>
-  }
-
-  <!-- Topbar -->
-  <div
-    class="w-auto h-screen page-content overflow-y-hidden flex flex-column"
-    id="page-content"
-    style="width: 100vw !important"
-  >
-    <div
-      class="flex flex-row flex-wrap align-items-center justify-content-between my-2 mx-2 lg:mx-3 mb-0 gap-1"
-    >
-      @if(!showMenu) {
-      <!-- Logo home -->
-      <div>
-        <img [src]="logoMenuExpand" width="150" />
-      </div>
-      } @else {
-      <!-- Breadcrumbs -->
-      <div>
-        <p class="text-xl font-semibold text-blue-900 breadcrumb-title">
-          {{
-            breadCrumbItems[breadCrumbItems.length - 1] &&
-            breadCrumbItems[breadCrumbItems.length - 1].label
-              ? breadCrumbItems[breadCrumbItems.length - 1].label
-              : ""
-          }}
-        </p>
-        <p-breadcrumb
-          *ngIf="widthCard > 400"
-          styleClass="border-none p-0 flex align-items-center h-2rem !important;"
-          [model]="breadCrumbItems"
-          [style]="{ backgroundColor: '#eaeaea' }"
-          (onItemClick)="callRoute($event.item.routerLink, true)"
-        ></p-breadcrumb>
-      </div>
-      } @if (exibirNomes) { @if(widthCard >= 517) {
-      <div
-        class="w-auto flex flex-column justify-content-center align-items-center gap-2"
-      >
-        @if (masterName) { <span class="master-name">{{ masterName }}</span> }
-        @if (empresaName) {<span class="empresa-name"
-          >Organização: {{ empresaName }}</span
-        >
-        }
-      </div>
-
-      <div
-        class="w-auto flex flex-row justify-content-center align-items-center gap-2"
-      >
-        <!-- Navegação de sistemas e usuários -->
-        @for (topAction of topMenuActions(); track $index) {
-        <ng-container *ngTemplateOutlet="topAction" />
-        }
-
-        <span
-          *ngIf="showButtonApps"
-          class="material-symbols-outlined top-layout-icons p-1"
-          [pTooltip]="'Sistemas'"
-          [tooltipPosition]="'left'"
-          (click)="sistemasPanel.toggle($event)"
-        >
-          apps
-        </span>
-
-        <span
-          *ngIf="showButtonUser"
-          class="material-symbols-outlined top-layout-icons p-1"
-          [pTooltip]="'Menu do Usuário'"
-          [tooltipPosition]="'left'"
-          (click)="meusDadosPanel.toggle($event)"
-        >
-          person
-        </span>
-      </div>
-      } @else {
-      <div
-        class="w-auto flex flex-row justify-content-center align-items-center gap-2"
-      >
-        <!-- Navegação de sistemas e usuários -->
-        @for (topAction of topMenuActions(); track $index) {
-        <ng-container *ngTemplateOutlet="topAction" />
-        }
-
-        <span
-          *ngIf="showButtonApps"
-          class="material-symbols-outlined top-layout-icons p-1"
-          [pTooltip]="'Sistemas'"
-          [tooltipPosition]="'left'"
-          (click)="sistemasPanel.toggle($event)"
-        >
-          apps
-        </span>
-
-        <span
-          *ngIf="showButtonUser"
-          class="material-symbols-outlined top-layout-icons p-1"
-          [pTooltip]="'Menu do Usuário'"
-          [tooltipPosition]="'left'"
-          (click)="meusDadosPanel.toggle($event)"
-        >
-          person
-        </span>
-      </div>
-
-      <div
-        class="w-auto flex flex-column justify-content-center align-items-center gap-2"
-      >
-        @if (masterName) { <span class="master-name">{{ masterName }}</span> }
-        @if (empresaName) {<span class="empresa-name">{{ empresaName }}</span> }
-      </div>
-      } } @else { @if(widthPage() > 992){
-      <!-- dropdown para seleção de empresa/licenca -->
-      <dropdown-master
-        *ngIf="showLicencas()"
-        class="max-w-25rem"
-        style="min-width: 20rem;"
-        formControlName="idmaster"
-        [formGroup]="formGroup"
-        [masters]="masters"
-        (onSelectionChange)="changeLicense($event)"
-        (onSelectionValue)="changeLicense($event)"
-      >
-      </dropdown-master>
-      }
-
-      <!-- Navegação de sistemas e usuários -->
-      <div class="w-auto flex flex-row align-items-center gap-2">
-        @for (topAction of topMenuActions(); track $index) {
-        <ng-container *ngTemplateOutlet="topAction" />
-        }
-
-        <span
-          *ngIf="showButtonApps"
-          class="material-symbols-outlined top-layout-icons p-1"
-          [pTooltip]="'Sistemas'"
-          [tooltipPosition]="'left'"
-          (click)="sistemasPanel.toggle($event)"
-        >
-          apps
-        </span>
-
-        <span
-          *ngIf="showButtonUser"
-          class="material-symbols-outlined top-layout-icons p-1"
-          [pTooltip]="'Menu do Usuário'"
-          [tooltipPosition]="'left'"
-          (click)="meusDadosPanel.toggle($event)"
-        >
-          person
-        </span>
-      </div>
-
-      @if(widthPage() < 992){
-      <!-- dropdown para seleção de empresa/licenca -->
-      <dropdown-master
-        *ngIf="showLicencas()"
-        class="w-full"
-        formControlName="idmaster"
-        [formGroup]="formGroup"
-        [masters]="masters"
-        (onSelectionChange)="changeLicense($event)"
-        (onSelectionValue)="changeLicense($event)"
-      >
-      </dropdown-master>
-      } }
-    </div>
-
-    <!-- Container -->
-    <div class="overflow-hidden flex-1 py-2 px-2 lg:px-3">
-      <p-card
-        styleClass="overflow-y-auto h-full max-h-full {{
-          !showMenu && 'sm:overflow-y-hidden'
-        }} card-container"
-      >
-        <ng-content></ng-content>
-      </p-card>
-    </div>
-  </div>
-
-  <!-- Painel de aplicativos -->
-  <p-overlayPanel
-    #sistemasPanel
-    [showTransitionOptions]="'350ms ease-out'"
-    [hideTransitionOptions]="'250ms ease-in'"
-  >
-    <ng-template pTemplate="container">
-      <p class="title-style mt-3">Sistemas</p>
-
-      <div
-        class="flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3"
-        style="width: 270px; height: 100%"
-      >
-        @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==
-        "https://work-assets.keevo.com.br/img/icone-keevocenter.png") {
-        <div
-          class="btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center"
-          (click)="selectApp(aplicativo.idaplicativo)"
-          [pTooltip]="aplicativo?.descricaoaplicativo"
-          [tooltipPosition]="'left'"
-        >
-          {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}
-        </div>
-        } @else {
-        <img
-          [src]="aplicativo.urlicone"
-          class="btn-sistema flex align-items-center justify-content-center"
-          [pTooltip]="aplicativo?.descricaoaplicativo"
-          [tooltipPosition]="'left'"
-          (click)="selectApp(aplicativo.idaplicativo)"
-        />
-        } }
-
-        <!-- <button
-          *ngFor="let aplicativo of apps"
-          pButton
-          pRipple
-          class="btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem"
-          [pTooltip]="aplicativo?.descricaoaplicativo"
-          [tooltipPosition]="'left'"
-          (click)="selectApp(aplicativo.idaplicativo)"
-        >
-          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}
-        </button> -->
-      </div>
-    </ng-template>
-  </p-overlayPanel>
-
-  <!-- Painel do usuário -->
-  <p-overlayPanel
-    #meusDadosPanel
-    [showTransitionOptions]="'350ms ease-out'"
-    [hideTransitionOptions]="'250ms ease-in'"
-  >
-  <ng-template pTemplate="container">
-    <p class="title-style mt-3">
-      Olá, {{ userName ? userName.split(" ")[0] : "Usuário" }}!
-    </p>
-    <div class="mt-5 mb-3"></div>
-  
-    <!-- Contêiner com direção em coluna para empilhar os botões -->
-    <div class="flex flex-column">
-      <!-- Botões adicionais dinâmicos -->
-      <ng-container *ngFor="let action of actions">
-        <p-button
-          [icon]="action.icon"
-          [label]="action.label"
-          (onClick)="action.action()"
-          styleClass="border-noround w-full text-blue-900 text-sm"
-          [text]="true"
-        ></p-button>
-      </ng-container>
-      
-      <!-- Botões padrão -->
-      <p-button
-        icon="pi pi-lock"
-        label="Acessar KeePass"
-        (onClick)="accessKeePass($event)"
-        styleClass="border-noround w-full text-blue-900 text-sm"
-        [text]="true"
-      ></p-button>
-  
-      <p-button
-        icon="pi pi-sign-out"
-        label="Sair"
-        (onClick)="logout($event)"
-        styleClass="border-noround w-full text-blue-900 text-sm"
-        [text]="true"
-      ></p-button>
-  
-    </div>
-  </ng-template>
-  
-  </p-overlayPanel>
-</div>