keevo-components 1.3.7 → 1.3.8

package/src/lib/inputs/input-textarea/input-textarea.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit } 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-input-textarea',
+  templateUrl: './input-textarea.component.html',
+  styleUrls: ['./input-textarea.component.scss', '../../styles-components.scss'],
+  providers: ComponentProviders(InputTextareaComponent),
+})
+export class InputTextareaComponent extends BaseComponentInput<string> implements OnInit {
+  @Input() multiline: boolean = false;
+  @Input() rows: number = 2;
+  @Input() cols: number = 20;
+  @Input() autoResize: boolean = false;
+  @Input() maxValueLength: number = 0;
+
+  counterValueLength: number = 0;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    this.formControl?.valueChanges.subscribe((value: any) => {
+      this.counterValueLength = value?.length;
+    });
+  }
+}

package/src/lib/inputs/input-time/input-time.component.html

@@ -0,0 +1,18 @@
+<span class="p-float-label">
+
+  <p-calendar
+    appendTo="body"
+    [class]="baseInputClass"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [showIcon]="showIcon"
+    [showTime]="true"
+    [timeOnly]="true"
+    (onBlur)="onInputBlur($event)">
+  </p-calendar>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/inputs/input-time/input-time.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } 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-input-time',
+  templateUrl: './input-time.component.html',
+  styleUrls: ['./input-time.component.scss', '../../styles-components.scss'],
+  providers: ComponentProviders(InputTimeComponent),
+})
+export class InputTimeComponent extends BaseComponentInput<string> implements OnInit {
+
+  @Input() showIcon: boolean = true;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

package/src/lib/inputs/kvinputs.module.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CheckComponent } from './check/check.component';
+import { DropdownComponent } from './dropdown/dropdown.component';
+import { InputCalendarComponent } from './input-calendar/input-calendar.component';
+import { InputMaskComponent } from './input-mask/input-mask.component';
+import { InputNumberComponent } from './input-number/input-number.component';
+import { InputPasswordComponent } from './input-password/input-password.component';
+import { InputTextComponent } from './input-text/input-text.component';
+import { InputTextareaComponent } from './input-textarea/input-textarea.component';
+import { InputTimeComponent } from './input-time/input-time.component';
+import { MultiSelectComponent } from './multi-select/multi-select.component';
+import { SwitchComponent } from './switch/switch.component';
+import { kvErrorModule } from '../api/components/error/kverror.module';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    CheckComponent,
+    DropdownComponent,
+    InputCalendarComponent,
+    InputMaskComponent,
+    InputNumberComponent,
+    InputPasswordComponent,
+    InputTextComponent,
+    InputTextareaComponent,
+    InputTimeComponent,
+    MultiSelectComponent,
+    SwitchComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    kvErrorModule,
+    PrimeNgModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    CheckComponent,
+    DropdownComponent,
+    InputCalendarComponent,
+    InputMaskComponent,
+    InputNumberComponent,
+    InputPasswordComponent,
+    InputTextComponent,
+    InputTextareaComponent,
+    InputTimeComponent,
+    MultiSelectComponent,
+    SwitchComponent,
+  ]
+})
+export class KvInputsModule { }

package/src/lib/inputs/multi-select/multi-select.component.html

@@ -0,0 +1,21 @@
+<span class="p-float-label">
+  <p-multiSelect
+    appendTo="body"
+    display="chip"
+    inputId="multiselect"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [options]="options"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    [filter]="filter"
+    [showClear]="showClear"
+    [(ngModel)]="value"
+    (onChange)="selectionChange($event)"
+    (onPanelHide)="panelHide($event)">
+  </p-multiSelect>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/inputs/multi-select/multi-select.component.ts

