keevo-components 1.8.263 → 1.8.264

package/src/lib/components/kv-inputs/kv-switch/kv-switch.component.ts

@@ -0,0 +1,54 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-switch',
+  templateUrl: './kv-switch.component.html',
+  styleUrls: [
+    './kv-switch.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvSwitchComponent),
+})
+export class KvSwitchComponent extends BaseComponentInput<boolean> {
+
+  @Input() readonly!: boolean;
+  @Input() switchValue!: boolean;
+
+  @Output() onSwitchChange: EventEmitter<any> = new EventEmitter();
+
+
+  varivelDoMeuComponente: boolean = false;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes['switchValue']){
+      this.value = changes['switchValue'].currentValue;
+    }
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    if (this.switchValue) this.value = this.switchValue;
+  }
+
+  emitOnSwitchChange(event: any) {
+    this.onSwitchChange.emit(event);
+  }
+}
+
+

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

@@ -0,0 +1,6 @@
+<p class="m-0">
+    <label
+        [for]="componentId"
+        class="label-style"
+    >{{ label }}</label>
+</p>

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

@@ -0,0 +1,9 @@
+::ng-deep .label-style {
+    position: relative;
+    // top: 13px;
+    left: 1px;
+    font-size: 0.80rem !important;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+    // font-family: 'Inter var', 'Roboto', Arial, Helvetica, sans-serif !important;
+}

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

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

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

@@ -0,0 +1,14 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+
+@Component({
+  selector: 'kv-label',
+  templateUrl: './kv-label.component.html',
+  styleUrls: ['./kv-label.component.scss']
+})
+export class KvLabelComponent {
+  @Input() componentId!: string;
+  @Input() label!: string;
+}

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KvLabelComponent } from './kv-label.component';
+
+@NgModule({
+  declarations: [
+    KvLabelComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    KvLabelComponent
+  ]
+})
+export class KvLabelModule { }

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

@@ -0,0 +1,16 @@
+<div [formGroup]="formGroup">
+  <kv-dropdown
+    componentId="idmaster"
+    label="Licença"
+    optionLabel="idmasternome"
+    optionValue="idmaster"
+    [options]="options"
+    [filter]="true"
+    [filteredOptions]="filteredOptions"
+    [formControlName]="formControlName"
+    [loading]="loading"
+    [showClear]="false"
+    (onSelectionChange)="onInputChange($event)"
+    (onSelectionValue)="onInputChange($event)">
+  </kv-dropdown>
+</div>

package/src/lib/components/kv-layout/dropdown-master/dropdown-master.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DropdownMasterComponent } from './dropdown-master.component';
+
+describe('DropdownMasterComponent', () => {
+  let component: DropdownMasterComponent;
+  let fixture: ComponentFixture<DropdownMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { of } from 'rxjs';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { BaseComponentDropDownExternal } from '../../../api/base-components/base-component-dropdown-external';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'dropdown-master',
+  templateUrl: './dropdown-master.component.html',
+  styleUrls: ['./dropdown-master.component.scss'],
+  providers: ComponentProviders(DropdownMasterComponent),
+})
+export class DropdownMasterComponent extends BaseComponentDropDownExternal {
+
+  @Input() formControlName!: string;
+  @Input() masters!: any[];
+
+  constructor(
+    componentService: ComponentService,
+    dialogService: DialogService,
+  ) {
+    super(componentService, dialogService);
+  }
+
+  protected override listar() {
+    return of(this.masters || []);
+  }
+}

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

@@ -0,0 +1,35 @@
+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 { KvLayoutComponent } from './layout/kv-layout.component';
+import { PipesModule } from "../../api/pipes/pipes.module";
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { DropdownMasterComponent } from './dropdown-master/dropdown-master.component';
+
+@NgModule({
+    declarations: [
+        DropdownMasterComponent,
+        KvLayoutComponent
+    ],
+    exports: [
+        KvLayoutComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        KvButtonsModule,
+        KvInputsModule,
+        PipesModule,
+        PrimeNgModule,
+        ReactiveFormsModule,
+    ]
+})
+export class KvLayoutModule { }

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

