keevo-components 1.8.189 → 1.8.191

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,8 @@
+<p-carousel id="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]="heightCarousel"
+      (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,31 @@
+import { AfterViewInit, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kv-carousel',
+  templateUrl: './kv-carousel.component.html',
+  styleUrls: ['./kv-carousel.component.scss']
+})
+export class KvCarouselComponent implements AfterViewInit {
+
+  @Input() carouselData: any[] = [];
+  heightCarousel!: number;
+  widthCarousel!: number;
+
+  constructor(private cd: ChangeDetectorRef) { }
+
+  ngAfterViewInit(): void {
+    this.getCarouselHeight();
+    this.cd.detectChanges();
+  }
+
+  navigateToLink(link: string): void {
+    window.open(link, '_blank');
+  }
+
+  getCarouselHeight(): void {
+    const divCarousel = document.getElementById('carousel');
+    if (divCarousel) {
+      this.heightCarousel = divCarousel.offsetHeight;
+    }
+  }
+}

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-viewer/kv-file-viewer.component.html

@@ -0,0 +1,16 @@
+<img class="img" *ngIf="type.match('image')" [src]="getSanitizer(arquivo)" />
+
+<iframe
+  class="txt-pdf"
+  *ngIf="type == 'text/plain' || type == 'application/pdf'"
+  [src]="getSanitizer(arquivo)"
+  width="100%"
+  height="700px"
+>
+</iframe>
+
+<div *ngIf="xmlFormat" class="txt-pdf xml-viewer">
+  <pre lang="xml">
+    {{ xmlFormat }}
+  </pre>
+</div>

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

@@ -0,0 +1,18 @@
+.img {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.txt-pdf {
+  width: 100%;
+  height: 600px;
+}
+
+.xml-viewer {
+  overflow: auto;
+  font-size: 13px;
+  .tag {
+    color: #6f517e;
+  }
+}

package/src/lib/components/kv-file-viewer/kv-file-viewer.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as vkbeautify from 'vkbeautify';
+
+@Component({
+  selector: 'kv-file-viewer',
+  templateUrl: './kv-file-viewer.component.html',
+  styleUrl: './kv-file-viewer.component.scss',
+})
+export class KvFileViewerComponent implements OnInit {
+  @Input() arquivo!: string;
+  @Input() type!: string;
+  @Input() blob!: Blob;
+
+  xmlBeautified: any;
+  xmlFormat: any;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnInit(): void {
+    if (this.type == 'text/xml' || this.type == 'application/xml')
+      this.visualizarXml();
+  }
+
+  getSanitizer(url: string) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  async visualizarXml() {
+    const text = await new Response(this.blob).text();
+    this.xmlFormat = vkbeautify.xml(text);
+  }
+}

package/src/lib/components/kv-file-viewer/kv-file-viewer.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFileViewerComponent } from './kv-file-viewer.component';
+
+
+
+@NgModule({
+  declarations: [KvFileViewerComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [KvFileViewerComponent]
+})
+export class KvFileViewerModule { }

package/src/lib/components/kv-filter-card/kv-filter-card.component.html

@@ -0,0 +1,13 @@
+<div [style]='{"--accent-color": color}' [ngClass]='[cardState == "inactive" ? "card-disabled" : "card", cardState == "selected" ? "clickable-selected" : "clickable"]'>
+    <div class="filter-card-content">
+      <div class="flex-row-center">
+        @if (gIcon) {
+        <kv-g-icon>{{ gIcon }}</kv-g-icon>
+        }
+        <ng-content select="[icon]"></ng-content>
+        <p class="white-space-nowrap font-bold">{{ title }}</p>
+      </div>
+      <p style="font-size: 2em" class="font-bold">{{ amount }}</p>
+    </div>
+  </div>
+  

package/src/lib/components/kv-filter-card/kv-filter-card.component.scss

@@ -0,0 +1,74 @@
+.card {
+    --accent-color: #5289B4;
+    border: 1px solid lightgrey;
+    border-left: solid 0.4rem var(--accent-color);
+    * {
+	margin: 0px;
+	color: var(--accent-color);
+    }
+    border-radius: 10px;
+}
+
+p {
+    font-size: 14px;
+}
+
+.card-disabled {
+    --accent-color: #5289B4;
+    $transition-time: 0.2s;
+    border: 1px solid lightgrey;
+    border-left: solid 0.4rem lightgrey;
+    transition: border-left $transition-time ease;
+    &:hover {
+	border-left: solid 0.4rem var(--accent-color);
+	transition: border-left $transition-time ease;
+	* {
+	    color: var(--accent-color);
+	    transition: color $transition-time ease;
+	}
+    }
+    * {
+	margin: 0px;
+	color: lightgrey;
+	transition: color $transition-time ease;
+    }
+    border-radius: 10px;
+}
+
+.clickable-selected {
+    cursor: pointer;
+    background-color: #EAFAFF;
+    &:hover {
+	background-color: #DEEEFF;
+    }
+}
+
+.clickable {
+    cursor: pointer;
+    &:hover {
+	background-color: #F0F0F0;
+    }
+}
+
+.filter-card-content {
+    width: 180px;
+    display: flex;
+    flex-direction: column;
+    padding: 0.6rem;
+    padding-top: 1rem;
+    gap: 1.2rem;
+    // * {
+	// color: var(--accent-color);
+    // }
+}
+
+.select-none {
+    user-select: none;
+}
+
+.flex-row-center {
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4rem;
+}

package/src/lib/components/kv-filter-card/kv-filter-card.component.spec.ts

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

package/src/lib/components/kv-filter-card/kv-filter-card.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'kv-filter-card',
+  templateUrl: './kv-filter-card.component.html',
+  styleUrl: './kv-filter-card.component.scss',
+})
+export class KvFilterCardComponent {
+  @Input() cardState: CardState = "normal";
+  @Input() color!: string;
+  @Input() title!: string;
+  @Input() amount?: number;
+  @Input() gIcon?: string;
+}
+
+export type CardState = "normal" | "selected" | "inactive";
+export type CardStateClass = "card" | "PLACEHOLDER" | "card-disabled";