keevo-components 1.8.44 → 1.8.45

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

@@ -0,0 +1,210 @@
+.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;
+}

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

@@ -0,0 +1,23 @@
+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();
+  });
+});

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

@@ -0,0 +1,192 @@
+
+import {
+  ActivatedRoute,
+  Router
+} from '@angular/router';
+
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+
+import {
+  AplicativoModel,
+  MasterComboModel,
+  MenuModel
+} from 'keevo-api-services-keevocenter';
+
+import { OverlayPanel } from 'primeng/overlaypanel';
+import { Sidebar } from 'primeng/sidebar';
+
+@Component({
+  selector: 'kv-menu',
+  templateUrl: './kv-menu.component.html',
+  styleUrls: ['./kv-menu.component.scss'],
+})
+export class KvMenuComponent implements OnInit {
+
+  @Input() aplicativos: AplicativoModel[] = [];
+  @Input() breadCrumbItems: { label: string, routerLink: string }[] = [];
+  @Input() licencas: MasterComboModel[] = [];
+  @Input() licencaSelecionada!: MasterComboModel;
+  @Input() logoImage!: any;
+  @Input() nomeUsuario!: string;
+
+  @Output() expandMenuEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() gerenciarKeePassEvent: EventEmitter<any> = new EventEmitter();
+  @Output() licencaChange: EventEmitter<any> = new EventEmitter();
+  @Output() sairEvent: EventEmitter<any> = new EventEmitter();
+  @Output() trocarLicencaEmit: EventEmitter<boolean> = new EventEmitter();
+
+  @ViewChild('meusDadosPanel') meusDadosPanel!: OverlayPanel;
+  @ViewChild('sidebarRef') sidebarRef!: Sidebar;
+  @ViewChild('sistemasPanel') sistemasPanel!: OverlayPanel;
+
+  menus: MenuModel[] = [];
+
+  expandMenu: boolean = true;
+  heigthCard!: number;
+  mouseOverFilhoIndex: any;
+  mouseOverIndex: any;
+  visibleDialogLicenca: boolean = false;
+  widthCard!: number;
+
+  constructor(private cdr: ChangeDetectorRef, protected router: Router, private route: ActivatedRoute) { }
+
+  ajustarHeigthCard(): number {
+    if (this.widthCard > 400) {
+      if (this.breadCrumbItems.length > 0) return 105
+      else return 85
+    } else return 83
+  }
+
+  callRoute(e: any, expand?: boolean) {
+    if (!expand)
+      !this.expandMenu ? this.expandMenu = !this.expandMenu : '';
+
+    this.router.navigateByUrl(e)
+  }
+
+  closeCallback(e: Event): void {
+    this.sidebarRef.close(e);
+  }
+
+  configurarLicencas() {
+    setTimeout(() => {
+      this.definirMenusPorSistema(this.aplicativos[0]?.idaplicativo)
+    }, 1);
+  }
+
+  definirMenusPorSistema(idaplicativo: number) {
+    this.menus = this.aplicativos.find((x) => x.idaplicativo == idaplicativo)?.menus || [];
+
+    if (this.router.url) {
+      if (this.router.url === '/') {
+        this.navigateToFirstMenu()
+      }
+      else {
+        const menuSelecionado = this.menus.find((menu: any) => menu.link.includes(this.router.url.slice(1)));
+        if (menuSelecionado) {
+          this.navigateToMenu(menuSelecionado);
+        }
+      }
+    }
+
+    this.sistemasPanel.hide();
+  }
+
+  expandMenuEvent() {
+    this.expandMenuEmit.emit(this.expandMenu);
+  }
+
+  gerenciarKeePass(event: any) {
+    this.sistemasPanel.hide();
+    this.gerenciarKeePassEvent.emit(event)
+  }
+
+  mascaraNomeLicenca(nomeLicenca: any): string {
+    if (nomeLicenca) {
+      if (nomeLicenca.length > 23)
+        return nomeLicenca.substring(0, 23) + '...';
+      else return nomeLicenca;
+    } else return '';
+  }
+
+  navigateToFirstMenu(): void {
+    const firstMenu = this.menus[0];
+    if (firstMenu.indmenupai) {
+      const filhos = this.retornarMenuFilhos(firstMenu.idaplicativo, firstMenu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(firstMenu.link, true);
+    }
+  }
+
+  navigateToMenu(menu: any): void {
+    if (menu.menupai) {
+      const filhos = this.retornarMenuFilhos(menu.idsistema, menu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(menu.link, true);
+    }
+  }
+
+  ngOnInit(): void {
+    this.configurarLicencas();
+    this.heigthCard = Number(document.getElementById('page-content')?.offsetHeight);
+    this.widthCard = Number(window.innerWidth) - (this.expandMenu ? 333 : 93);
+    this.expandMenuEvent()
+  }
+
+  onMouseEnter(index: number) {
+    this.mouseOverIndex = index;
+  }
+
+  onMouseFilhoEnter(index: number) {
+    this.mouseOverFilhoIndex = index;
+  }
+
+  onMouseLeave() {
+    this.mouseOverIndex = null;
+    this.mouseOverFilhoIndex = null;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.heigthCard = Number(document.getElementById('page-content')?.offsetHeight);
+    this.widthCard = Number(window.innerWidth) - (this.expandMenu ? 333 : 93);
+    this.cdr.detectChanges();
+  }
+
+  retornarMenuFilhos(idaplicativo: number, idmenu: number) {
+    return this.aplicativos.find((x) => x.idaplicativo == idaplicativo)?.menus.filter((x) => x.idmenupai == idmenu);
+  }
+
+  sair(event: any) {
+    this.sistemasPanel.hide();
+    this.sairEvent.emit(event)
+  }
+
+  toggleMenu() {
+    this.expandMenu = !this.expandMenu;
+    this.expandMenuEvent()
+  }
+
+  trocarLicenca() {
+    this.trocarLicencaEmit.emit();
+  }
+
+  verificarPaginaSelecionada(link: any): boolean {
+    return this.router.url.includes(link);
+  }
+}

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

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+
+import {
+    FormsModule,
+    ReactiveFormsModule
+} from '@angular/forms';
+
+import { NgModule } from '@angular/core';
+
+import { KvButtonsModule } from '../kv-buttons/kv-button.module';
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+import { KvMenuComponent } from './kv-menu.component';
+import { PipesModule } from "../../api/pipes/pipes.module";
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+    declarations: [
+        KvMenuComponent
+    ],
+    exports: [
+        KvMenuComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        KvButtonsModule,
+        KvInputsModule,
+        PipesModule,
+        PrimeNgModule,
+        ReactiveFormsModule,
+    ]
+})
+export class KvMenuModule { }

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

