keevo-components 1.8.263 → 1.8.264

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

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

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+
+import { KvButtonPersonalizeComponent } from './kv-button-personalize/kv-button-personalize.component';
+import { KvButtonPopupComponent } from './kv-button-popup/kv-button-popup.component';
+import { KvButtonSecondaryComponent } from './kv-button-secondary/kv-button-secondary.component';
+import { KvButtonSuccessComponent } from './kv-button-success/kv-button-success.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvButtonSecondaryComponent,
+    KvButtonSuccessComponent,
+    KvButtonPersonalizeComponent,
+    KvButtonPopupComponent
+  ],
+  imports: [
+    PrimeNgModule
+  ],
+  exports: [
+    KvButtonSecondaryComponent,
+    KvButtonSuccessComponent,
+    KvButtonPersonalizeComponent,
+    KvButtonPopupComponent
+  ]
+})
+export class KvButtonsModule { }

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

@@ -0,0 +1,25 @@
+<p-carousel
+  [value]="carouselData"
+  [indicatorStyleClass]="'carousel-indicator'"
+  [autoplayInterval]="5000"
+  [showIndicators]="true"
+  [showNavigators]="false"
+  [numVisible]="1"
+  [numScroll]="1"
+  [circular]="true"
+  styleClass="h-full"
+>
+  >
+  <ng-template
+    pTemplate="item"
+    let-banner
+    class="justify-content-center align-items-center"
+  >
+    <img
+      [src]="banner.img"
+      class="w-full border-round-banner"
+      [style.height.px]="heightComputed()"
+      (click)="navigateToLink(banner.link)"
+    />
+  </ng-template>
+</p-carousel>

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

@@ -0,0 +1,32 @@
+::ng-deep  .p-carousel-indicators {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1rem;
+}
+
+::ng-deep .carousel-indicator {
+  width: 15px !important;
+  height: 4px !important;
+  margin: -3px !important;
+  padding: 0 !important;
+  background-color: rgba(238, 238, 238, 0.816);
+    &:hover {
+      background-color: rgb(239, 239, 239);
+    }
+}
+
+button.p-carousel-indicator.p-link{
+  background-color: aliceblue !important;
+}
+
+::ng-deep .p-carousel .p-carousel-content {
+  overflow: hidden !important;
+  position: relative;
+}
+
+
+::ng-deep .border-round-banner {
+  border-radius: 20px !important;
+  max-height: 500px; 
+}

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

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

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

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  computed,
+  input,
+  viewChild
+} from '@angular/core';
+import { Carousel } from 'primeng/carousel';
+
+@Component({
+  selector: 'kv-carousel',
+  templateUrl: './kv-carousel.component.html',
+  styleUrls: ['./kv-carousel.component.scss'],
+})
+export class KvCarouselComponent {
+  carouselContainer = viewChild(Carousel);
+
+  heightCarousel = input<number>();
+
+  heightComputed = computed(() => {
+    return (
+      this.heightCarousel() ??
+      this.carouselContainer()?.el.nativeElement.offsetHeight
+    );
+  });
+
+  @Input() carouselData: any[] = [];
+
+  widthCarousel!: number;
+  isCollapsed: boolean = false;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  navigateToLink(link: string): void {
+    window.open(link, '_blank');
+  }
+}

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

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

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

