keevo-components 2.0.106 → 2.0.107

package/src/lib/components/kv-filter-cards/kv-filter-cards.component.ts

@@ -0,0 +1,150 @@
+import { NgClass, CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input, model, output, signal } from '@angular/core';
+
+@Component({
+  selector: 'kv-filter-cards',
+  templateUrl: `./kv-filter-cards.component.html`,
+  styleUrl: './kv-filter-cards.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KvFilterCardsComponent {
+
+  // Lista de cards de filtro, cada um com um ícone e valor específico
+  cards = input<KvFilterCardConfig[]>()
+
+  staticCards = input<boolean>(false);
+
+  cursorPointer = input<boolean>(true);
+
+
+  selectedCards = model<KvFilterCardConfig[] | number[]>([]);
+
+  selectedCardsTratado = computed(() => {
+    const cardsSelecionados = this.selectedCards();
+    const cards = this.cards() ?? [];
+
+    if (!cardsSelecionados || cardsSelecionados.length === 0) return [];
+
+    // Se for array de number, converte
+    if (typeof cardsSelecionados[0] === 'number') {
+      return cards.filter(c => (cardsSelecionados as number[]).includes(c.id));
+    }
+
+    // Já é array de objeto
+    return cardsSelecionados as KvFilterCardConfig[];
+  });
+
+
+
+
+  loadingCards = input<boolean>(false);
+
+  // Define se os cards devem ser exibidos em uma linha ou coluna
+  wrapCards = input<boolean>(false);
+
+  // Define se os cards devem ser centralizados
+  alignCardsCenter = input<boolean>(false);
+
+  onCardClick = output<KvFilterCardConfig>();
+
+  color = computed(() => (card: KvFilterCardConfig) => {
+    const color = mapaSeverityColors[card.severity];
+    return color ? color : mapaSeverityColors.primary;
+  });
+
+  mixedColor = computed(() => (card: KvFilterCardConfig) => {
+    return this.getTransparentMix(this.color()(card))
+  });
+
+
+  private getTransparentMix(baseHex: string, opacity: number = 0.3): string {
+    const r = parseInt(baseHex.slice(1, 3), 16);
+    const g = parseInt(baseHex.slice(3, 5), 16);
+    const b = parseInt(baseHex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+
+
+
+  handleCardClick(card: KvFilterCardConfig) {
+    this.onCardClick.emit(card);
+
+    this.selectedCards.update((raw) => {
+      let selected: KvFilterCardConfig[];
+
+      // Se vier como number[], converter usando this.cards()
+      if (typeof raw[0] === 'number') {
+        const allCards = this.cards() ?? [];
+        selected = allCards.filter(c => (raw as number[]).includes(c.id));
+      } else {
+        selected = raw as KvFilterCardConfig[];
+      }
+
+      const exists = selected.some(c => c.id === card.id);
+      const updated = exists
+        ? selected.filter(c => c.id !== card.id)
+        : [...selected, card];
+
+      return updated;
+    });
+
+  }
+
+
+  verificarSeCardEstaSelecionado(card: KvFilterCardConfig): boolean {
+    return this.selectedCardsTratado()?.find(c => c.id === card.id) !== undefined;
+  }
+
+  getColorFillPolygon(card: KvFilterCardConfig): string {
+
+    if (this.staticCards()) {
+      return 'var(--main-color)';
+    }
+
+    if (!this.selectedCardsTratado()?.includes(card)) {
+      return 'color-mix(in srgb, var(--mixed-color) 20%, white 80%)';
+    } else {
+      return 'var(--main-color)';
+    }
+
+  }
+
+
+  getColorIconPolygon(card: KvFilterCardConfig): string {
+    if (this.staticCards()) {
+      return 'white';
+    }
+
+    if (!this.selectedCardsTratado()?.includes(card)) {
+      return 'var(--main-color)';
+    } else {
+      return 'white';
+    }
+  }
+
+}
+
+
+export type KvSeverity = 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'danger';
+
+export const mapaSeverityColors: Record<KvSeverity, string> = {
+  primary: '#0A8765',    // Verde
+  secondary: '#0A3A78',  // Azul escuro
+  tertiary: '#778599',   // Cinza
+  info: '#0091C2',       // Azul claro
+  warning: '#E1963D',    // Amarelo
+  danger: '#B91C1C',     // Laranja
+};
+
+
+
+export type KvFilterCardFormato = 'int' | 'currency' | 'percent' | 'decimal' | 'text' | 'date';
+export type KvFilterCardConfig = {
+  id: number;
+  severity: KvSeverity;
+  titulo: string;
+  icon: string;
+  valor?: number | string | undefined | null;
+  formato?: KvFilterCardFormato;
+
+}

package/src/lib/components/kv-filter-cards/kv-filter-cards.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFilterCardsComponent } from './kv-filter-cards.component';
+import { KvFilterCardsFormatterPipe } from './kv-filter-cards.pipe';
+
+// Importação do componente que será declarado neste módulo
+
+@NgModule({
+  declarations: [
+    KvFilterCardsComponent, // Declaração do componente KvFilterCards
+    KvFilterCardsFormatterPipe
+  ],
+  imports: [
+    CommonModule // Importa funcionalidades comuns do Angular
+  ],
+  exports: [
+    KvFilterCardsComponent // Exporta o componente para uso externo
+  ]
+})
+export class KvFilterCardsModule { } // Definição do módulo KvFilterCards

package/src/lib/components/kv-filter-cards/kv-filter-cards.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'kvFilterCardsFormatter' })
+export class KvFilterCardsFormatterPipe implements PipeTransform {
+  transform(value: number | string | null | undefined, formato?: string): string {
+    if (value == null) return '';
+
+    switch (formato) {
+      case 'currency':
+        return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(value));
+      case 'percent':
+        return `${(Number(value) * 100).toFixed(0)}%`;
+      case 'decimal':
+        return new Intl.NumberFormat('pt-BR').format(Number(value));
+      case 'int':
+        return `${Math.round(Number(value))}`;
+      case 'date':
+        return new Intl.DateTimeFormat('pt-BR').format(new Date(value));
+      case 'text':
+      default:
+        return value.toString();
+    }
+  }
+}

