keevo-components 1.8.264 → 1.8.266

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

@@ -1,194 +0,0 @@
-// 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

@@ -1,88 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<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

@@ -1,58 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<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

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