keevo-components 1.8.540 → 1.8.541

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

@@ -0,0 +1,223 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Injector,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+import { ActionItem } from '../../api/components/table/action-item';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { KvStepperPanel } from '../../api/components/stepper/kv-stepperpanel';
+
+@Component({
+  selector: 'kv-page-stepper',
+  templateUrl: './kv-page-stepper.component.html',
+  styleUrl: './kv-page-stepper.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class KvPageStepperComponent implements OnInit {
+
+
+
+
+
+  /**
+   * Propiedade que recebe uma lista de painies
+   */
+  @Input() panels: KvStepperPanel[] = [];
+
+  // @Input() templatePanelsHeaders: KvStepperPanel[] = [];
+
+
+  /**
+   * Propiedade que define o stepper ativo no momento
+   */
+  @Input() activeStep: number = 0;
+
+  /**
+   * Propiedade que define a forma
+   */
+  @Input() orientation: 'vertical' | 'horizontal' = 'horizontal';
+  @Input() linear: boolean = false;
+
+    /**
+   * Dispara o evento para atualização da propiedade aciveStep
+   * @param event evento
+   */
+  @Output() activeStepChange = new EventEmitter<number>();
+  // @Output() concluirCallback = new EventEmitter<void>();
+
+  onActiveStepChange(step: number) {
+    this.activeStep = step;
+    this.activeStepChange.emit(step);
+  }
+
+  assignIdsToPanels() {
+    this.panels.forEach((panel, index) => {
+      panel.id = index;
+    });
+  }
+
+
+
+  createInjector(data: any) {
+    return Injector.create({
+      providers: [
+        { provide: 'inputData', useValue: data }
+      ]
+    });
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  /**
+   * 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) {
+    this.assignIdsToPanels();
+   }
+
+  /**
+   * 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-stepper/kv-page-stepper.module.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import {
+    FormsModule,
+    ReactiveFormsModule
+} from "@angular/forms";
+
+
+
+import { KvPageStepperComponent } from "./kv-page-stepper.component";
+import { PrimeNgModule } from "../../api/modules/primeng.module";
+import { KvButtonsModule } from "../kv-buttons/kv-button.module";
+import { KvStepperModule } from "../kv-stepper/kv-stepper.module";
+import { DirectiveModule } from "../../api/directives/directives.module";
+
+@NgModule({
+    declarations: [
+      KvPageStepperComponent,
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        PrimeNgModule,
+        KvButtonsModule,
+        ReactiveFormsModule,
+        KvStepperModule,
+        DirectiveModule
+    ],
+    exports: [
+      KvPageStepperComponent
+    ]
+})
+export class KvPageStepperodule { }

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

@@ -0,0 +1,31 @@
+<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"
+  (onMoveToSource)="OnMoveToSource($event)"
+  (onMoveToTarget)="OnMoveToTarget($event)"
+  (onMoveAllToSource)="OnMoveAllToSource($event)"
+  (onMoveAllToTarget)="OnMoveAllToTarget($event)"
+  (onSourceSelect)="OnSourceSelect($event)"
+  (onTargetSelect)="OnTargetSelect($event)"
+>
+  <ng-template  let-item pTemplate="item" *ngIf="itemTemplate">
+      <div (click)="selectCheckBox(item)" class="flex mr-5">
+      <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }">
+        @if(showCheckBox){
+            <kv-check (onCheckChange)="selectCheckBox(item)" [(ngModel)]="selectedItems[item[itemIdField]]" class="mr-1"></kv-check>
+        }
+        </ng-container>
+    </div> 
+  </ng-template>
+</p-pickList>

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

@@ -0,0 +1,19 @@
+:host ::ng-deep  .p-picklist .p-picklist-filter-container {
+  position: sticky !important;
+    top: 0 !important;
+    z-index: 99 !important;
+}
+
+:host ::ng-deep .p-picklist .p-picklist-filter-container {
+  border-left: 0px;
+  border-right: 0px ;
+}
+
+.item-with-checkbox {
+  display: flex;
+  align-items: center;
+}
+
+.item-with-checkbox kv-check {
+  margin-right: 8px; /* Ajuste a distância entre o checkbox e o conteúdo */
+}

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

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

@@ -0,0 +1,130 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { PickList } from 'primeng/picklist';
+
+@Component({
+  selector: 'kv-picklist',
+  templateUrl: './kv-pick-list.component.html',
+  styleUrls: [
+    './kv-pick-list.component.scss',
+    '../keevo-components-styles.scss'
+  ]
+})
+export class KvPickListComponent implements OnInit {
+
+  @ViewChild(PickList) picklist!: PickList;
+
+  form!: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    document.addEventListener('keydown', (event) => {
+      if (event.ctrlKey && event.key === 'a') {
+        event.preventDefault(); // Evita comportamento padrão do navegador
+        this.onSelectAll();
+      }
+    });
+  }
+  @Input() itemIdField: string = 'id';
+  @Input() breakpoint: string = "1400px"; // Define a largura da tela na qual o componente deve alterar seu comportamento responsivo.
+  @Input() dragdrop: boolean = true; // Ativa/Desativa o arrasta e solta
+  @Input() filterBy!: string; // Campo de filtro nas listas.
+  @Input() itemTemplate!: TemplateRef<any>; // Como as listas são dinâmicas, obrigatoriamente um template deve ser informado para exibir os itens das listas
+  @Input() responsive: boolean = true; // Ativa/Desativa a responsividade automática
+  @Input() source!: any[]; // Lista de origem
+  @Input() sourceHeader: string = 'Título da lista de origem';
+  @Input() sourceStyle!: any; // Estilização da lista de origem
+  @Input() stripedRows: boolean = false; // Ativa/Desativa linhas com cores alternadas ("zebradas")
+  @Input() target!: any[]; // Lista de destino (Itens selecionados)
+  @Input() targetHeader: string = 'Título de lista de destino';
+  @Input() targetStyle!: any; // Estilização da lista de destino
+  @Input() showSourceControls: boolean = true; // Exibir controls da lista de origem
+  @Input() showTargetControls: boolean = true; // Exibir controls da lista de destino
+  @Input() showCheckBox: boolean = false; // Exibir check na lista de origem
+  @Output() onMoveToSource: EventEmitter<any> = new EventEmitter();
+  @Output() onMoveToTarget: EventEmitter<any> = new EventEmitter();
+  @Output() onMoveAllToSource: EventEmitter<any> = new EventEmitter();
+  @Output() onMoveAllToTarget: EventEmitter<any> = new EventEmitter();
+  @Output() onSourceSelect: EventEmitter<any> = new EventEmitter();
+  @Output() onTargetSelect: EventEmitter<any> = new EventEmitter();
+
+  selectedPreview!: any;
+  ngModel: boolean = false;
+  selectedItems: { [key: number]: boolean } = {};
+
+  OnMoveToSource(event: any) {
+    this.picklist.moveLeft();
+    this.onMoveToSource.emit(event);
+    this.selectedItems = {};
+  }
+
+  OnMoveToTarget(event: any) {
+    this.picklist.moveRight();
+    this.onMoveToTarget.emit(event);
+    this.selectedItems = {};
+  }
+
+  OnMoveAllToSource(event: any) {
+    this.onMoveToSource.emit(event);
+    this.selectedItems = {};
+  }
+
+  OnMoveAllToTarget(event: any) {
+    this.onMoveToTarget.emit(event);
+    this.selectedItems = {};
+  }
+
+  OnSourceSelect(event: any) {
+    this.onSourceSelect.emit(event);
+  }
+
+  OnTargetSelect(event: any) {
+    this.onTargetSelect.emit(event);
+  }
+
+  onSelectAll() {
+    this.selectAllItems(true);
+  }
+  
+  selectAllItems(isSelected: boolean) {
+    // Selecionar todos os itens na lista de origem (source)
+    this.source.forEach(item => {
+      const itemId = item[this.itemIdField];
+      this.selectedItems[itemId] = isSelected;
+    });
+  
+    // Selecionar todos os itens na lista de destino (target)
+    this.target.forEach(item => {
+      const itemId = item[this.itemIdField];
+      this.selectedItems[itemId] = isSelected;
+    });
+  }
+  
+ 
+  selectCheckBox(item: any) {
+    const itemId = item[this.itemIdField];
+    this.selectedPreview = item;
+  
+    this.selectedItems[itemId] = this.selectedItems[itemId] !== undefined
+      ? !this.selectedItems[itemId]
+      : true;
+    
+    this.ngModel = this.selectedItems[itemId];
+  }
+  
+
+  isItemSelected(item: any): boolean {
+    console.log(this.selectedPreview === item)
+    return this.selectedPreview === item;
+  }
+
+  ngOnInit() {
+  }
+}

package/src/lib/components/kv-pick-list/kv-pick-list.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from "@angular/core";
+
+import { KvPickListComponent } from './kv-pick-list.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvInputsModule } from "../kv-inputs/kv-inputs.module";
+
+@NgModule({
+  declarations: [
+    KvPickListComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+    KvInputsModule,
+    ReactiveFormsModule
+],
+  exports: [
+    KvPickListComponent
+  ]
+})
+export class KvPickListModule { }

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.html

@@ -0,0 +1,38 @@
+<div
+  role="progressbar"
+  [class]="styleClass ? styleClass : ''"
+  [ngStyle]="style"
+  [attr.aria-valuemin]="0"
+  [attr.aria-valuenow]="value"
+  [attr.aria-valuemax]="100"
+  [attr.data-pc-name]="'progressbar'"
+  [attr.data-pc-section]="'root'"
+  [ngClass]="{'p-progressbar p-component': true, 'p-progressbar-determinate': mode === 'determinate', 'p-progressbar-indeterminate': mode === 'indeterminate'}"
+>
+  @if(mode === 'determinate') {
+  <div class="p-progressbar-value p-progressbar-value-animate {{ barStyleClass }} font-semibold"
+    [style.width]="maxValue && value ? (value / maxValue) * 100 + '%' : value + '%'"
+    [attr.data-pc-section]="'value'"
+  ></div>
+
+  <div
+    class="p-progressbar-label {{ labelStyleClass }} w-full"
+    [attr.data-pc-section]="'label'"
+  >
+    <label *ngIf="showValue && maxValue">{{ value }}/{{ maxValue }}</label>
+    <label *ngIf="showValue && !maxValue">{{ value }}%</label>
+    <label *ngIf="showLabel">{{ label }}</label>
+  </div>
+  } @if(mode === 'indeterminate') {
+  <div
+    class="p-progressbar-indeterminate-container"
+    [attr.data-pc-section]="'container'"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      [style.background]="color"
+      [attr.data-pc-section]="'value'"
+    ></div>
+  </div>
+  }
+</div>

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.scss

@@ -0,0 +1,128 @@
+@layer primeng {
+  .p-progressbar {
+    background-color: #adadad !important;
+    position: relative;
+    overflow: hidden;
+    height: 0.875rem;
+  }
+
+  .p-progressbar-determinate .p-progressbar-value {
+    height: 100%;
+    width: 0%;
+    position: absolute;
+    display: none;
+    border: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .p-progressbar-determinate .p-progressbar-label {
+    font-size: 0.750rem;
+    color: white !important;
+    font-weight: 400;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .p-progressbar-determinate .p-progressbar-value-animate {
+    background-color: #004172 !important;
+    transition: width 1s ease-in-out;
+  }
+
+  .p-progressbar-indeterminate .p-progressbar-value::before {
+    background-color: #004172 !important;
+    content: "";
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim 2.1s
+      cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    animation: p-progressbar-indeterminate-anim 2.1s
+      cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+
+  .p-progressbar-indeterminate .p-progressbar-value::after {
+    background-color: #004172 !important;
+    content: "";
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s
+      cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation: p-progressbar-indeterminate-anim-short 2.1s
+      cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    -webkit-animation-delay: 1.15s;
+    animation-delay: 1.15s;
+  }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressBarComponent } from './kv-progress-bar.component';
+
+describe('ProgressBarComponent', () => {
+  let component: ProgressBarComponent;
+  let fixture: ComponentFixture<ProgressBarComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProgressBarComponent]
+    });
+    fixture = TestBed.createComponent(ProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});