keevo-components 1.8.262 → 1.8.264

package/src/lib/components/keevo-components-styles.scss

@@ -0,0 +1,194 @@
+// Importar a fonte Inter var primeiro
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+$font-family-keevo: "Inter var", "Inter", sans-serif;
+
+// Importar outras fontes
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined' !important;
+}
+
+// Definir a font-family globalmente
+*{
+  font-family: $font-family-keevo !important;
+}
+
+
+
+// Sobrescrever estilos específicos de componentes do PrimeNG
+::ng-deep {
+  // Componentes que possuem texto
+  .p-accordion, 
+  .p-accordion-header, 
+  .p-accordion-content,
+  .p-badge, 
+  .p-overlay-badge,
+  .p-breadcrumb, 
+  .p-breadcrumb-item, 
+  .p-breadcrumb-link,
+  .p-button,
+  .p-calendar,
+  .p-card, 
+  .p-card-title, 
+  .p-card-subtitle, 
+  .p-card-content,
+  .p-checkbox,
+  .p-chip,
+  .p-confirm-dialog, 
+  .p-confirm-dialog-message,
+  .p-contextmenu, 
+  .p-contextmenu-item,
+  .p-dataview, 
+  .p-dataview-content,
+  .p-dialog, 
+  .p-dialog-title, 
+  .p-dialog-content,
+  .p-dropdown, 
+  .p-dropdown-label, 
+  .p-dropdown-item,
+  .p-dynamic-dialog, 
+  .p-dynamic-dialog-title, 
+  .p-dynamic-dialog-content,
+  .p-editor,
+  .p-fieldset, 
+  .p-fieldset-legend, 
+  .p-fieldset-content,
+  .p-fileupload,
+  .p-inputmask,
+  .p-inputnumber,
+  .p-inputtextarea,
+  .p-inputtext,
+  .p-menu, 
+  .p-menuitem, 
+  .p-menuitem-text,
+  .p-message,
+  .p-messages,
+  .p-multiselect, 
+  .p-multiselect-label, 
+  .p-multiselect-item,
+  .p-panelmenu, 
+  .p-panelmenu-header, 
+  .p-panelmenu-content,
+  .p-panel, 
+  .p-panel-header, 
+  .p-panel-content,
+  .p-password,
+  .p-picklist,
+  .p-progressbar,
+  .p-radiobutton,
+  .p-rating,
+  .p-sidebar,
+  .p-splitbutton,
+  .p-steps, 
+  .p-step,
+  .p-table, 
+  .p-datatable,
+  .p-tabview, 
+  .p-tabpanel,
+  .p-tag,
+  .p-toast,
+  .p-toolbar,
+  .p-tooltip,
+  .p-tree,
+  .p-treetable,
+  .p-selectbutton,
+  .p-stepper,
+  .p-inputgroup,
+  .p-inputgroup-addon,
+  .p-text {
+    font-family: $font-family-keevo !important;
+  }
+}
+
+:host ::ng-deep .inputs {
+  height: 35px;
+}
+
+:root {
+
+  /*
+  * Botões
+  */
+  --kv-primary-color: #29b92d,
+  --kv-secondary-color: #002542,
+  --kv-terciary-color: #f2f3f5,
+  --kv-primary-hover-color: #249a29,
+  --kv-secondary-hover-color: #002038,
+  --kv-terciary-hover-color: #d9dadb,
+  --kv-primary-active-color: #1c801f,
+  --kv-secondary-active-color: #001729,
+  --kv-terciary-active-color: #c0c1c2,
+  --kv-primary-disable-color: #1c801f,
+  --kv-secondary-disable-color: #001729,
+  --kv-terciary-disable-color: #c0c1c2,
+
+  /*
+  * Fonte
+  */
+}
+
+::ng-deep .p-dialog .p-dialog-header {
+  color: white !important;
+  background: #002542 !important;
+  display: flex !important;
+  flex-wrap: wrap;
+  word-wrap: break-word;
+}
+
+::ng-deep .p-dialog .p-dialog-content {
+  padding-top: 1rem;
+}
+
+::ng-deep .p-dialog {
+  min-width: 320px;
+}
+
+::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;
+}
+
+::ng-deep .p-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+  gap: 10px;
+}
+
+::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{
+  display: none;
+}
+
+// element.style {
+//   font-size: 0.75rem;
+//   width: 100%;
+//   margin-left: 2px;
+//   /* overflow: hidden; */
+//   word-wrap: break-word;
+// }

