keevo-components 1.8.44 → 1.8.45

package/src/lib/api/base-components/base-component-multi-select.ts

@@ -0,0 +1,136 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+import { BaseComponentInput } from './base-component-input';
+import { ComponentService } from '../services/component.service';
+import { ObjectService } from '../services/object.service';
+import { filtroCombo } from '../components/dropdown/filtro.combo';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentMultiSelect extends BaseComponentInput<any> implements OnInit {
+
+  @Input() options: any = [];
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() filter: boolean = false;
+  @Input() showClear: boolean = false;
+
+  @Input() lazy: boolean = false;
+  @Input() filteredOptions: any = [];
+
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onPanelHide: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+
+  loadedCombo: boolean = false;
+
+  constructor(
+    componentService: ComponentService,
+  ) {
+    super(componentService);
+    this.registerOnTouched(() => { });
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.setPlaceHolder('Selecione um valor');
+
+    if (!this.lazy) this.carregarCombo();
+  }
+
+  public carregarCombo(filtro?: filtroCombo): void {
+    if (filtro) {
+      this.carregarComboObs(this.listarCombo(filtro));
+    }
+    else {
+      this.carregarComboObs(this.listar());
+    }
+  }
+
+  private carregarComboObs(obs: Observable<any>) {
+    if (obs) {
+      obs
+        .subscribe({
+          next: (data: any) => {
+            this.options = data;
+            this.filteredOptions = data;
+            this.loadedCombo = true
+          },
+          error: (error: any) => {
+            console.log(error);
+          },
+        });
+    }
+  }
+
+  public filterOptions(field: string, value: any): void {
+    if (this.options) {
+      let lista = ObjectService.filterObject(this.options, field, value);
+      if (lista?.length > 0) {
+        of(lista).subscribe((opts: any[]) => {
+          this.filteredOptions = opts;
+        });
+      } else this.filteredOptions = [];
+    }
+  }
+
+  protected onInputChange(event: any) {
+    this.onSelectionValue.emit(event);
+
+    if (this.formControl) {
+      const controlName = this.getName(this.formControl as FormControl);
+      if (controlName) {
+        let currentItem = ObjectService.findObject(
+          this.options,
+          controlName,
+          event.value
+        );
+        this.onSelectionChange.emit(currentItem);
+      }
+    }
+  }
+
+  onInputClick(event: any) {
+    this.onClick.emit(event);
+  }
+
+  onInputFilter(event: any) {
+    if (event) {
+      if (event.filter) {
+        if (event.filter.length > 2) {
+          this.carregarCombo({ termoPesquisa: event.filter } as filtroCombo);
+        }
+      }
+    }
+  }
+
+  protected listar(): any { }
+  protected listarCombo(value: any): any { }
+
+  panelHide(event: any) {
+    this.onPanelHide.emit(event);
+  }
+
+  public override get baseInputClass(): string {
+    return `p-multiselect-sm ${this.hasError ? 'ng-invalid ng-dirty' : ''}`;
+  }
+
+  selectionChange(event: any) {
+    this.onSelectionChange.emit(event);
+  }
+
+  public requestCompleted() {
+    return this.loadedCombo;
+  }
+
+}

package/src/lib/api/base-components/base-component.ts

@@ -0,0 +1,47 @@
+import { Component, Input } from "@angular/core";
+import { ControlValueAccessor } from "@angular/forms";
+import { Subject } from "rxjs";
+
+@Component({
+  template: ''
+})
+export abstract class BaseComponent<T> implements ControlValueAccessor {
+
+  protected stateChanges: Subject<void> = new Subject();
+  protected onChange!: (value: T) => void;
+  protected onTouched!: () => void;
+  protected _value!: T;
+
+  @Input('required') isRequired: boolean = false;
+
+  public set value(value: T) {
+    this._value = value;
+    if (this.onChange) this.onChange(value);
+    this.stateChanges.next();
+  }
+
+  public get value(): T {
+    return this._value;
+  }
+
+  @Input() componentId!: string;
+  @Input() label!: string;
+  @Input() disabled: boolean = false;
+  @Input() maxLength!: number;
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(value: T): void {
+    this.value = value;
+  }
+}

package/src/lib/api/components/chart/chart.config.ts

