keevo-components 2.0.105 → 2.0.107

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

@@ -0,0 +1,29 @@
+import { Injectable, signal } from '@angular/core';
+import {
+  Observable,
+  finalize,
+} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KvLoaderService {
+  public static loading = signal(0);
+
+  public static show() {
+    KvLoaderService.loading.update(x => x + 1);
+  }
+
+  public static hide() {
+    KvLoaderService.loading.update(x => x - 1);
+  }
+}
+
+export const loading = <T>(): (src: Observable<T>) => Observable<T> => {
+  return (src: Observable<T>) => {
+    KvLoaderService.show();
+    return src.pipe(finalize(() => {
+      KvLoaderService.hide();
+    }));
+  };
+};

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

@@ -0,0 +1,101 @@
+<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.rem]="28"
+    (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]="urlRedefinirSenha"
+          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]="urlCadastrarKeepass"
+            target="_blank"
+            class="text-xs m-0 p-0"
+            [style.color]="SystemColorPrimary"
+          >
+            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>

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

@@ -0,0 +1,99 @@
+:host {
+    overflow: hidden;
+}
+  
+
+#kvLogin-container {
+    font-family: 'Inter var' ,'Roboto' ,Arial, Helvetica, sans-serif !important;
+    background: no-repeat center;
+    background-size: cover;
+    padding: 20px; // Para evitar cortes nas bordas 
+}
+
+#kvLogin-card{
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+#kvLogin-esqueceu-senha {
+    position: relative;
+    bottom: .5rem;
+    padding-right: 10px;
+}
+
+#kvLogin-esqueceu-senha a{
+    text-decoration: none;
+    font-weight: 500;
+    cursor: pointer;
+    transition: text-shadow 0.2s ease-in-out;
+
+    &:hover {
+        text-shadow: 0 0 2px rgba(158, 158, 158, 0.692);
+    }
+}
+
+#kvLogin-cadastro{
+    margin-bottom: 1rem;
+}
+
+#kvLogin-cadastro a {
+    text-decoration: none;
+    font-weight: 600;
+    cursor: pointer;
+    gap: 3px;
+
+    transition: text-shadow 0.2s ease-in-out;
+
+    &:hover {
+        text-shadow: 0 0 2px rgba(158, 158, 158, 0.692);
+    }
+}
+
+#kvLogin-login-button {
+    width: 100%;
+    height: 3rem !important;
+    border-radius: 0 0 0.5rem 0.5rem;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all ease-in 0.2s;
+    -webkit-transition: all ease-in 0.2s;
+    -moz-transition: all ease-in 0.2s;
+    -ms-transition: all ease-in 0.2s;
+    -o-transition: all ease-in 0.2s;
+}
+
+#kvLogin-login-button:hover {
+    opacity: 0.9;
+}
+
+.logo-keevo {
+    text-align: center; /* Centraliza o conteúdo */
+}
+
+.logo-keevo img {
+    height: 2rem; /* Define a altura da imagem */
+    width: auto; /* Mantém a proporção da imagem */
+    display: block; /* Remove qualquer espaço extra abaixo da imagem */
+    margin: 0 auto; /* Centraliza a imagem horizontalmente */
+    margin-top: 5rem; /* Diminui o espaçamento entre a imagem e o texto */
+}
+
+.logo-keevo label {
+    display: block; /* Faz o texto ficar em uma nova linha */
+    margin-top: 0.5rem; /* Espaçamento entre a imagem e o texto */
+}
+
+//Telas menores que 650px
+@media (max-height: 700px) {
+    .logo-keevo img {
+        margin-top: 1rem; /* Diminui o espaçamento entre a imagem e o texto */
+    }
+
+    #kvLogin-container {
+        padding: 10px; /* Diminui o padding */
+    }
+
+    #kvLogin-container img {
+        max-width: 90%; /* Reduz a largura máxima da imagem */
+    }
+}

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

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

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