@@ -0,0 +1,38 @@
+<div class="card h-full">
+  <div class="flex align-items-start justify-content-between mb-6">
+    <label class="text-900 text-xl font-semibold">{{ title }}</label>
+    <div>
+      <p-dropdown
+        *ngIf="showDatas"
+        [options]="periodos"
+        [(ngModel)]="selectedData"
+        optionLabel="label"
+        optionValue="value"
+        styleClass="w-15rem"
+        (onChange)="selectionValue($event)">
+      </p-dropdown>
+      <button
+        *ngIf="showMenu"
+        pButton
+        pRipple
+        icon="pi pi-ellipsis-h"
+        class="p-button-rounded p-button-secondary"
+        style="margin-left: 10px;"
+        (click)="menu.toggle($event)">
+      </button>
+      <p-menu
+        #menu
+        [popup]="true"
+        appendTo="body"
+        [model]="menuItems">
+      </p-menu>
+    </div>
+  </div>
+  <p-chart
+    #chart
+    [type]="type"
+    [data]="data"
+    [options]="options"
+    height="300px">
+  </p-chart>
+</div>

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

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { KvChartComponent } from './kv-chart.component';
+
+describe('ChartComponent', () => {
+  let component: KvChartComponent;
+  let fixture: ComponentFixture<KvChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KvChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KvChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,153 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+import { UIChart } from 'primeng/chart';
+
+import { ChartConfig } from '../../api/components/chart/chart.config';
+
+export const PeriodosChart = {
+  Ultimos180Dias: -180,
+  Ultimos120Dias: -120,
+  Ultimos90Dias: -90,
+  Ultimos60Dias: -60,
+  Ultimos45Dias: -45,
+  Ultimos30Dias: -30,
+  Ultimos15Dias: -15,
+  Ultimos7Dias: -7,
+  DataAtual: 0,
+  Proximos7Dias: 7,
+  Proximos15Dias: 15,
+  Proximos30Dias: 30,
+  Proximos45Dias: 45,
+  Proximos60Dias: 60,
+  Proximos90Dias: 90,
+  Proximos120Dias: 120,
+  Proximos180Dias: 180
+}
+
+@Component({
+  selector: 'kv-chart',
+  templateUrl: './kv-chart.component.html',
+  styleUrls: [
+    './kv-chart.component.scss',
+    '../keevo-components-styles.scss'
+  ]
+})
+export class KvChartComponent implements OnInit {
+
+  chartConfig: ChartConfig = {
+    labels: [],
+    datasets: [],
+  }
+
+  periodosDisponiveis = [
+    { label: 'Últimos 180 dias', value: -180 },
+    { label: 'Últimos 120 dias', value: -120 },
+    { label: 'Últimos 90 dias', value: -90 },
+    { label: 'Últimos 60 dias', value: -60 },
+    { label: 'Últimos 45 dias', value: -45 },
+    { label: 'Últimos 30 dias', value: -30 },
+    { label: 'Últimos 15 dias', value: -15 },
+    { label: 'Últimos 7 dias', value: -7 },
+    { label: 'Data atual', value: 0 },
+    { label: 'Próximos 7 dias', value: 7 },
+    { label: 'Próximos 15 dias', value: 15 },
+    { label: 'Próximos 30 dias', value: 30 },
+    { label: 'Próximos 45 dias', value: 45 },
+    { label: 'Próximos 60 dias', value: 60 },
+    { label: 'Próximos 90 dias', value: 90 },
+    { label: 'Próximos 120 dias', value: 120 },
+    { label: 'Próximos 180 dias', value: 180 }
+  ];
+
+  @Input() title!: string;
+  @Input() type!: 'doughnut' | 'pie' | 'bar' | 'line';
+  @Input() indexAxis!: 'y' | 'x';
+  @Input() displayLegend!: boolean;
+
+  @Input() showDatas: boolean = true;
+  @Input() showMenu: boolean = false;
+  @Input() selectedData!: number;
+  @Input() enablePeriodos: number[] = [];
+
+  data: any;
+  options: any;
+
+  periodos: any[] = [];
+
+  menuItems: MenuItem[] = [];
+
+  @Output() onPrintReport: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @ViewChild('chart') chart?: UIChart;
+
+  constructor() { }
+
+  configureGraphic() {
+    this.data = this.chartConfig;
+    this.configOptions();
+    this.chart?.reinit();
+  }
+
+  private configOptions(): void {
+    this.options = {
+      indexAxis: this.indexAxis || 'x',
+      maintainAspectRatio: false,
+      aspectRatio: 0.8,
+      animation: {
+        duration: 0
+      },
+      plugins: {
+        legend: {
+          display: this.displayLegend || false,
+          labels: {
+            color: '#1e293b',
+            usePointStyle: true,
+            font: {
+              weight: 700,
+            },
+            padding: 28
+          },
+          position: 'bottom'
+        }
+      }
+    };
+
+    this.menuItems = [
+      { label: 'Imprimir relatório', command: () => this.printReport() }
+    ]
+  }
+
+  private initDatas() {
+    this.periodosDisponiveis.map((el) => {
+      if (this.enablePeriodos.includes(el.value)) {
+        this.periodos.push(el);
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.initDatas();
+    this.configureGraphic();
+  }
+
+  printReport() {
+    this.onPrintReport.emit();
+  }
+
+  public reInit(config: any) {
+    this.chartConfig = config;
+    this.configureGraphic();
+  }
+
+  protected selectionValue(event: any) {
+    this.onSelectionValue.emit(event);
+  }
+}

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

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from "@angular/core";
+
+import { KvChartComponent } from './kv-chart.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvChartComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+  ],
+  exports: [
+    KvChartComponent
+  ]
+})
+export class KvChartModule { }

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

@@ -0,0 +1,3 @@
+<small id="error-message" class="p-error block" style="height: 0px !important;" >
+  <ng-content *ngIf="hasError"></ng-content>
+</small>

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

@@ -0,0 +1,5 @@
+#error-message {
+    left: 1px;
+    font-size: 0.80rem !important;
+    font-family: 'Roboto' ,Arial, Helvetica, sans-serif !important;
+}

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

@@ -0,0 +1,27 @@
+import {
+  Component,
+  EventEmitter,
+  Input
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'kv-error',
+  templateUrl: './kv-error.component.html',
+  styleUrls: ['./kv-error.component.scss']
+})
+export class KvErrorComponent {
+  public hasError: boolean | undefined = false;
+
+  @Input() formControl!: FormControl;
+
+  @Input('hasError') set setHasError(value: boolean | undefined) {
+    this.hasError = value;
+    this.emitError.emit(value);
+  };
+
+  emitError: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  constructor() { }
+}

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

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import {
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+
+import { KvErrorComponent } from './kv-error.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvErrorComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    PrimeNgModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    KvErrorComponent,
+  ]
+})
+export class kvErrorModule { }