@@ -0,0 +1,12 @@
+export interface ChartConfig {
+  labels: string[];
+  datasets: ChartDatasetConfig[];
+}
+
+export interface ChartDatasetConfig {
+  label?: string;
+  backgroundColor: string[];
+  hoverBackgroundColor: string[];
+  borderColor?: string[];
+  data: number[];
+}

package/src/lib/api/components/chart/chart.model.ts

@@ -0,0 +1,9 @@
+export interface chartModel {
+  labels: string;
+  numDatasets: number;
+  labelDataset?: string;
+  datasets: number;
+  backgroundColor: string;
+  hoverBackgroundColor?: string;
+  borderColor?: string;
+}

package/src/lib/api/components/chart/orchart.config.ts

@@ -0,0 +1,41 @@
+export default interface OrgChartConfig{
+
+
+  /**
+   * @type {string}
+   * Esse item espera uma string html template
+   * (no formato angular com interpolação de variaveis via {{data.'PROPIEDADE DESEJADA'}})
+   * Todos os dados expostos na propiedade data de
+   * cada item estão acessiveis pelo objeto data;
+   * Para realizar interpolação, referencie data entre {{}} e a chave desejada;
+   ** Exemplo: ` <h1> Nome: {{data.nome}} </h1>  `
+   *
+   */
+  templateItem: string;
+
+  /**
+   * @type {number}
+   * Esse item espera receber a largura media do card, para calculo do icone de collapse
+   */
+  cardWidht: number;
+
+  /**
+   * @type {number}
+   * Esse item espera receber a altura media do card, para calculo do icone de collapse
+   */
+  cardHeight: number;
+
+  /**
+   * @type {string}
+   * Esse item espera receber a cor das connections
+   * * Default { #d6d6d6 }
+   */
+  connectionColor?: string;
+
+    /**
+   * @type {number}
+   * Esse item espera receber a cor das connections
+   * * Default { 2 }
+   */
+    conectionWidth?: number;
+}

package/src/lib/api/components/chart/orchart.item.ts

@@ -0,0 +1,33 @@
+export default interface OrgChartItem{
+
+  /**
+   * @type {number}
+   * Esse item espera receber o identificador do card
+   */
+  id: number;
+
+  /**
+   * @type {number | null}
+   * Esse item espera receber o identificador do card pai desse card
+   * * Aceita null no caso de ser o nó root
+   *
+   * @warning Caso tenha mais de um objeto com {{ parentId: null }} havera um erro de multiplos roots
+   */
+  parentId: number | null;
+
+
+  /**
+   * @type {object}
+   * Esse item espera receber os dados do card
+   * @warning Mantenha a consistencia de dados, caso tente acessar um dado que não exista em outro objeto havera um erro
+   */
+  data: object;
+
+
+  /**
+   * @type {object | undefined}
+   * Esse item espera receber um template personalizado para este nó em especifico
+   */
+  template?: string;
+  // [key: string]: any;
+}

package/src/lib/api/components/dropdown/filtro.combo.ts

@@ -0,0 +1,4 @@
+export interface filtroCombo {
+  id: string;
+  termoPesquisa: string;
+}

package/src/lib/api/components/table/action-item.ts

@@ -0,0 +1,11 @@
+export interface ActionItem {
+  label: string;
+  icon?: string;
+  color?: string;
+  colorHover?: string;
+  textColor?: string;
+  disabled?: boolean;
+  visible?: boolean;
+  closeAfterClick?: boolean;
+  command?: (event?: any) => void;
+}

package/src/lib/api/components/table/kv-menuitem.ts

@@ -0,0 +1,11 @@
+import { MenuItem } from "primeng/api/menuitem";
+
+export interface KvMenuItem extends MenuItem {
+	dynamicfields?: any;
+	[key: string]: any;
+	fieldcondition?: string;
+	showAcoesLote?: boolean;
+	disabled?: any;
+	visible?: any;
+	severity?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger';
+};

package/src/lib/api/components/table/table-dropdown-control.ts

@@ -0,0 +1,6 @@
+export default interface FieldDropDownControl {
+  fieldControlDropdownService?: any;
+  fieldControlDropdownSource?: any;
+  idobjeto: string;
+  descricaoobjeto: string;
+}

package/src/lib/api/components/table/table.config.column.ts