@@ -0,0 +1,44 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ComponentProviders } from '../../api/helpers/component-providers';
+import { BaseComponentInput } from '../../api/base-components/base-component-input';
+import { ComponentService } from '../../api/services/component.service';
+
+
+@Component({
+  selector: 'kv-multi-select',
+  templateUrl: './multi-select.component.html',
+  styleUrls: ['./multi-select.component.scss', '../../styles-components.scss'],
+  providers: ComponentProviders(MultiSelectComponent),
+})
+export class MultiSelectComponent extends BaseComponentInput<any> implements OnInit {
+
+  @Input() options: any;
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() filter: boolean = false;
+  @Input() showClear: boolean = false;
+
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onPanelHide: EventEmitter<any> = new EventEmitter();
+
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  public override get baseInputClass(): string {
+    return `p-multiselect-sm ${this.hasError ? 'ng-invalid ng-dirty' : ''}`;
+  }
+
+  selectionChange(event: Event) {
+    this.onSelectionChange.emit(event);
+  }
+
+  panelHide(event: Event) {
+    this.onPanelHide.emit(event);
+  }
+}

package/src/lib/inputs/switch/switch.component.html

@@ -0,0 +1,11 @@
+<div class="center field-checkbox">
+
+  <p-inputSwitch
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled">
+  </p-inputSwitch>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</div>

package/src/lib/inputs/switch/switch.component.scss

@@ -0,0 +1,3 @@
+p-inputSwitch {
+  padding-right: 0.5rem;
+}

package/src/lib/inputs/switch/switch.component.ts

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

package/src/lib/keevo-components.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { KvButtonsModule } from './buttons/kvbutton.module';
+import { KvInputsModule } from './inputs/kvinputs.module';
+import { KvTableModule } from './table/kvtable.module';
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+    KvInputsModule,
+    KvButtonsModule,
+    KvTableModule
+  ],
+  exports: [
+    KvInputsModule,
+    KvButtonsModule,
+    KvTableModule
+  ]
+})
+export class KeevoComponentsModule { }

package/src/lib/pipes/codigofile.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'codigoFipe' })
+export class CodigoFipePipe implements PipeTransform {
+
+  transform(value: string) {
+    if (value) {
+
+      const identificacao = value.replace(/[^0-9]/g, '');
+
+      return identificacao.replace(/(\d{6})(\d{1})/g, "\$1-\$2");
+    }
+    else return null;
+  }
+}

package/src/lib/pipes/cpfcnpj.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'cpfCnpj' })
+export class CpfCnpjPipe implements PipeTransform {
+
+  transform(value: string) {
+    if (value) {
+
+      const identificacao = value.replace(/[^0-9]/g, '');
+
+      if (identificacao.length === 11) {
+        return identificacao.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, "\$1.\$2.\$3\-\$4");
+      } else if (identificacao.length === 14) {
+        return identificacao.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/g, "\$1.\$2.\$3\/\$4\-\$5");
+      }
+
+      return value;
+    }
+    else return null;
+  }
+}

package/src/lib/pipes/pipes.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CpfCnpjPipe } from './cpfcnpj.pipe';
+import { TelefonePipe } from './telefone.pipe';
+import { CodigoFipePipe } from './codigofile.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    CpfCnpjPipe,
+    TelefonePipe,
+    CodigoFipePipe
+  ],
+  exports: [
+    CpfCnpjPipe,
+    TelefonePipe,
+    CodigoFipePipe
+  ]
+})
+export class PipesModule { }

package/src/lib/pipes/telefone.pipe.ts

