keevo-components 1.8.125 → 1.8.127

package/src/lib/components/kv-modal/kv-modal.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvModalComponent } from './kv-modal.component';
+import { KvButtonsModule, PrimeNgModule } from '../../../public-api';
+
+
+
+@NgModule({
+  declarations: [
+    KvModalComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    KvButtonsModule,
+  ],
+  exports: [
+    KvModalComponent
+  ]
+})
+export class KvModalModule { }

package/src/lib/components/kv-orgchart/kv-orgchart.component.html

@@ -0,0 +1,58 @@
+<div #chartContainer id="chartContainer" [ngClass]="{'backGround': true}">
+
+
+  <div class="div-botoes w-full flex gap-1" >
+
+
+    <span *ngIf="!mostraMenu" class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+    (click)="mostraMenu = !mostraMenu" pTooltip="Expandir menu">menu</span>
+
+
+
+    <span *ngIf="mostraMenu" class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+    (click)="mostraMenu = !mostraMenu" pTooltip="Recolher menu">menu_open</span>
+
+    <div *ngIf="mostraMenu">
+      <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.zoomIn()" pTooltip="Zoom +">zoom_in</span>
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.zoomOut()" pTooltip="Zoom -">zoom_out</span>
+
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.collapseAll()" pTooltip="Expandir">expand_less</span>
+
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.expandAll()" pTooltip="Recolher">expand_more</span>
+
+
+    <!-- <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="compactSwap()" pTooltip="Compactar">cached</span> -->
+
+    <span class="material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer"
+      (click)="chart.fit().render()" pTooltip="Centralizar">
+      filter_center_focus
+    </span>
+
+    <span class="material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer"
+      (click)="chart.fullscreen('#chartContainer')" pTooltip="Tela cheia" >
+      fullscreen
+    </span>
+
+    </div>
+
+
+  </div>
+
+
+</div>
+
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+/>

package/src/lib/components/kv-orgchart/kv-orgchart.component.scss

@@ -0,0 +1,21 @@
+#chartContainer{
+  height: 100%;
+  overflow: hidden;
+
+}
+:host ::ng-deep #chartContainer svg.svg-chart-container {
+  height: 100% !important;
+  position: relative;
+  width: 100%;
+  top: -56px;
+  z-index: 0;
+  background-color: #fff;
+}
+.div-botoes{
+  z-index: 1;
+  width:  100%;
+  position: relative;
+}
+
+
+

package/src/lib/components/kv-orgchart/kv-orgchart.component.ts

@@ -0,0 +1,110 @@
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  Renderer2,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+
+import { OrgChart } from 'd3-org-chart';
+import * as d3 from 'd3';
+
+import OrgChartConfig from '../../api/components/chart/orchart.config';
+import OrgChartItem from '../../api/components/chart/orchart.item';
+
+@Component({
+  selector: 'kv-orgchart',
+  templateUrl: './kv-orgchart.component.html',
+  styleUrls: ['./kv-orgchart.component.scss',],
+})
+export class KvOrgchartComponent implements OnInit {
+  @ViewChild('chartContainer') chartContainer!: ElementRef;
+  chart!: any;
+
+  @Input() dataSource!: OrgChartItem[];
+  @Input() config!: OrgChartConfig;
+  @Input() template!: string;
+  @Input() nodeTemplate!: TemplateRef<any>;
+
+  @Input() generateTemplate: Function = (data: any, node: any, nodes: any[], index: number): string => '';
+  @Input() templateFuncion: boolean = false;
+
+  @Input() corDeFundo: string = 'red';
+
+  compact: boolean = true;
+  mostraMenu: boolean = false;
+
+  constructor(private renderer: Renderer2) { }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+    if (!this.chart) {
+      this.chart = new OrgChart();
+    }
+    this.updateChart();
+  }
+
+  ngOnChanges() {
+    this.updateChart();
+  }
+
+  updateChart() {
+    if (!this.dataSource) {
+      return;
+    }
+    if (!this.chart) {
+      return;
+    }
+
+    const chartContainer = this.chartContainer.nativeElement;
+    this.chart
+      .container(chartContainer)
+      .data(this.dataSource)
+      .nodeWidth(() => this.config.cardWidht)
+      .nodeHeight(() => this.config.cardHeight)
+      .nodeUpdate(function (d: any) {
+      })
+      .linkUpdate((node: any, index: any, nodes: any) => {
+        d3.select(nodes[index])
+          .attr('stroke-width', this.config.conectionWidth || '2px')
+          .style('stroke', this.config.connectionColor || '#d6d6d6').style('backgroundColor', 'red')
+      })
+      .nodeContent((d: any) => {
+        if (!this.templateFuncion) {
+          if (d.data.template) {
+            const jsTemplate = this.stringToTemplateLiteral(d.data.template);
+            var templateConverter = new Function('data', 'return' + jsTemplate);
+            var x = templateConverter(d.data.data);
+          } else {
+            const jsTemplate = this.stringToTemplateLiteral(this.config.templateItem);
+            var templateConverter = new Function('data', 'return' + jsTemplate);
+            var x = templateConverter(d.data.data);
+          }
+        } else {
+          var x = this.generateTemplate(d)
+
+        }
+        return x;
+      })
+      .defaultFont('Roboto')
+      .render()
+  }
+
+  stringToTemplateLiteral(string: string): string {
+    const convertedTemplate = string.replace(
+      /\{\{([^}]*)\}\}/g,
+      '${$1}'
+    );
+
+    return '`' + convertedTemplate + '`';
+  }
+
+  compactSwap() {
+    this.compact = !this.compact;
+    this.chart.compact(this.compact).render();
+  }
+}