@@ -0,0 +1,27 @@
+import FieldDropDownControl from "./table-dropdown-control";
+
+export interface TableConfigColumn {
+  position?: number;
+  field: string;
+  header: string;
+  headerTooltip?: string;
+  fieldType?: string;
+  onlyReadField?: boolean;
+  width?: string;
+  pipe?: 'date' | 'decimal' | 'cpfcnpj' | 'telefone' | 'codigofipe' | 'money' | 'percentage';
+  sortable: boolean;
+  grouped?: boolean;
+  centralize?: boolean;
+  expiredDate?: boolean;
+  icon?: string;
+  iconField?: boolean;
+  indIconMaterial?: boolean;
+  checked?: boolean;
+  hideColumn?: boolean;
+  fixedColumn?: boolean;
+  template?: any;
+  align?: string;
+  subtitle?: string;
+  boolean?: boolean;
+  templateOnly?: 'pai' | 'filho'
+}

package/src/lib/api/components/table/table.config.ts

@@ -0,0 +1,22 @@
+import { MenuItem } from 'primeng/api';
+import { TableConfigColumn } from './table.config.column';
+import { KvMenuItem } from './kv-menuitem';
+
+export interface TableConfig {
+  actions: KvMenuItem[];
+  actionsLote?: KvMenuItem[];
+  actionsPai?: KvMenuItem[];
+  columns: TableConfigColumn[];
+  dataKey?: string;
+  rows?: any;
+  title?: string;
+  subtitle?: string;
+  lazy: boolean;
+  fieldGroup?: string;
+  enableCation?: boolean;
+  enableFilter?: boolean;
+  enableSelect?: boolean;
+  enableToggleNodes?: boolean;
+  // visibleControlCheckboxFunction?: (rowData: any) => boolean; // A função que controla a edição
+  disableControlCheckboxFunction?: (rowData: any, rowNode?: any) => boolean; // A função que controla a edição
+}

package/src/lib/api/components/table/table.paginate.ts

@@ -0,0 +1,6 @@
+export class TablePaginate {
+  paginaInicial: number = 1;
+  tamanhoPagina: number = 10;
+  termoPesquisa: string = '';
+  ordenacao: string = '';
+}

package/src/lib/api/components/table/tabledit.config.ts

@@ -0,0 +1,10 @@
+import { TableConfig } from "./table.config";
+import { TableConfigColumn } from "./table.config.column";
+import { TableEditConfigColumn } from "./tableedit.config.column";
+
+export default interface TableEditConfig extends TableConfig {
+  columns: TableEditConfigColumn[];
+  dataKey: string;
+  reorderableColumns?: boolean;
+  disableEditRowFunction?: (rowData: any, rowNode?: any) => boolean;
+}

package/src/lib/api/components/table/tableedit.config.column.ts

@@ -0,0 +1,12 @@
+import FieldDropDownControl from "./table-dropdown-control";
+import { TableConfigColumn } from "./table.config.column";
+
+export interface TableEditConfigColumn extends TableConfigColumn {
+  required?: boolean;
+  validator?: any;
+  mask?: string;
+  fieldControlType?: 'text' | 'switch' | 'dropdown' | 'multiselect' | 'number' | 'calendar' | 'mask';
+  fieldDropDownControl?: FieldDropDownControl;
+  disableEditRowCellFunction?: (rowData: any, rowNode?: any) => boolean;
+
+}

package/src/lib/api/directives/directives.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+
+import { DragDirective } from './drag/drag.directive';
+import { TemplateDirective } from './template/template.directive';
+
+@NgModule({
+  declarations: [
+    DragDirective,
+    TemplateDirective
+  ],
+  exports:[
+    DragDirective,
+    TemplateDirective
+  ]
+})
+export class DirectiveModule { }

package/src/lib/api/directives/drag/drag.directive.ts

@@ -0,0 +1,40 @@
+import {
+    Directive,
+    Output,
+    EventEmitter,
+    HostBinding,
+    HostListener
+  } from '@angular/core';
+
+  @Directive({
+    selector: '[appDrag]'
+  })
+  export class DragDirective {
+    @HostBinding('class.fileover') fileOver!: boolean;
+    @Output() fileDropped = new EventEmitter<any>();
+
+    // Dragover listener
+    @HostListener('dragover', ['$event']) onDragOver(evt: any) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      this.fileOver = true;
+    }
+
+    // Dragleave listener
+    @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      this.fileOver = false;
+    }
+
+    // Drop listener
+    @HostListener('drop', ['$event']) public ondrop(evt: any) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      this.fileOver = false;
+      let files = evt.dataTransfer.files;
+      if (files.length > 0) {
+        this.fileDropped.emit(files);
+      }
+    }
+  }

