keevo-components 2.0.107 → 2.0.108

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

@@ -1,461 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,38 +0,0 @@
-<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

@@ -1,128 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-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();
-  });
-});