keevo-components 1.8.495 → 1.8.497

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

@@ -1,469 +0,0 @@
-<div class="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"
-    >
-      <ng-template pTemplate="headless">
-        <div class="h-full flex flex-column overflow-hidden p-2">
-          
-          <!-- LOGO -->
-          <div class="flex-none flex flex-column gap-1 justify-content-between flex-shrink-0 overflow-hidden">
-            <div
-              class="flex {{
-                expandMenu() ? 'flex-row' : 'flex-column'
-              }} align-items-center {{
-                expandMenu()
-                  ? 'justify-content-between'
-                  : 'justify-content-center'
-              }} py-1"
-            >
-              <!-- Logo para o menu expandido -->
-              @if(expandMenu() && logoMenuExpand){
-                <img
-                  alt="Card"
-                  [src]="logoMenuExpand"
-                  [style.height]="'2.8rem'"
-                  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.8rem'"
-                  width="auto"
-                  class=""
-                  (click)="navigateToDefaultRoute()"
-                />
-              }
-
-              <!-- Toggle menu -->
-              @if(showExpandMenu){
-                <kv-icon
-                  icon="menu-2"
-                  [clickable]="true"
-                  [pTooltip]="expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'"
-                  [tooltipPosition]="'right'"
-                  (onClick)="toggleMenu()"
-                />
-              }
-            </div>
-
-            @if(showTrocaEmpresa){
-              <div
-                class="flex flex-row align-items-center justify-content-{{expandMenu()? 'between px-2': 'center'}}"
-                (click)="changeEmpresa($event)"
-              >
-                @if(expandMenu() && selectedEmpresa){
-                  <div
-                    class="flex flex-column "
-                    (click)="changeEmpresa($event)"
-                  >
-                    @if(this.selectedEmpresa.razaosocial){
-                      <span
-                        class="text-sm font-semibold mr-2"
-                        [pTooltip]="this.selectedEmpresa.razaosocial"
-                        [tooltipPosition]="'right'"
-                      >
-                        {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
-                      </span>
-                    }
-                    @if(this.selectedEmpresa.cpfcnpj){
-                      <span class="text-sm mt-1">{{
-                        this.selectedEmpresa.cpfcnpj | cpfCnpj
-                      }}</span>
-                    }
-                  </div>
-                  
-                }
-                <kv-icon
-                  icon="transfer"
-                  [clickable]="true"
-                  [pTooltip]="'Trocar de empresa'"
-                  [tooltipPosition]="'right'"
-                  (onClick)="changeEmpresa($event)"
-                  class=" side-menu-item py-1"
-                />
-              </div>
-            }
-          </div>
-
-          <p-divider type="solid"></p-divider>
-
-          <!-- MENUS -->
-          <div class="flex-1 list-none m-0 overflow-y-auto max-h-full">
-            <!-- menus -->
-            @for (menu of menus(); track $index) {
-              <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 py-2"
-                        [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
-                        (click)="callRoute(menu.link)"
-                      >
-                        <kv-icon
-                          [icon]="menu.icone|| 'circle-dotted'"
-                        />
-                        @if(expandMenu()){
-                          <label>{{menu.descricaomenu}}</label>
-                        }
-                    </div>
-                  }
-                <!-- menu com filho -->
-                  @if(menu.indmenupai){
-                    <div>
-                      <div
-                        class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
-                        [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
-                      >
-                        <kv-icon
-                          [icon]="menu.icone|| 'circle-dotted'"
-                          (click)="expandMenu()?'':filho.toggle($event)"
-                        />
-                        @if(expandMenu()){
-                          <label>{{menu.descricaomenu}}</label>
-                          <kv-icon
-                            #chevronIcon
-                            icon="chevron-right"
-                            (click)="filho.toggle($event)"
-                            [clickable]="true"
-                          />
-                        }
-                      </div>
-                      <div #appendMenuDiv class="appendMenuDiv"></div>
-                      
-                      <p-menu #filho [popup]="true" [model]="returnMenuChilds()(menu.idmenu)" [appendTo]="appendMenuDiv">
-                        <ng-template  pTemplate="submenuheader" let-item let-i="index">
-                          <label class="font-medium pl-3 text-xs">
-                            {{item.label}}
-                          </label>
-                            <div [style.height.rem]="0.5"></div>
-                        </ng-template>
-                        <ng-template pTemplate="item" let-item>
-                          <div 
-                            class=" side-menu-item py-2 pl-3 pr-1 text-sm"
-                            (click)="callRoute(item.url)"
-                            >
-                            {{item.label}}
-                          </div>
-                        </ng-template>
-                      </p-menu>
-
-                    </div>
-                  }
-              </li>
-            }
-          </div>
-
-          <p-divider type="solid"></p-divider>
-          
-          <!-- APPS E SAIR -->
-          <div class="flex-none list-none m-0 overflow-y-auto max-h-full">
-            <li>
-              <div
-                class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
-                [pTooltip]="!expandMenu() ? 'Sistemas' : ''"
-                (click)="!expandMenu() && menusistemas.toggle($event)"
-              >
-                <kv-icon
-                  [icon]="'apps'"
-                />
-                @if(expandMenu()){
-                  <label>Sistemas</label>
-                  <kv-icon
-                    #chevronIcon
-                    icon="chevron-right"
-                    (click)="expandMenu() && menusistemas.toggle($event)"
-                    [clickable]="true"
-                  />
-                }
-              </div>
-              <div #sistemasmenughost class="appendMenuDiv"></div>
-              <p-menu #menusistemas [popup]="true" [model]="apps" [appendTo]="sistemasmenughost">
-                <ng-template  pTemplate="submenuheader">
-                  <label class="font-medium pl-3 text-xs">
-                    Sistemas
-                  </label>
-                  <div [style.height.rem]="0.5"></div>
-                </ng-template>
-                <ng-template pTemplate="item" let-item>
-                  <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1"
-                  (click)="callRoute(item.rotapadrao)"
-                  >
-                    <img
-                      [src]="item.urlicone"
-                      class="h-2 w-2 border-round-lg"
-                    />
-                    <div class="text-sm">
-                      {{item.nomeaplicativo}}
-                    </div>
-                  </div>
-                </ng-template>
-              </p-menu>
-            </li>
-            <li>
-              <div
-                class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
-                [pTooltip]="!expandMenu() ? 'Sair' : ''"
-                [style.color]="'red'"
-                [style.opacity]="0.5"
-                (click)="logout($event)"
-              >
-                <kv-icon
-                  [icon]="'logout'"
-                  
-                />
-                @if(expandMenu()){
-                  <label>Sair</label>
-                }
-              </div>
-            </li>
-          </div>
-        </div>
-      </ng-template>
-    </p-sidebar>
-  }
-
-  <!-- SEÇÃO CONTEÚDO  -->
-  <div
-    class="w-auto h-screen page-content overflow-y-hidden flex flex-column"
-    id="page-content"
-    style="width: 100vw !important"
-  >
-    <!-- TOPO -->
-    <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 -->
-        @if(showBreadcrumb) {
-          <div>
-            <p class="text-xl font-semibold system-color 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-1rem bg-transparent"
-              [model]="breadCrumbItems"
-              [style]="{ backgroundColor: '#eaeaea' }"
-              (onItemClick)="callRoute($event.item.routerLink, true)"
-            ></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"
-              >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" />
-            }
-            <kv-top-icons
-              [topActions]="topActions()"
-            />
-
-          </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]="topActions()"
-            />
-
-          </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" />
-          }
-          <kv-top-icons
-            [topActions]="topActions()"
-          />
-
-        </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="system-color font-medium text-lg px-2 py-3 m-0">
-      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 -->
-      @for (action of actions; track $index) {
-        <ng-container>
-          <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 px-2"
-            (click)="action.action()"
-          >
-            <kv-icon
-              [icon]="action.icon"
-            />
-            <span>{{action.label}}</span>
-          </div>
-        </ng-container>
-      }
-
-      <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 px-2"
-        (click)="accessKeePass($event)"
-      >
-          <kv-icon
-            icon="lock"
-          />
-          <span>Acessar KeePass</span>
-      </div>
-  
-    </div>
-  </ng-template>
-  
-  </p-overlayPanel>
-</div>