keevo-components 2.0.184 → 2.0.185

package/src/lib/components/kv-tree-view/kv-tree-view.component.ts

@@ -0,0 +1,73 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import { TreeNode } from 'primeng/api';
+
+@Component({
+  selector: 'kv-tree-view',
+  templateUrl: './kv-tree-view.component.html',
+  styleUrls: ['./kv-tree-view.component.scss']
+})
+export class KvTreeViewComponent implements OnInit {
+  @Input() selectedFiles: any = [];
+  @Input() selectionMode: any = 'checkbox';
+  @Input() treeViewData!: TreeNode[];
+  @Input() filter: boolean = false;
+  @Input() filterPlaceholder: string = 'Pesquisar...';
+  @Input() scrollheight: string = '';
+
+  @Output() selectedItems: EventEmitter<any> = new EventEmitter();
+
+  initialSelectionVerified = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(): void {
+    if (!this.initialSelectionVerified && this.selectedFiles && this.selectedFiles.length > 2) {
+      this.verifyParentSelection(this.treeViewData);
+      this.initialSelectionVerified = true;
+    }
+  }
+
+  verifyParentSelection(nodes: TreeNode[]) {
+    nodes.forEach((node) => {
+      if (node.children && node.children.length > 0) {
+        const allChildrenSelected = this.areAllDescendantsSelected(node);
+        
+        if (allChildrenSelected) {
+          // Se todos os filhos forem selecionados, seleciona o nó pai
+          this.selectedFiles.push({
+            label: node.label,
+            data: node.data,
+            key: node.key,
+          });
+        }
+
+        // Verifica recursivamente para os filhos
+        this.verifyParentSelection(node.children);
+
+      }
+    });
+  }
+
+  // Função auxiliar para verificar se todos os descendentes de um nó estão selecionados
+  areAllDescendantsSelected(node: TreeNode): boolean {
+    if (!node.children || node.children.length === 0) {
+      return this.selectedFiles.some((selected: any) => selected.key === node.key);
+    }
+
+    return node.children.every(child => this.areAllDescendantsSelected(child));
+  }
+
+  onSelectionChange() {
+    this.selectedItems.emit(this.selectedFiles)
+  }
+}

package/src/lib/components/kv-tree-view/kv-tree-view.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KvTreeViewComponent } from './kv-tree-view.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvTreeViewComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule
+  ],
+  exports: [
+    KvTreeViewComponent
+  ],
+})
+export class KvtreeViewModule { }

package/src/lib/components/kv-widget-card/kv-widget-card.component.html

@@ -0,0 +1,65 @@
+<div 
+    class="flex flex-row gap-4 p-0 card h-full"
+    [style]="{ 'width': 'auto', 'padding': '0 !important' }" 
+  >
+
+    <div
+      style="box-sizing: border-box !important;"
+      class="flex flex-column gap-1 h-auto w-full p-3 border-round-xl card {{severity() ? severity() : ''}}"
+      [ngClass]="{
+        'outline outline-1 outline-offset outline-300': border(),
+      }"
+    >
+      
+      <div class="flex flex-row align-items-center mb-2">
+
+        <kv-icon
+          [icon]="icon()"
+          [severity]="iconSeverity()"
+          [shape]="iconShape()"
+        ></kv-icon>
+
+        <span class="text-lg font-bold text-700" [ngClass]="{ 'ml-auto': icon() }">
+          {{ indicator() }}
+        </span>
+
+      </div>
+
+      <div class="flex flex-row align-items-center gap-3">
+
+        <span class="text-800 text-sm white-space-nowrap">
+          {{ title() }}
+        </span>
+
+        @if(informationMessage()) {
+          <span [style.margin-left]="'auto'" class="material-symbols-outlined text-base text-500" style="transform: translate(0px, 1px)" pTooltip="{{ informationMessage() }}" tooltipPosition="top">
+            info
+          </span>
+        }
+      
+      </div>
+
+      @if(showNavigation()) {
+        <div>
+
+          <button
+            class="border-none bg-transparent cursor-pointer flex align-items-center gap-1 p-0 m-0 hover-btn"
+            [style.padding-left]="'1px !important'"
+            (click)="navigationData().action()"
+          >
+            <span class="text-xs text-500">
+              {{ navigationData().label }}
+            </span>
+
+            <span class="material-symbols-outlined text-xs text-500">
+              {{ navigationData().redirectIcon }}
+            </span>
+
+          </button>
+
+        </div>
+      }
+      
+    </div>
+    
+  </div>