package/src/lib/components/kv-filter-fieldset/kv-filter-fieldset.component.html

@@ -0,0 +1,25 @@
+<p-fieldset styleClass="p-0 mb-2">
+  <ng-template pTemplate="header">
+    @if(isExpandable) {
+    <div
+      class="flex flex-row align-items-center justify-content-center {{
+        isExpandable && 'cursor-pointer'
+      }}"
+      (click)="toggleField()"
+    >
+      <span
+        class="material-symbols-outlined flex align-items-center justify-content-center mr-1"
+        style="font-size: 1.2rem"
+      >
+        {{ isCollapsed ? "remove" : "add" }}
+      </span>
+
+      <span class="text-xs"> Filtros </span>
+    </div>
+    } @if(!isExpandable) {
+    <span class="text-xs"> Filtros </span>
+    }
+  </ng-template>
+
+  <ng-content></ng-content>
+</p-fieldset>

package/src/lib/components/kv-filter-fieldset/kv-filter-fieldset.component.scss

@@ -0,0 +1,22 @@
+::ng-deep .p-fieldset .p-fieldset-legend {
+  padding: 0.1rem 0.1rem 0rem 0.1rem !important;
+  // padding-top: 0rem;
+  margin-left: 1rem;
+}
+
+::ng-deep .p-fieldset .p-fieldset-legend {
+  background-color: white;
+  border: none;
+
+  &:hover {
+    background-color: rgb(245, 245, 245);
+  }
+
+  &:active {
+    background-color: rgb(224, 224, 224);
+  }
+}
+
+::ng-deep .p-fieldset .p-fieldset-content {
+  padding: 0 0.5rem 0.5rem 0.5rem;
+}