@@ -0,0 +1,373 @@
+<div class="flex flex-row overflow-y-hidden w- full-container">
+  @if (showMenu) {
+  <div [style]="{ minWidth: expandMenu ? '300px' : '60px' }"></div>
+  } @if(showMenu) {
+  <p-sidebar
+    #sidebarRef
+    [visible]="true"
+    [showCloseIcon]="false"
+    [modal]="false"
+    [style]="{ width: expandMenu ? '300px' : '60px' }"
+    class="sidebar-animation"
+  >
+    <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 {{expandMenu ? 'flex-row' : 'flex-column'}} align-items-center {{
+              expandMenu ? 'justify-content-between' : 'justify-content-center'
+            }} py-3"
+          >
+            <!-- Logo para o menu expandido -->
+            <img
+              *ngIf="expandMenu && logoMenuExpand"
+              alt="Card"
+              [src]="logoMenuExpand"
+              width="150"
+              class="cursor-pointer"
+              (click)="navigateToDefaultRoute()"
+            />
+
+            <!-- Logo para o menu minimizado-->
+            <img
+              *ngIf="!expandMenu && logoMenuHide"
+              alt="Card"
+              [src]="logoMenuHide"
+              width="50"
+              class="mb-2"
+              (click)="navigateToDefaultRoute()"
+            />
+
+            <!-- Toggle menu -->
+            <button
+              *ngIf="showExpandMenu"
+              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>
+
+          @if(showTrocaEmpresa){
+          <div
+            class="flex flex-row align-items-center {{
+              expandMenu ? 'justify-content-between' : 'justify-content-center'
+            }}"
+          >
+            <div
+              class="flex flex-column cursor-pointer"
+              *ngIf="expandMenu && selectedEmpresa"
+              (click)="changeEmpresa($event)"
+            >
+              <span
+                class="text-sm font-semibold mr-2"
+                [pTooltip]="this.selectedEmpresa.razaosocial"
+                [tooltipPosition]="'right'"
+              >
+                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
+              </span>
+              <span class="text-sm mt-1">{{
+                this.selectedEmpresa.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)="changeEmpresa($event)"
+              [pTooltip]="'Trocar de empresa'"
+              [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]="heightCard - 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="{{
+                verifySelectedPage(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 {{
+                  verifySelectedPage(menu.link) ? 'text-white' : ''
+                }}"
+                *ngIf="menu.icone"
+              >
+                {{ menu.icone }}
+              </i>
+              <span
+                class="text-base text-blue-900 font-medium {{
+                  verifySelectedPage(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 {{ !(menuSelecionado == menu.idmenu) && 'hidden'}} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
+              >
+                <li
+                  *ngFor="
+                    let filho of returnMenuChild(menu.idmenu);
+                    let iFilho = index
+                  "
+                >
+                  <a
+                    (mouseenter)="onMouseEnterChild(filho.idmenu)"
+                    (mouseleave)="onMouseLeave()"
+                    [ngClass]="{
+                      'hover-color': mouseOverFilhoIndex === filho.idmenu
+                    }"
+                    *ngIf="expandMenu"
+                    (click)="callRoute(filho.link)"
+                    pRipple
+                    class="{{
+                      verifySelectedPage(filho.link, menu) ? '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 {{
+                        verifySelectedPage(filho.link, menu) ? 'text-white' : ''
+                      }}"
+                      *ngIf="expandMenu"
+                      >{{ filho.descricaomenu }}</span
+                    >
+                  </a>
+                </li>
+              </div>
+            </div>
+          </li>
+        </div>
+      </div>
+    </ng-template>
+  </p-sidebar>
+  }
+
+  <!-- Topbar -->
+  <div
+    class="w-auto h-screen page-content overflow-y-hidden"
+    id="page-content"
+    style="width: 100vw !important"
+  >
+    <div class="flex flex-row align-items-center justify-content-between m-3">
+
+      @if(!showMenu) {
+      <!-- Logo home -->
+      <div>
+        <img [src]="logoMenuExpand" width="150" />
+      </div>
+      } 
+      
+      @else {
+      <!-- Breadcrumbs -->
+      <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: '#eaeaea' }"
+          (onItemClick)="callRoute($event.item.routerLink, true)"
+        ></p-breadcrumb>
+      </div>
+      }
+
+      <!-- dropdown para seleção de empresa/licenca -->
+      <dropdown-master
+        *ngIf="showLicencas()"
+        class="w-40rem"
+        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">
+        <p-button
+          *ngIf="showButtonApps"
+          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
+          *ngIf="showButtonUser"
+          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>
+
+    <!-- Container -->
+    <p-card
+      styleClass="m-3 overflow-y-auto {{
+        !showMenu && 'sm:overflow-y-hidden'
+      }} card-container"
+      [style]="{ height: heightCard - adjustHeightCard() + 'px' }"
+    >
+      <div
+        class="{{ widthCard < 992 && 'card-container' }} w-full h-full"
+        [style]="{ width: widthCard + 'px' }"
+      >
+        <ng-content></ng-content>
+      </div>
+    </p-card>
+  </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-2 align-items-center justify-content-center mt-5 mb-3"
+        style="width: 250px; height: 100%"
+      >
+        <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="title-style mt-3">
+        Olá, {{ userName ? userName.split(" ")[0] : "Usuário" }}!
+      </p>
+      <div class="mt-5 mb-3"></div>
+
+      <p-button
+        icon="pi pi-lock"
+        label="Acessar Keepass"
+        (onClick)="accessKeePass($event)"
+        styleClass="border-noround w-full text-blue-900"
+        [text]="true"
+      >
+      </p-button>
+
+      <p-button
+        icon="pi pi-sign-out"
+        label="Sair"
+        (onClick)="logout($event)"
+        styleClass="border-noround w-full text-blue-900"
+        [text]="true"
+      >
+      </p-button>
+    </ng-template>
+  </p-overlayPanel>
+</div>