keevo-components 1.3.7 → 1.3.8

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/keevo-components",
+  "lib": {
+    "entryFile": "./src/public-api.ts"
+  }
+}

package/package.json

@@ -1,39 +1,20 @@
-{
-  "name": "keevo-components",
-  "version": "1.3.7",
-  "peerDependencies": {
-    "@angular/common": "^15.2.0",
-    "@angular/core": "^15.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "description": "Componentes utilizados no frontend dos sistemas da Keevo Software.",
-  "author": {
-    "name": "Rafael",
-    "url": "https://github.com/rafaelalvesmds"
-  },
-  "keywords": [
-    "keevo components library"
-  ],
-  "module": "fesm2015/keevo-components.mjs",
-  "es2020": "fesm2020/keevo-components.mjs",
-  "esm2020": "esm2020/keevo-components.mjs",
-  "fesm2020": "fesm2020/keevo-components.mjs",
-  "fesm2015": "fesm2015/keevo-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/keevo-components.mjs",
-      "es2020": "./fesm2020/keevo-components.mjs",
-      "es2015": "./fesm2015/keevo-components.mjs",
-      "node": "./fesm2015/keevo-components.mjs",
-      "default": "./fesm2020/keevo-components.mjs"
-    }
-  }
-}
+{
+  "name": "keevo-components",
+  "version": "1.3.8",
+  "peerDependencies": {
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "description": "Componentes utilizados no frontend dos sistemas da Keevo Software.",
+  "author": {
+    "name": "Rafael",
+    "url": "https://github.com/rafaelalvesmds"
+  },
+  "keywords": [
+    "keevo components library"
+  ]
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

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

@@ -0,0 +1,26 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output
+} from '@angular/core';
+
+@Component({
+  template: '',
+})
+export class BaseComponentButton {
+
+  @Input() icon: string = '';
+  @Input() label: string = '';
+  @Input() loading: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() color: string = 'bg-blue-100';
+
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+
+  constructor() { }
+
+  click(event: any): void {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,127 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Type,
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+import { of } from 'rxjs';
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { BaseComponentInput } from './base-component-input';
+
+import { ComponentService } from '../services/component.service';
+import { ObjectService } from '../services/object.service';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentDropDown
+  extends BaseComponentInput<any>
+  implements OnInit
+{
+  @Input() options!: any[];
+  @Input() filteredOptions!: any[];
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() addButton: boolean = false;
+  @Input() filter: boolean = true;
+  @Input() showClear: boolean = true;
+
+  @Output() onAddClick: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+    componentService: ComponentService,
+    private dialogService: DialogService
+  ) {
+    super(componentService);
+    this.registerOnTouched(() => {});
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    // this.carregarCombo();
+    this.setPlaceHolder('Selecione um valor');
+  }
+
+  protected addClick(event: Event) {
+    this.onAddClick.emit(event);
+  }
+
+  private carregarCombo(): void {
+    this.listar().subscribe({
+      next: (data: any) => {
+        this.options = data;
+        this.filteredOptions = data;
+      },
+      error: (error: any) => {},
+    });
+  }
+
+  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 listar(): any {}
+
+  onInputClick(event: any) {
+    this.onClick.emit(event);
+  }
+
+  protected openDialog(
+    componentType: Type<any>,
+    width?: string,
+    height?: string
+  ) {
+    const ref = this.dialogService.open(componentType, {
+      width: width || '70%',
+      height: height,
+      closable: false,
+      maximizable: true,
+      data: { popup: true },
+    });
+
+    ref.onClose.subscribe((id: any) => {
+      if (id) {
+        this.listar().subscribe((data: any) => {
+          this.options = data;
+          this.filteredOptions = data;
+          if (id) this.formControl?.setValue(id);
+        });
+      }
+    });
+  }
+
+  protected selectionValue(event: any) {
+    this.onSelectionValue.emit(event);
+
+    let currentItem = null;
+
+    const controlName = this.getName(this.formControl as FormControl);
+    if (controlName)
+      currentItem = ObjectService.findObject(
+        this.options,
+        controlName,
+        event.value
+      );
+
+    this.onSelectionChange.emit(currentItem);
+  }
+
+  protected setPlaceHolder(p: string) {
+    if (!this.placeholder) this.placeholder = p;
+  }
+}

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

@@ -0,0 +1,91 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  ViewChildren
+} from "@angular/core";
+
+import { FormControl } from '@angular/forms';
+
+import { BaseComponent } from './base-component';
+
+import { ComponentService } from '../services/component.service';
+import { ErrorComponent } from '../components/error/error.component';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentInput<T> extends BaseComponent<T> implements OnInit, AfterContentInit, AfterViewInit {
+
+  protected formControl: FormControl | undefined;
+  protected hasError: boolean | undefined = false;
+
+  @Input() placeholder: string = '';
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+
+  @ViewChildren(ErrorComponent) viewErrors!: QueryList<ErrorComponent>;
+  @ContentChildren(ErrorComponent) contentErrors!: QueryList<ErrorComponent>;
+
+  constructor(protected readonly componentService: ComponentService) {
+    super();
+  }
+
+  public get baseInputClass(): string {
+    return `${this.hasError ? 'ng-invalid ng-dirty' : ''} !important`;
+  }
+
+  erroMessage(): string | undefined {
+    if (!this.formControl?.errors) return;
+
+    let message: string = '';
+
+    if (this.formControl.errors) {
+      const objErrors = this.formControl.errors as any;
+      if (objErrors.erroMessage) message = objErrors.erroMessage;
+    }
+
+    return message;
+  }
+
+  getName(control: FormControl): string | null {
+    return Object.entries(control.parent?.controls ?? []).find(([_, value]) => value === control)?.[0] ?? null;
+  }
+
+  hasControlError(): boolean {
+    if (!this.formControl) return false;
+    return (this.formControl.dirty || this.formControl.touched) && this.formControl.errors !== null;
+  }
+
+  ngAfterViewInit(): void {
+    this.viewErrors.forEach(c => {
+      c.emitError.subscribe(res => {
+       this.hasError = res;
+        this.componentService.changeDetectorRef.detectChanges();
+      });
+    });
+  }
+
+  ngAfterContentInit() {
+    this.contentErrors.forEach(c => {
+      c.emitError.subscribe(res => {
+        this.hasError = res;
+      });
+    });
+  }
+
+  ngOnInit(): void {
+    this.formControl = this.componentService.getFormControl();
+  }
+
+  onInputBlur(event: Event) {
+    this.onTouched();
+    this.onBlur.emit(event);
+  }
+}

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

@@ -0,0 +1,46 @@
+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;
+
+  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/error/error.component.html

@@ -0,0 +1,3 @@
+<small *ngIf="hasError" id="error-message" class="p-error block absolute">
+  <ng-content></ng-content>
+</small>

package/src/lib/api/components/error/error.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'kv-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.scss']
+})
+export class ErrorComponent {
+  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/api/components/error/kverror.module.ts

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

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

@@ -0,0 +1,5 @@
+export interface ActionItem {
+  label: string;
+  icon?: string;
+  command?: (event?: any) => void;
+}

package/{lib/api/components/table/kv-menuitem.d.ts → src/lib/api/components/table/kv-menuitem.ts}

@@ -1,5 +1,6 @@
 import { MenuItem } from "primeng/api/menuitem";
+
 export interface KvMenuItem extends MenuItem {
-    dynamicfields?: any;
-    [key: string]: any;
-}
+	dynamicfields?: any;
+	[key: string]: any;
+};

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

