keevo-components 2.0.107 → 2.0.109

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

@@ -1,125 +0,0 @@
-<div #chartContainer id="chartContainer" [ngClass]="{ backGround: true }">
-  <div class="div-botoes w-full flex gap-1">
-    <div
-      id="menubar"
-      class="shadow-2 flex justify-content-between align-content-center"
-    >
-      <div class="grid formgrid p-fluid flex-grow-1">
-        <!-- <div #filterContainer class="col-4 grid formgrid p-fluid">
-            <kv-input-text class="col-12" #filtro (onInput)="pesquisar($event)">
-            </kv-input-text>
-          </div>
-
-          @if(filtrosOpt().length > 0) {
- 
-              <div id="filtro-org-chart" [style.width.px]="filterContainer.offsetWidth*0.9">
-
-                @for (opt of filtrosOpt(); track $index) {
-                  <div class="filtro-org-chart-item">
-                    {{ opt.data.name }}
-
-                  </div>
-
-                }
-
-              </div>
-
-          } -->
-
-        <p-dropdown
-          #filter
-          placeholder="Filtrar..."
-          [style]="{
-            height: '30px',
-            'display': 'flex',
-            'align-items': 'center',
-            'margin-left': '15px',
-            'max-width': '95%'
-          }"
-          [filter]="true"
-          [filterFields]="config.filters"
-          [options]="this.dataSource()!"
-          [showClear]="true"
-          (onChange)="centralizarNo($event.value.id)"
-        >
-          <!-- [itemTemplate]="itemTemplate"
-              [selectedItemTemplate]="selectedItemTemplate" -->
-          <!-- [filteredOptions]="this.dataSource()!" -->
-          <!-- [filterFields]="data.name" -->
-
-          <ng-template #itemTemplate let-item pTemplate="item">
-            <ng-container
-              [ngTemplateOutlet]="filterItemTemplate!"
-              [ngTemplateOutletContext]="{ $implicit: item }"
-            />
-          </ng-template>
-
-          <ng-template #selectedItemTemplate let-item pTemplate="selectedItem">
-            <ng-container
-              [ngTemplateOutlet]="filterSelectedItemTemplate!"
-              [ngTemplateOutletContext]="{ $implicit: item }"
-            />
-          </ng-template>
-        </p-dropdown>
-      </div>
-
-      <!-- Actions bar -->
-      <div class="flex gap-1 flex-row flex-grow-0">
-        <div style="width: 30px" class="mr-2">
-          <kv-button
-            (onClick)="chart.expandAll()"
-            class="button-expand-all"
-            [fullWidth]="false"
-            size="small"
-            severity="tertiary"
-            [icon]="'expand_all'"
-            [pTooltip]="'Expandir Todos'"
-          >
-          </kv-button>
-        </div>
-
-        <div style="width: 30px" class="mr-2">
-          <kv-button
-            (onClick)="chart.collapseAll()"
-            class="button-colappse-all"
-            [fullWidth]="false"
-            size="small"
-            severity="tertiary"
-            [icon]="'collapse_all'"
-            [pTooltip]="'Recolher Todos'"
-          >
-          </kv-button>
-        </div>
-
-        <div style="width: 30px" class="mr-2">
-          <kv-button
-            (onClick)="chart.fit().render()"
-            class="button-focus-center"
-            [fullWidth]="false"
-            size="small"
-            severity="primary"
-            [icon]="'center_focus_weak'"
-            [pTooltip]="'Centralizar Organograma'"
-          >
-          </kv-button>
-        </div>
-      </div>
-    </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"
-/>
-
-<div style="display: none">
-  <ng-template #nodeTemplate let-node>
-    <div class="node-content">erro</div>
-  </ng-template>
-</div>

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

@@ -1,73 +0,0 @@
-#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;
-}
-
-
-
-
-
-/* your-component.css */
-:host ::ng-deep .p-organizationChart {
-  overflow: hidden;
-}
-
-svg {
-  width: 100%;
-  height: 100%;
-}
-
-#menubar{
-  width: 100%;
-  padding: 5px;
-  border-radius: 8px;
-  background: #EAEAEA;
-
-
-
-}
-.filtro-input{
-  width: 300px;
-}
-#filtro-org-chart{
-  height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: absolute;
-  top: 40px;
-  left: 8px;
-  background: #ffffff;
-  color: #4b5563;
-  border: 0 none;
-  border-radius: 6px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-}
-
-.filtro-org-chart-item{
-  cursor: pointer;
-  height: 35px;
-  padding: 3px;
-
-  &:hover {
-    background-color: #D9DADB;
-  }
-
-  &:active {
-      background-color: #C0C1C2;
-  }
-}

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