@@ -0,0 +1,19 @@
+<!-- RENDERIZAÇÃO DO MODAL -->
+<div class="col-12" id="content-modal">
+    <ng-content></ng-content>
+</div>
+
+<!-- RENDERIZAÇÃO DOS BOTÕES -->
+<div class="flex flex-row flex-wrap gap-2 m-2 modal-barra-acoes {{justify_content}}" *ngIf="actions" id="actions-field">
+        <kv-button-personalize
+            *ngFor=" let action of actions"
+            [ngClass]="action.visible==false?'hidden':''"
+            color="{{action.color}}"
+            colorHover="{{action.colorHover}}"
+            textColor="{{action.textColor}}"
+            icon="{{action.icon}}"
+            label="{{action.label}}"
+            [disabled]="action.disabled || false"
+            (onClick)="clickExecute(action)"
+        />
+</div>

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

@@ -0,0 +1,13 @@
+::ng-deep .p-dialog .p-dialog-header {
+    background: #002542 !important;
+    color: white !important;
+}
+
+
+.modal-barra-acoes {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvModalComponent } from './kv-modal.component';
+
+describe('ModalComponent', () => {
+  let component: KvModalComponent;
+  let fixture: ComponentFixture<KvModalComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [KvModalComponent]
+    });
+    fixture = TestBed.createComponent(KvModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,73 @@
+import {
+  Component,
+  HostListener,
+  Input
+} from '@angular/core';
+
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ActionItem } from '../../../public-api';
+
+@Component({
+  selector: 'kv-modal',
+  templateUrl: './kv-modal.component.html',
+  styleUrls: ['./kv-modal.component.scss']
+})
+export class KvModalComponent {
+
+  constructor(protected dynamicDialogRef: DynamicDialogRef) { }
+
+  ngOnInit(): void {
+    this.setMarginBottom();
+    this.defPositionButtons();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.setMarginBottom()
+  }
+
+  /**
+   * Ações do Dialog
+   */
+  @Input() actions: ActionItem[] = [];
+  @Input() actionsPosition: string = 'right';
+
+  justify_content: string = 'justify-content-start';
+
+  defPositionButtons() {
+    if (this.actionsPosition === 'right') {
+      this.justify_content = 'justify-content-end'
+    }
+    if (this.actionsPosition === 'center') {
+      this.justify_content = 'justify-content-center'
+    }
+    if (this.actionsPosition === 'left') {
+      this.justify_content = 'justify-content-start'
+    }
+  }
+
+  setMarginBottom() {
+    let actionsFieldHeight = document.getElementById('actions-field')?.offsetHeight;
+
+    let divBox = document.getElementById('content-modal');
+
+    if (divBox) {
+      if (actionsFieldHeight) {
+        divBox.style.marginBottom = `${actionsFieldHeight}px`;
+      }
+      else {
+        divBox.style.marginBottom = `50px`;
+      }
+    }
+  }
+
+  clickExecute(action: ActionItem) {
+    if (action.command) {
+
+      action.command();
+
+      if (action.closeAfterClick != false) this.dynamicDialogRef.close();
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvModalComponent } from './kv-modal.component';
+import { KvButtonsModule, PrimeNgModule } from '../../../public-api';
+
+
+
+@NgModule({
+  declarations: [
+    KvModalComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    KvButtonsModule,
+  ],
+  exports: [
+    KvModalComponent
+  ]
+})
+export class KvModalModule { }

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

@@ -0,0 +1,58 @@
+<div #chartContainer id="chartContainer" [ngClass]="{'backGround': true}">
+
+
+  <div class="div-botoes w-full flex gap-1" >
+
+
+    <span *ngIf="!mostraMenu" class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+    (click)="mostraMenu = !mostraMenu" pTooltip="Expandir menu">menu</span>
+
+
+
+    <span *ngIf="mostraMenu" class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+    (click)="mostraMenu = !mostraMenu" pTooltip="Recolher menu">menu_open</span>
+
+    <div *ngIf="mostraMenu">
+      <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.zoomIn()" pTooltip="Zoom +">zoom_in</span>
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.zoomOut()" pTooltip="Zoom -">zoom_out</span>
+
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.collapseAll()" pTooltip="Expandir">expand_less</span>
+
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.expandAll()" pTooltip="Recolher">expand_more</span>
+
+
+    <!-- <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="compactSwap()" pTooltip="Compactar">cached</span> -->
+
+    <span class="material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer"
+      (click)="chart.fit().render()" pTooltip="Centralizar">
+      filter_center_focus
+    </span>
+
+    <span class="material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer"
+      (click)="chart.fullscreen('#chartContainer')" pTooltip="Tela cheia" >
+      fullscreen
+    </span>
+
+    </div>
+
+
+  </div>
+
+
+</div>
+
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+/>

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

@@ -0,0 +1,21 @@
+#chartContainer{
+  height: 100%;
+  overflow: hidden;
+
+}
+:host ::ng-deep #chartContainer svg.svg-chart-container {
+  height: 100% !important;
+  position: relative;
+  width: 100%;
+  top: -56px;
+  z-index: 0;
+  background-color: #fff;
+}
+.div-botoes{
+  z-index: 1;
+  width:  100%;
+  position: relative;
+}
+
+
+