@@ -0,0 +1,97 @@
+import {
+  ActivatedRoute,
+  Router
+} from '@angular/router';
+
+import {
+  Component,
+  effect,
+  EventEmitter,
+  inject,
+  input,
+  Input,
+  Output
+} from '@angular/core';
+
+import {
+  DialogService,
+  DynamicDialogConfig,
+  DynamicDialogRef
+} from 'primeng/dynamicdialog';
+
+import { FormBuilder } from '@angular/forms';
+
+import { BaseComponentCrudForm } from '../../api/base-components/base-component-crud-form';
+import { NotificationService } from '../../api/services/notification.service';
+import { KeevoValidators } from '../../../public-api';
+
+/**
+ * Componente de login personalizado.
+ * Este componente permite que os usuários façam login no sistema utilizando o estilo padrão dos sistemas Keevo.
+ */
+@Component({
+  selector: 'kv-login',
+  templateUrl: './kv-login.component.html',
+  styleUrls: ['./kv-login.component.scss']
+})
+export class KvLoginComponent extends BaseComponentCrudForm {
+
+  /** URL da imagem de fundo do componente. */
+  @Input() Background!: any;
+  /** URL do logo do sistema. */
+  @Input() SystemLogo!: any;
+  /** Cor primária do sistema. */
+  @Input() SystemColorPrimary!: string;
+  /** Cor secundária do sistema. */
+  @Input() SystemColorSecondary!: string;
+  /** Evento emitido quando o usuário faz login. */
+  @Output() onLogin: EventEmitter<any> = new EventEmitter<any>();
+
+  urlRedirect = input<string>('');
+
+  urlRedefinirSenha = 'https://keepass.seg.br/redefinirsenha';
+  urlCadastrarKeepass = 'https://keepass.seg.br/cadastrar';
+
+  private formBuilder = inject(FormBuilder);
+
+  constructor(
+    dialogService: DialogService,
+    notificationService: NotificationService,
+    activatedRoute: ActivatedRoute,
+    dynamicDialogRef: DynamicDialogRef,
+    dynamicDialogConfig: DynamicDialogConfig,
+    router: Router) {
+    super(
+      dialogService,
+      notificationService,
+      activatedRoute,
+      dynamicDialogRef,
+      dynamicDialogConfig,
+      router
+    )
+
+    effect(() => {
+      if (this.urlRedirect()) {
+        this.urlRedefinirSenha = `${this.urlRedefinirSenha}?redirect=${encodeURIComponent(this.urlRedirect())}`;
+        this.urlCadastrarKeepass = `${this.urlCadastrarKeepass}?redirect=${encodeURIComponent(this.urlRedirect())}`;
+      } 
+    });
+  }
+
+  override configureForm(): void {
+    this.formGroup = this.formBuilder.group({
+      usuario: ['', KeevoValidators.required('Campo obrigatório')],
+      senha: ['', KeevoValidators.required('Campo obrigatório')]
+    });
+  }
+
+  override loadForm(id: any): void {
+
+  }
+
+  override save(): void {
+    if (this.validateForm()) {
+      this.onLogin.emit(this.formGroup.value);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,20 @@
+<!-- RENDERIZAÇÃO DO MODAL -->
+<div class="col-12 mb-6" id="content-modal">
+    <!-- COLOCAR UM COMPONENTE SUBHEADER AQUI -->
+
+    <ng-content></ng-content>
+</div>
+
+<!-- RENDERIZAÇÃO DOS BOTÕES -->
+
+<div class="bg-white flex flex-row flex-wrap gap-2 p-2 modal-barra-acoes {{justify_content}}" *ngIf="actions" id="actions-field">
+    <kv-button
+        *ngFor=" let action of actions"
+        [ngClass]="action.visible==false?'hidden':''"
+        icon="{{action.icon}}"
+        label="{{action.label}}"
+        [disabled]="action.disabled || false"
+        (onClick)="clickExecute(action)"
+        [severity]="action.severity ||'primary'"
+    />
+</div>

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

@@ -0,0 +1,37 @@
+* {
+    padding-bottom: 0rem;
+    padding-top: 0rem;
+}
+
+.barra-acoes {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgb(255, 255, 255);
+    padding: 10px;
+    z-index: 999;
+}
+
+
+#page-form-container {
+    padding-bottom: 40px;
+}
+
+@media screen and (max-width: 991px) {
+    #page-form-container {
+        padding-bottom: 100px;
+    }
+}
+.modal-barra-acoes {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    margin-right: 1.5rem;
+}
+
+::ng-deep .p-dialog .p-dialog-header .p-dialog-title {
+    font-size: 1.125rem;
+}

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,111 @@
+import {
+  Component,
+  ElementRef,
+  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) { }
+
+  /**
+   * Ações do Dialog
+   */
+  @Input() actions: ActionItem[] = [];
+  @Input() actionsPosition: string = 'right';
+  @Input() subtitle!: string;
+
+  @Input() subHeader!: ElementRef;
+
+  justify_content: string = 'justify-content-start';
+
+
+  ngOnInit(): void {
+    this.addSubTitle();
+    this.setMarginBottom();
+    this.defPositionButtons();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.setMarginBottom()
+  }
+
+  /**
+   * Adiciona sub-título à tela
+   */
+  addSubTitle() {
+    if (this.subtitle) {
+      const modals = document.querySelectorAll('.p-dialog');
+      const currentModal = modals[modals.length - 1];
+      const headerElement = currentModal.querySelector('.p-dialog-header');
+
+      if (currentModal) {
+        const subtitleElement = document.createElement('span');
+        subtitleElement.textContent = this.subtitle;
+        subtitleElement.style.fontSize = '0.75rem'
+        subtitleElement.style.width = '100%'
+        subtitleElement.style.marginLeft = '2px'
+
+        headerElement?.appendChild(subtitleElement);
+      }
+
+      if (this.subHeader) {
+        const subHeader = this.subHeader.nativeElement;
+        if (headerElement && this.subHeader) {
+          subHeader.style.width = '100%'
+          subHeader.style.marginLeft = '2px'
+
+          headerElement?.appendChild(this.subHeader.nativeElement);
+        }
+      }
+    }
+  }
+
+  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 + 30}px !important`;
+      }
+      else {
+        divBox.style.marginBottom = `50px !important`;
+      }
+    }
+  }
+
+  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,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvModalComponent } from './kv-modal.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+
+@NgModule({
+  declarations: [KvModalComponent],
+  imports: [CommonModule, PrimeNgModule, KvButtonModule],
+  exports: [KvModalComponent],
+})
+export class KvModalModule {}