package/src/lib/components/keevo-components.module.ts

@@ -0,0 +1,88 @@
+import { NgModule } from '@angular/core';
+
+import { KvAvatarModule } from './kv-avatar/kv-avatar.module';
+import { KvButtonsModule } from './kv-buttons/kv-button.module';
+import { KvCarouselModule } from './kv-carousel/kv-carousel.module';
+import { KvChartModule } from './kv-chart/kv-chart.module';
+import { KvInputsModule } from './kv-inputs/kv-inputs.module';
+import { KvLoaderModule } from './kv-loader/kv-loader.module';
+import { KvLoginModule } from './kv-login/kv-login.module';
+import { KvLayoutModule } from './kv-layout/kv-layout.module';
+import { KvModalModule } from './kv-modal/kv-modal.module';
+import { KvOrgchartModule } from './kv-orgchart/kv-orgchart.module';
+import { KvPageFormModule } from './kv-page-form/kv-page-form.module';
+import { KvPickListModule } from './kv-pick-list/kv-pick-list.module';
+import { KvProgressBarModule } from './kv-progress-bar/kv-progress-bar.module';
+import { KvTableEditModule } from './kv-table-edit/kv-table-edit.module';
+import { KvTableModule } from './kv-table/kv-table.module';
+import { KvTreetableModule } from './kv-tree-table/kv-tree-table.module';
+import { KvtreeViewModule } from './kv-tree-view/kv-tree-view.module';
+import { KvWorkspaceModule } from './kv-workspace/kv-workspace.module';
+import { KvStepperModule } from './kv-stepper/kv-stepper.module';
+import { KvImageUploadModule } from './kv-image-upload/kv-image-upload.module';
+import { KvTableExpandableModule } from './kv-table-expandable/kv-table-expandable.module';
+import { KvFilterCardModule } from './kv-filter-card/kv-filter-card.module';
+import { KvGIconModule } from './kv-g-icon/kv-g-icon.module';
+import { KvFileViewerModule } from './kv-file-viewer/kv-file-viewer.module';
+import { KvButtonModule } from './kv-button/kv-button.module';
+import { KvFilterFieldsetModule } from './kv-filter-fieldset/kv-filter-fieldset.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    KvAvatarModule,
+    KvButtonsModule,
+    KvButtonModule,
+    KvCarouselModule,
+    KvChartModule,
+    KvInputsModule,
+    KvLoaderModule,
+    KvLoginModule,
+    KvLayoutModule,
+    KvModalModule,
+    KvOrgchartModule,
+    KvPageFormModule,
+    KvPickListModule,
+    KvProgressBarModule,
+    KvTableModule,
+    KvTreetableModule,
+    KvtreeViewModule,
+    KvWorkspaceModule,
+    KvStepperModule,
+    KvImageUploadModule,
+    KvTableExpandableModule,
+    KvGIconModule,
+    KvFilterCardModule,
+    KvFileViewerModule,
+    KvFilterFieldsetModule,
+  ],
+  exports: [
+    KvAvatarModule,
+    KvButtonsModule,
+    KvButtonModule,
+    KvCarouselModule,
+    KvChartModule,
+    KvInputsModule,
+    KvLoaderModule,
+    KvLoginModule,
+    KvLayoutModule,
+    KvModalModule,
+    KvOrgchartModule,
+    KvPageFormModule,
+    KvPickListModule,
+    KvProgressBarModule,
+    KvTableEditModule,
+    KvTableModule,
+    KvTreetableModule,
+    KvtreeViewModule,
+    KvWorkspaceModule,
+    KvStepperModule,
+    KvImageUploadModule,
+    KvTableExpandableModule,
+    KvGIconModule,
+    KvFilterCardModule,
+    KvFileViewerModule,
+    KvFilterFieldsetModule,
+  ],
+})
+export class KeevoComponentsModule {}

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

