keevo-components 1.5.189 → 1.5.191

package/src/lib/page-form/kv-page-form.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from "@angular/core";
+import { PageFormComponent } from "./page-form.component";
+import { CommonModule } from "@angular/common";
+import { KvButtonsModule, PrimeNgModule } from "../../public-api";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+@NgModule({
+    declarations: [
+        PageFormComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        PrimeNgModule,
+        KvButtonsModule,
+        ReactiveFormsModule
+    ],
+    exports: [
+        PageFormComponent
+    ]
+})
+export class KvPageFormModule { }

package/src/lib/page-form/page-form.component.html

@@ -0,0 +1,57 @@
+<div
+  [formGroup]="formGroup"
+  class="grid-nogutter m-0"
+  id="page-form-container"
+>
+
+  <!-- Renderização do form -->
+  <div class="col-12 p-0">
+    <ng-content></ng-content>
+  </div>
+
+  <!-- Divider -->
+  <!-- <p-divider class="col-12"></p-divider> -->
+
+  <!-- Barra de ações -->
+  <div class="flex flex-column lg:flex-row justify-content-end col-12 gap-2 barra-acoes grid grid-nogutter p-fluid">
+
+
+    <kv-button-secondary
+      *ngIf="showBtnCancel"
+      [label]="txtBtnCancel"
+      [icon]="iconBtnCancel"
+      (click)="cancel($event)"
+      class="w-full lg:w-auto"
+    >
+    </kv-button-secondary>
+
+    <kv-button-success
+      *ngIf="showBtnSave"
+      [label]="txtBtnSave"
+      [icon]="iconBtnSave"
+      [loading]="isSaveLoading"
+      (click)="save($event)"
+      class="w-full lg:w-auto"
+    />
+
+
+    <kv-button-popup
+      *ngIf="actions && showBtnSaveToogle"
+      [label]="txtBtnSaveToogle"
+      [icon]="iconBtnSaveToogle"
+      (click)="menu.toggle($event)"
+      [loading]="isSaveLoading"
+      class="w-full lg:w-auto"
+    >
+    </kv-button-popup>
+
+    <p-menu
+      #menu
+      [popup]="true"
+      [model]="actions"
+      appendTo="body"
+      class="w-full lg:w-auto"
+    ></p-menu>
+  </div>
+
+</div>

package/src/lib/page-form/page-form.component.scss

@@ -0,0 +1,72 @@
+::ng-deep .p-dialog .p-dialog-header {
+    color: white !important;
+    background: #002542 !important;
+    display: flex !important;
+    flex-wrap: wrap;
+}
+
+::ng-deep .p-dialog .p-dialog-content {
+    padding-top: 1rem;
+}
+
+.sub-title {
+    // color: white !important;
+    color: yellow;
+    position: relative;
+    bottom: 25px;
+    z-index: 1;
+}
+
+::ng-deep .p-dialog-content {
+
+    &::-webkit-scrollbar {
+        width: 8px;
+
+        &: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;
+}
+
+* {
+    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: 130px;
+    }
+}

