keevo-components 1.8.44 → 1.8.45

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,104 @@
+import {
+  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 OnInit {
+
+  @Input() carouselData: any[] = [];
+  @Input() exibirCarousel: boolean = false;
+
+  tamanhoTela!: number;
+  imageHeight!: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.tamanhoTela = window.innerWidth;
+    this.listarCarousel();
+    this.ImageSizeTake();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.tamanhoTela = window.innerWidth;
+    this.ImageSizeTake();
+  }
+
+  ImageSizeTake() {
+    let collection: any = document.getElementsByClassName('image');
+    let collectionSkeleton: any = document.getElementsByClassName('skeleton');
+
+    let imageWidth = Number(collection.item(0)?.clientWidth);
+    let imageWidthskeleton = Number(collectionSkeleton.item(0)?.clientWidth);
+
+    if (isNaN(imageWidth)) imageWidth = imageWidthskeleton
+
+    if (this.tamanhoTela < 1200)
+      this.imageHeight = `${imageWidth / 3}px`;
+    else this.imageHeight = '200px';
+  }
+
+  listarCarousel() {
+
+    this.validarCarousel(this.carouselData);
+    this.ImageSizeTake();
+    this.exibirCarousel = true;
+
+    // this.bannerServico.Selecionar(this.usuarioLogadoServico.GetUsuarioLogado().codCliente).subscribe({
+    //   next: (res: any) => {
+    //     this.validarCarousel(res);
+    //   },
+    //   error: (error) => {},
+    //   complete: () => {
+    //     this.ImageSizeTake();
+    //     this.exibirCarousel = true;
+    //   }
+    // }) 
+  }
+
+  validarCarousel(res: any) {
+    const isValidBanner = (banner: any, dataExpiracao: any): boolean => {
+      return banner != null && (new Date(dataExpiracao) > new Date() || dataExpiracao == null);
+    };
+
+    const getObjectUrl = (base64content: string): string => {
+      return URL.createObjectURL(getBlobFrom(base64content));
+    };
+
+    const getBlobFrom = (base64content: string): Blob => {
+      const binary = atob(base64content);
+      const bytenumbers = new Uint8Array(binary.length);
+
+      for (let i = 0; i < binary.length; i++) {
+        bytenumbers[i] = binary.charCodeAt(i);
+      }
+
+      return new Blob([bytenumbers]);
+    };
+
+    let bannersValidos = [
+      { banner: res?.arquivobanner1, dataExpiracao: res?.dataexpiracaobanner1 },
+      { banner: res?.arquivobanner2, dataExpiracao: res?.dataexpiracaobanner2 },
+      { banner: res?.arquivobanner3, dataExpiracao: res?.dataexpiracaobanner3 },
+      { banner: res?.arquivobanner4, dataExpiracao: res?.dataexpiracaobanner4 }
+    ];
+
+    bannersValidos.forEach((bannerInfo: any) => {
+      if (isValidBanner(bannerInfo.banner, bannerInfo.dataExpiracao)) {
+        let img: any = { img: getObjectUrl(bannerInfo.banner) };
+        this.carouselData.push(img);
+      }
+    });
+
+    // let imgfixa: any = { img: 'https://work-assets.keevo.com.br/img/keex/banner_fixo_KeeX.png' };
+    // this.carouselData.unshift(imgfixa); 
+  }
+}

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-inputs/kv-check/kv-check.component.html

@@ -0,0 +1,11 @@
+<div class="field-checkbox">
+  <p-checkbox
+    [binary]="true"
+    [disabled]="disabled"
+    [label]="label"
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    (onChange)="emitOnCheckChange($event)">
+  </p-checkbox>
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</div>

package/src/lib/components/kv-inputs/kv-check/kv-check.component.scss

@@ -0,0 +1,13 @@
+::ng-deep {
+  @media only screen and (min-width: 1000px) {
+    .p-checkbox-label {
+      font-size: 16px;
+    }
+  }
+
+  @media only screen and (max-width: 1000px) {
+    .p-checkbox-label {
+      font-size: 12px;
+    }
+  }
+}