package/src/lib/api/directives/template/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/api/helpers/component-providers.ts

@@ -0,0 +1,16 @@
+import { Provider, forwardRef } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ComponentService } from '../services/component.service';
+
+export function ComponentProviders(ref: any): Provider[] {
+  return [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ref),
+      multi: true,
+    },
+    {
+      provide: ComponentService
+    }
+  ]
+}

package/src/lib/api/helpers/keevo-validators.ts

@@ -0,0 +1,86 @@
+import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+export class KeevoValidators {
+  static required(erroMessage?: string): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (Validators.required(control))
+        return { required: true, erroMessage: `${erroMessage ? erroMessage : 'Campo obrigatório'}` };
+
+      return null;
+    };
+  }
+
+  static dateGreaterThan(startControlName: string, erroMessage?: string): ValidatorFn {
+    return (endControl: AbstractControl): ValidationErrors | null => {
+      const parent = endControl.parent as FormGroup;
+
+      if (!parent) return null;
+
+      const startControl: AbstractControl = parent.get(startControlName) as AbstractControl;
+
+      const startDate: Date = startControl.value;
+      const endDate: Date = endControl.value;
+
+      if (!startDate || !endDate) {
+        return null;
+      }
+      if (startDate > endDate) {
+        return { greaterThan: true, erroMessage: erroMessage };
+      }
+      return null;
+    };
+  }
+
+  static min(min: number, erroMessage?: string): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (Validators.min(min)(control))
+        return { min: true, erroMessage: `${erroMessage ? erroMessage : 'Informe um valor maior ou igual à '}${min}` };
+
+      return null;
+    };
+  }
+
+  static max(min: number, erroMessage?: string): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (Validators.max(min)(control))
+        return { min: true, erroMessage: `${erroMessage ? erroMessage : 'Informe um valor menor ou igual à '}${min}` };
+
+      return null;
+    };
+  }
+
+  static email(erroMessage?: string): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (Validators.email(control)) {
+        return { email: true, erroMessage: `${erroMessage ? erroMessage : 'Endereço de e-mail inválido!'}` };
+      }
+      return null;
+    };
+  }
+
+  static maxLengthArray(max: number): ValidatorFn {
+    return (c: AbstractControl): ValidationErrors | null => {
+      if (c.value.length < max)
+        return null;
+
+      return { maxLengthArray: true, erroMessage: 'Tamanho máximo excedido!' };
+    }
+  }
+
+  static maxLength(max: number, erroMessage?: string): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (Validators.maxLength(max)(control))
+        return { maxLength: true, erroMessage: `${erroMessage ? erroMessage : 'Limite máximo de ${max} caracteres atingido!'}` };
+      return null;
+    }
+  }
+
+  static nome(): ValidatorFn {
+    return (c: AbstractControl): ValidationErrors | null => {
+      let palavras = c.value.trim().split(' ');
+      if (palavras?.length < 2)
+        return { nome: true, erroMessage: 'Digite seu nome completo.' };
+      return null;
+    }
+  }
+}

package/src/lib/api/helpers/translate-primeng.ts

@@ -0,0 +1,25 @@
+import { PrimeNGConfig } from 'primeng/api';
+
+export class TranslatePrimeng {
+  public config(config: PrimeNGConfig): void {
+    config.ripple = true;
+
+    config.setTranslation({
+      monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
+      monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+      dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
+      dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
+      dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
+      today: 'Hoje',
+      weekHeader: 'Semana',
+      emptyMessage: 'Nenhum resultado encontrado',
+      emptyFilterMessage: 'Nenhum registro encontrado com o filtro informado',
+      weak: 'Fraca',
+      medium: 'Média',
+      strong: 'Forte',
+      passwordPrompt: 'Informe a senha',
+      clear: 'Limpar',
+      apply: 'Aplicar'
+    });
+  }
+}