package/src/lib/components/kv-filter-fieldset/kv-filter-fieldset.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvFilterFieldsetComponent } from './kv-filter-fieldset.component';
+
+describe('KvFilterFieldsetComponent', () => {
+  let component: KvFilterFieldsetComponent;
+  let fixture: ComponentFixture<KvFilterFieldsetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KvFilterFieldsetComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(KvFilterFieldsetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-filter-fieldset/kv-filter-fieldset.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'kv-filter-fieldset',
+  standalone: false,
+  templateUrl: './kv-filter-fieldset.component.html',
+  styleUrl: './kv-filter-fieldset.component.scss',
+})
+export class KvFilterFieldsetComponent {
+  @Input() isExpandable: boolean = true;
+
+  @Output() collapsedEvent: EventEmitter<boolean> = new EventEmitter();
+
+  isCollapsed = false;
+
+  toggleField() {
+    this.isCollapsed = !this.isCollapsed;
+    this.collapsedEvent.emit(this.isCollapsed);
+  }
+}

package/src/lib/components/kv-filter-fieldset/kv-filter-fieldset.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFilterFieldsetComponent } from './kv-filter-fieldset.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+
+
+@NgModule({
+  declarations: [
+    KvFilterFieldsetComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule
+  ],
+  exports: [
+    KvFilterFieldsetComponent
+  ]
+})
+export class KvFilterFieldsetModule { }

package/src/lib/components/kv-g-icon/kv-g-icon.component.html

@@ -0,0 +1 @@
+<span class="material-symbols-outlined select-none"><ng-content></ng-content></span>

package/src/lib/components/kv-g-icon/kv-g-icon.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvGIconComponent } from './kv-g-icon.component';
+
+describe('KvGIconComponent', () => {
+  let component: KvGIconComponent;
+  let fixture: ComponentFixture<KvGIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KvGIconComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(KvGIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-g-icon/kv-g-icon.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'kv-g-icon', 
+  templateUrl: './kv-g-icon.component.html',
+  styleUrl: './kv-g-icon.component.scss'
+})
+export class KvGIconComponent {
+
+}

package/src/lib/components/kv-g-icon/kv-g-icon.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvGIconComponent } from './kv-g-icon.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [KvGIconComponent],
+  imports: [CommonModule,PrimeNgModule],
+  exports: [KvGIconComponent],
+})
+export class KvGIconModule {}

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

@@ -0,0 +1,35 @@
+<div class="p-card flex-auto flex flex-column h-full  {{ borderCalss }}">
+  <div class="h-auto">
+    <div class="h-auto flex flex-row justify-content-between formgrid grid p-fluid p-2 ml-2">
+      <div class="h-full flex align-items-center justify-content-start w-auto">
+        <span class="text-base font-bold">
+          {{ titulo }}
+          <div class="marcador-titulo"></div>
+        </span>
+      </div>
+
+      <div class=" h-full ml-3 mr-3 flex flex-row lex-grow-1 gap-2 justify-content-end flex-grow-1 z-5"
+      >
+        @if (headerTemplate) {
+        <ng-container class="flex-grow-1" [ngTemplateOutlet]="headerTemplate">
+        </ng-container>
+        }
+
+        <div class="w-auto">
+          @for (item of headerActions; track $index) {
+
+          <kv-button
+            [icon]="item.icon || 'add'"
+            [severity]="item.severity || 'primary'"
+            (onClick)="item?.command($event)"
+          />
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex-grow-1" [style.overflow-y]="contentOverflow">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+.marcador-titulo{
+  background-color: #1C801F;
+  width: 100%;
+  height: 3px;
+}