@@ -0,0 +1,13 @@
+<div class="image-container">
+  <img [src]="getImageSrc() || imageService.userDefaultImage()" alt="Foto" class="container-foto" [style.border-color]="borderColor" [style.width.px]="width" [style.height.px]="height" (error)="handleImageError($event)" (click)="openFile()">
+  <div class="btn">
+    <input #fileInput *ngIf="btnAlterarFoto" id="fotoEscolhida" type="file" accept="image/*" style="display:none" (change)="selectFotoSelecionada($any($event))">
+    <button *ngIf="btnAlterarFoto && !existeLogo" class="botao-alterar-foto border-circle" [style.background-color]="btnsColor" (click)="openFile()">
+      <i class="material-symbols-outlined">photo_camera</i>
+    </button>
+    
+    <button *ngIf="btnAlterarFoto && existeLogo" [style.background-color]="btnsColor" class="botao-excluir-foto border-circle" (click)="questionRemoverFoto()">
+      <i class="material-symbols-outlined">delete</i>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+@import '../keevo-components-styles.scss';
+
+img {
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 50%;
+  object-fit: cover; 
+}
+
+i {
+  font-size: 22px;
+}
+
+.botao-alterar-foto {
+  border-style: none;
+  width: max-content;
+  background-color: #002542;
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 7px 9px;
+}
+
+.botao-alterar-foto i {
+  color: #fff;
+}
+
+.botao-excluir-foto {
+  border-style: none;
+  width: max-content;
+  background-color: #002542;
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 7px 9px;
+}
+
+.botao-excluir-foto i {
+  color: #fff;
+}
+
+.btn {
+  position: absolute;
+  top: 87%;
+  left: 87%;
+  transform: translate(-50%, -50%);
+}
+
+.image-container {
+  display: inline-block;
+  position: relative;
+}
+
+
+
+
+
+

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

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

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

@@ -0,0 +1,142 @@
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+import { ImagensService } from '../../api/services/imagens.service';
+import { NotificationService } from '../../api/services/notification.service';
+import {  BaseComponentCrud } from 'projects/keevo-components/src/public-api';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { KvCropImageComponent } from './kv-crop-image/kv-crop-image.component';
+
+@Component({
+  selector: 'kv-avatar',
+  templateUrl: './kv-avatar.component.html',
+  styleUrls: ['./kv-avatar.component.scss']
+})
+export class KvAvatarComponent extends BaseComponentCrud {
+  @Input() imageUrl!: string;
+  @Input() borderColor: string = '#002542';
+  @Input() btnsColor: string = '#002542';
+  @Input() width: number = 135;
+  @Input() height: number = 135;
+  @Output() imageUrlChange = new EventEmitter<string>();
+  @Output() removerFotoEvent = new EventEmitter<void>();
+  @Output() onModalOpen = new EventEmitter<void>();
+  @Input() btnAlterarFoto: boolean = false;
+  
+  existeLogo = false;
+  selectedImage: string = '';
+
+
+  @ViewChild('fileInput') fileInput!: ElementRef;
+
+  constructor(public imageService: ImagensService, 
+              override notificationService: NotificationService, 
+              override dialogService: DialogService,
+              public dynamicDialogRef: DynamicDialogRef
+   ) { super(dialogService, notificationService) 
+    
+   }
+
+  getImageSrc(): string {
+    if (this.imageUrl && (this.imageUrl.startsWith('data:image') || this.imageUrl.startsWith('http') || this.imageUrl.startsWith('https'))) {
+      this.existeLogo = true;
+      return this.imageUrl;
+    } else if (this.imageUrl) {
+      this.existeLogo = true;
+      return 'data:image/jpg;base64,' + this.imageUrl;
+    } else {
+      this.existeLogo = false;
+      return this.imageService.userDefaultImage();
+    }
+  }
+
+  openFile() {
+    const inputElement: HTMLInputElement | null = document.getElementById('fotoEscolhida') as HTMLInputElement;
+    if (inputElement) {
+      inputElement.click();
+    }
+  }
+
+  selectFotoSelecionada(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        this.selectedImage = reader.result as string;
+        this.existeLogo = true;
+        this.abrirModalRecortarFoto();
+      };
+    }
+  }
+
+  questionRemoverFoto(){
+    const msg = '<h3>Você tem certeza que deseja retirar a foto desse usuário?</h3>';
+
+    this.notificationService.question({
+      type: 'question',
+      message: msg,
+      accept: (data:any) =>
+      {
+        this.removerFoto()
+      },
+      reject: (data:any) => {
+
+      }
+    })
+  }
+
+  removerFoto() {
+    this.imageUrl = '';
+    this.removerFotoEvent.emit();
+    this.existeLogo = false;
+    this.imageUrlChange.emit(this.imageUrl);
+    this.fileInput.nativeElement.value = '';
+  }
+
+  handleImageError(event: any) {
+    event.target.src = this.imageService.userDefaultImage();
+  }
+
+  abrirModalRecortarFoto() {
+    this.openDialog(
+      KvCropImageComponent,
+      () => {
+        this.imageUrl = this.receberDados();
+        this.imageUrlChange.emit(this.imageUrl);
+      },
+      {
+        maximizable: false,
+        popup: true,
+        width: '60%',
+        header: 'Recortar',
+        id:{imagemSelecionada: this.selectedImage, imagemCortada: ''}
+      }
+      
+    )
+    const arr: Map<DynamicDialogRef<any>, ComponentRef<any>> = this.dialogService.dialogComponentRefMap
+    const entries = arr.entries();
+    const firstEntry = entries.next().value;
+    const [firstKey, firstValue] = firstEntry;
+    const instance = this.dialogService.getInstance(firstKey)
+    instance.config.showHeader = false
+    instance.config.contentStyle = {'border-radius': '12px'}
+  }
+
+  receberDados(){
+    const arr: Map<DynamicDialogRef<any>, ComponentRef<any>> = this.dialogService.dialogComponentRefMap
+    const entries = arr.entries();
+    const firstEntry = entries.next().value;
+    const [firstKey, firstValue] = firstEntry;
+    const instance = this.dialogService.getInstance(firstKey)
+
+    return instance.config.data.id.imagemCortada
+  }  
+}

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

