keevo-components 2.0.107 → 2.0.108

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

@@ -1,535 +0,0 @@
-<div class="h-full flex flex-row full-container">
-  @if(showMenu) {
-  <p-sidebar
-    #sidebarRef
-    [visible]="true"
-    [showCloseIcon]="false"
-    [modal]="false"
-    [style]="{ width: expandMenu() ? '17rem' : '3.65rem' }"
-    styleClass="transition-all h-full"
-  >
-    <ng-template pTemplate="headless">
-      <div class="h-full flex flex-column overflow-hidden p-2">
-        <div
-          class="flex-none flex flex-column gap-3 justify-content-between flex-shrink-0 overflow-hidden"
-        >
-          <!-- LOGO -->
-          <div
-            class="flex {{
-              expandMenu() ? 'flex-row' : 'flex-column'
-            }} align-items-center {{
-              expandMenu()
-                ? 'justify-content-between'
-                : 'justify-content-center'
-            }} p-2"
-          >
-            <!-- Logo para o menu expandido -->
-            @if(expandMenu() && logoMenuExpand){
-            <img
-              alt="Card"
-              [src]="logoMenuExpand"
-              [style.height]="'2.4rem'"
-              width="auto"
-              class="cursor-pointer p-0"
-              (click)="navigateToDefaultRoute()"
-            />
-            }
-
-            <!-- Logo para o menu minimizado-->
-            @if(!expandMenu() && logoMenuHide){
-            <img
-              alt="Card"
-              [src]="logoMenuHide"
-              [style.height]="'2.4rem'"
-              width="auto"
-              class="cursor-pointer p-1"
-              (click)="navigateToDefaultRoute()"
-            />
-            }
-
-            <!-- Toggle menu -->
-            @if(showExpandMenu){
-            <!-- <span class="material-symbols-outlined side-menu-item" (click)="expandMenu.set(!expandMenu())">menu</span> -->
-            }
-          </div>
-
-          @if(showTrocaEmpresa){
-          <div
-            class="flex flex-row align-items-center justify-content-{{
-              expandMenu() ? 'between' : 'center'
-            }} gap-2 troca-empresa-container mb-3 py-2 {{
-              !isDisableSelectionEmpresa && 'selectable-troca-empresa'
-            }}"
-            [pTooltip]="isDisableSelectionEmpresa ? '' : 'Trocar de empresa'"
-            [tooltipPosition]="'right'"
-            (click)="!isDisableSelectionEmpresa && changeEmpresa($event)"
-          >
-            @if(expandMenu() && selectedEmpresa){
-            <div class="flex flex-column w-full">
-              @if(this.selectedEmpresa.razaosocial){
-              <span class="text-xs font-semibold mr-2 color-system">
-                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
-              </span>
-              } @if(this.selectedEmpresa.cpfcnpj){
-              <span class="text-xs mt-1 color-system">{{
-                this.selectedEmpresa.cpfcnpj | cpfCnpj
-              }}</span>
-              }
-            </div>
-
-            } @if(!isDisableSelectionEmpresa) {
-            <span class="material-symbols-outlined">swap_horiz</span>
-            }
-          </div>
-          }
-        </div>
-        <!-- MENUS -->
-        <div
-          class="flex-1 list-none m-0 overflow-y-auto max-h-full menus-container"
-        >
-          <!-- menus -->
-          @for (menu of menus(); track $index) {
-          @if(!idsAplicativosMenuHide.includes(menu.idaplicativo)){
-          <li>
-            <!-- menu que não tem filho -->
-            @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){
-            <div
-              class="flex flex-row align-items-center justify-content-{{
-                expandMenu() ? 'between' : 'center'
-              }} gap-2 side-menu-item"
-              style="padding-top: 0.75rem; padding-bottom: 0.75rem"
-              (click)="callRoute(menu.link)"
-            >
-              <span class="material-symbols-outlined">{{
-                menu.icone || "lens_blur"
-              }}</span>
-              @if(expandMenu()){
-              <label>{{ menu.descricaomenu }}</label>
-              }
-            </div>
-            }
-            <!-- menu com filho -->
-            @if(menu.indmenupai){
-            <div
-              class="menu-parent"
-              id="menu-parent-{{ $index }}"
-              (mouseenter)="exibirMenuChild($event, $index)"
-              (mouseleave)="this.menuVisivel.set(undefined)"
-            >
-              <div
-                class=" flex flex-row align-items-center justify-content-{{
-                  expandMenu() ? 'between' : 'center'
-                }} gap-2 side-menu-item"
-                style="padding-top: 0.75rem; padding-bottom: 0.75rem"
-              >
-                <span class="material-symbols-outlined">{{
-                  menu.icone || "lens_blur"
-                }}</span>
-                @if(expandMenu()){
-                <label>{{ menu.descricaomenu }}</label>
-                <span class="material-symbols-outlined">chevron_right</span>
-                }
-              </div>
-
-              <div
-                class="menu-childs"
-                id="menu-child-{{ $index }}"
-                [style.opacity]="menuVisivel() === $index ? '1' : '0'"
-                [style.pointerEvents]="
-                  menuVisivel() === $index ? 'auto' : 'none'
-                "
-              >
-                <div class="flex align-items-center">
-                  <p class="p-0 m-0 font-bold pt-2 px-2 text-xs">
-                    {{ menu.descricaomenu }}
-                  </p>
-                </div>
-                <p-divider
-                  class="p-0 m-0"
-                  [style.opacity]="1"
-                  type="solid"
-                ></p-divider>
-                <div class="menu-childs-content p-0 m-0">
-                  @for (item of returnMenuChild(menu.idmenu); track $index) {
-
-                  <div
-                    class="side-menu-item py-2 px-2 text-sm"
-                    (click)="callRoute(item.link)"
-                  >
-                    {{ item.descricaomenu }}
-                  </div>
-                  }
-                </div>
-              </div>
-            </div>
-            }
-          </li>
-          } }
-        </div>
-
-        @if(useSelectionApps) {
-        <!-- APPS E SAIR -->
-        <p-divider class="px-2" [style.opacity]="1" type="solid"></p-divider>
-
-        <div class="flex-none list-none m-0 overflow-y-auto max-h-full">
-          <li>
-            <div
-              class="menu-parent"
-              id="menu-sistemas-parent"
-              (mouseenter)="exibirMenuChild($event, -1)"
-              (mouseleave)="this.menuVisivel.set(undefined)"
-            >
-              <!-- <div
-                class="flex flex-row align-items-center justify-content-{{
-                  expandMenu() ? 'between' : 'center'
-                }} gap-2 side-menu-item"
-                style="padding-top: 0.75rem; padding-bottom: 0.75rem"
-                [pTooltip]="!expandMenu() ? 'Sistemas' : ''"
-              >
-                <span class="material-symbols-outlined">grid_view</span>
-                
-                @if(expandMenu()){
-                <label>Sistemas</label>
-                <span class="material-symbols-outlined">chevron_right</span>
-                }
-              </div> -->
-
-              <div
-                class="flex flex-row align-items-center justify-content-{{
-                  expandMenu() ? 'between' : 'center'
-                }} gap-2 side-menu-item-system troca-sistema-container py-2"
-              >
-                <!-- <p-avatar
-                  icon="pi pi-th-large"
-                  styleClass="mr-2"
-                  size="normal"
-                  [style]="{
-                    'background-color': 'rgb(var(--kv-color-system), 1)',
-                    color: 'white'
-                  }"
-                /> -->
-                <div
-                  [style]="{
-                    'background-color': 'rgb(var(--kv-color-system), .2)',
-                    color: 'rgb(var(--kv-color-system), 1)',
-                    'border-radius': '.5rem',
-                    padding: '.25rem'
-                  }"
-                  class="flex align-items-center justify-content-center"
-                >
-                  <span class="material-symbols-outlined">
-                    dashboard_customize
-                  </span>
-                </div>
-
-                @if(expandMenu()) {
-                <div class="flex flex-column w-full">
-                  <span class="text-sm font-semibold mr-2 color-system">
-                    Meus Sistemas
-                  </span>
-                </div>
-
-                <span
-                  class="material-symbols-outlined"
-                  [style.color]="'rgb(var(--kv-color-system), 1)'"
-                  >unfold_more</span
-                >
-                }
-              </div>
-
-              <div
-                class="menu-childs"
-                id="menu-sistemas-child"
-                [style.opacity]="menuVisivel() === -1 ? '1' : '0'"
-                [style.pointerEvents]="menuVisivel() === -1 ? 'auto' : 'none'"
-              >
-                <p class="p-0 m-0 font-bold pt-2 pl-3 text-xs">Sistemas</p>
-                @for (item of apps; track $index) {
-                <div
-                  class="flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1"
-                  (click)="
-                    callRoute(item.rotapadrao); selectApp(item.idaplicativo)
-                  "
-                >
-                  <img
-                    [src]="item.urlicone"
-                    class="h-2rem w-2rem border-round-lg"
-                  />
-                  <div class="text-sm">
-                    {{ item.nomeaplicativo }}
-                  </div>
-                </div>
-                }
-              </div>
-            </div>
-          </li>
-          <!-- <li>
-            <div
-              class="flex flex-row align-items-center justify-content-{{
-                expandMenu() ? 'between' : 'center'
-              }} gap-2 side-menu-item"
-              style="padding-top: 0.75rem; padding-bottom: 0.75rem"
-              [pTooltip]="!expandMenu() ? 'Sair' : ''"
-              [style.color]="'rgba(252, 3, 3, 0.6)'"
-              (click)="logout($event)"
-            >
-              <span class="material-symbols-outlined">exit_to_app</span>
-              @if(expandMenu()){
-              <label>Sair</label>
-              }
-            </div>
-          </li> -->
-        </div>
-        }
-      </div>
-    </ng-template>
-  </p-sidebar>
-  }
-
-  <!-- SEÇÃO CONTEÚDO  -->
-  <div
-    class="w-auto h-full page-content flex flex-column ml-3"
-    id="page-content"
-    style="width: 100vw !important"
-  >
-    <!-- TOPO -->
-    <div
-      class="flex flex-row flex-wrap align-items-center justify-content-between mb-2"
-    >
-      @if(!showMenu) {
-      <!-- Logo home -->
-      <div>
-        <img [src]="logoMenuExpand" class="w-auto" style="height: 40px !important;" />
-      </div>
-      } @else {
-      <!-- Breadcrumbs -->
-      @if(showBreadcrumb) {
-      <div class="h-full">
-        <p-breadcrumb
-          *ngIf="widthCard > 400"
-          styleClass="border-none p-0 flex align-items-center h-2rem bg-transparent"
-          [model]="breadCrumbItems"
-          (onItemClick)="callRoute($event.item.routerLink, true)"
-        >
-          <ng-template pTemplate="item" let-item let-i="index">
-            @if(breadCrumbItems.indexOf(item) < breadCrumbItems.length - 1){
-            <span class="font-normal">{{ item.label }}</span>
-            } @else {
-            <span class="font-bold">{{ item.label }}</span>
-            }
-          </ng-template>
-        </p-breadcrumb>
-      </div>
-      } @else {
-      <!-- GHOST DIV PARA OCPUAR ESPAÇO NO SPACE BETWEEN -->
-      <div></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="font-semibold system-color">{{ masterName }}</span> }
-        @if(empresaName) {<span class="empresa-name">{{ 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" />
-            } -->
-        <kv-top-icons [topActions]="topMenuOptions" />
-      </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" />
-            } -->
-        <kv-top-icons [topActions]="topMenuOptions" />
-      </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 flex-1"
-        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">
-        <kv-top-icons [topActions]="topMenuOptions" />
-      </div>
-      }
-    </div>
-
-    @if(widthPage() <= 992){
-    <!-- dropdown para seleção de empresa/licenca -->
-    <div class="h-2rem mx-3">
-      <dropdown-master
-        *ngIf="showLicencas()"
-        formControlName="idmaster"
-        [formGroup]="formGroup"
-        [masters]="masters"
-        (onSelectionChange)="changeLicense($event)"
-        (onSelectionValue)="changeLicense($event)"
-      />
-    </div>
-
-    }
-
-    <!-- Container -->
-    <div class="overflow-hidden flex-1 p-0 m-0 h-full">
-      <div
-        class="overflow-y-auto h-full max-h-full {{
-          !showMenu && 'sm:overflow-y-hidden'
-        }} card-container
-        
-        {{ useCard ? 'use-card' : '' }}
-        "
-      >
-        <ng-content></ng-content>
-      </div>
-    </div>
-  </div>
-
-  <!-- Painel do usuário -->
-  <p-overlayPanel
-    #meusDadosPanel
-    [showTransitionOptions]="'350ms ease-out'"
-    [hideTransitionOptions]="'250ms ease-in'"
-  >
-    <ng-template pTemplate="container">
-      <div class="p-3 flex flex-column gap-2">
-        <div
-          class="flex flex-row align-items-center {{
-            showTrilhaConhecimento && 'justify-content-between'
-          }} gap-2"
-        >
-          <p-avatar
-            icon="pi pi-user"
-            class="mr-2"
-            size="xlarge"
-            shape="circle"
-            [style]="{ width: '4.5rem', height: '4.5rem' }"
-          />
-
-          <div
-            class="flex flex-column {{
-              showTrilhaConhecimento ? 'w-18rem' : 'w-12rem'
-            }} justify-content-between"
-            [style]="{ height: '4.5rem' }"
-          >
-            <span
-              class="text-medium text-md overflow-hidden white-space-nowrap text-overflow-ellipsis"
-              >Olá, {{ userName.split(" ")[0] }}!</span
-            >
-            <span
-              class="text-medium text-xs text-gray-500 overflow-hidden white-space-nowrap text-overflow-ellipsis"
-              >{{ userEmail }}</span
-            >
-            <kv-button
-              severity="secondary"
-              size="small"
-              label="Gerenciar KeePass"
-              (onClick)="accessKeePass($event)"
-              class="w-12rem"
-            ></kv-button>
-          </div>
-        </div>
-
-        @if(actions.length > 0) {
-        <p-divider></p-divider>
-
-        <div class="flex flex-column text-sm">
-          @for (action of actions; track $index) {
-          <ng-container>
-            <div
-              class="flex flex-row align-items-center gap-2 side-menu-item p-2"
-              (click)="action.action()"
-            >
-              <span class="material-symbols-outlined">{{ action.icon }}</span>
-              <span>{{ action.label }}</span>
-            </div>
-          </ng-container>
-          }
-        </div>
-        } @if(showTrilhaConhecimento) {
-        <p-divider></p-divider>
-
-        <div class="flex flex-column gap-3">
-          <span class="text-sm font-semibold text-gray-500"
-            >Trilha do Conhecimento</span
-          >
-          @for(trilha of trilhaConhecimento; track $index) {
-
-          <div class="flex flex-row gap-2 max-w-25rem">
-            <div
-              class="flex align-items-center justify-content-center border-round-md trilha-icon"
-            >
-              <span class="material-symbols-outlined text-2xl">{{
-                trilha.icon
-              }}</span>
-            </div>
-            <div class="flex flex-column justify-content-between w-20rem">
-              <span
-                class="text-sm font-medium overflow-hidden white-space-nowrap text-overflow-ellipsis text-gray-500"
-                >{{ trilha.title }}</span
-              >
-              <span
-                class="text-xs text-gray-400 overflow-hidden white-space-nowrap text-overflow-ellipsis"
-                [pTooltip]="trilha.subtitle"
-                [tooltipPosition]="'left'"
-                >{{ trilha.subtitle }}</span
-              >
-              <div class="flex flex-row gap-2">
-                <span
-                  class="material-symbols-outlined button-icon"
-                  [pTooltip]="'Baixar Documento'"
-                  (click)="downloadDoc(trilha)"
-                  >download</span
-                >
-                <span
-                  class="material-symbols-outlined button-icon"
-                  [pTooltip]="'Assistir Vídeo'"
-                  (click)="showVideoDoc(trilha)"
-                  >videocam</span
-                >
-              </div>
-            </div>
-          </div>
-          }
-        </div>
-        }
-
-        <p-divider></p-divider>
-
-        <div
-          class="flex flex-row align-items-center justify-content-between gap-2 side-menu-item p-2"
-          [style.color]="'rgba(252, 3, 3, 0.6)'"
-          (click)="logout($event)"
-        >
-          <span class="material-symbols-outlined">exit_to_app</span>
-          <label>Sair</label>
-        </div>
-      </div>
-    </ng-template>
-  </p-overlayPanel>
-</div>