@@ -0,0 +1,38 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'Telefone'
+})
+export class TelefonePipe implements PipeTransform {
+
+  transform(tel: string) {
+    if (tel) {
+      const value = tel.toString().replace(/\D/g, '');
+
+      let foneFormatado = '';
+
+      if (value.length > 12) {
+        foneFormatado = value.replace(/(\d{2})?(\d{2})?(\d{5})?(\d{4})/, '+$1 ($2) $3-$4');
+
+      } else if (value.length > 11) {
+        foneFormatado = value.replace(/(\d{2})?(\d{2})?(\d{4})?(\d{4})/, '+$1 ($2) $3-$4');
+
+      } else if (value.length > 10) {
+        foneFormatado = value.replace(/(\d{2})?(\d{5})?(\d{4})/, '($1) $2-$3');
+
+      } else if (value.length > 9) {
+        foneFormatado = value.replace(/(\d{2})?(\d{4})?(\d{4})/, '($1) $2-$3');
+
+      } else if (value.length > 5) {
+        foneFormatado = value.replace(/^(\d{2})?(\d{4})?(\d{0,4})/, '($1) $2-$3');
+
+      } else if (value.length > 1) {
+        foneFormatado = value.replace(/^(\d{2})?(\d{0,5})/, '($1) $2');
+      } else {
+        if (tel !== '') { foneFormatado = value.replace(/^(\d*)/, '($1'); }
+      }
+      return foneFormatado;
+    }
+    else return null;
+  }
+}

package/src/lib/styles-components.scss

@@ -0,0 +1,3 @@
+label {
+  font-family: 'Roboto' ,Arial, Helvetica, sans-serif;
+}

package/src/lib/table/kvtable.module.ts

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

package/src/lib/table/table.component.html

