keevo-components 2.0.56 → 2.0.58

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

@@ -1,100 +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';
-import { KvFileViewerNovoModule } from './kv-file-viewer-novo/kv-file-viewer-novo.module';
-import { KvCardSelectionModule } from './kv-card-selection/kv-card-selection.module';
-import { KvTagModule } from './kv-tag/kv-tag.module';
-import { KvConfirmationModalModule } from './kv-confirmation-modal/kv-confirmation-modal.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,
-    KvFileViewerNovoModule,
-    KvFilterFieldsetModule,
-    KvCardSelectionModule,
-    KvTagModule,
-    KvConfirmationModalModule
-  ],
-  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,
-    KvFileViewerNovoModule,
-    KvCardSelectionModule,
-    KvTagModule,
-    KvConfirmationModalModule
-  ],
-})
-export class KeevoComponentsModule {}

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

@@ -1,34 +0,0 @@
-<div class="image-container" [style.width.px]="width" [style.height.px]="height" >
-
-  <img
-    [src]="imageSource()"
-    (load)="onImageLoad()"
-    (error)="handleImageError($event)"
-    alt="Foto"
-    class="container-foto"
-    [style.border-color]="borderColor"
-    [style.width.px]="width"
-    [style.height.px]="height"
-    >
-
-  <div class="btn">
-    <input #fileInput *ngIf="btnAlterarFoto" id="fotoEscolhida" type="file" accept="image/*" style="display:none" (change)="changeImage($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
-                hover:shadow-3
-                active:shadow-5"
-        (click)="questionRemoverFoto()">
-      <i class="material-symbols-outlined">delete</i>
-    </button>
-  </div>
-
-  <ngx-loading [show]="!imageLoaded()" full class="container-foto" [config]="{backdropBorderRadius: '100%', fullScreenBackdrop: false }"></ngx-loading>
-
-</div>

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

@@ -1,114 +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;
-}
-
-.modal {
-  display: block;
-  position: absolute;
-  z-index: 9999;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  background-color: rgba(0,0,0,0.4);
-}
-
-.modal-content {
-  background-color: #fefefe;
-  margin: 1% auto;
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
-  max-width: fit-content;
-  text-align: center;
-  border-radius: 12px;
-}
-
-.crop-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.crop-canvas {
-  border: 1px solid black;
-  border-radius: 12px;
-  width: 100%;
-  height: auto;
-}
-
-.crop-border {
-  position: absolute;
-  border: 2px solid black; 
-  border-radius: 50%;
-  pointer-events: none; 
-}
-
-.zoom-container {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-.button-container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-direction: row;
-  margin-top: 24px;
-}
-
-
-
-
-
-

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,154 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  input,
-  Input,
-  OnInit,
-  Output,
-  signal,
-  ViewChild,
-} from '@angular/core';
-
-import { ImagensService } from '../../api/services/imagens.service';
-import { ImageCutterService } from '../../api/services/image.cutter.service';
-import { NotificationService } from '../../api/services/notification.service';
-
-@Component({
-  selector: 'kv-avatar',
-  templateUrl: './kv-avatar.component.html',
-  styleUrls: ['./kv-avatar.component.scss'],
-})
-
-export class KvAvatarComponent implements OnInit {
-
-  constructor(public imageService: ImagensService,
-              private notificationService: NotificationService,
-              private imageCutterService: ImageCutterService)
-  {}
-
-
-  @Input() borderColor: string = '#002542';
-  @Input() btnsColor: string = '#002542';
-  @Input() width: number = 135;
-  @Input() height: number = 135;
-  @Input() btnAlterarFoto: boolean = false;
-  @Output() imageUrlChange = new EventEmitter<string>();
-  @Output() removerFotoEvent = new EventEmitter<void>();
-
-  file: File | null = null;
-  existeLogo = false;
-  selectedImage: string = '';
-
-  imageUrl = input<string>(this.imageService.userDefaultImage());
-  imageSource = signal<string>(this.imageService.userDefaultImage());
-  imageLoaded = signal<boolean>(false);
-
-
-  @ViewChild('fileInput') fileInput!: ElementRef;
-
-
-
-  ngOnInit(): void {
-    this.imageSource.set(this.imageUrl());
-    this.carregaImagemInicial();
-  }
-
-  carregaImagemInicial(): void {
-    const imageUrl = this.imageUrl();
-
-    if (imageUrl && (imageUrl.startsWith('data:image') || imageUrl.startsWith('http') || imageUrl.startsWith('https'))) {
-        this.existeLogo = true;
-    } else if (imageUrl && imageUrl.length > 0) {
-        this.existeLogo = true;
-        this.imageSource.set('data:image/jpg;base64,' + imageUrl);
-    } else {
-        this.existeLogo = false;
-        this.imageSource.set(this.imageService.userDefaultImage());
-    }
-  }
-
-  onImageLoad() {
-    this.imageLoaded.set(true)
-  }
-
-
-  openFile() {
-    const inputElement: HTMLInputElement | null = document.getElementById('fotoEscolhida') as HTMLInputElement;
-    if (inputElement) {
-      inputElement.click();
-    }
-  }
-
-  changeImage(event: any) {
-    const file = event.target.files[0];
-    if (file.type.startsWith('image/')) {
-
-      if(this.btnAlterarFoto == true){
-        this.file = file;
-
-        const reader = new FileReader();
-          reader.onload = async () => {
-            try {
-                const result = await this.imageCutterService.cut(
-                    reader.result?.toString() ?? '',
-                    this.width,
-                    this.height,
-                    true,
-                    true
-                  );
-                  this.existeLogo = true;
-                this.imageSource.set(result);
-                this.selectedImage = result;
-                this.imageUrlChange.emit(this.imageSource());
-
-
-            } catch (error) { 
-              //this.removerFoto();
-            }
-        };
-        reader.readAsDataURL(file);
-
-      }else{
-        // ?! Comportamneto padrão --> Preservar <-- !!!
-        this.file = file;
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          this.imageSource.set(reader.result!+'');
-        };
-        reader.readAsDataURL(file);
-        this.imageUrlChange.emit(this.imageSource());
-      }
-
-    } else {
-      this.notificationService.toastError('Apenas arquivos de imagem são permitidos.')
-    }
-
-
-  }
-
-  questionRemoverFoto(){
-    this.notificationService.question({
-      type: 'question',
-      message: 'Você tem certeza que deseja retirar a foto desse usuário?',
-      accept: () => {
-        this.removerFoto()
-      },
-    }); 
-  }
-
-  removerFoto() {
-    this.imageSource.set('')
-    this.removerFotoEvent.emit();
-    this.existeLogo = false;
-    this.imageUrlChange.emit(this.imageSource());
-    this.fileInput.nativeElement.value = '';
-  }
-
-  handleImageError(event: any) {
-    this.imageLoaded.set(true)
-    event.target.src = this.imageService.userDefaultImage();
-  }
-
-}

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