package/src/lib/components/kv-widget-card/kv-widget-card.component.scss

@@ -0,0 +1,50 @@
+@import "../keevo-components-styles.scss";
+
+$system-bg-opacity: 0.1;
+$border-opacity: 0.2;
+
+:host p-card > ::ng-deep .p-card {
+    color: transparent !important;
+    box-shadow: none !important;
+    border-radius: none !important;
+
+    > .p-card-body {
+        padding: 0 !important;
+    }
+}
+
+.outline {
+    outline: solid;
+}
+.outline-1 {
+    outline-width: 1px;
+}
+.outline-offset {
+    outline-offset: -1px;
+}
+.outline-300 {
+    outline-color: rgba(var(--kv-contrast-color), $border-opacity);
+}
+
+.card {
+    &.system {
+        background-color: rgba(var(--kv-color-system), $system-bg-opacity);
+    }
+
+    &.success { 
+        background-color: rgba(var(--kv-primary-color), $system-bg-opacity);
+    }
+
+    &.warning {
+        background-color: rgba(var(--kv-warn-color), $system-bg-opacity);
+    }
+
+    &.danger {
+        background-color: rgba(var(--kv-danger-color), $system-bg-opacity);
+    }
+}
+
+.hover-btn:hover {
+    scale: 1.05;
+    transition: all 0.2s ease-in-out;
+}

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

package/src/lib/components/kv-widget-card/kv-widget-card.component.ts

@@ -0,0 +1,116 @@
+import { Component, input, OnInit } from '@angular/core';
+import * as IconModels from '../kv-icon/kv-icon.model';
+import { CommonModule } from '@angular/common';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvIconModule } from '../kv-icon/kv-icon.module';
+
+export interface KvWidgetCardNavigationModel {
+  label: string;
+  redirectIcon: string;
+  action: () => void;
+}
+
+@Component({
+  selector: 'kv-widget-card',
+  templateUrl: './kv-widget-card.component.html',
+  styleUrls: ['./kv-widget-card.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    KvIconModule
+  ]
+})
+
+/**
+ * Componente para exibição de um card widget.
+ * 
+ * @description
+ * O KvWidgetCardComponent é utilizado para exibir informações resumidas em formato de card,
+ * como indicadores, títulos e mensagens informativas, com opções de navegação e ícones.
+ * 
+ * @example
+ * <kv-widget-card
+ *   [title]="'Tarefas em Atraso'"
+ *   [indicator]="'50'"
+ *   [informationMessage]="'Atraso de 2 dias'"
+ *  [icon]="'info'"
+ *  [iconShape]="'circle'"
+ *  [iconSeverity]="'success'"
+ * >
+ * </kv-widget-card>
+ * 
+ * @publicApi
+ */
+/**
+ * Componente para exibição de cards de widgets.
+ */
+
+
+export class KvWidgetCardComponent {
+  /**
+   * Define o ícone do card.
+   * @required
+   */
+  icon = input.required<string>();
+
+  /**
+   * Define o formato do ícone do card.
+   * @required
+   */
+  iconShape = input.required<'circle' | 'hexagon' | 'square'>();
+
+  /**
+   * Define a cor do ícone do card.
+   * @required
+   */
+  iconSeverity = input.required<'system' | 'warning' | 'danger' | 'success' | 'contrast' | 'info'>();
+
+  /**
+   * Título do card.
+   * @required
+   */
+  title = input.required<string>();
+
+  /**
+   * Define se a navegação do card deve ser exibida.
+   * @default true
+   */
+  showNavigation = input<boolean>(false);
+
+  /**
+   * Define se a borda do card deve ser exibida.
+   * @default false
+   */
+  border = input<boolean>(false);
+
+  /**
+   * Define o background-color do card.
+   * @default true
+   */
+  severity = input<'system' | 'warning' | 'danger' | 'success'>();
+
+  /**
+   * Valor do indicador principal do card.
+   * @default 
+   */
+  indicator = input<number>();
+
+  /**
+   * Mensagem informativa adicional exibida no card.
+   * @default ''
+   */
+  informationMessage = input<string>('');
+
+  /**
+   * Dados de navegação do card, incluindo rótulo, ícone e ação a ser executada.
+   * @default {label: '', redirectIcon: '', action: function que lança erro}
+   */
+  navigationData = input<KvWidgetCardNavigationModel>({
+    label: '',
+    redirectIcon: '',
+    action: function (): void {
+      throw new Error();
+    }
+  });
+}

