keevo-components 0.0.7 → 0.0.9

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,6 +1,6 @@
 {
   "name": "keevo-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "peerDependencies": {
     "@angular/common": "^15.2.0",
     "@angular/core": "^15.2.0"
@@ -16,24 +16,5 @@
   },
   "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"
-    }
-  }
-}
+  ]
+}

package/src/index.ts

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

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

@@ -0,0 +1,25 @@
+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;
+
+  @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,126 @@
+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);
+  }
+
+  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">
+  <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/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,95 @@
+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';
+
+@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,
+  ],
+  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;
+    }
+  }
+}

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-secondary/button-secondary.component.html

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

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

@@ -0,0 +1,13 @@
+.btn-secondary {
+  background-color: #f2f3f5 !important;
+  color: rgba(0, 0, 0, .87) !important;
+
+  &: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,9 @@
+<button
+  pButton
+  pRipple
+  class="btn-success"
+  [icon]="icon"
+  [label]="label"
+  [loading]="loading"
+  (click)="click($event)">
+</button>

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

@@ -0,0 +1,12 @@
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+
+  &: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,19 @@
+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';
+
+@NgModule({
+  declarations: [
+    ButtonSecondaryComponent,
+    ButtonSuccessComponent
+  ],
+  imports: [
+    PrimeNgModule
+  ],
+  exports: [
+    ButtonSecondaryComponent,
+    ButtonSuccessComponent
+  ]
+})
+export class KvButtonsModule { }