@@ -1,283 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  model,
-  Output,
-  signal,
-  SimpleChanges,
-  TemplateRef,
-  viewChild,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-
-import { OrgChart } from 'd3-org-chart';
-import * as d3 from 'd3';
-
-import OrgChartConfig from '../../api/components/chart/orchart.config';
-import OrgChartNode from '../../api/components/chart/orchartnode';
-import { fromEvent, Subscription } from 'rxjs';
-import { OrgChartService } from '../../api/services/orgchart.service';
-
-import { FilterService } from 'primeng/api';
-import { Dropdown, DropdownModule } from 'primeng/dropdown';
-
-
-@Component({
-  selector: 'kv-orgchart',
-  templateUrl: './kv-orgchart.component.html',
-  styleUrls: ['./kv-orgchart.component.scss'],
-})
-export class KvOrgchartComponent {
-
-
-  chart!: any;
-
-  dataSource = model<OrgChartNode[] | null>(null);
-
-  filtrosOpt = signal<OrgChartNode[]>([]);
-  selectedOpt = null
-
-  @Input() config!: OrgChartConfig;
-  @ViewChild('chartContainer') chartContainer!: ElementRef;
-  @ViewChild('nodeTemplate', { read: ViewContainerRef })
-  viewContainerRef!: ViewContainerRef;
-  @Input() nodeTemplate!: TemplateRef<any>;
-
-  @Input() filterItemTemplate!: TemplateRef<any>;
-  @Input() filterSelectedItemTemplate!: TemplateRef<any>;
-
-
-
-  //#region Emissores de evento
-
-  @Output() onNodeClick = new EventEmitter<any>();
-
-  // #endregion
-
-  compact: boolean = true;
-  mostraMenu: boolean = false;
-
-  constructor(
-    private cdr: ChangeDetectorRef,
-    private service: OrgChartService,
-    private filterService: FilterService
-  ) {}
-
-  //#region Iniciar OrgChart e Atualização de dados
-  ngOnInit(): void {
-    this.iniciarHandlersDeEventos();
-  }
-
-  ngAfterViewInit() {
-    if (!this.chart) {
-      this.chart = new OrgChart();
-    }
-    this.iniciarChart();
-  }
-
-  iniciarChart() {
-    if (!this.dataSource() || !this.chart) {
-      return;
-    }
-
-    const chartContainer = this.chartContainer.nativeElement;
-    this.chart
-      .createZoom(() => {
-        return d3.zoom().filter((e) => {
-          const element: HTMLElement = e.srcElement;
-          if (element.classList.contains('no-zoom')) {
-            return false;
-          }
-          return true;
-        });
-      })
-      .container(chartContainer)
-      .data(this.dataSource())
-      .nodeWidth(() => this.config.cardWidht)
-      .nodeHeight((d: any) => {
-        return d.data.expanded && this.config.cardExpandedHeight
-          ? this.config.cardExpandedHeight
-          : this.config.cardHeight;
-      })
-      .compact(false)
-      .buttonContent(({ node, state }: { node: any; state: any }) => {
-        return `<div style="color:#FFFFFF; border-radius:100%;font-size:5px;margin:auto auto;background-color:#64748B;">
-          <span>
-          ${
-            node.children && node.children.length > 0
-              ? `<i class="material-symbols-outlined">
-              keyboard_arrow_up
-              </i>`
-              : `<i class="material-symbols-outlined">
-              keyboard_arrow_down
-            </i>`
-          }
-          </span>
-            </div>`;
-      })
-      .linkUpdate((node: any, index: any, nodes: any) => {
-        d3.select(nodes[index])
-          .attr('stroke-width', this.config.conectionWidth || '2px')
-          .style('stroke', this.config.connectionColor || '#d6d6d6');
-      })
-      .nodeContent((d: any) => {
-        const node: OrgChartNode = {
-          data: d.data.data,
-          children: d.children,
-          id: d.data.id,
-          parentId: d.data.parentId,
-          expanded: d.data.expanded,
-          orgConfig: d.orgConfig,
-        };
-        const x = this.renderNodeTemplate(node);
-        return x;
-      })
-      .nodeUpdate(function (this: any, d: any) {
-        d.data.orgConfig.clicks.forEach((click: any) => {
-          d3.select(this)
-            .select(click)
-            .on('click', (e, d) => {
-              const dados: any = d;
-              const node: OrgChartNode = {
-                data: dados.data.data,
-                children: dados.children,
-                id: dados.data.id,
-                parentId: dados.data.parentId,
-                expanded: dados.data.expanded,
-                orgConfig: dados.orgConfig,
-              };
-
-              window.dispatchEvent(
-                new CustomEvent('KvOrgChart_NodeClick', {
-                  detail: {
-                    node,
-                    seletor: click,
-                  },
-                })
-              );
-            });
-        });
-      })
-      .defaultFont('Roboto')
-      .render();
-
-    this.chart.expandAll();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['dataSource']) {
-      this.iniciarChart();
-    }
-  }
-  //#endregion
-
-  // #region Renderização de template
-  renderNodeTemplate(node: OrgChartNode): string {
-    this.viewContainerRef.clear();
-    const view = this.viewContainerRef.createEmbeddedView(this.nodeTemplate, {
-      node: node,
-    });
-    this.cdr.detectChanges();
-    return view.rootNodes[0].outerHTML;
-  }
-  // #endregion
-
-  // #region Eventos
-  private nodeClickSubscription!: Subscription;
-  private nodeAddSubscription!: Subscription;
-  private nodeRemoveSubscription!: Subscription;
-
-  iniciarHandlersDeEventos() {
-    this.nodeClickSubscription = fromEvent<CustomEvent>(
-      window,
-      'KvOrgChart_NodeClick'
-    ).subscribe((event: CustomEvent) => {
-      this.emitirClick(event.detail.node, event.detail.seletor);
-    });
-
-    this.nodeAddSubscription = this.service.nodeAdd$.subscribe(
-      (node: OrgChartNode) => {
-        this.adicionarNode(node);
-      }
-    );
-
-    this.nodeRemoveSubscription = this.service.nodeRemove$.subscribe(
-      (id: number) => {
-        this.removerNode(id);
-      }
-    );
-  }
-  ngOnDestroy(): void {
-    this.nodeClickSubscription.unsubscribe();
-    this.nodeAddSubscription.unsubscribe();
-    this.nodeRemoveSubscription.unsubscribe();
-  }
-
-  emitirClick(node: Node, seletorCss?: string) {
-    const event = {
-      node: node,
-      seletorCss: seletorCss ?? '',
-    };
-    this.onNodeClick.emit(event);
-  }
-  adicionarNode(node: OrgChartNode) {
-    const arr = [...this.dataSource()!, node];
-    this.dataSource.set(arr);
-    this.iniciarChart();
-  }
-  removerNode(id: number) {
-    const indPai = this.dataSource()!.some((x: any) => x.parentId == id);
-    if (indPai) {
-      alert('Não é possível remover um nó que possui filhos');
-    } else {
-      const arr = this.dataSource()!.filter((x: any) => x.id != id);
-      this.dataSource.set(arr);
-      this.iniciarChart();
-    }
-  }
-  // #endregion
-
-
-
-  // #region Funções de utilidade
-
-  pesquisar(e: any) {
-    const valor = e.target.value
-    this.filtrosOpt.set(this.filtrarArray(valor)!)
-  }
-
-  filtrarArray(valor: string): OrgChartNode[] | null {
-    if (valor && this.config.filters) {
-      const dataSource = this.dataSource()!;
-      const valorLower = valor.toLowerCase(); // Converte o valor de busca para minúsculas
-
-      const arr = dataSource.filter((node: OrgChartNode) => {
-        return this.config.filters!.every((filter: string) => {
-          // Converte os valores para minúsculas e verifica se contém a string de busca
-          return node.data[filter].toLowerCase().includes(valorLower);
-        });
-      });
-
-      return arr ?? null;
-    } else {
-      return null;
-    }
-  }
-
-  @ViewChild('filter') filter!: Dropdown;
-
-
-  centralizarNo(id: any) {
-    console.log(id)
-    this.chart.setCentered(id).render()
-    this.filter.hide()
-    this.filter.clear()
-  }
-
-
-  // #endregion
-}

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