@@ -0,0 +1,189 @@
+<p-table
+  *ngIf="config"
+  #dt
+  styleClass="p-datatable-sm"
+  [value]="dataSource"
+  [(selection)]="selectedItems"
+  [columns]="config.columns"
+  [globalFilterFields]="globalFilterFields"
+  [rows]="rows"
+  [paginator]="paginator"
+  [rowsPerPageOptions]="rowsPerPageOptions"
+  [showCurrentPageReport]="true"
+  currentPageReportTemplate="{first} - {last} de {totalRecords}"
+  [rowHover]="true"
+  [totalRecords]="totalRecords"
+  [lazy]="config.lazy"
+  (onLazyLoad)="paginate($event)"
+  (selectionChange)="selectionChange($event)"
+  rowGroupMode="rowspan"
+  [groupRowsBy]="config.fieldGroup"
+  [showFirstLastIcon]="false"
+  [pageLinks]="1"
+  [responsive]="true"
+  responsiveLayout="stack"
+>
+
+  <ng-template
+    pTemplate="caption"
+    *ngIf="config.enableCation"
+  >
+    <div class="flex flex-row flex-wrap justify-content-between grid formgrid p-fluid col-12">
+      <h5
+        class="field col-3"
+        *ngIf="config.title"
+      >{{ config.title }}</h5>
+      <div [class]="tamanhoTela < 768 ? 'col-12 md:col-6 lg:col-4' : 'col-12 md:col-6 lg:col-4 input-search'">
+        <span
+          *ngIf="config.enableFilter"
+          class="block mt-2 md:mt-0 p-input-icon-left"
+        >
+          <i class="pi pi-search"></i>
+          <input
+            pInputText
+            pAutoFocus
+            [autofocus]="true"
+            type="text"
+            (input)="onGlobalFilter(dt, $event)"
+            placeholder="Pesquisar..."
+            class="w-full"
+          />
+        </span>
+      </div>
+
+    </div>
+  </ng-template>
+
+  <ng-template
+    pTemplate="header"
+    let-columns
+  >
+
+    <tr>
+      <th
+        style="width: 4rem"
+        *ngIf="config.enableSelect"
+      >
+        <p-tableHeaderCheckbox (click)="selectRow('toggleAll' ,$event)"></p-tableHeaderCheckbox>
+      </th>
+
+      <th
+        *ngFor="let col of columns;"
+        [pSortableColumn]="col.field"
+        [pSortableColumnDisabled]="col.sortable === false"
+        [style.width]="col.width"
+        class="text-sm"
+      >
+        <div [class]=" centralizarColunas(col) ? 'flex flex-row justify-content-center' : 'flex flex-row '">
+          {{col.header}}
+          <p-sortIcon
+            *ngIf="col.sortable === true"
+            [field]="col.field"
+            style="font-size: 10px;"
+          ></p-sortIcon>
+        </div>
+
+      </th>
+      <th *ngIf="config.actions && config.actions.length> 0"></th>
+    </tr>
+  </ng-template>
+
+  <ng-template
+    pTemplate="body"
+    let-rowData
+    let-columns="columns"
+    let-rowgroup="rowgroup"
+    let-rowspan="rowspan"
+  >
+
+    <tr (dblclick)="doubleClick($event, rowData)">
+
+      <td
+        *ngIf="config.enableSelect"
+        [style]="applyStyle(rowData, {field:'check-box' , header: ''})"
+      >
+        <p-tableCheckbox
+          [value]="rowData"
+          (click)="selectRow(rowData, $event)"
+        ></p-tableCheckbox>
+      </td>
+
+      <ng-container *ngFor="let col of columns">
+        <td
+          *ngIf="rowgroup"
+          [attr.rowspan]="rowgroup && col.grouped? rowspan: null"
+          class="rowTable"
+          [style]="applyStyle(rowData, col) + centralizarColunas(col)"
+        >
+          <span class="p-column-title">{{col.header}}</span>
+          <span
+            *ngIf="!isBooleanField(rowData, col); else booleanField"
+            [class]="returnRowClass(rowData, col)"
+          >
+            {{ transformValue(rowData, col) }}
+          </span>
+
+          <ng-template #booleanField>
+            <i [ngClass]="rowData[col.field] ? 'pi pi-check' : 'pi pi-times'"></i>
+          </ng-template>
+        </td>
+
+        <td
+          *ngIf="!rowgroup && !col.grouped"
+          [style]="applyStyle(rowData, col) + centralizarColunas(col)"
+          class="rowTable"
+        >
+          <span class="p-column-title">{{col.header}}</span>
+          <span
+            *ngIf="!isBooleanField(rowData, col); else booleanField"
+            [class]="returnRowClass(rowData, col)"
+          >
+            {{ transformValue(rowData, col) }}
+          </span>
+
+          <ng-template #booleanField>
+            <i [ngClass]="rowData[col.field] ? 'text-green-500 pi pi-check' : 'text-red-500 pi pi-times'"></i>
+          </ng-template>
+        </td>
+
+      </ng-container>
+
+      <td
+        *ngIf="config.actions && config.actions.length> 0"
+        [style]="applyStyle(rowData, {field:'btns-options' , header: ''})"
+      >
+        <div class="flex flex-row justify-content-end w-full">
+          <div *ngFor="let action of config.actions">
+            <p-button
+              [icon]="retornarCampo(action, rowData, 'icon')"
+              styleClass="p-button-text p-button-secondary p-button-raised h-2rem w-2rem ml-1"
+              (click)="action?.command(); activeItem(rowData)"
+              [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
+            ></p-button>
+          </div>
+        </div>
+
+      </td>
+
+    </tr>
+  </ng-template>
+
+  <ng-template
+    pTemplate="emptymessage"
+    let-columns
+  >
+    <tr>
+      <td
+        [attr.colspan]="columns.length"
+        style="text-align: center;"
+      >
+        Nenhum registro encontrado
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+<p-menu
+  #menu
+  [popup]="true"
+  [model]="config.actions"
+></p-menu>

package/src/lib/table/table.component.scss

@@ -0,0 +1,21 @@
+// ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar {
+//   height: 8px;
+//   width: 8px;
+//   background-color: rgba(222, 222, 222, 0.75);
+// }
+
+// ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar-thumb {
+//   border-radius: 6px;
+//   background-color: rgba(0, 0, 0, 0.5);
+// }
+
+.error-show {
+    background-color: red;
+    width: 5px;
+    height: 10px
+}
+
+.input-search {
+    position: relative;
+    right: 15px;
+}

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