package/src/lib/components/kv-home-card/kv-home-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvHomeCardComponent } from './kv-home-card.component';
+
+describe('KvHomeCardComponent', () => {
+  let component: KvHomeCardComponent;
+  let fixture: ComponentFixture<KvHomeCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KvHomeCardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(KvHomeCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { ActionItem } from '../../api/components/table/action-item';
+
+@Component({
+  selector: 'kv-home-card',
+  templateUrl: './kv-home-card.component.html',
+  styleUrl: './kv-home-card.component.scss'
+})
+export class KvHomeCardComponent {
+
+  /**
+   * Titulo do card
+   * @type  {string}
+   */
+  @Input() titulo!: string;
+
+
+  /**
+   * Aarray de ações exibidas no header do modal. (recomendo no maximo 3)
+   * @type  {ActionItem[]}
+   */
+  @Input() headerActions!: ActionItem[];
+
+
+  /**
+   * Template que sera exibido do lado do titulo (entre os botões e o titulo)
+   * @type  {TemplateRef}
+   */
+  @Input() headerTemplate!: TemplateRef<any>;
+
+  @Input() borderCalss: any = 'border-round-xl';
+  @Input() contentOverflow: string = 'none';
+}

package/src/lib/components/kv-home-card/kv-home-card.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvHomeCardComponent } from './kv-home-card.component';
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+
+@NgModule({
+  declarations: [KvHomeCardComponent],
+  imports: [
+    CommonModule,
+    KvInputsModule,
+    PrimeNgModule,
+    KvButtonModule
+  ],
+  exports: [KvHomeCardComponent]
+})
+export class KvHomeCardModule { }

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

@@ -0,0 +1,13 @@
+<div class="main-container">
+
+  <div class="shape-icon {{ shape() }} {{ severity() }}">
+
+    @if(icon()) {
+      <span class="material-symbols-outlined text-white">
+        {{ icon() }}
+      </span>
+    }
+  
+  </div>
+  
+</div>

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

@@ -0,0 +1,69 @@
+@import "../keevo-components-styles.scss";
+
+:host * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.main-container {
+    height: auto;
+}
+
+.shape-icon {
+
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    container-type: inline-size;
+    container-name: shape-container;
+
+    width: 2.35rem;
+    height: 2.35rem;
+
+    // Cores de fundo
+    &.system{
+        background-color: rgba(var(--kv-color-system),1);
+    }
+
+    &.success {
+        background-color: rgba(var(--kv-success-color),1);
+    }
+
+    &.info {
+        background-color: rgba(var(--kv-info-color),1);
+    }
+
+    &.warning {
+        background-color: rgba(var(--kv-warn-color), 1);
+    }
+
+    &.danger {
+        background-color: rgba(var(--kv-danger-color), 1);
+    }
+
+    &.contrast {
+        background-color: rgba(var(--kv-contrast-color), 1);
+    }
+
+    // Formas
+    &.circle {
+        border-radius: 50%;
+    }
+
+    &.square {
+        border-radius: 20%;
+    }
+
+    &.hexagon {
+        clip-path: polygon(50% 0%, 95.5% 27.67%, 95.5% 70.1%, 50% 100%, 4.5% 70.1%, 4.5% 27.67%);
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+
+    .material-symbols-outlined {
+        font-size: 70cqi !important;
+    }
+
+}

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

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

@@ -0,0 +1,30 @@
+import { Component, input, OnInit } from '@angular/core';
+import { severityColorActive } from '../../api/helpers/severity-color';
+import * as IconModels from './kv-icon.model';
+
+/**
+ * Componente para exibição de ícones na aplicação.
+ * 
+ * O componente `kv-icon` permite renderizar ícones baseados no modelo fornecido.
+ * 
+ * @example
+ * ```html
+ * <kv-icon [icon]="'info'" [severity]="'system'" [shape]="'circle'"></kv-icon>
+ * ```
+ * 
+ * @input icon - Define o ícone a ser exibido.
+ * @input shape - Define a forma do ícone (opções: 'circle', 'hexagon', 'square').
+ * @input severity - Define a severidade do ícone (opções: 'system', 'warning', 'danger', 'success').
+ */
+@Component({
+  selector: 'kv-icon',
+  templateUrl: './kv-icon.component.html',
+  styleUrls: ['./kv-icon.component.scss']
+})
+export class KvIconComponent {
+
+  icon = input.required<string>();
+  shape = input.required<'circle' | 'hexagon' | 'square'>();
+  severity = input.required<'system' | 'warning' | 'danger' | 'success' | 'contrast' | 'info'>();
+
+}

package/src/lib/components/kv-icon/kv-icon.model.ts

@@ -0,0 +1,3 @@
+export type IconShapes = 'circle' | 'square' | 'hexagon';
+export type IconSizes = 'small' | 'medium' | 'large';
+export type IconSeverities = 'system'| 'success' | 'info' | 'warn' | 'danger' | 'contrast';

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvIconComponent } from './kv-icon.component';
+
+@NgModule({
+    declarations: [
+        KvIconComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        KvIconComponent
+    ]
+})
+export class KvIconModule { }