keevo-components 2.0.105 → 2.0.107

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

@@ -19,6 +19,11 @@ $font-family-keevo: "Inter", "Inter var", sans-serif;
   --kv-secondary-color: 0, 37, 66;
   --kv-tertiary-color: 165, 165, 165;
   --kv-danger-color: 220, 53, 69;
+
+  --kv-success-color: 75, 181, 67;
+  --kv-info-color: 0, 123, 255;
+  --kv-warn-color: 241, 90, 36;
+  --kv-contrast-color: 33, 37, 41;
 }
 
 ::ng-deep .padrao {

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

@@ -0,0 +1,105 @@
+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';
+import { KvFilterCardsModule } from './kv-filter-cards/kv-filter-cards.module';
+import { SkeletonModule } from 'primeng/skeleton';
+
+@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,
+    KvFilterCardsModule,
+    SkeletonModule
+  ],
+  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,
+    KvFilterCardsModule
+  ],
+})
+export class KeevoComponentsModule {}

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

@@ -0,0 +1,75 @@
+<div
+  class="image-container"
+  [style.width.px]="width"
+  [style.height.px]="height"
+>
+  @if(existeLogo) {
+  <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"
+  />
+  } @else {
+  <div
+    class="container-foto"
+    [style.width.px]="width"
+    [style.height.px]="height"
+    [style.border-color]="borderColor"
+  >
+    @if(!singlaNome) {
+    <span
+      class="material-symbols-outlined"
+      [style.fontSize.rem]="height * 0.035"
+    >
+      person
+    </span>
+    } @else {
+    <span [style.fontSize.rem]="height * 0.025" class="text-white">{{singlaNome}}</span>
+    }
+  </div>
+  }
+
+  <div class="btn">
+    <input
+      #fileInput
+      *ngIf="btnAlterarFoto"
+      id="fotoEscolhida"
+      type="file"
+      accept="image/*"
+      style="display: none"
+      (change)="changeImage($any($event))"
+    />
+
+    @if(btnAlterarFoto && !existeLogo) {
+    <div
+      class="btn-avatar"
+      [style.background-color]="btnsColor"
+      (click)="openFile()"
+    >
+      <span class="material-symbols-outlined icon-btn-avatar"
+        >photo_camera</span
+      >
+    </div>
+    } @if(btnAlterarFoto && existeLogo) {
+    <div
+      class="btn-avatar"
+      [style.background-color]="btnsColor"
+      (click)="questionRemoverFoto()"
+    >
+      <span class="material-symbols-outlined icon-btn-avatar">delete</span>
+    </div>
+    }
+  </div>
+
+  <ngx-loading
+    [show]="!imageLoaded() && existeLogo"
+    full
+    class="container-foto"
+    [config]="{ backdropBorderRadius: '100%', fullScreenBackdrop: false }"
+  ></ngx-loading>
+</div>

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

@@ -0,0 +1,162 @@
+@import "../keevo-components-styles.scss";
+
+img {
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+i {
+  font-size: 22px;
+}
+
+.btn-avatar {
+  background: linear-gradient(135deg, #4a5568 0%, #718096 100%);
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 50%;
+  color: rgb(233, 238, 243);
+  padding: 0;
+  border: none;
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-avatar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0);
+  transition: background 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  border-radius: 50%;
+}
+
+.btn-avatar:hover::before {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.btn-avatar:active {
+  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.btn-avatar:active::before {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+// .botao-alterar-foto {
+//   border-style: none;
+//   width: max-content;
+//   background: radial-gradient(circle, #636b7a 0%, #2d364b 100%);
+
+//   color: rgb(255, 255, 255);
+//   font-weight: bold;
+//   cursor: pointer;
+// }
+
+span {
+  color: #fff;
+}
+
+// .botao-excluir-foto {
+//   border-style: none;
+//   width: max-content;
+//   background-color: #002542;
+//   background: radial-gradient(circle, #636b7a 0%, #2d364b 100%);
+//   color: rgb(255, 255, 255);
+//   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;
+}
+
+.container-foto {
+  background: linear-gradient(135deg, #4a5568 0%, #718096 100%);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-btn-avatar {
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 0.5rem;
+}

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,165 @@
+import {
+  Component,
+  effect,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  input,
+  Input,
+  OnInit,
+  Output,
+  signal,
+  untracked,
+  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) {
+    effect(() => {
+
+      untracked(() => {
+        if (this.imageUrl())
+          this.imageSource.set(this.imageUrl());
+      })
+
+    });
+  }
+
+
+  @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>();
+  @Input() singlaNome: string = '';
+
+  file: File | null = null;
+  existeLogo = false;
+  selectedImage: string = '';
+
+  imageUrl = input<string>('');
+  imageSource = signal<string>('');
+  imageLoaded = signal<boolean>(false);
+
+
+  @ViewChild('fileInput') fileInput!: ElementRef;
+
+
+
+  ngOnInit(): void {
+    this.carregaImagemInicial();
+  }
+
+  carregaImagemInicial(): void {
+    const imageUrl = this.imageUrl();
+
+    if (imageUrl && (imageUrl.startsWith('data:image') || imageUrl.startsWith('http') || imageUrl.startsWith('https'))) {
+      this.existeLogo = true;
+      this.imageSource.set(imageUrl);
+    } 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

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

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

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

@@ -0,0 +1,55 @@
+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' | 'danger'>('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_down')
+      //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_up');
+    // this.icon.set('collapse_content')
+  }
+  
+  onHideMenu(){
+    // this.icon.set('expand_content')
+    this.icon.set('keyboard_arrow_down')
+  }
+}

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

@@ -0,0 +1,20 @@
+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 { }