@@ -1,32 +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 { NgxLoadingModule } from 'ngx-loading';
-
-@NgModule({
-  declarations: [
-    KvAvatarComponent,
-  ],
-  imports: [
-    CommonModule,
-    ButtonModule,
-    FileUploadModule,
-    SliderModule,
-    FormsModule,
-    ReactiveFormsModule,
-    KvButtonModule,
-    KvLabelModule,
-    NgxLoadingModule
-],
-  exports: [
-    KvAvatarComponent
-  ]
-})
-export class KvAvatarModule { }

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

@@ -1,24 +0,0 @@
-<button
-  pButton
-  class="kv-button {{ size() }} {{ severity() }} {{ type() }}"
-  [style.width]="'100%'"
-  [disabled]="disabled()"
-  (click)="handleClick($event)"
-  [loading]="loading()"
-  [style.padding]="icon() && !label() ? '0.5rem' : ''"
->
-
-  @if(!loading() && iconPosition()=="left") {
-    <span class="material-symbols-outlined kv-button-icon">{{ icon() }}</span>
-  } 
-
-  @if(label()) {
-    <span class="kv-button-label">{{ label() }}</span>
-  }
-
-  @if(!loading() && iconPosition()=="right") {
-    <span class="material-symbols-outlined kv-button-icon">{{ icon() }}</span>
-  }
-
-</button>
-<p-menu #menu [model]="items()" appendTo="body" [popup]="true" (onShow)="onShowMenu()" (onHide)="onHideMenu()"></p-menu>

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

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

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