package/src/lib/components/kv-orgchart/kv-orgchart.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvOrgchartComponent } from './kv-orgchart.component';
+import { PrimeNgModule } from '../../../public-api';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrimeNgModule
+  ],
+  declarations: [KvOrgchartComponent],
+  exports: [KvOrgchartComponent]
+})
+export class KvOrgchartModule { }

package/src/lib/components/kv-page-form/kv-page-form.component.html

@@ -0,0 +1,117 @@
+<div
+  [formGroup]="formGroup"
+  class="grid-nogutter m-0"
+  id="page-form-container"
+>
+
+  <!-- Renderização do form -->
+  <div class="col-12 p-0" id="page-form-content">
+    <ng-content></ng-content>
+  </div>
+
+  <!-- Divider -->
+  <!-- <p-divider class="col-12"></p-divider> -->
+
+  <!-- Barra de ações -->
+  <div class="flex flex-column lg:flex-row justify-content-end col-12 gap-2 barra-acoes grid grid-nogutter p-fluid">
+
+    @if(positionBtnToogle == 'start'){
+      <kv-button-popup
+        *ngIf="actionsToogle && showBtnToogle"
+        [label]="txtBtnToogle"
+        [icon]="iconBtnToogle"
+        (click)="menuToogle.toggle($event)"
+        [disabled]="disableBtnToogle"
+        class="w-full lg:w-auto"
+        classBtn="{{classBtnToogle}}"
+      >
+      </kv-button-popup>
+      <p-menu
+        #menuToogle
+        [popup]="true"
+        [model]="actionsToogle"
+        appendTo="body"
+        class="w-full lg:w-auto"
+      ></p-menu>
+    }
+
+    <kv-button-popup
+        *ngIf="actionsCancelToogle && showBtnCancelToogle"
+        [label]="txtBtnCancelToogle"
+        [icon]="iconBtnCancelToogle"
+        (click)="menuCancel.toggle($event)"
+        class="w-full lg:w-auto"
+        [classBtn]="'btn-secondary border-300'"
+      >
+      </kv-button-popup>
+      <p-menu
+        #menuCancel
+        [popup]="true"
+        [model]="actionsCancelToogle"
+        appendTo="body"
+        class="w-full lg:w-auto"
+      ></p-menu>
+
+    <kv-button-secondary
+      *ngIf="showBtnCancel"
+      [label]="txtBtnCancel"
+      [icon]="iconBtnCancel"
+      [disabled]="isSaveLoading"
+      (click)="cancel($event)"
+      class="w-full lg:w-auto"
+    >
+    </kv-button-secondary>
+
+    <kv-button-success
+      *ngIf="showBtnSave"
+      [label]="txtBtnSave"
+      [icon]="iconBtnSave"
+      [disabled]="disableBtnSave"
+      [loading]="isSaveLoading"
+      (click)="!disableBtnSave ? save($event) : ''"
+      class="w-full lg:w-auto"
+    />
+
+
+    <kv-button-popup
+      *ngIf="actionsSaveToogle && showBtnSaveToogle"
+      [label]="txtBtnSaveToogle"
+      [icon]="iconBtnSaveToogle"
+      (click)="menuSave.toggle($event)"
+      [loading]="isSaveLoading"
+      class="w-full lg:w-auto"
+      [classBtn]="'btn-success border-green-500'"
+    >
+    </kv-button-popup>
+
+    <p-menu
+      #menuSave
+      [popup]="true"
+      [model]="actionsSaveToogle"
+      appendTo="body"
+      class="w-full lg:w-auto"
+    ></p-menu>
+
+
+    @if(positionBtnToogle == 'end'){
+      <kv-button-popup
+        *ngIf="actionsToogle && showBtnToogle"
+        [label]="txtBtnToogle"
+        [icon]="iconBtnToogle"
+        (click)="menuToogle.toggle($event)"
+        [disabled]="disableBtnToogle"
+        class="w-full lg:w-auto"
+        classBtn="{{classBtnToogle}}"
+      >
+      </kv-button-popup>
+      <p-menu
+        #menuToogle
+        [popup]="true"
+        [model]="actionsToogle"
+        appendTo="body"
+        class="w-full lg:w-auto"
+      ></p-menu>
+    }
+  </div>
+
+</div>

