keevo-components 1.8.264 → 1.8.266

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

@@ -1,217 +0,0 @@
-import { Component, ComponentRef, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
-import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { ActionItem, BaseComponentCrud, ImagensService, NotificationService } from 'projects/keevo-components/src/public-api';
-
-@Component({
-  selector: 'kv-crop-image',
-  templateUrl: './kv-crop-image.component.html',
-  styleUrl: './kv-crop-image.component.scss'
-})
-export class KvCropImageComponent extends BaseComponentCrud {
-
-  @HostListener('window:resize', ['$event'])
-  onWindowResize() {
-    this.widthTela = window.innerWidth;
-    this.updateCanvasSize();
-  }
-
-  constructor(public imageService: ImagensService, 
-      override notificationService: NotificationService, 
-      override dialogService: DialogService,
-      private readonly dynamicDialogRef: DynamicDialogRef,
-      private dynamicDialogConfig: DynamicDialogConfig,
-  ) { super(dialogService, notificationService) 
-
-    this.widthTela = window.innerWidth; 
-    this.selectedImage = this.dynamicDialogConfig.data.id.imagemSelecionada;
-    this.openCropModal();
-  }
-
-  widthTela!: number;
-  heightTela!: number;
-  imageLoaded: boolean = false;
-  imageX: number = 0;
-  imageY: number = 0;
-  startX: number = 0;
-  startY: number = 0;
-  valueZoom: number = 50;
-  scaleFactor: number = 1;
-
-  selectedImage: string = '';
-
-  @ViewChild('cropCanvas') cropCanvas!: ElementRef<HTMLCanvasElement>;
-  @ViewChild('fileInput') fileInput!: ElementRef;
-
-  actionsModal: ActionItem[] = [
-    {
-      label: 'Cancelar',
-      severity: 'tertiary',
-      icon: 'cancel',
-      command: (e: any) => {
-        this.dynamicDialogRef.close()
-      },
-    },
-    {
-      label: 'Recortar',
-      severity: 'primary',
-      icon: 'crop',
-      command: (e: any) => {
-        this.cropImage()
-      },
-    },
-   
-  ];
-
-  openCropModal() {
-    setTimeout(() => {
-      const canvas = this.cropCanvas.nativeElement;
-      const ctx = canvas.getContext('2d');
-      const img = new Image();
-      img.src = this.selectedImage;
-      img.onload = () => {
-        this.imageLoaded = true;
-        this.imageX = (canvas.width - img.width * this.scaleFactor) / 2;
-        this.imageY = (canvas.height - img.height * this.scaleFactor) / 2;
-        console.log(this.heightTela)
-        canvas.width = this.retornaTamanhoCanvas();
-        canvas.height = 400;
-        ctx?.clearRect(0, 0, canvas.width, canvas.height);
-        ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
-        this.drawCropArea(ctx);
-        this.initializeImageMove(canvas, ctx, img);
-        this.initializeMouseWheel(canvas, ctx, img);
-      };
-    }, 0);
-  }
-
-  updateCanvasSize() {
-    const canvas = this.cropCanvas.nativeElement;
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-    img.src = this.selectedImage;
-    img.onload = () => {
-      this.imageLoaded = true;
-      this.imageX = (canvas.width - img.width * this.scaleFactor) / 2;
-      this.imageY = (canvas.height - img.height * this.scaleFactor) / 2;
-      canvas.width = this.retornaTamanhoCanvas();
-      canvas.height = 400;
-      ctx?.clearRect(0, 0, canvas.width, canvas.height);
-      ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
-      this.drawCropArea(ctx);
-      this.initializeImageMove(canvas, ctx, img);
-      this.initializeMouseWheel(canvas, ctx, img);
-    };
-  }
-
- 
-  drawCropArea(ctx: CanvasRenderingContext2D | null) {
-    if (ctx) {
-      const centerX = ctx.canvas.width / 2;
-      const centerY = ctx.canvas.height / 2;
-      const radius = 100; // Raio da área de recorte
-  
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
-      ctx.strokeStyle = 'transparent';
-      ctx.lineWidth = 2;
-      ctx.stroke();
-      ctx.closePath();
-    }
-  }
-
-  initializeImageMove(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D | null, img: HTMLImageElement) {
-    let isDragging = false;
-
-    canvas.style.cursor = 'grab';
-
-    canvas.onmousedown = (e) => {
-      isDragging = true;
-      canvas.style.cursor = 'grabbing'; 
-      this.startX = e.offsetX - this.imageX;
-      this.startY = e.offsetY - this.imageY;
-    };
-
-    canvas.onmousemove = (e) => {
-      if (isDragging) {
-        this.imageX = e.offsetX - this.startX;
-        this.imageY = e.offsetY - this.startY;
-        ctx?.clearRect(0, 0, canvas.width, canvas.height);
-        ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
-        this.drawCropArea(ctx);
-      }
-    };
-
-    canvas.onmouseup = () => {
-      isDragging = false;
-      canvas.style.cursor = 'grab';
-    };
-
-    canvas.onmouseout = () => {
-      isDragging = false;
-      canvas.style.cursor = 'grab';
-    };
-  }
-
-  initializeMouseWheel(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D | null, img: HTMLImageElement) {
-    canvas.onwheel = (e) => {
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? -0.1 : 0.1;
-      this.scaleFactor = Math.min(Math.max(this.scaleFactor + delta, 0.1), 5); // limita o fator de escala entre 0.1 e 5
-      ctx?.clearRect(0, 0, canvas.width, canvas.height);
-      ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
-      this.drawCropArea(ctx);
-      this.valueZoom = this.scaleFactor * 50;
-    };
-  }
-
-  cropImage() {
-    const canvas = this.cropCanvas.nativeElement;
-    const ctx = canvas.getContext('2d');
-    if (ctx) {
-      const centerX = canvas.width / 2;
-      const centerY = canvas.height / 2;
-      const radius = 100;
-      const imageData = ctx.getImageData(centerX - radius, centerY - radius, radius * 2, radius * 2);
-      const newCanvas = document.createElement('canvas');
-      const newCtx = newCanvas.getContext('2d');
-      newCanvas.width = radius * 2;
-      newCanvas.height = radius * 2;
-      newCtx?.putImageData(imageData, 0, 0);
-      this.selectedImage = newCanvas.toDataURL();
-      this.enviarDados()
-      this.dynamicDialogRef.close(this.selectedImage)
-     
-    }
-  }  
-
-  enviarDados(){
-    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.data.id.imagemCortada = this.selectedImage
-  }
-
-  onZoomChange(event: any) {
-    const canvas = this.cropCanvas.nativeElement;
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-    img.src = this.selectedImage;
-    img.onload = () => {
-      ctx?.clearRect(0, 0, canvas.width, canvas.height);
-      this.scaleFactor = event.value / 50;
-      ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
-      this.drawCropArea(ctx);
-    };
-  }
-
-  retornaTamanhoCanvas(): number {
-    if(this.widthTela < 500) {
-     return  this.widthTela * 0.7;
-    } 
-    return this.widthTela * 0.4;
-  }
-
-}

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

@@ -1,13 +0,0 @@
-<div
-  class="kv-button kv-{{ size }} kv-{{ severity }} {{!label ? 'only-icon' : ''}} {{loading ? 'loading' : ''}} {{!icon ? 'only-label' : ''}} {{fullWidth? '' : 'kv-hug'}} "
-  id="{{(disabled || loading) ? 'disabled' : ''}}"
-  (click)="onClick.emit($event)"
->
-  <span *ngIf="loading" class="material-symbols-outlined loading icon-{{ size }} {{!label ? 'only-icon' : ''}}">progress_activity</span>
-
-  <span *ngIf="icon && !loading" class="material-symbols-outlined icon-{{ size }} {{!label ? 'only-icon' : ''}}">{{ icon }}</span>
-  
-  <span *ngIf="label">
-    {{ label }}
-  </span>
-</div>

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

@@ -1,152 +0,0 @@
-@import '../keevo-components-styles.scss';
-
-#disabled {
-    pointer-events: none;
-    opacity: 0.4;
-}
-
-::ng-deep .kv-button  {
-    font-family: $font-family-keevo !important;
-    color: white;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: 0;
-    gap: 0.3rem;
-    font-weight: 500;
-    border-radius: 0.4rem;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    transition: background-color 0.3s;
-    width: 100%;
-
-    &.kv-hug{
-        width: auto !important;
-    }
-
-    &.kv-small {
-        font-size: 0.75rem;
-        font-weight: 550;
-    }
-
-    &.kv-normal {
-        font-size: 1rem;
-    }
-
-    &.kv-large {
-        font-size: 1.25rem;
-    }
-
-    &.kv-primary {
-        background-color: #29b92d;
-
-        &:hover {
-            background-color: #249a29;
-        }
-
-        &:active {
-            background-color: #1c801f;
-        }
-    }
-
-    &.kv-secondary {
-        background-color: #004172;
-
-        &:hover {
-            background-color: #002542;
-        }
-
-        &:active {
-            background-color: #002542;
-        }
-    }
-
-    &.kv-tertiary {
-        color: #212121;
-        background-color: #F2F3F5;
-
-        &:hover {
-            background-color: #D9DADB;
-        }
-
-        &:active {
-            background-color: #C0C1C2;
-        }
-    }
-
-    //CASOS ONDE HÁ SOMENTE ÍCONE
-    &.only-icon.kv-small {
-        padding: 0.4rem;
-    }
-
-    &.only-icon.kv-normal {
-        padding: 0.4rem;
-    }
-
-    &.only-icon.kv-large {
-        padding: 0.4rem;
-    }
-
-    //CASOS ONDE HÁ ÍCONE E TEXTO
-    &.kv-small:not(.only-icon) {
-        padding: 0.4rem 0.7rem;
-    }
-
-    &.kv-normal:not(.only-icon) {
-        padding: 0.5rem 0.8rem;
-    }
-
-    &.kv-large:not(.only-icon) {
-        padding: 0.6rem 0.9rem;
-    }
-
-    &.kv-normal.only-label:not(.loading) {
-        padding: 0.55rem 0.8rem;
-    }
-}
-
-.material-symbols-outlined {
-    font-weight: 500;
-
-    &.icon-small {
-        font-size: 0.75rem;
-    }
-
-    &.icon-normal {
-        font-size: 1.2rem;
-    }
-
-    &.icon-large {
-        font-size: 1.25rem;
-    }
-
-    //CASOS ONDE HÁ SOMENTE ÍCONE
-    &.only-icon.icon-small {
-        font-size: 0.75rem;
-    }
-
-    &.only-icon.icon-normal {
-        font-size: 1.25rem;
-    }
-
-    &.only-icon.icon-large {
-        font-size: 1.8rem;
-    }
-}
-
-@keyframes rotate {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.material-symbols-outlined.loading {
-    display: inline-block;
-    /* Garante que a animação não afete o layout circundante */
-    animation: rotate 1s linear infinite;
-}

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,21 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'kv-button',
-  templateUrl: './kv-button.component.html',
-  styleUrl: './kv-button.component.scss',
-})
-export class KvButtonComponent{
-
-  @Input() label!: string;
-  @Input() icon!: string;
-  @Input() loading: boolean = false;
-  @Input() disabled: boolean = false;
-  @Input() severity: 'primary' | 'secondary' | 'tertiary' = 'primary';
-  @Input() size: 'small' | 'normal' | 'large' = 'normal';
-  @Input() fullWidth: boolean = true;
-
-  @Output() onClick: EventEmitter<any> = new EventEmitter();
-
-  constructor() {}
-}

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,12 +0,0 @@
-<p-menu #menu [model]="items" appendTo="body" [popup]="true" (onShow)="handleShow()" (onHide)="handleHide()"></p-menu>
-<button
-    pButton
-    pRipple
-    class="kv-{{classBtn}} btn-popup"
-    [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,71 +0,0 @@
-@import '../../keevo-components-styles.scss';
-
-::ng-deep .p-button-label{
-    font-weight: 500 !important;
-}
-
-.btn-popup {
-    height: 35px;
-    color: white;
-    cursor: pointer;
-    border: none;
-    font-weight: 500 !important;
-    border-radius: 0.4rem;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    transition: background-color 0.3s;
-
-    &.kv-primary {
-        background-color: #29b92d;
-
-        &:hover {
-            background-color: #249a29;
-        }
-
-        &:active {
-            background-color: #1c801f;
-        }
-
-        &:disabled {
-            background-color: #29b92d;
-            opacity: 0.6;
-            cursor: auto;
-        }
-    }
-
-    &.kv-secondary {
-        background-color: #004172;
-
-        &:hover {
-            background-color: #002542;
-        }
-
-        &:active {
-            background-color: #002542;
-        }
-
-        &:disabled {
-            background-color: #002542;
-            opacity: 0.6;
-            cursor: auto;
-        }
-    }
-
-    &.kv-tertiary {
-        color: #212121;
-        background-color: #F2F3F5;
-
-        &:hover {
-            background-color: #D9DADB;
-        }
-
-        &:active {
-            background-color: #C0C1C2;
-        }
-
-        &:disabled {
-            background-color: #F2F3F5;
-            opacity: 0.6;
-            cursor: auto;
-        }
-    }
-}

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

@@ -1,36 +0,0 @@
-import {
-  Component,
-  Input
-} from '@angular/core';
-
-import { MenuItem } from 'primeng/api';
-
-import { BaseComponentButton } from '../../../api/base-components/base-component-button';
-
-@Component({
-  selector: 'kv-button-popup',
-  templateUrl: './kv-button-popup.component.html',
-  styleUrls: ['./kv-button-popup.component.scss']
-})
-export class KvButtonPopupComponent extends BaseComponentButton {
-
-  @Input() items: MenuItem[] = [];
-  @Input() classBtn: string = '';
-
-  override icon: string = 'pi pi-chevron-down';
-
-  constructor() {
-    super();
-  }
-
-  handleShow() {
-    this.rotate();
-  }
-  handleHide() {
-    this.rotate();
-  }
-  rotate() {
-    this.icon = this.icon === 'pi pi-chevron-down' ? 'pi pi-chevron-up' : 'pi pi-chevron-down';
-  }
-
-}

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

@@ -1,12 +0,0 @@
-
-<button
-  pButton
-  pRipple
-  class="btn-secondary border-300"
-  [icon]="icon"
-  [label]="label"
-  [loading]="loading"
-  [disabled]="disabled"
-  (click)="click($event)">
-</button>
-

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

@@ -1,18 +0,0 @@
-.btn-secondary {
-  background-color: #f2f3f5 !important;
-  color: rgba(0, 0, 0, .87) !important;
-  height:35px;
-
-  &:hover {
-    background-color: #ef5350 !important;
-    color: #FFF !important;
-  }
-
-  &:disabled {
-    pointer-events: none;
-  }
-}
-
-::ng-deep .p-button-label{
-  font-weight: 500 !important;
-}

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

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-import { BaseComponentButton } from '../../../api/base-components/base-component-button';
-
-@Component({
-  selector: 'kv-button-secondary',
-  templateUrl: './kv-button-secondary.component.html',
-  styleUrls: ['./kv-button-secondary.component.scss']
-})
-export class KvButtonSecondaryComponent extends BaseComponentButton {
-  constructor() {
-    super();
-  }
-}

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

@@ -1,11 +0,0 @@
-<button
-  pButton
-  pRipple
-  class="btn-success border-green-500"
-  [icon]="icon"
-  [label]="label"
-  [loading]="loading"
-  [disabled]="disabled"
-  (click)="click($event)">
-</button>
-