package/src/lib/components/kv-inputs/kv-check/kv-check.component.ts

@@ -0,0 +1,32 @@
+import {
+  Component,
+  EventEmitter,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-check',
+  templateUrl: './kv-check.component.html',
+  styleUrls: [
+    './kv-check.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvCheckComponent),
+})
+export class KvCheckComponent extends BaseComponentInput<boolean> implements OnInit {
+
+  @Output() onCheckChange: EventEmitter<any> = new EventEmitter();
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  emitOnCheckChange(event: any) {
+    this.onCheckChange.emit(event);
+  }
+}

package/src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.html

@@ -0,0 +1,91 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <p-dropdown
+    appendTo="body"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [filter]="filter"
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    [options]="filteredOptions"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    [optionDisabled]="optionDisabled"
+    [group]="group"
+    [optionGroupLabel]="optionGroupLabel"
+    [optionGroupChildren]="optionGroupChildren"
+    [showClear]="showClear"
+    [lazy]="lazy"
+    scrollHeight="250px"
+    (onBlur)="onInputBlur($event)"
+    (onClick)="onInputClick($event)"
+    (onChange)="onInputChange($event)"
+    (onFilter)="onInputFilter($event)"
+    [style]="{'width':widthField}"
+    [panelStyle]="{ width: widthField, overflow: 'auto' }"
+    styleClass="inputs"
+  >
+
+    <ng-template
+      *ngIf="showAddButton"
+      pTemplate="footer"
+    >
+      <p-divider></p-divider>
+      <div class="flex flex-wrap card-container p-1">
+        <div class="flex justify-content-center">
+          <button
+            pButton
+            label="Incluir"
+            pTooltip="Clique aqui para incluir um novo registro"
+            tooltipPosition="bottom"
+            icon="pi pi-plus"
+            class="p-button-rounded p-button-success mr-2"
+            (click)="addClick($event)"
+          ></button>
+        </div>
+      </div>
+    </ng-template>
+
+
+
+
+    <!-- :: -->
+
+    <ng-template
+      let-item
+      pTemplate="item"
+      *ngIf="itemTemplate"
+    >
+      <ng-container
+        [ngTemplateOutlet]="itemTemplate"
+        [ngTemplateOutletContext]="{ $implicit: item }"
+      >
+
+      </ng-container>
+    </ng-template>
+
+
+    <ng-template
+      let-selectedItem
+      pTemplate="selectedItem"
+      *ngIf="selectedItemTemplate"
+    >
+      <ng-container
+        [ngTemplateOutlet]="selectedItemTemplate"
+        [ngTemplateOutletContext]="{ $implicit: selectedItem }"
+      >
+
+      </ng-container>
+    </ng-template>
+
+    <!-- :: -->
+
+
+  </p-dropdown>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.scss

@@ -0,0 +1,4 @@
+::ng-deep .p-dropdown .p-dropdown-label {
+    display: flex;
+    align-items: center;
+}

package/src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.ts

@@ -0,0 +1,38 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  TemplateRef
+} from '@angular/core';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { BaseComponentDropDown } from '../../../api/base-components/base-component-dropdown';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-dropdown',
+  templateUrl: './kv-dropdown.component.html',
+  styleUrls: [
+    './kv-dropdown.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvDropdownComponent),
+})
+export class KvDropdownComponent extends BaseComponentDropDown implements OnInit {
+  constructor(
+    componentService: ComponentService,
+    dialogService: DialogService) {
+    super(componentService, dialogService);
+  }
+
+  @Input() dropDowValue!: any;
+  @Input() itemTemplate!: TemplateRef<any>;
+  @Input() selectedItemTemplate!: TemplateRef<any>;
+
+  override ngOnInit(): void {
+    if (this.dropDowValue)
+      this.value = this.dropDowValue;
+  }
+}