package/src/lib/components/kv-page-form/kv-page-form.component.scss

@@ -0,0 +1,76 @@
+::ng-deep .p-dialog .p-dialog-header {
+    color: white !important;
+    background: #002542 !important;
+    display: flex !important;
+    flex-wrap: wrap;
+}
+
+::ng-deep .p-dialog .p-dialog-content {
+    padding-top: 1rem;
+}
+
+::ng-deep .p-dialog {
+    min-width: 320px;
+}
+
+.sub-title {
+    // color: white !important;
+    color: yellow;
+    position: relative;
+    bottom: 25px;
+    z-index: 1;
+}
+
+::ng-deep .p-dialog-content {
+
+    &::-webkit-scrollbar {
+        width: 8px;
+
+        &:hover {
+            background-color: rgba(222, 222, 222, 0.75);
+        }
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background-color: transparent;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+        border-left: 2px solid white;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    &::-webkit-scrollbar-track {
+        border-left: 2px solid white;
+        background-color: rgba(222, 222, 222, 0.75);
+    }
+
+    overflow-x: hidden;
+}
+
+* {
+    padding-bottom: 0rem;
+    padding-top: 0rem;
+}
+
+.barra-acoes {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgb(255, 255, 255);
+    padding: 10px;
+    z-index: 999;
+}
+
+
+#page-form-container {
+    padding-bottom: 40px;
+}
+
+@media screen and (max-width: 991px) {
+    #page-form-container {
+        padding-bottom: 100px;
+    }
+}

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

package/src/lib/components/kv-page-form/kv-page-form.component.ts