@@ -0,0 +1,10 @@
+export interface TableConfigColumn {
+  field: string;
+  header: string;
+  fieldType?: string;
+  width?: string;
+  pipe?: 'date' | 'decimal' | 'cpfcnpj' | 'telefone' | 'codigofipe';
+  sortable: boolean;
+  grouped?: boolean;
+  centralize?: boolean;
+}

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

@@ -0,0 +1,14 @@
+import { MenuItem } from 'primeng/api';
+import { TableConfigColumn } from './table.config.column';
+import { KvMenuItem } from './kv-menuitem';
+
+export interface TableConfig {
+  actions: KvMenuItem[];
+  columns: TableConfigColumn[];
+  title?: string;
+  lazy: boolean;
+  fieldGroup?: string;
+  enableCation?: boolean;
+  enableFilter?: boolean;
+  enableSelect?: boolean;
+}

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/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/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'
+    });
+  }
+}

package/src/lib/api/modules/primeng.module.ts

@@ -0,0 +1,97 @@
+import { NgModule } from '@angular/core';
+import { AccordionModule } from 'primeng/accordion';
+import { AutoFocusModule } from 'primeng/autofocus';
+import { BadgeModule } from 'primeng/badge';
+import { ButtonModule } from 'primeng/button';
+import { CalendarModule } from 'primeng/calendar';
+import { CardModule } from 'primeng/card';
+import { CarouselModule } from 'primeng/carousel';
+import { CheckboxModule } from 'primeng/checkbox';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { DialogModule } from 'primeng/dialog';
+import { DialogService, DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
+import { DividerModule } from 'primeng/divider';
+import { DropdownModule } from 'primeng/dropdown';
+import { DynamicDialogModule } from 'primeng/dynamicdialog';
+import { InputMaskModule } from 'primeng/inputmask';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { MenuModule } from 'primeng/menu';
+import { MessageModule } from 'primeng/message';
+import { MessagesModule } from 'primeng/messages';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { PanelModule } from 'primeng/panel';
+import { PasswordModule } from 'primeng/password';
+import { PickListModule } from 'primeng/picklist';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { RatingModule } from 'primeng/rating';
+import { RippleModule } from 'primeng/ripple';
+import { SidebarModule } from 'primeng/sidebar';
+import { SkeletonModule } from 'primeng/skeleton';
+import { SpeedDialModule } from 'primeng/speeddial';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { StepsModule } from 'primeng/steps'
+import { TableModule } from 'primeng/table';
+import { ToastModule } from 'primeng/toast';
+import { ToolbarModule } from 'primeng/toolbar';
+import { TooltipModule } from 'primeng/tooltip';
+import { OverlayModule } from 'primeng/overlay';
+
+@NgModule({
+  exports: [
+    AccordionModule,
+    AutoFocusModule,
+    BadgeModule,
+    ButtonModule,
+    CalendarModule,
+    CardModule,
+    CarouselModule,
+    CheckboxModule,
+    ConfirmDialogModule,
+    ContextMenuModule,
+    DialogModule,
+    DividerModule,
+    DropdownModule,
+    DynamicDialogModule,
+    InputMaskModule,
+    InputNumberModule,
+    InputSwitchModule,
+    InputTextModule,
+    InputTextareaModule,
+    MenuModule,
+    MessageModule,
+    MessagesModule,
+    MultiSelectModule,
+    OverlayPanelModule,
+    OverlayPanelModule,
+    PanelModule,
+    PasswordModule,
+    PickListModule,
+    RadioButtonModule,
+    RatingModule,
+    RippleModule,
+    SidebarModule,
+    SkeletonModule,
+    SpeedDialModule,
+    SplitButtonModule,
+    StepsModule,
+    TableModule,
+    ToastModule,
+    ToolbarModule,
+    TooltipModule,
+    OverlayModule
+  ],
+  providers: [
+    ConfirmationService,
+    DialogService,
+    DynamicDialogRef,
+    DynamicDialogConfig,
+    MessageService,
+  ]
+})
+export class PrimeNgModule { }

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

@@ -0,0 +1,22 @@
+import { ChangeDetectorRef, Injectable, Injector } from '@angular/core';
+import { FormControl, FormControlName, FormGroupDirective, NgControl } from '@angular/forms';
+
+@Injectable()
+export class ComponentService {
+
+  constructor(public readonly injector: Injector, public changeDetectorRef: ChangeDetectorRef) { }
+
+  getFormControl(): FormControl<any> | undefined {
+    try {
+      const control = this.injector.get(NgControl);
+      if (control.constructor === FormControlName) {
+        return this.injector.get(FormGroupDirective).getControl(control as FormControlName);
+      }
+
+      return undefined;
+    }
+    catch(ex){
+      return undefined;
+    }
+  }
+}