package/src/lib/page-form/page-form.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 { PageFormComponent } from './page-form.component';
+
+describe('PageFormComponent', () => {
+  let component: PageFormComponent;
+  let fixture: ComponentFixture<PageFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/page-form/page-form.component.ts

@@ -0,0 +1,121 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActionItem } from '../api/components/table/action-item';
+
+@Component({
+  selector: 'kv-page-form',
+  templateUrl: './page-form.component.html',
+  styleUrls: ['./page-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PageFormComponent implements OnInit {
+
+  /**
+   * Configurações do formulário
+   */
+  @Input() formGroup: FormGroup = new FormGroup({});
+  @Input() TituloForm: string | undefined = '';
+  @Input() SubTituloForm: string | undefined = '';
+  @Input() isSaveLoading!: boolean;
+  @Input() popup: boolean = false;
+  @Input() locationUseComponent: 'page' | 'dialog' = 'dialog';
+  // @Input() expandMenu!: boolean;
+
+  /**
+   * Botão cancelar
+   */
+  @Input() iconBtnCancel: string = 'pi pi-fw pi-times';
+  @Input() showBtnCancel: boolean = true;
+  @Input() txtBtnCancel: string = "Cancelar";
+
+  /**
+   * Botão salvar
+   */
+  @Input() iconBtnSave: string = 'pi pi-save';
+  @Input() showBtnSave: boolean = true;
+  @Input() txtBtnSave: string = "Salvar";
+
+  /**
+   * Botão de opções
+   */
+  @Input() actions!: ActionItem[];
+  @Input() iconBtnSaveToogle: string = "pi pi-chevron-down";
+  @Input() showBtnSaveToogle: boolean = false;
+  @Input() txtBtnSaveToogle: string = "Ações";
+
+  /**
+   * Botão fechar
+   */
+  @Input() disableBtnSair: boolean = true;
+
+  /**
+   * Salvar dados
+   */
+  @Output() onSave: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * Cancelar
+   */
+  @Output() onCancel: EventEmitter<any> = new EventEmitter();
+
+  constructor(private fb: FormBuilder) { }
+
+  /**
+   * Adiciona sub-título à tela
+   */
+  addSubTitle() {
+    if (this.SubTituloForm) {
+      const headerElement = document.querySelector('.p-dialog .p-dialog-header');
+      if (headerElement) {
+        const subtitleElement = document.createElement('span');
+        subtitleElement.textContent = this.SubTituloForm;
+        subtitleElement.style.fontSize = '0.75rem'
+        subtitleElement.style.width = '100%'
+        subtitleElement.style.marginLeft = '2px'
+
+        headerElement.appendChild(subtitleElement);
+      }
+    }
+  }
+
+
+  ngOnInit() {
+    this.addSubTitle();
+    this.setPageFormContainerAttributes();
+  }
+
+  /**
+   * Dispara o método de cancelamento da tela
+   * @param event evento
+   */
+  cancel(event: Event) {
+    this.onCancel.emit(event);
+  }
+
+  /**
+   * Dispara o método de salvar da tela
+   * @param event evento
+   */
+  save(event: Event) {
+    this.onSave.emit(event);
+  }
+
+  /**
+   * Ajusta o tamanho da tela considerando o menu lateral
+   */
+  setPageFormContainerAttributes() {
+    if (this.locationUseComponent == 'page') {
+      var form = document.getElementById('page-form-container');
+
+      if (form) {
+        var widthFull = form.clientWidth;
+        var widthAdjusted;
+
+        widthAdjusted = widthFull - 332
+
+        // if (this.expandMenu) widthAdjusted = widthFull - 332;
+        // else widthAdjusted = widthFull - 92;
+      }
+    }
+  }
+}

package/src/lib/picklist/kvpicklist.module.ts

@@ -0,0 +1,20 @@
+import { FormsModule } from '@angular/forms';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+import { CommonModule } from '@angular/common';
+import { PickListComponent } from './picklist.component';
+import { NgModule } from "@angular/core";
+
+@NgModule({
+  declarations: [
+    PickListComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+  ],
+  exports: [
+    PickListComponent
+  ]
+})
+export class KvPickListModule { }

package/src/lib/picklist/picklist.component.html

@@ -0,0 +1,17 @@
+<p-pickList 
+    [source]="source" 
+    [sourceHeader]="sourceHeader" 
+    [sourceStyle]="sourceStyle" 
+    [target]="target" 
+    [targetHeader]="targetHeader" 
+    [targetStyle]="targetStyle"
+    [dragdrop]="dragdrop" 
+    [responsive]="responsive"
+    [filterBy]="filterBy"
+    [breakpoint]="breakpoint"
+    [stripedRows]="stripedRows"
+>
+    <ng-template let-item pTemplate="item" *ngIf="itemTemplate">
+        <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+    </ng-template>
+</p-pickList>

package/src/lib/picklist/picklist.component.spec.ts

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

package/src/lib/picklist/picklist.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'kv-picklist',
+  templateUrl: './picklist.component.html',
+  styleUrls: ['./picklist.component.scss', '../styles-components.scss']
+})
+export class PickListComponent implements OnInit {
+
+  @Input() source!: any[]; // Lista de origem
+  @Input() sourceHeader: string = 'Título da lista de origem';
+  @Input() sourceStyle!: any; // Estilização da lista de origem
+  @Input() target!: any[]; // Lista de destino (Itens selecionados)
+  @Input() targetHeader: string = 'Título de lista de destino'; 
+  @Input() targetStyle!: any; // Estilização da lista de destino
+  @Input() dragdrop: boolean = true; // Ativa/Desativa o arrasta e solta
+  @Input() responsive: boolean = true; // Ativa/Desativa a responsividade automática
+  @Input() filterBy!: string; // Campo de filtro nas listas.
+  @Input() breakpoint: string = "1400px"; // Define a largura da tela na qual o componente deve alterar seu comportamento responsivo.
+  @Input() stripedRows: boolean = false; // Ativa/Desativa linhas com cores alternadas ("zebradas")
+  @Input() itemTemplate!: TemplateRef<any>; // Como as listas são dinâmicas, obrigatoriamente um template deve ser informado para exibir os itens das listas
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

package/src/lib/pipes/codigofile.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'codigoFipe' })
+export class CodigoFipePipe implements PipeTransform {
+
+  transform(value: string) {
+    if (value) {
+
+      const identificacao = value.replace(/[^0-9]/g, '');
+
+      return identificacao.replace(/(\d{6})(\d{1})/g, "\$1-\$2");
+    }
+    else return null;
+  }
+}

