keevo-components 1.5.189 → 1.5.191

package/src/lib/api/services/notification.service.ts

@@ -0,0 +1,82 @@
+import { Injectable } from "@angular/core";
+import { ConfirmationService, MessageService } from "primeng/api";
+
+
+export interface QuestionConfig {
+  type?: 'question' | 'alert';
+  message: string;
+  accept?: Function;
+  reject?: Function;
+}
+
+export interface DialogConfig {
+  type: 'info' | 'alert' | 'error';
+  message: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationService {
+  constructor(
+    private readonly confirmationService: ConfirmationService,
+    private readonly messageService: MessageService,
+  ) { }
+
+  question(config: QuestionConfig) {
+    this.confirmationService.confirm({
+      header: config.type === 'alert' ? 'Atenção' : 'Confirmação',
+      icon: `pi ${config.type === 'alert' ? 'pi-exclamation-triangle' : 'pi-question-circle'}`,
+      acceptLabel: 'Sim',
+      acceptButtonStyleClass: 'p-button-success',
+      rejectLabel: 'Não',
+      rejectButtonStyleClass: 'p-button-secondary',
+      ...config,
+    });
+  }
+
+  dialog(config: DialogConfig) {
+    let dialogHeader: string;
+    let dialogIcon: string;
+
+    switch (config.type) {
+      case 'alert':
+        dialogHeader = 'Atenção';
+        dialogIcon = 'pi pi-exclamation-triangle';
+        break;
+      case 'info':
+        dialogHeader = 'Info';
+        dialogIcon = 'pi pi-info-circle';
+        break;
+      case 'error':
+        dialogHeader = 'Erro';
+        dialogIcon = 'pi pi-times-circle';
+        break;
+    }
+
+    this.confirmationService.confirm({
+      header: dialogHeader,
+      icon: dialogIcon,
+      acceptLabel: 'Ok',
+      acceptButtonStyleClass: 'p-button-success',
+      rejectVisible: false,
+      message: config.message,
+    });
+  }
+
+  toastSuccess(message: string) {
+    this.messageService.add({ severity: 'success', summary: 'Sucesso', detail: message });
+  }
+
+  toastInfo(message: string) {
+    this.messageService.add({ severity: 'info', summary: 'Info', detail: message });
+  }
+
+  toastWarn(message: string) {
+    this.messageService.add({ severity: 'warn', summary: 'Aviso', detail: message });
+  }
+
+  toastError(message: string) {
+    this.messageService.add({ severity: 'error', summary: 'Erro', detail: message });
+  }
+}

package/src/lib/api/services/object.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ObjectService {
+  static filterObject(array: any, propertyName: string, value: any) {
+    return array.filter((e: any) => {
+      return e[propertyName] === value;
+    });
+  }
+  static findObject(array: any, propertyName: string, value: any) {
+    return array.find((e: any) => {
+      return e[propertyName] === value;
+    });
+  }
+  static getProperty<T>(obj: T, propertyName: string) {
+    return obj[(propertyName as keyof typeof obj)];
+  }
+}

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

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

package/src/lib/buttons/button-personalize/button-personalize.component.scss

@@ -0,0 +1,3 @@
+.btn-personalize {
+    height: 35px;
+}

package/src/lib/buttons/button-personalize/button-personalize.component.ts

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

package/src/lib/buttons/button-popup/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="btn-success border-green-500"
+    [icon]="icon"
+    iconPos="right"
+    [label]="label"
+    [loading]="loading"
+    [disabled]="disabled"
+    (click)="menu.toggle($event)">
+</button>

package/src/lib/buttons/button-popup/button-popup.component.scss

@@ -0,0 +1,13 @@
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+  height:35px;
+
+  &:hover {
+    background-color: #229925 !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { BaseComponentButton } from '../../api/base-components/base-component-button';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'kv-button-popup',
+  templateUrl: './button-popup.component.html',
+  styleUrls: ['./button-popup.component.scss']
+})
+export class ButtonPopupComponent extends BaseComponentButton {
+
+  @Input() items: MenuItem[] = [];
+
+  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/buttons/button-secondary/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/buttons/button-secondary/button-secondary.component.scss

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

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

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

package/src/lib/buttons/button-success/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/buttons/button-success/button-success.component.scss

@@ -0,0 +1,13 @@
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+  height:35px;
+
+  &:hover {
+    background-color: #229925 !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}

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

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

package/src/lib/buttons/kvbutton.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { ButtonSecondaryComponent } from './button-secondary/button-secondary.component';
+import { ButtonSuccessComponent } from './button-success/button-success.component';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+import { ButtonPersonalizeComponent } from './button-personalize/button-personalize.component';
+import { ButtonPopupComponent } from './button-popup/button-popup.component';
+
+@NgModule({
+  declarations: [
+    ButtonSecondaryComponent,
+    ButtonSuccessComponent,
+    ButtonPersonalizeComponent,
+    ButtonPopupComponent
+  ],
+  imports: [
+    PrimeNgModule
+  ],
+  exports: [
+    ButtonSecondaryComponent,
+    ButtonSuccessComponent,
+    ButtonPersonalizeComponent,
+    ButtonPopupComponent
+  ]
+})
+export class KvButtonsModule { }

package/src/lib/chart/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/chart/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 { ChartComponent } from './chart.component';
+
+describe('ChartComponent', () => {
+  let component: ChartComponent;
+  let fixture: ComponentFixture<ChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/chart/chart.component.ts

@@ -0,0 +1,141 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ChartConfig } from '../api/components/chart/chart.config';
+import { MenuItem } from 'primeng/api';
+import { UIChart } from 'primeng/chart';
+
+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: './chart.component.html',
+  styleUrls: ['./chart.component.scss', '../styles-components.scss']
+})
+export class ChartComponent 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/chart/kvchart.module.ts

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

package/src/lib/directives/template.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[cTemplate]'
+})
+export class TemplateDirective {
+  @Input() type!: string;
+  @Input('cTemplate') name!: string;
+
+  constructor(public template: TemplateRef<any>) { }
+
+  getType(): string {
+    return this.name;
+  }
+}

package/src/lib/inputs/check/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/inputs/check/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/inputs/check/check.component.ts

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