@@ -1,31 +0,0 @@
-import { kvErrorModule } from './../kv-error/kv-error.module';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { KvOrgchartComponent } from './kv-orgchart.component';
-import { PrimeNgModule } from '../../api/modules/primeng.module';
-import { OrganizationChartModule } from 'primeng/organizationchart';
-import { KvButtonModule } from '../kv-button/kv-button.module';
-import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
-import { AutoCompleteModule } from 'primeng/autocomplete';
-import {  DropdownModule } from 'primeng/dropdown';
-import { FormsModule } from '@angular/forms';
-import { FloatLabelModule } from 'primeng/floatlabel';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PrimeNgModule,
-    FormsModule,
-    kvErrorModule,
-    PrimeNgModule,
-    OrganizationChartModule,
-    KvButtonModule,
-    KvInputsModule,
-    AutoCompleteModule,
-    DropdownModule,
-    FloatLabelModule
-  ],
-  declarations: [KvOrgchartComponent],
-  exports: [KvOrgchartComponent]
-})
-export class KvOrgchartModule { }

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

@@ -1,91 +0,0 @@
-<div
-  [formGroup]="formGroup"
-  class="h-full flex flex-column overflow-hidden relative p-0 m-0"
->
-  <!-- Renderização do form -->
-  <div class="m-0 {{!popup && 'p-3'}} h-full flex-1 overflow-y-auto page-content">
-    <ng-content></ng-content>
-  </div>
-
-  <!-- Divider -->
-  <!-- <p-divider class="col-12"></p-divider> -->
-
-  <!-- Barra de ações -->
-
-  <div
-    class="flex flex-column md:flex-row md:justify-content-end md:align-items-center col-12 gap-2 barra-acoes flex-init border-round-bottom-md p-2"
-    id="barra-acoes"
-  >
-    @if(showMessageCamposObrigatorios) {
-    <span class="w-full text-xs text-gray-500 font-medium">
-      <span class="font-bold">*</span> Preenchimento obrigatório</span>
-    }
-
-    <kv-button
-      *ngIf="showBtnCancel"
-      [label]="txtBtnCancel"
-      [icon]="iconBtnCancel"
-      [disabled]="isSaveLoading"
-      (onClick)="cancel($event)"
-      class="w-full md:w-auto"
-      severity="secondary"
-      type="text"
-    >
-    </kv-button>
-
-    <kv-button
-      *ngIf="actionsCancelToogle && showBtnCancelToogle"
-      [label]="txtBtnCancelToogle"
-      class="w-full md:w-auto"
-      [severity]="'secondary'"
-      type="text"
-      [disabled]="isSaveLoading"
-      [popup]="true"
-      [items]="actionsCancelToogle"
-      iconPosition="left"
-    />
-
-    <kv-button
-      *ngIf="showBtnSecundary"
-      [label]="txtBtnSecundary"
-      [icon]="iconBtnSecundary"
-      [disabled]="isSaveLoading"
-      severity="tertiary"
-      (onClick)="actionSecundary($event)"
-      class="w-full md:w-auto"
-    />
-
-    <kv-button
-      *ngIf="actionsToogle && showBtnToogle"
-      [label]="txtBtnToogle"
-      [icon]="iconBtnToogle"
-      class="w-full md:w-auto"
-      severity="tertiary"
-      [disabled]="isSaveLoading"
-      [popup]="true"
-      [items]="actionsToogle"
-    />
-
-    <kv-button
-      *ngIf="showBtnSave"
-      [label]="txtBtnSave"
-      [icon]="iconBtnSave"
-      [disabled]="disableBtnSave"
-      [loading]="isSaveLoading"
-      (onClick)="save($event)"
-      severity="primary"
-      class="w-full md:w-auto"
-    />
-
-    <kv-button
-      *ngIf="actionsSaveToogle && showBtnSaveToogle"
-      [label]="txtBtnSaveToogle"
-      [icon]="iconBtnSaveToogle"
-      [loading]="isSaveLoading"
-      class="w-full md:w-auto"
-      [severity]="'primary'"
-      [popup]="true"
-      [items]="actionsSaveToogle"
-    />
-  </div>
-</div>

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

@@ -1,100 +0,0 @@
-// ::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: 0.75rem !important;
-}
-
-// ::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;
-// }
-
-::ng-deep .page-content {
-  &::-webkit-scrollbar {
-    width: 6px;
-
-    &: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 {
-  bottom: 0;
-  right: 0;
-  background-color: rgb(255, 255, 255);
-  // z-index: 999;
-}
-
-// #page-form-container {
-//   height: 100% !important;
-//   padding-bottom: 40px;
-// }
-
-// @media screen and (max-width: 768px) {
-//   #page-form-container {
-//     padding-bottom: 100px;
-//   }
-// }