package/src/lib/components/kv-file-upload/kv-file-upload.component.html

@@ -0,0 +1,53 @@
+<div
+    *ngIf="formGroup"
+    [ngClass]="{'invalid-border': formGroup && formControlName && formGroup.controls[formControlName].invalid && formGroup.controls[formControlName].touched}"
+    class="border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end"
+    (dragover)="onDragOver($event)"
+    (dragleave)="onDragLeave($event)"
+    (drop)="onDrop($event)"
+    [style.width]="widthComponent"
+    [style.height]="heightComponent">
+
+  <div class="field col-12 flex justify-content-center align-items-center flex-column">
+    <div
+      class="w-full flex align-items-center justify-content-center"
+      style="cursor: pointer;"
+      (click)="fileInput.click()">
+
+      <input type="file" (change)="onFileSelected($event)" #fileInput [accept]="setAccept()" hidden/>
+
+      @if(formGroup && formControlName && !formGroup.controls[formControlName].value) {
+        <div class="flex flex-column align-items-center justify-content-center">
+            <span class="material-symbols-outlined mt-2" style="font-size: 3rem;">
+                cloud_upload
+            </span>
+
+            @if(description) {
+                <p class="font-semibold text-center">{{description}}</p>
+            } @else {
+                <p class="font-semibold text-center">Arraste e solte o arquivo aqui, ou<br>clique para selecioná-lo</p>
+            }
+        </div>
+      }
+    </div>
+
+    @if(formGroup && formControlName && formGroup.controls[formControlName].value) {
+      <div class="flex flex-column">
+          <span class="font-semibold" style="padding: 10px;">Arquivo Selecionado:</span>
+          <div class="flex flex-row">
+              <span style="padding: 10px;">{{ formGroup.controls[formControlName].value?.name }}</span>
+              <span style="padding: 10px;">({{ formatBytes(formGroup.controls[formControlName].value?.size) }})</span>
+              <i  style="padding: 10px; margin-left: 10px;"
+                  pTooltip="Excluir arquivo"
+                  class="border-solid border-1 border-round-sm border-gray-400 pi pi-trash delete cursor-pointer"
+                  (click)="deleteFile()"
+              ></i>
+          </div>
+      </div>
+    }
+  </div>
+</div>
+
+@if (formGroup && formControlName && formGroup.controls[formControlName].invalid && formGroup.controls[formControlName].touched)  {
+  <p class="error-message">Campo obrigatório</p>
+}

package/src/lib/components/kv-file-upload/kv-file-upload.component.scss

@@ -0,0 +1,9 @@
+.invalid-border {
+  border: 2px dashed red !important;
+}
+
+.error-message {
+  color: rgb(255, 14, 14);
+  font-size: 12px !important;
+  margin-top: 0.1rem;
+}

package/src/lib/components/kv-file-upload/kv-file-upload.component.spec.ts

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