package/src/lib/components/kv-workspace/empresa/kv-workspace-empresa.component.html

@@ -0,0 +1,22 @@
+<div class="flex flex-column px-2 overflow-y-auto max-h-24rem cards-container gap-1">
+
+  @for(empresa of empresas; track $index) {
+  <div
+    class="grid formgrid flex-row flex-nowrap p-fluid gap-2 p-0 m-0 align-items-center option-box px-1"
+    (click)="selecionarEmpresa(empresa)"
+  >
+    <span class="p-0 col-3 my-2 text-xs text-truncate text-no-wrap">{{
+      mascaraCpfCnpj()(empresa.cpfcnpj)
+    }}</span>
+    <span class="p-0 col-8 text-xs text-truncate text-no-wrap">{{
+      empresa.razaosocial
+    }}</span>
+
+    <div class="p-0 col flex justify-content-end">
+      <div class=" icon-box">
+        <span class="material-symbols-outlined" [style.fontSize]="'1.1rem'">chevron_right</span>
+      </div>
+    </div>
+  </div>
+  }
+</div>

package/src/lib/components/kv-workspace/empresa/kv-workspace-empresa.component.scss

@@ -0,0 +1,36 @@
+.text-no-wrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.option-box {
+  border-bottom: solid 1px #eeeeee;
+  transition: all 0.2s;
+
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgba(var(--kv-color-system), 0.05);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-color-system), 0.125);
+  }
+}
+
+.icon-box {
+  border: 1px solid rgba(var(--kv-color-system), 0.1);
+  border-radius: 0.5rem;
+  // padding: 0.25rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.8;
+  }
+}

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

package/src/lib/components/kv-workspace/empresa/kv-workspace-empresa.component.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  computed,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+@Component({
+  selector: 'kv-workspace-empresa',
+  templateUrl: './kv-workspace-empresa.component.html',
+  styleUrls: ['./kv-workspace-empresa.component.scss', '../workspace/kv-workspace.component.scss']
+})
+export class WorkspaceEmpresaComponent {
+
+  @Input() empresas: any[] = [];
+  @Input() empresaSelecionada!: any;
+  @Input() totalEmpresas: number = 0;
+
+  @Output() onEmpresaSelecionada = new EventEmitter<any>();
+  @Output() onPaginate = new EventEmitter<any>();
+
+  mascaraCpfCnpj = computed(() => (cpfcnpj: string) => {
+    const regexCpf = /^(\d{3})(\d{3})(\d{3})(\d{2})$/;
+    const regexCnpj = /^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/;
+  
+    if (cpfcnpj.length === 11) return cpfcnpj.replace(regexCpf, '$1.$2.$3-$4'); 
+    else if (cpfcnpj.length === 14) return cpfcnpj.replace(regexCnpj, '$1.$2.$3/$4-$5');
+
+    return cpfcnpj; 
+  });
+  
+
+  constructor() { }
+
+  selecionarEmpresa(empresa: any) {
+    this.empresaSelecionada = empresa;
+    this.onEmpresaSelecionada.emit(this.empresaSelecionada);
+  }
+}

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