package/src/lib/pipes/cpfcnpj.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'cpfCnpj' })
+export class CpfCnpjPipe implements PipeTransform {
+
+  transform(value: string) {
+    if (value) {
+
+      const identificacao = value.replace(/[^0-9]/g, '');
+
+      if (identificacao.length === 11) {
+        return identificacao.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, "\$1.\$2.\$3\-\$4");
+      } else if (identificacao.length === 14) {
+        return identificacao.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/g, "\$1.\$2.\$3\/\$4\-\$5");
+      }
+
+      return value;
+    }
+    else return null;
+  }
+}

package/src/lib/pipes/pipes.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CpfCnpjPipe } from './cpfcnpj.pipe';
+import { TelefonePipe } from './telefone.pipe';
+import { CodigoFipePipe } from './codigofile.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    CpfCnpjPipe,
+    TelefonePipe,
+    CodigoFipePipe
+  ],
+  exports: [
+    CpfCnpjPipe,
+    TelefonePipe,
+    CodigoFipePipe
+  ]
+})
+export class PipesModule { }

package/src/lib/pipes/telefone.pipe.ts

@@ -0,0 +1,38 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'Telefone'
+})
+export class TelefonePipe implements PipeTransform {
+
+  transform(tel: string) {
+    if (tel) {
+      const value = tel.toString().replace(/\D/g, '');
+
+      let foneFormatado = '';
+
+      if (value.length > 12) {
+        foneFormatado = value.replace(/(\d{2})?(\d{2})?(\d{5})?(\d{4})/, '+$1 ($2) $3-$4');
+
+      } else if (value.length > 11) {
+        foneFormatado = value.replace(/(\d{2})?(\d{2})?(\d{4})?(\d{4})/, '+$1 ($2) $3-$4');
+
+      } else if (value.length > 10) {
+        foneFormatado = value.replace(/(\d{2})?(\d{5})?(\d{4})/, '($1) $2-$3');
+
+      } else if (value.length > 9) {
+        foneFormatado = value.replace(/(\d{2})?(\d{4})?(\d{4})/, '($1) $2-$3');
+
+      } else if (value.length > 5) {
+        foneFormatado = value.replace(/^(\d{2})?(\d{4})?(\d{0,4})/, '($1) $2-$3');
+
+      } else if (value.length > 1) {
+        foneFormatado = value.replace(/^(\d{2})?(\d{0,5})/, '($1) $2');
+      } else {
+        if (tel !== '') { foneFormatado = value.replace(/^(\d*)/, '($1'); }
+      }
+      return foneFormatado;
+    }
+    else return null;
+  }
+}

package/src/lib/styles-components.scss

@@ -0,0 +1,11 @@
+label {
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
+}
+
+:host ::ng-deep .inputs {
+  height: 35px;
+}
+
+* {
+  margin: 0;
+}

package/src/lib/table/kvtable.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableComponent } from './table.component';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+import { FormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    TableComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+  ],
+  exports: [
+    TableComponent
+  ]
+})
+export class KvTableModule { }