keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,461 @@
+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) => this.onKeyDown(event));
+  }
+
+  @Input() itemIdField: string = 'id';
+  @Input() breakpoint: string = "1400px";
+  @Input() dragdrop: boolean = true;
+  @Input() filterBy!: string;
+  @Input() itemTemplate!: TemplateRef<any>;
+  @Input() responsive: boolean = true;
+  @Input() source!: any[];
+  @Input() sourceHeader: string = 'Título da lista de origem';
+  @Input() sourceStyle!: any;
+  @Input() stripedRows: boolean = false;
+  @Input() target!: any[];
+  @Input() targetHeader: string = 'Título de lista de destino';
+  @Input() targetStyle!: any;
+  @Input() showSourceControls: boolean = true;
+  @Input() showTargetControls: boolean = true;
+  @Input() showCheckBox: boolean = false;
+
+  @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 } = {};
+  ultimoItemSelecionado: { item: any, index: number }[] = [];
+  lastDraggedItems: any[] = [];
+  draggedIds: number[] = [];
+
+  mouseX = 0;
+  mouseY = 0;
+  previewClones: HTMLElement[] = [];
+
+ngOnInit() {
+  document.addEventListener('mousemove', (event: MouseEvent) => {
+    this.mouseX = event.clientX;
+    this.mouseY = event.clientY;
+  });
+}
+
+ngAfterViewInit() {
+  this.createDropOverlay();
+}
+
+  dropOverlay!: HTMLDivElement;
+
+  createDropOverlay() {
+    this.dropOverlay = document.createElement('div');
+    this.dropOverlay.innerText = 'Soltar';
+    this.dropOverlay.style.position = 'fixed';
+    this.dropOverlay.style.background = '#BFDBFE'; // Azul claro visível
+    this.dropOverlay.style.color = '#1E3A8A'; // Azul escuro pro texto
+    this.dropOverlay.style.border = '9px #1E40AF'; // Borda azul escuro
+    this.dropOverlay.style.boxShadow = '0 2px 6px rgba(30, 58, 138, 0.2)'; // Shadow reduzida
+    this.dropOverlay.style.display = 'none';
+    this.dropOverlay.style.justifyContent = 'center';
+    this.dropOverlay.style.alignItems = 'center';
+    this.dropOverlay.style.zIndex = '9999';
+    this.dropOverlay.style.fontSize = '1.5rem';
+    this.dropOverlay.style.fontWeight = 'bold';
+    this.dropOverlay.style.pointerEvents = 'all';
+    this.dropOverlay.style.transition = 'all 0.2s ease';
+
+
+    // Encaixar no mesmo lugar do target
+    const targetListEl = document.querySelector('.p-picklist-target') as HTMLElement;
+    if (targetListEl) {
+      const rect = targetListEl.getBoundingClientRect();
+      this.dropOverlay.style.top = rect.top + 'px';
+      this.dropOverlay.style.left = rect.left + 'px';
+      this.dropOverlay.style.width = rect.width + 'px';
+      this.dropOverlay.style.height = rect.height + 'px';
+    }
+
+    this.dropOverlay.addEventListener('click', () => {
+      const selectedInSource = this.source.some(item => this.selectedItems[item[this.itemIdField]]);
+      const selectedInTarget = this.target.some(item => this.selectedItems[item[this.itemIdField]]);
+    
+      if (selectedInSource) {
+        this.OnMoveToTarget({});
+      } else if (selectedInTarget) {
+        this.OnMoveToSource({});
+      }
+    
+      this.hideDropOverlay();
+    });
+    
+
+    this.dropOverlay.addEventListener('mouseenter', () => {
+      this.dropOverlay.style.background = '#93C5FD'; // Azul um pouco mais escuro no hover
+    });
+    this.dropOverlay.addEventListener('mouseleave', () => {
+      this.dropOverlay.style.background = '#BFDBFE';
+    });
+    
+
+    document.body.appendChild(this.dropOverlay);
+  }
+
+
+  handleMouseMove(event: MouseEvent) {
+    this.mouseX = event.clientX;
+    this.mouseY = event.clientY;
+  }
+
+  clearPreviewClones() {
+    this.previewClones.forEach(clone => clone.remove());
+    this.previewClones = [];
+  }
+  
+  OnMoveToSource(event: any) {
+    this.clearPreviewClones();
+    this.picklist.moveLeft();
+    this.onMoveToSource.emit(event);
+    this.selectedItems = {};
+    this.hideDropOverlay()
+    this.clearPreviewClones();
+  }
+  
+  OnMoveToTarget(event: any) {
+    this.clearPreviewClones();
+    this.picklist.moveRight();
+    this.onMoveToTarget.emit(event);
+    this.selectedItems = {};
+    this.hideDropOverlay()
+    this.clearPreviewClones();
+  }
+  
+
+  getSelectedItems(): any[] {
+    // Filtra os itens da lista de origem (source) com base nos itens selecionados
+    return this.source.filter(item => {
+      const itemId = item[this.itemIdField]; // Obtém o ID do item
+      return this.selectedItems[itemId] === true; // Verifica se está marcado como true
+    });
+  }
+
+  OnMoveAllToSource(event: any) {
+    this.onMoveToSource.emit(event);
+    this.selectedItems = {};
+    this.hideDropOverlay()
+    this.clearPreviewClones();
+  }
+
+  OnMoveAllToTarget(event: any) {
+    this.onMoveToTarget.emit(event);
+    this.selectedItems = {};
+    this.hideDropOverlay()
+    this.clearPreviewClones();
+  }
+
+  OnSourceSelect(event: any) {
+    const selectedItems = this.getSelectedItems();
+  
+    // Primeiro remove todos os previews antigos
+    this.clearPreviewClones();
+  
+    if (selectedItems.length === 0) {
+      this.hideDropOverlay();
+      this.onSourceSelect.emit(event);
+      return;
+    }
+  
+    selectedItems.forEach((item: any, index: number) => {
+      const itemId = item[this.itemIdField];
+  
+      // Se já existe um clone para esse item, não cria novamente
+      if (!document.getElementById('preview_' + itemId)) {
+        const original = document.getElementById('id_pick_list' + itemId);
+        if (original) {
+          const rect = original.getBoundingClientRect();
+          const clone = original.cloneNode(true) as HTMLElement;
+          clone.classList.add('drag-preview-clone');
+          clone.classList.add(`level-${index + 1}`);
+          clone.id = 'preview_' + itemId;
+          document.body.appendChild(clone);
+          this.previewClones.push(clone);
+          this.animateCloneToCursor(clone, rect);
+        }
+      }
+    });
+  
+    this.showDropOverlay();
+    this.onSourceSelect.emit(event);
+  }
+  
+  getItemId(item: any): string {
+    return item?.[this.itemIdField];
+  }
+  
+
+  showDropOverlay() {
+    const selectedInSource = this.source.some(item => this.selectedItems[item[this.itemIdField]]);
+    const selectedInTarget = this.target.some(item => this.selectedItems[item[this.itemIdField]]);
+  
+    let targetListEl: HTMLElement | null = null;
+  
+    if (selectedInSource) {
+      targetListEl = document.querySelector('.p-picklist-target') as HTMLElement;
+      this.dropOverlay.innerText = 'Soltar aqui para mover';
+    } else if (selectedInTarget) {
+      targetListEl = document.querySelector('.p-picklist-source') as HTMLElement;
+      this.dropOverlay.innerText = 'Soltar aqui para retornar';
+    }
+  
+    if (targetListEl) {
+      const wrapper = targetListEl.closest('.p-picklist-list-wrapper') as HTMLElement;
+      if (!wrapper) return;
+  
+      const header = wrapper.querySelector('.p-picklist-header') as HTMLElement | null;
+      const filter = wrapper.querySelector('.p-picklist-filter-container') as HTMLElement | null;
+  
+      const wrapperRect = wrapper.getBoundingClientRect();
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+      const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+  
+      let offsetTop = wrapperRect.top + scrollTop;
+      let totalOffset = 0;
+  
+      if (header) totalOffset += header.offsetHeight;
+      if (filter) totalOffset += filter.offsetHeight;
+  
+      this.dropOverlay.style.top = (offsetTop + totalOffset) + 'px';
+      this.dropOverlay.style.left = (wrapperRect.left + scrollLeft) + 'px';
+      this.dropOverlay.style.width = `${wrapper.offsetWidth}px`;
+      this.dropOverlay.style.height = `${wrapper.offsetHeight - totalOffset}px`;
+      this.dropOverlay.style.display = 'flex'
+
+    }
+  }
+  
+  
+  
+  hideDropOverlay() {
+    if (this.dropOverlay) {
+      this.dropOverlay.style.display = 'none';
+    }
+  }
+  
+  
+  animateCloneToCursor(clone: HTMLElement, originRect: DOMRect) {
+    // Começa exatamente da posição do original
+    let posX = originRect.left;
+    let posY = originRect.top;
+  
+    clone.style.position = 'fixed';
+    clone.style.left = `${posX}px`;
+    clone.style.top = `${posY}px`;
+    clone.style.width = `${originRect.width}px`;
+    clone.style.height = `${originRect.height}px`;
+    clone.style.pointerEvents = 'none';
+  
+    const animate = () => {
+      const dx = this.mouseX - posX;
+      const dy = this.mouseY - posY;
+  
+      posX += dx * 0.15;
+      posY += dy * 0.15;
+  
+      clone.style.left = `${posX}px`;
+      clone.style.top = `${posY}px`;
+  
+      if (document.body.contains(clone)) {
+        requestAnimationFrame(animate);
+      }
+    };
+  
+    animate();
+  }
+  
+  
+
+  OnTargetSelect(event: any) {
+    const selectedItems = this.target.filter(item => {
+      const itemId = item[this.itemIdField];
+      return this.selectedItems[itemId] === true;
+    });
+  
+    // Limpa clones antigos
+    this.clearPreviewClones();
+  
+    if (selectedItems.length === 0) {
+      this.hideDropOverlay();
+      this.onTargetSelect.emit(event);
+      return;
+    }
+  
+    selectedItems.forEach((item: any, index: number) => {
+      const itemId = item[this.itemIdField];
+  
+      if (!document.getElementById('preview_' + itemId)) {
+        const original = document.getElementById('id_pick_list' + itemId);
+        if (original) {
+          const rect = original.getBoundingClientRect();
+          const clone = original.cloneNode(true) as HTMLElement;
+          clone.classList.add('drag-preview-clone');
+          clone.classList.add(`level-${index + 1}`);
+          clone.id = 'preview_' + itemId;
+          document.body.appendChild(clone);
+          this.previewClones.push(clone);
+          this.animateCloneToCursor(clone, rect); 
+        }
+      }
+    });
+  
+    this.showDropOverlay();
+    this.onTargetSelect.emit(event);
+  }
+  
+
+  onSelectAll() {
+    this.selectAllItems(true);
+  }
+
+  selectAllItems(isSelected: boolean) {
+    this.source.forEach(item => {
+      const itemId = item[this.itemIdField];
+      this.selectedItems[itemId] = isSelected;
+    });
+
+    this.target.forEach(item => {
+      const itemId = item[this.itemIdField];
+      this.selectedItems[itemId] = isSelected;
+    });
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    if (event.ctrlKey && event.key === 'a') {
+      event.preventDefault();
+      this.onSelectAll();
+    } else if (event.key === 'Enter') {
+  
+      const sourceSelected = this.picklist.selectedItemsSource;
+  
+      const selectedItemsIds = Object.entries(this.selectedItems)
+        .filter(([_, value]) => value === true)
+        .map(([key, _]) => Number(key));
+  
+      const notInSelected = sourceSelected.find(
+        (item: { [key: string]: any }) =>
+          !selectedItemsIds.includes(item[this.itemIdField])
+      );
+  
+      const indexInSource = this.source.findIndex(
+        (item: { [key: string]: any }) =>
+          item[this.itemIdField] === notInSelected?.[this.itemIdField]
+      );
+  
+      const ultimoItemArray = {
+        item: notInSelected,
+        index: indexInSource,
+      };
+  
+      const selectedIndexInSource = this.source.findIndex((sourceItem: any) =>
+        selectedItemsIds.includes(sourceItem[this.itemIdField])
+      );
+  
+      if (notInSelected === undefined) {
+        const beforeIds = this.ultimoItemSelecionado.map(i => i.item[this.itemIdField]);
+        const afterIds = this.picklist.selectedItemsSource.map(i => i[this.itemIdField]);
+      
+        const removedId = beforeIds.find(id => !afterIds.includes(id));
+      
+      
+        if (removedId != null) {
+          const removedItem = this.source.find(item => item[this.itemIdField] === removedId);
+          if (removedItem) {
+            this.selectCheckBox(removedItem);
+            this.ultimoItemSelecionado = this.ultimoItemSelecionado.filter(
+              (i) => i.item[this.itemIdField] !== removedId
+            );
+          }
+        } else {
+          const enterIds = this.ultimoItemSelecionado.map(i => i.item[this.itemIdField]);
+
+          const selectedItemsIds = Object.entries(this.selectedItems)
+            .filter(([_, value]) => value === true)
+            .map(([key, _]) => Number(key));
+          
+          const clickedIds = selectedItemsIds.filter(id => !enterIds.includes(id));
+          
+          if (clickedIds.length > 0) {
+            const clickedItem = this.source.find(item => item[this.itemIdField] === clickedIds[0]);
+            if (clickedItem) {
+              this.selectCheckBox(clickedItem);
+              this.ultimoItemSelecionado = this.ultimoItemSelecionado.filter(
+                (i) => i.item[this.itemIdField] !== clickedIds[0]
+              );
+            }
+          }
+          
+        }
+      
+        return;
+      }
+      
+      
+  
+      this.selectCheckBox(notInSelected);
+  
+      this.ultimoItemSelecionado = this.ultimoItemSelecionado.filter(
+        (item) => item.index !== indexInSource
+      );
+  
+      this.ultimoItemSelecionado.push(ultimoItemArray);
+  
+    }
+  }
+  
+
+  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 {
+    return this.selectedPreview === item;
+  }
+}

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