@@ -0,0 +1,45 @@
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { CommonModule } from '@angular/common';
+
+import {
+    FormsModule,
+    ReactiveFormsModule
+} from '@angular/forms';
+
+import { NgModule } from '@angular/core';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+
+import { WokspaceLogoComponent } from './logo/kv-workspace-logo.component';
+import { WorkspaceComponent } from './workspace/kv-workspace.component';
+import { WorkspaceEmpresaComponent } from './empresa/kv-workspace-empresa.component';
+import { WorkspaceMasterComponent } from './master/kv-workspace-master.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonsModule } from '../kv-buttons/kv-button.module';
+import { KvTableModule } from '../kv-table/kv-table.module';
+import { KvButtonModule } from "../kv-button/kv-button.module";
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+
+@NgModule({
+    declarations: [
+        WorkspaceComponent,
+        WorkspaceEmpresaComponent,
+        WokspaceLogoComponent,
+        WorkspaceMasterComponent
+    ],
+    exports: [
+        WorkspaceComponent
+    ],
+    imports: [
+        CommonModule,
+        PrimeNgModule,
+        ReactiveFormsModule,
+        ProgressSpinnerModule,
+        AutoCompleteModule,
+        FormsModule,
+        KvButtonsModule,
+        KvTableModule,
+        KvButtonModule,
+        KvInputsModule,
+    ]
+})
+export class KvWorkspaceModule { }

package/src/lib/components/kv-workspace/logo/kv-workspace-logo.component.html

@@ -0,0 +1,20 @@
+<div class="field col-12 flex justify-content-center mb-1">
+  <img [src]="logoKeevoCenter" style="width: auto; height: 4rem;" />
+</div>
+
+<div class="col-12 align-items-center z-5">
+  <div class="col-9">
+    Olá, <b>{{ nomeUsuario }}.</b> Bem-vindo(a)!
+  </div>
+
+  @if(!masterSelecionada){
+  <b class="field col-9 flex">
+    Escolha qual workspace você deseja acessar:
+  </b>
+  }
+  @else {
+  <b class="field col-9 flex">
+    Escolha qual empresa você deseja acessar:
+  </b>
+  }
+</div>

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

package/src/lib/components/kv-workspace/logo/kv-workspace-logo.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kv-workspace-logo',
+  templateUrl: './kv-workspace-logo.component.html',
+  styleUrls: ['./kv-workspace-logo.component.scss']
+})
+export class WokspaceLogoComponent implements OnInit {
+
+  @Input() logoKeevoCenter !: string;
+  @Input() nomeUsuario: string = 'Nome do Usuário Logado';
+  @Input() masterSelecionada!: any;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

package/src/lib/components/kv-workspace/master/kv-workspace-master.component.html

@@ -0,0 +1,35 @@
+<div
+  class="grid m-0 border-round-lg gap-2 p-2 {{
+    (this.masters.length > 6 || this.widthScreen() < 992) &&
+      'overflow-y-auto'
+  }} max-h-25rem cards-container"
+>
+  @for(master of this.masters; track $index) {
+  <div
+    class="{{
+      $index % 2 == 0 ? 'sm:col-6 col-12' : 'sm:col col-12'
+    }} p-0 card-option"
+    (click)="selecionarMaster(master)"
+  >
+    <div class="flex flex-column p-3 gap-1">
+      <div class="flex flex-row align-items-center gap-1 font-semibold mb-2">
+        <span class="material-symbols-outlined text-md"> article </span>
+        <span class="text-sm">{{ master.idmaster }}</span>
+      </div>
+
+      <span style="word-break: break-word font-medium" class="text-sm">{{
+        transformRazaoSocial()(master.nome)
+      }}</span>
+
+      <div class="flex flex-row align-items-center gap-1 font-semibold">
+        <span class="text-xs">{{
+          isEmpresa()(master.cpfcnpj) ? "CNPJ:" : "CPF:"
+        }}</span>
+        <span class="text-xs">{{ transformCpfCnpj()(master.cpfcnpj) }}</span>
+      </div>
+    </div>
+  </div>
+  } @if(this.masters.length == 0) {
+  <p>{{ emptyText() }}</p>
+  }
+</div>

package/src/lib/components/kv-workspace/master/kv-workspace-master.component.scss

@@ -0,0 +1,29 @@
+.card-option {
+    // background-color: #F8FAFD;
+  background-color: white;
+  border-radius: 0.5rem;
+  border: 1px solid #eaeaea;
+  height: 7.5rem;
+  overflow: hidden;
+
+  transition: all 0.2s ease-in-out;
+
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid #581999;
+    background-color: rgba(208, 179, 221, 0.3);
+
+    span {
+      color: #581999;
+    }
+  }
+
+  &:active {
+    background-color: rgba(208, 179, 221, 0.6);
+  }
+}
+
+span {
+  color: #64748b;
+}