@@ -0,0 +1,152 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import {
+  FormBuilder,
+  FormGroup
+} from '@angular/forms';
+
+import { ActionItem } from '../../api/components/table/action-item';
+
+@Component({
+  selector: 'kv-page-form',
+  templateUrl: './kv-page-form.component.html',
+  styleUrls: ['./kv-page-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class KvPageFormComponent implements OnInit {
+
+  /**
+   * Configurações do formulário
+   */
+  @Input() formGroup: FormGroup = new FormGroup({});
+  @Input() TituloForm: string | undefined = '';
+  @Input() SubTituloForm: string | undefined = '';
+  @Input() isSaveLoading!: boolean;
+  @Input() popup: boolean = false;
+  @Input() locationUseComponent: 'page' | 'dialog' = 'dialog';
+  // @Input() expandMenu!: boolean;
+
+  /**
+   * Botão cancelar
+   */
+  @Input() iconBtnCancel: string = 'pi pi-fw pi-times';
+  @Input() showBtnCancel: boolean = true;
+  @Input() txtBtnCancel: string = "Cancelar";
+
+  /**
+   * Botão de cancelar com opções
+   */
+  @Input() actionsCancelToogle!: ActionItem[];
+  @Input() iconBtnCancelToogle: string = "pi pi-chevron-down";
+  @Input() showBtnCancelToogle: boolean = false;
+  @Input() txtBtnCancelToogle: string = "Cancelar";
+
+  /**
+   * Botão salvar
+   */
+  @Input() iconBtnSave: string = 'pi pi-save';
+  @Input() showBtnSave: boolean = true;
+  @Input() txtBtnSave: string = "Salvar";
+  @Input() disableBtnSave: boolean = false;
+
+  /**
+   * Botão de salvar com opções
+   */
+  @Input() actionsSaveToogle!: ActionItem[];
+  @Input() iconBtnSaveToogle: string = "pi pi-chevron-down";
+  @Input() showBtnSaveToogle: boolean = false;
+  @Input() txtBtnSaveToogle: string = "Ações";
+
+  /**
+   * Botão genérico com opções
+   */
+  @Input() actionsToogle!: ActionItem[];
+  @Input() iconBtnToogle: string = "pi pi-chevron-down";
+  @Input() showBtnToogle: boolean = false;
+  @Input() txtBtnToogle: string = "Ações";
+  @Input() disableBtnToogle: boolean = false;
+  @Input() positionBtnToogle: string = 'end';
+  @Input() classBtnToogle: string = 'bg-glue-500';
+
+  /**
+   * Botão fechar
+   */
+  @Input() disableBtnSair: boolean = true;
+
+  /**
+   * Salvar dados
+   */
+  @Output() onSave: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * Cancelar
+   */
+  @Output() onCancel: EventEmitter<any> = new EventEmitter();
+
+  constructor(private fb: FormBuilder) { }
+
+  /**
+   * Adiciona sub-título à tela
+   */
+  addSubTitle() {
+    if (this.SubTituloForm) {
+      const headerElement = document.querySelector('.p-dialog .p-dialog-header');
+      if (headerElement) {
+        const subtitleElement = document.createElement('span');
+        subtitleElement.textContent = this.SubTituloForm;
+        subtitleElement.style.fontSize = '0.75rem'
+        subtitleElement.style.width = '100%'
+        subtitleElement.style.marginLeft = '2px'
+
+        headerElement.appendChild(subtitleElement);
+      }
+    }
+  }
+
+  ngOnInit() {
+    this.addSubTitle();
+    this.setPageFormContainerAttributes();
+  }
+
+  /**
+   * Dispara o método de cancelamento da tela
+   * @param event evento
+   */
+  cancel(event: Event) {
+    this.onCancel.emit(event);
+  }
+
+  /**
+   * Dispara o método de salvar da tela
+   * @param event evento
+   */
+  save(event: Event) {
+    this.onSave.emit(event);
+  }
+
+  /**
+   * Ajusta o tamanho da tela considerando o menu lateral
+   */
+  setPageFormContainerAttributes() {
+    if (this.locationUseComponent == 'page') {
+      var form = document.getElementById('page-form-container');
+
+      if (form) {
+        var widthFull = form.clientWidth;
+        var widthAdjusted;
+
+        widthAdjusted = widthFull - 332
+
+      }
+    }
+    
+
+  }
+}

package/src/lib/components/kv-page-form/kv-page-form.module.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import {
+    FormsModule,
+    ReactiveFormsModule
+} from "@angular/forms";
+
+import { KvPageFormComponent } from "./kv-page-form.component";
+
+import {
+    KvButtonsModule,
+    PrimeNgModule
+} from "../../../public-api";
+
+@NgModule({
+    declarations: [
+        KvPageFormComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        PrimeNgModule,
+        KvButtonsModule,
+        ReactiveFormsModule
+    ],
+    exports: [
+        KvPageFormComponent
+    ]
+})
+export class KvPageFormModule { }

package/src/lib/components/kv-pick-list/kv-pick-list.component.html

@@ -0,0 +1,19 @@
+<p-pickList
+    [source]="source"
+    [sourceHeader]="sourceHeader"
+    [sourceStyle]="sourceStyle"
+    [target]="target"
+    [targetHeader]="targetHeader"
+    [targetStyle]="targetStyle"
+    [dragdrop]="dragdrop"
+    [responsive]="responsive"
+    [filterBy]="filterBy"
+    [breakpoint]="breakpoint"
+    [stripedRows]="stripedRows"
+    [showSourceControls]="showSourceControls"
+    [showTargetControls]="showTargetControls"
+>
+    <ng-template let-item pTemplate="item" *ngIf="itemTemplate">
+        <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+    </ng-template>
+</p-pickList>

package/src/lib/components/kv-pick-list/kv-pick-list.component.spec.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvPickListComponent } from './kv-pick-list.component';
+
+describe('PickListComponent', () => {
+  let component: KvPickListComponent;
+  let fixture: ComponentFixture<KvPickListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KvPickListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KvPickListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});