keevo-components 1.8.262 → 1.8.264

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

@@ -0,0 +1,216 @@
+.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, #eaeaea 10%, #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 .home-style {
+  background-color: #eaeaea;
+  overflow: hidden;
+}
+
+::ng-deep .page-style {
+  overflow: auto !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-layout/layout/kv-layout.component.spec.ts

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

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

@@ -0,0 +1,277 @@
+import { ActivatedRoute, Router } from '@angular/router';
+
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+
+import { OverlayPanel } from 'primeng/overlaypanel';
+import { Sidebar } from 'primeng/sidebar';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'kv-layout',
+  templateUrl: './kv-layout.component.html',
+  styleUrls: ['./kv-layout.component.scss'],
+  // animations: [
+  //   trigger('sidebarWidthTrigger', [
+  //     state('collapsed', style({
+  //       width: '60px'
+  //     })),
+  //     state('expanded', style({
+  //       width: '359px'
+  //     })),
+  //     transition('collapsed <=> expanded', animate('100ms ease-out'))
+  //   ])
+  // ]
+})
+export class KvLayoutComponent implements OnInit, OnChanges {
+  @Input() apps: {
+    idaplicativo: number;
+    idsistema: number;
+    nomeaplicativo: string;
+    descricaoaplicativo: string;
+    rotapadrao: string;
+    indpublicado: boolean;
+    indpublicacaogradativa: boolean;
+    indexigeempresaentrada: boolean;
+  }[] = [];
+
+  @Input() breadCrumbItems: {
+    label: string;
+    routerLink: string;
+  }[] = [];
+
+  @Input() masters: {
+    idmaster: number;
+    cpfcnpj: string;
+    nome: string;
+    idmasternome: string;
+  }[] = [];
+
+  @Input() menus: {
+    idmenu: number;
+    idmenupai: number | null;
+    idaplicativo: number;
+    descricaomenu: string;
+    link: string | null;
+    icone: string | null;
+    indpublicado: boolean;
+    indmenupai: boolean;
+    listaidvisaomenu: number[];
+  }[] = [];
+
+  @Input() expandMenu: boolean = true;
+  @Input() logoMenuExpand!: any;
+  @Input() logoMenuHide!: any;
+
+  @Input() selectedApp!: number;
+  @Input() selectedEmpresa!: any;
+  @Input() selectedMaster!: number;
+
+  @Input() showButtonApps: boolean = true;
+  @Input() showButtonUser: boolean = true;
+  @Input() showExpandMenu: boolean = true;
+  @Input() showDropdownLicenca: boolean = true;
+  @Input() showMenu: boolean = true;
+  @Input() showTrocaEmpresa: boolean = false;
+  @Input() userName: string = 'Usuário';
+
+  @Output() accessKeePassEmit: EventEmitter<any> = new EventEmitter();
+  @Output() changeEmpresaEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() changeLicenseEmit: EventEmitter<number> = new EventEmitter();
+  @Output() expandMenuEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() logoutEmit: EventEmitter<any> = new EventEmitter();
+  @Output() selectAppEmit: EventEmitter<number> = new EventEmitter();
+  @Output() navigateToDefaultRouteEmit: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('meusDadosPanel') meusDadosPanel!: OverlayPanel;
+  @ViewChild('sidebarRef') sidebarRef!: Sidebar;
+  @ViewChild('sistemasPanel') sistemasPanel!: OverlayPanel;
+
+  formGroup!: FormGroup;
+  heightCard!: number;
+  mouseOverFilhoIndex: any;
+  mouseOverIndex: any;
+  widthCard!: number;
+
+  menuSelecionado: any;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private fb: FormBuilder,
+    protected router: Router
+  ) {}
+
+  public accessKeePass(event: any) {
+    this.sistemasPanel.hide();
+    this.accessKeePassEmit.emit(event);
+  }
+
+  public adjustHeightCard(): number {
+    if (this.widthCard > 400) {
+      if (this.breadCrumbItems.length > 0) return 105;
+      else return 85;
+    } else return 83;
+  }
+
+  private adjustWidthCard() {
+    this.heightCard = Number(
+      document.getElementById('page-content')?.offsetHeight
+    );
+    if (this.showMenu)
+      this.widthCard = Number(window.innerWidth) - (this.expandMenu ? 333 : 93);
+    else this.widthCard = Number(window.innerWidth);
+  }
+
+  public callRoute(e: any, expand?: boolean) {
+    if (!expand) !this.expandMenu ? (this.expandMenu = !this.expandMenu) : '';
+
+    this.router.navigateByUrl(e);
+  }
+
+  public changeEmpresa(event: any) {
+    this.changeEmpresaEmit.emit(event);
+  }
+
+  public changeLicense(event: any) {
+    this.changeLicenseEmit.emit(event);
+  }
+
+  private expandMenuEvent() {
+    this.expandMenuEmit.emit(this.expandMenu);
+  }
+
+  public logout(event: any) {
+    this.sistemasPanel.hide();
+    this.logoutEmit.emit(event);
+  }
+
+  private menusPerApp() {
+    if (this.router.url && this.menus && this.menus.length > 0) {
+      if (this.router.url === '/') {
+        // this.navigateToFirstMenu();
+      } else {
+        const menuSelecionado = this.menus.find(
+          (menu: any) =>
+            menu.link && menu.link.includes(this.router.url.slice(1))
+        );
+        if (menuSelecionado) {
+          this.navigateToMenu(menuSelecionado);
+        }
+      }
+    }
+
+    if (this.sistemasPanel) {
+      this.sistemasPanel.hide();
+    }
+  }
+
+  public nameEmpresa(nomeLicenca: any): string {
+    if (nomeLicenca) {
+      if (nomeLicenca.length > 23) return nomeLicenca.substring(0, 23) + '...';
+      else return nomeLicenca;
+    } else return '';
+  }
+
+  private navigateToFirstMenu(): void {
+    const firstMenu = this.menus[0];
+    if (firstMenu.indmenupai) {
+      const filhos = this.returnMenuChild(firstMenu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(firstMenu.link, true);
+    }
+  }
+
+  private navigateToMenu(menu: any): void {
+    if (menu.menupai) {
+      const filhos = this.returnMenuChild(menu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(menu.link, true);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const latestRequest = changes['menus'];
+    if (latestRequest?.currentValue) {
+      this.menusPerApp();
+    }
+  }
+
+  public ngOnInit(): void {
+    this.formGroup = this.fb.group({
+      idmaster: [this.selectedMaster, []],
+    });
+
+    this.adjustWidthCard();
+    this.expandMenuEvent();
+  }
+
+  public onMouseEnter(index: number) {
+    this.mouseOverIndex = index;
+  }
+
+  public onMouseEnterChild(index: number) {
+    this.mouseOverFilhoIndex = index;
+  }
+
+  public onMouseLeave() {
+    this.mouseOverIndex = null;
+    this.mouseOverFilhoIndex = null;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  public onWindowResize() {
+    this.adjustWidthCard();
+    this.cdr.detectChanges();
+  }
+
+  public returnMenuChild(idmenu: number) {
+    return this.menus.filter((x: any) => x.idmenupai == idmenu);
+  }
+
+  public selectApp(idaplicativo: number) {
+    this.selectAppEmit.emit(idaplicativo);
+  }
+
+  public showLicencas(): boolean {
+    return this.showDropdownLicenca && (this.masters || []).length > 1;
+  }
+
+  public toggleMenu() {
+    this.expandMenu = !this.expandMenu;
+    this.expandMenuEvent();
+  }
+
+  public verifySelectedPage(link: any, pai?: any): boolean {
+    let item = this.breadCrumbItems.filter((item: any) => `/${item.routerLink}` == link)
+
+    if(item?.length > 0) this.menuSelecionado = pai?.idmenu
+
+    return item?.length > 0;
+  }
+
+
+  navigateToDefaultRoute() {
+    this.navigateToDefaultRouteEmit.emit();
+  }
+
+  getSidebarState() {
+    return this.expandMenu ? 'expanded' : 'collapsed';
+  }
+}

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

@@ -0,0 +1 @@
+<ngx-loading [show]="(loading | async) || false"></ngx-loading>

package/src/lib/components/kv-loader/kv-loader.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import { KvLoaderService } from './kv-loader.service';
+
+@Component({
+  selector: 'kv-loader',
+  templateUrl: './kv-loader.component.html'
+})
+export class KvLoaderComponent {
+
+  public loading: Subject<boolean> = KvLoaderService.isLoading;
+
+  constructor() { }
+}

package/src/lib/components/kv-loader/kv-loader.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxLoadingModule } from 'ngx-loading';
+
+import { KvLoaderComponent } from './kv-loader.component';
+
+@NgModule({
+  declarations: [KvLoaderComponent],
+  exports: [KvLoaderComponent],
+  imports: [
+    CommonModule,
+    NgxLoadingModule.forRoot({
+      fullScreenBackdrop: true
+    })
+  ]
+})
+export class KvLoaderModule { }

package/src/lib/components/kv-loader/kv-loader.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+
+import {
+  Observable,
+  Subject,
+  finalize
+} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KvLoaderService {
+  public static isLoading = new Subject<boolean>();
+
+  static show() {
+    this.isLoading.next(true);
+  }
+
+  static hide() {
+    this.isLoading.next(false);
+  }
+}
+
+export const loading = (): any => {
+  return (src: Observable<any>) => {
+    KvLoaderService.show();
+    return src.pipe(finalize(() => {
+      KvLoaderService.hide();
+    }));
+  };
+};

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

@@ -0,0 +1,116 @@
+<div
+    id="kvLogin-container"
+    class="flex justify-content-center align-items-center flex-column h-screen "
+    [style.background-image]="'url(' + Background + ')'"
+>
+
+    <!-- CARD PRINCIPAL -->
+    <div
+        [formGroup]=" formGroup"
+        id="kvLogin-card"
+        class="flex flex-column align-items-center justify-content-between bg-white border-round-xl"
+        [style.width.rem]="20"
+        [style.height.px]="450"
+        (keydown.enter)="save()"
+    >
+
+        <!-- LOGO DO SISTEMA -->
+        <div class="flex flex-row align-items-center justify-content-center p-3 mt-2">
+            <img
+                alt="Logo do Sistema"
+                [style.height.rem]="4"
+                [src]="SystemLogo"
+            />
+        </div>
+
+        <!-- INFORMAÇÕES CENTRAIS -->
+        <div class=" grid formgrid p-fluid gap-2 p-3 pb-0">
+
+            <div
+                class="mb-2 w-full flex flex-row align-items-center justify-content-srart gap-1 font-medium"
+            >
+                <img
+                    [style.height.rem]="1.5"
+                    class="ml-2"
+                    alt="keepass"
+                    src="https://work-assets.keevo.com.br/img/icone-keepass-preto.png"
+                />
+                <label
+                    class="mt-1 text-sm"
+                >
+                    Entrar com KeePass
+                </label>
+            </div>
+
+            <kv-input-text
+                componentId="usuario"
+                label="CPF ou e-mail"
+                formControlName="usuario"
+                class="field col-12"
+            >
+            </kv-input-text>
+
+            <kv-input-password
+                componentId="senha"
+                label="Senha"
+                [toggleMask]="true"
+                formControlName="senha"
+                [required]="true"
+                class="field col-12"
+            >
+            </kv-input-password>
+
+            <div
+                class="flex w-full justify-content-end mb-2 h-2"
+                id="kvLogin-esqueceu-senha"
+            >
+                <a
+                    href="https://keepass.seg.br/redefinirsenha"
+                    target="_blank"
+                    class="text-xs"
+                    [style.color]="SystemColorPrimary"
+                >
+                    Esqueceu a senha?
+                </a>
+            </div>
+
+            <div id="kvLogin-cadastro" class="flex w-full justify-content-center h-2">
+                <label
+                    class="text-xs font-normal"
+                >
+                    Novo no KeePass?
+                    <a
+                        href="https://keepass.seg.br/cadastrar"
+                        target="_blank"
+                        class="text-xs m-0 p-0"
+                    >
+                        Cadastre-se.
+                    </a>
+                </label>
+            </div>
+        </div>
+    
+
+        <button
+            id="kvLogin-login-button"
+            [style.background-color]="SystemColorPrimary"
+            [style.color]="'white'"
+            class="w-full "
+            (click)="save()"
+            [style.height.px]="50"
+        ><strong>Login</strong></button>
+    </div>
+
+    <div class="logo-keevo">
+        <img
+            src="https://work-assets.keevo.com.br/img/keevo-logo-temp.png"
+        />
+        <label
+            class="text-xs"
+            [style.color]="SystemColorSecondary"
+        >
+            Copyright © 2024 - Keevo Ltda Todos os direitos reservados.
+        </label>
+    </div>
+
+</div>