keevo-components 1.8.191 → 1.8.192

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

@@ -1,292 +0,0 @@
-<div class="flex flex-row overflow-y-hidden w- full-container">
-
-  <div [style]="{minWidth: expandMenu ? '300px' : '60px'}"></div>
-
-  <p-sidebar
-    #sidebarRef
-    [visible]="true"
-    [showCloseIcon]="false"
-    [modal]="false"
-    [style]="{width: expandMenu ? '300px' : '60px'}"
-  >
-    <ng-template pTemplate="headless">
-      <div class="flex flex-column mx-1">
-        <div class="flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2">
-          <div
-            class="flex flex-row align-items-center {{expandMenu ? 'justify-content-between' : 'justify-content-center'}} py-3"
-          >
-            <img
-              *ngIf="expandMenu"
-              alt="Card"
-              [src]="logoImage"
-              width="150"
-            />
-
-            <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)="toggleMenu()"
-              [pTooltip]="expandMenu ? 'Ocultar Menu' : 'Expandir Menu'"
-              [tooltipPosition]="'right'"
-            >
-              <i class="material-symbols-outlined">
-                menu
-              </i>
-            </button>
-          </div>
-
-          <div
-            class="flex flex-row align-items-center {{expandMenu ? 'justify-content-between' : 'justify-content-center'}}"
-          >
-            <div
-              class="flex flex-column cursor-pointer"
-              *ngIf="expandMenu"
-              (click)="trocarLicenca()"
-            >
-              <span
-                class="text-sm font-semibold mr-2"
-                [pTooltip]="this.licencaSelecionada.nome"
-                [tooltipPosition]="'right'"
-              >
-                {{mascaraNomeLicenca(this.licencaSelecionada.nome)}}
-              </span>
-              <span class="text-sm mt-1">{{this.licencaSelecionada.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)="trocarLicenca()"
-              [pTooltip]="'Alterar workspace'"
-              [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 {{expandMenu ? 'mx-1' : ''}}"
-          [style.max-height]="(heigthCard - 220) + 'px'"
-          style="overflow-y: auto;"
-        >
-          <!-- menus -->
-          <li *ngFor="let menu of menus; let i = index">
-            <!-- menu que não tem filho -->
-            <a
-              (mouseenter)="onMouseEnter(i)"
-              (mouseleave)="onMouseLeave()"
-              [ngClass]="{'hover-color': mouseOverIndex === i}"
-              (click)="callRoute(menu.link)"
-              *ngIf="!menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)"
-              pRipple
-              [pTooltip]="!expandMenu ? menu.descricaomenu : ''"
-              [tooltipPosition]="'right'"
-              class="{{verificarPaginaSelecionada(menu.link) ? 'bg-green-600' : ''}} menu-option flex align-items-center no-underline {{!expandMenu ? 'justify-content-center' : ''}} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple"
-            >
-
-              <i
-                class="material-symbols-outlined icon-menu {{expandMenu ? 'ml-1 mr-2' : ''}}  icon-hover-color {{verificarPaginaSelecionada(menu.link) ? 'text-white' : ''}}"
-                *ngIf="menu.icone"
-              >
-                {{ menu.icone }}
-              </i>
-              <span
-                class="text-base text-blue-900 font-medium {{verificarPaginaSelecionada(menu.link) ? 'text-white' : ''}}"
-                *ngIf="expandMenu"
-              >{{ menu.descricaomenu }}</span>
-            </a>
-            <!-- menu com filho -->
-            <div *ngIf="menu.indmenupai">
-              <a
-                (mouseenter)="onMouseEnter(i)"
-                (mouseleave)="onMouseLeave()"
-                [ngClass]="{'hover-color': mouseOverIndex === i}"
-                pRipple
-                pStyleClass="@next"
-                enterClass="hidden"
-                enterActiveClass="slidedown"
-                leaveToClass="hidden"
-                leaveActiveClass="slideup"
-                class="menu-option flex align-items-center {{!expandMenu ? 'justify-content-center' : 'justify-content-between'}} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple"
-                [tooltipPosition]="'right'"
-                [pTooltip]="!expandMenu ? menu.descricaomenu : ''"
-                (click)="!expandMenu ? expandMenu = !expandMenu : ''"
-              >
-                <div class="flex flex-row align-items-center">
-
-                  <i
-                    class="material-symbols-outlined icon-menu {{expandMenu ? 'ml-1 mr-2' : ''}} icon-hover-color"
-                    *ngIf="menu.icone"
-                    [ngClass]="{'hover-color': mouseOverIndex === i}"
-                  >
-                    {{ menu.icone }}
-                  </i>
-                  <span
-                    class="text-base text-blue-900 font-medium"
-                    *ngIf="expandMenu"
-                  >{{ menu.descricaomenu }}</span>
-                </div>
-                <i
-                  class="pi pi-chevron-down text-blue-900 mr-1 icon-hover-color"
-                  *ngIf="expandMenu"
-                  [ngClass]="{'hover-color': mouseOverIndex === i}"
-                ></i>
-              </a>
-
-              <!-- filhos -->
-              <div
-                class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
-              >
-          <li *ngFor="
-              let filho of retornarMenuFilhos(menu.idaplicativo, menu.idmenu);  let iFilho = index
-            ">
-            <a
-              (mouseenter)="onMouseFilhoEnter(filho.idmenu)"
-              (mouseleave)="onMouseLeave()"
-              [ngClass]="{'hover-color': mouseOverFilhoIndex === filho.idmenu}"
-              *ngIf="expandMenu"
-              (click)="callRoute(filho.link)"
-              pRipple
-              class="{{verificarPaginaSelecionada(filho.link) ? 'bg-green-600' : ''}} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2"
-            >
-              <i
-                class="material-symbols-outlined icon-menu {{expandMenu ? 'ml-1 mr-2' : ''}} icon-hover-color"
-                *ngIf="filho.icone"
-                [ngClass]="{'hover-color': mouseOverIndex === i}"
-              >
-                {{ filho.icone }}
-              </i>
-              <span
-                class="text-base text-blue-900 ml-4 {{verificarPaginaSelecionada(filho.link) ? 'text-white' : ''}}"
-                *ngIf="expandMenu"
-              >{{ filho.descricaomenu }}</span>
-            </a>
-          </li>
-        </div>
-      </div>
-</div>
-</div>
-</ng-template>
-</p-sidebar>
-
-<div
-  class="w-auto h-screen page-content overflow-y-hidden"
-  id="page-content"
->
-
-  <div class="flex flex-row align-items-center justify-content-between m-3">
-    <div>
-      <p class="text-xl font-semibold text-blue-900 breadcrumb-title">{{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: '#d4d3d3'}"
-        (onItemClick)="callRoute($event.item.routerLink, true)"
-      ></p-breadcrumb>
-    </div>
-
-    <div class="w-auto flex flex-row align-items-center gap-2">
-
-      <p-button
-        styleClass="w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white"
-        icon="pi pi-th-large"
-        [rounded]="true"
-        [text]="true"
-        (click)="sistemasPanel.toggle($event)"
-        [pTooltip]="'Sistemas'"
-        [tooltipPosition]="'left'"
-      ></p-button>
-
-      <p-button
-        styleClass="w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white"
-        icon="pi pi-user"
-        [rounded]="true"
-        [text]="true"
-        [pTooltip]="'Menu do Usuário'"
-        [tooltipPosition]="'left'"
-        (click)="meusDadosPanel.toggle($event)"
-      ></p-button>
-
-    </div>
-  </div>
-
-  <p-card
-    class="card-container"
-    styleClass="m-3 border-noround overflow-y-auto card-container"
-    [style]="{height: heigthCard - ajustarHeigthCard() + 'px'}"
-  >
-    <div
-      class="card-container w-full overflow-y-hidden"
-      [style]="{width: widthCard + 'px'}"
-    >
-      <ng-content></ng-content>
-    </div>
-  </p-card>
-
-</div>
-
-<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-2 align-items-center justify-content-center mt-5 mb-3"
-      style="width: 250px; height: 100%;"
-    >
-      <button
-        *ngFor="let aplicativo of aplicativos"
-        pButton
-        pRipple
-        class="btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem"
-        (click)="selecionarAplicativo(aplicativo.idaplicativo)"
-        [pTooltip]="aplicativo?.descricaoaplicativo"
-        [tooltipPosition]="'left'"
-      >
-        {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}
-      </button>
-    </div>
-  </ng-template>
-</p-overlayPanel>
-
-<p-overlayPanel
-  #meusDadosPanel
-  [showTransitionOptions]="'350ms ease-out'"
-  [hideTransitionOptions]="'250ms ease-in'"
->
-
-  <ng-template pTemplate="container">
-
-    <p class="title-style mt-3">Olá, {{nomeUsuario ?
-      nomeUsuario.split(' ')[0] : 'Usuário'}}!</p>
-    <div class="mt-5 mb-3">
-
-    </div>
-
-    <p-button
-      icon="pi pi-lock"
-      label="Acessar Keepass"
-      (onClick)="gerenciarKeePass($event)"
-      styleClass="border-noround w-full text-blue-900"
-      [text]="true"
-    ></p-button>
-    <p-button
-      icon="pi pi-sign-out"
-      label="Sair"
-      (onClick)="sair($event)"
-      styleClass="border-noround w-full text-blue-900"
-      [text]="true"
-    ></p-button>
-  </ng-template>
-
-</p-overlayPanel>

package/src/lib/components/kv-menu/kv-menu.component.scss

@@ -1,214 +0,0 @@
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 1em;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'liga';
-}
-
-::ng-deep .p-button:focus {
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-}
-
-::ng-deep .p-overlaypanel .p-overlaypanel-content {
-  padding: 0;
-}
-
-::ng-deep.hover-btn-cor-padrao.p-button:enabled:hover {
-  background: #0c3e66;
-  border-color: #002542;
-}
-
-.p-button.p-button-icon-only.p-button-rounded {
-  background: #0c3e66;
-  border-color: #002542;
-}
-
-::ng-deep.remove-focus:focus {
-  border: none;
-}
-
-
-::ng-deep.p-sidebar .p-sidebar-content {
-  padding: 0;
-}
-
-::ng-deep.sidebar-header-sistema.p-sidebar .p-sidebar-header {
-  padding-top: 0.5rem;
-  padding-right: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  display: block;
-}
-
-.btn-sistema {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #0c3e66;
-  font-size: 20px;
-}
-
-::ng-deep .p-sidebar .p-sidebar-header {
-  padding: 0rem !important;
-}
-
-::ng-deep body {
-  // display: initial;
-  margin: 0px !important;
-}
-
-::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron {
-  position: relative;
-  top: 3px;
-  color: #0c3e66 !important;
-}
-
-// .page-content {
-//   background: linear-gradient(to bottom, #d4d3d3 20%, #ffffff 30%);
-// }
-
-.page-content {
-  background: linear-gradient(to bottom, #d4d3d3 16%, #ffffff 19%);
-}
-
-* {
-  margin: 0;
-}
-
-p .item-menu {
-  color: #0c3e66;
-  font-family: 'Inter var', 'Roboto', Arial, Helvetica, sans-serif !important;
-
-}
-
-span {
-  font-size: 0.9rem !important;
-}
-
-.breadcrumb-title {
-  font-size: 1rem !important;
-  font-family: 'Inter var', 'Roboto', Arial, Helvetica, sans-serif !important;
-}
-
-::ng-deep .card-container {
-  &::-webkit-scrollbar {
-    width: 6px;
-
-    &:hover {
-      background-color: rgba(222, 222, 222, 0.75);
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: transparent;
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    border-left: 2px solid white;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  &::-webkit-scrollbar-track {
-    border-left: 2px solid white;
-    background-color: rgba(222, 222, 222, 0.75);
-  }
-
-  overflow-x: hidden;
-}
-
-.title-style {
-  position: relative;
-  top: 10px;
-  margin-left: 20px;
-  font-size: 25px;
-  color: #002542;
-  border-bottom: 2px solid green;
-  font-weight: 600;
-  display: inline;
-}
-
-::ng-deep p-sidebar .p-sidebar-content {
-  overflow-y: hidden;
-}
-
-::ng-deep p-dialog .p-dialog-content {
-  overflow-y: unset;
-}
-
-.icon-menu {
-  color: #002542;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-::ng-deep .padding-style {
-  padding: 15px !important;
-}
-
-::ng-deep .menu-option {
-  padding: 15px 5px 15px 5px !important;
-}
-
-::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text {
-  color: #183462 !important;
-  opacity: 0.95;
-  font-weight: 500;
-  font-size: 0.8rem !important;
-
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
-.pl-3 {
-  padding-left: 0rem !important;
-}
-
-// ::ng-deep svg.p-icon {
-//   width: 0.7rem;
-//   height: 1rem;
-// }
-
-.hover-color .text-base {
-  color: rgb(255, 255, 255) !important;
-  /* Escolha a cor desejada aqui */
-}
-
-
-.hover-color .icon-hover-color {
-  color: rgb(255, 255, 255) !important;
-  /* Escolha a cor desejada aqui */
-}
-
-::ng-deep .p-card .p-card-content {
-  padding: 0rem !important;
-}
-
-::ng-deep .p-card .p-card-body {
-  padding: 0rem !important;
-}
-
-::ng-deep .p-card .p-card-content {
-  padding: 0rem !important;
-}
-
-::ng-deep .p-sidebar-left {
-  z-index: auto !important;
-}

package/src/lib/components/kv-menu/kv-menu.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { KvMenuComponent } from './kv-menu.component';
-
-describe('MenuComponent', () => {
-  let component: KvMenuComponent;
-  let fixture: ComponentFixture<KvMenuComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ KvMenuComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(KvMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});