keevo-components 1.8.262 → 1.8.264

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

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

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

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

@@ -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,21 @@
+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

@@ -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 { }

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+  height:35px;
+
+  &:hover {
+    background-color: #229925 !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+::ng-deep .p-button-label{
+  font-weight: 500 !important;
+}