@@ -0,0 +1,35 @@
+import { ButtonModule } from 'primeng/button';
+import { CommonModule } from '@angular/common';
+import { FileUploadModule } from 'primeng/fileupload';
+import { NgModule } from "@angular/core";
+import { SliderModule } from 'primeng/slider';
+
+import { KvAvatarComponent } from "./kv-avatar.component";
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+import { KvLabelModule } from '../kv-label/kv-label.module';
+import { KvModalModule } from "../kv-modal/kv-modal.module";
+import { KvCropImageComponent } from './kv-crop-image/kv-crop-image.component';
+
+@NgModule({
+  declarations: [
+    KvAvatarComponent,
+    KvCropImageComponent
+  ],
+  imports: [
+    CommonModule,
+    ButtonModule,
+    FileUploadModule,
+    SliderModule,
+    FormsModule,
+    ReactiveFormsModule,
+    KvButtonModule,
+    KvLabelModule,
+    KvModalModule,
+
+],
+  exports: [
+    KvAvatarComponent
+  ]
+})
+export class KvAvatarModule { }

package/src/lib/components/kv-avatar/kv-crop-image/kv-crop-image.component.html

@@ -0,0 +1,11 @@
+<kv-modal [actions]="actionsModal">
+    <div class="crop-container">
+      <canvas #cropCanvas class="crop-canvas"></canvas>
+      <div class="crop-border"></div>
+    </div>
+  
+    <div class="w-full zoom-container">
+      <kv-label label="Zoom" style="text-align: left;"/>
+      <p-slider [(ngModel)]="valueZoom" (onChange)="onZoomChange($event)"></p-slider>
+    </div>
+</kv-modal>

package/src/lib/components/kv-avatar/kv-crop-image/kv-crop-image.component.scss

@@ -0,0 +1,27 @@
+.crop-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.crop-canvas {
+  border: 1px solid black;
+  border-radius: 12px;
+}
+
+.crop-border {
+  position: absolute;
+  width: 225px; 
+  height: 225px; 
+  border: 2px solid black; 
+  border-radius: 50%;
+  pointer-events: none; 
+}
+
+.zoom-container {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+
+