@@ -1,54 +0,0 @@
-import { Component, effect, ElementRef, EventEmitter, input, Input, model, output, Output, viewChild } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Menu } from 'primeng/menu';
-
-@Component({
-  selector: 'kv-button',
-  templateUrl: './kv-button.component.html',
-  styleUrl: './kv-button.component.scss',
-})
-export class KvButtonComponent {
-
-  menu = viewChild('menu', {read: Menu});
-
-  fullWidth = input<boolean>(false);
-  type = input<'outline' | 'text'>();
-  loading = input<boolean>(false);
-  severity = input<'primary' | 'secondary' | 'tertiary'>('primary');
-  size = input<'small' | 'normal' | 'large'>('normal');
-  icon = model<string>('');
-  iconPosition = input<'left' | 'right'>('left');
-  label = input<string>('');
-  disabled = input<boolean>(false);
-  onClick = output<any>();
-  items = input<MenuItem[]>([]);
-  popup = input<boolean>(false);
-
-  
-  ngOnInit() {
-    if(this.popup()){
-      this.icon.set('keyboard_arrow_up')
-      // this.icon.set('expand_content')
-    }
-  }
-
-
-  handleClick(event: Event) {
-    if(this.popup()){
-      this.menu()?.toggle(event);
-    }
-    else{
-      this.onClick.emit(event);
-    }
-  }
-
-  onShowMenu(){
-    this.icon.set('keyboard_arrow_down');
-    // this.icon.set('collapse_content')
-  }
-  
-  onHideMenu(){
-    // this.icon.set('expand_content')
-    this.icon.set('keyboard_arrow_up')
-  }
-}

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

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PrimeNgModule } from '../../api/modules/primeng.module';
-import { KvButtonComponent } from './kv-button.component';
-
-
-
-@NgModule({
-  declarations: [
-    KvButtonComponent
-  ],
-  imports: [
-    CommonModule,
-    PrimeNgModule
-  ],
-  exports: [
-    KvButtonComponent
-  ]
-})
-export class KvButtonModule { }

package/src/lib/components/kv-buttons/kv-button-personalize/kv-button-personalize.component.html

@@ -1,14 +0,0 @@
-<button
-  pButton
-  pRipple
-  [icon]="icon"
-  [label]="label"
-  [loading]="loading"
-  (click)="click($event)"
-  [disabled]="disabled"
-  class="btn-personalize"
-  [style.color]="textColor"
-  [style.backgroundColor]="backgroundColor"
-  [style.borderColor]="backgroundColor"
-  [text]="text"
-></button>

package/src/lib/components/kv-buttons/kv-button-personalize/kv-button-personalize.component.scss

@@ -1,6 +0,0 @@
-.btn-personalize {
-    height: 35px;
-}
-::ng-deep .p-button-label{
-    font-weight: 500 !important;
-}

package/src/lib/components/kv-buttons/kv-button-personalize/kv-button-personalize.component.ts

@@ -1,25 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-import { BaseComponentButton } from '../../../api/base-components/base-component-button';
-
-@Component({
-  selector: 'kv-button-personalize',
-  templateUrl: './kv-button-personalize.component.html',
-  styleUrls: ['./kv-button-personalize.component.scss']
-})
-export class KvButtonPersonalizeComponent extends BaseComponentButton {
-
-  @Input() colorHover!: string;
-  @Input() textColor!: string;
-
-  backgroundColor!: string;
-
-  constructor() {
-    super();
-  }
-
-  ngOnInit() {
-    this.colorHover = this.colorHover? this.colorHover : this.color;
-    this.backgroundColor = this.color;
-  }
-}

package/src/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.html

@@ -1,13 +0,0 @@
-<p-menu #menu [model]="items" appendTo="body" [popup]="true" (onShow)="handleShow()" (onHide)="handleHide()"></p-menu>
-<button
-    pButton
-    pRipple
-    class="{{classBtn}} btn-popup {{(size())}} {{type()}}"
-    [style.width]="'100%'"
-    [icon]="icon"
-    iconPos="right"
-    [label]="label"
-    [loading]="loading"
-    [disabled]="disabled"
-    (click)="menu.toggle($event)">
-</button>

package/src/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.scss

@@ -1,33 +0,0 @@
-@import '../../keevo-components-styles.scss';
-@import '../../kv-button/kv-button.component.scss';
-
-// @import "../keevo-components-styles.scss";
-::ng-deep button {
-  border: none;
-  white-space: nowrap;
-}
-
-::ng-deep .small {
-  span {
-    font-weight: 500;
-    font-size: 0.625rem;
-  }
-}
-
-::ng-deep .normal {
-  span {
-    font-weight: 500;
-    font-size: 0.825rem;
-  }
-}
-
-::ng-deep .large {
-  span {
-    font-weight: 500;
-    font-size: 1rem;
-  }
-}
-
-::ng-deep .text {
-  background-color: none;
-}