keevo-components 2.0.178 → 2.0.180

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvTagComponent } from './kv-tag.component';
+
+
+
+@NgModule({
+  declarations: [
+    KvTagComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    KvTagComponent
+  ]
+})
+export class KvTagModule { }

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

@@ -0,0 +1,26 @@
+@for (tag of tags(); track $index) {
+<div
+  [class.hover-tag]="hover()"
+  class="kv-tag {{clickable() && 'kv-tag-clickable'}}"
+  [style.color]="color()(tag)"
+  (click)="clickTag(tag)"
+  [style.background]="background()(tag)"
+  style="user-select: none"
+>
+  @if(tag.icon) {
+  <span class="material-symbols-outlined" style="font-size: 0.75rem">
+    {{ tag.icon }}
+  </span>
+  }
+  <span>
+    {{ tag.label }}
+  </span>
+
+  @if(tag.value) {
+  <span
+    class="bg-white border-circle h-1rem w-1rem flex align-items-center justify-content-center"
+    >{{ tag.value }}</span
+  >
+  }
+</div>
+}

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

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+
+.kv-tag{
+    padding: .2rem .5rem;
+    border-radius: 2rem;
+    font-size: 0.7rem;
+    font-weight: 400;
+    width: max-content;
+    flex-wrap: nowrap;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.kv-tag-clickable:hover {
+  cursor: pointer;
+  transition: all ease-in-out 0.2s;
+  opacity: 0.9;
+}
+
+.hover-tag{
+  cursor: pointer;
+  transition: all ease-in-out 0.2s;
+  &:hover{
+    font-size: 0.75rem;
+  }
+}

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

@@ -0,0 +1,67 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { KvSeverity, mapaSeverityColors } from '../kv-filter-cards/kv-filter-cards.component';
+
+@Component({
+  selector: 'kv-tags',
+  standalone: false,
+  templateUrl: './kv-tags.component.html',
+  styleUrl: './kv-tags.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KvTagsComponent {
+
+  tags = input<KvTagConfig[]>()
+
+  hover = input<boolean>(false)
+
+
+  color = computed(() => (tag:{
+    label: string;
+    severity?: KvSeverity;
+    icon?: string;
+  }) => {
+    return mapaSeverityColors[tag.severity || 'info']
+  })
+
+  clickable = input<boolean>(false);
+
+  background = computed(() => (tag: {
+    label: string;
+    severity?: KvSeverity;
+    icon?: string;
+  }) => {
+    return this.getTransparentMix(this.color()(tag), 0.15);
+  });
+
+  borderColor = computed(() => (tag: {
+    label: string;
+    severity?: KvSeverity;
+    icon?: string;
+  }) => {
+    return this.getTransparentMix(this.color()(tag), 0.2);
+  });
+
+
+
+  onClickTag = output<KvTagConfig>();
+
+  clickTag(event: KvTagConfig ){
+    this.onClickTag.emit(event);
+  }
+
+  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})`;
+  }
+
+}
+
+
+export type KvTagConfig = {
+    label: string;
+    severity?: KvSeverity;
+    icon?: string;
+    value?:number;
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvTagsComponent } from './kv-tags.component';
+
+// Importação do componente que será declarado neste módulo
+
+@NgModule({
+  declarations: [
+    KvTagsComponent
+  ],
+  imports: [
+    CommonModule // Importa funcionalidades comuns do Angular
+  ],
+  exports: [
+    KvTagsComponent
+  ]
+})
+export class KvTagsModule { } // Definição do módulo KvFilterCards

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

@@ -0,0 +1,38 @@
+<div class="card h-full">
+    <p-timeline [value]="parsedEvents()" [align]="align" [layout]="layout" styleClass="h-full">
+
+       <ng-template pTemplate="marker" let-event>
+        <span class="material-symbols-outlined" [ngStyle]="{
+            color: event.timelineColor,
+            fontSize: '1.3rem',
+            'font-variation-settings': '\'FILL\' 1, \'wght\' 400, \'GRAD\' 0, \'opsz\' 24'
+        }">
+            {{ event.timelineIcon }}
+        </span>
+        </ng-template>
+
+        <!-- TIMELINE OPPOSITE CONTENT -->
+        <ng-template pTemplate="opposite" let-event>
+            <ng-container
+              *ngTemplateOutlet="oppositeTemplate; context: { $implicit: event }">
+            </ng-container>
+        </ng-template>
+
+        <!-- TIMELINE CONTENT -->
+        <ng-template pTemplate="content" let-event>
+            <ng-container
+                *ngIf="lastContentTemplate && event.isLastRelevant; else defaultContent"
+                [ngTemplateOutlet]="lastContentTemplate"
+                [ngTemplateOutletContext]="{ $implicit: event }">
+            </ng-container>
+
+            <ng-template #defaultContent>
+                <ng-container
+                *ngTemplateOutlet="contentTemplate; context: { $implicit: event }">
+                </ng-container>
+            </ng-template>
+        </ng-template>
+
+
+    </p-timeline>
+</div>

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

@@ -0,0 +1,31 @@
+// :host ::ng-deep .p-timeline-event-opposite:empty {
+//   display: none;
+// }
+
+::ng-deep .p-timeline {
+  height: 100%;
+  overflow-y: auto;
+
+  &::-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);
+  }
+}

package/src/lib/components/kv-timeline/kv-timeline.component.spec.ts

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

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

@@ -0,0 +1,83 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, ContentChild, Input, TemplateRef } from '@angular/core';
+import { TimelineModule } from 'primeng/timeline';
+import { input } from '@angular/core';
+
+type TimelineSeverity = 'in_progress' | 'success' | 'cancelled' | 'error' | 'paused' | 'waiting';
+
+const TIMELINE_SEVERITY_MAP: Record<TimelineSeverity, { timelineIcon: string; timelineColor: string }> = {
+  in_progress: { timelineIcon: 'motion_play', timelineColor: '#0091C2' },
+  success: { timelineIcon: 'check_circle', timelineColor: '#0A8765' },
+  cancelled: { timelineIcon: 'do_not_disturb_on', timelineColor: '#CBD5E1' },
+  error: { timelineIcon: 'motion_photos_paused', timelineColor: '#B91C1C' },
+  paused: { timelineIcon: 'pause_circle', timelineColor: '#E1963D' },
+  waiting: { timelineIcon: 'clock_loader_10', timelineColor: '#0A3A78' }
+};
+
+@Component({
+  selector: 'kv-timeline',
+  standalone: true,
+  imports: [CommonModule, TimelineModule],
+  templateUrl: './kv-timeline.component.html',
+  styleUrl: './kv-timeline.component.scss'
+})
+export class KvTimelineComponent {
+    dataSource = input<any[]>();
+    
+    @Input() getSeverityFn!: (item: any) => TimelineSeverity;
+    @Input() getLastActiveCount?: (dataSource: any[]) => number;
+
+    @Input() lastOnly = false;
+    @Input() align!: string;
+    @Input() layout: 'horizontal' | 'vertical' = 'vertical';
+    @Input() oppositeTemplate!: TemplateRef<any>;
+    @Input() contentTemplate!: TemplateRef<any>;
+    @Input() lastContentTemplate!: TemplateRef<any>;
+
+   parsedEvents = computed(() => {
+      const original = this.dataSource() ?? [];
+
+      if (this.lastOnly) {
+        const reversed = [...original].reverse();
+        const dynamicLastCount =
+          this.getLastActiveCount?.(original) ?? 1;
+
+        const indices = reversed
+          .map((e, i) => ({
+            index: original.length - 1 - i,
+            severity: this.getSeverityFn(e)
+          }))
+          .filter(e => e.severity !== 'success')
+          .slice(0, dynamicLastCount)
+          .map(e => e.index);
+
+        return original.map((item, index, array) => {
+          const severity = indices.includes(index) ? this.getSeverityFn(item) : 'success';
+        const isLastRelevant = index === array.length - 1;
+          const { timelineIcon, timelineColor } = TIMELINE_SEVERITY_MAP[severity];
+
+          return { ...item, index, severity, timelineIcon, timelineColor, isLastRelevant };
+        });
+      }
+
+      return original.map((item, index, array) => {
+        const severity = this.getSeverityFn(item);
+        const { timelineIcon, timelineColor } = TIMELINE_SEVERITY_MAP[severity];
+        const isLastRelevant = index === array.length - 1;
+        return { ...item, index, severity, timelineIcon, timelineColor, isLastRelevant };
+      });
+    });
+
+
+
+    isLastItem(index: number): boolean {
+      const total = this.parsedEvents().length;
+      return index === total - 1;
+    }
+
+    
+    constructor() {
+      
+    }
+
+}

package/src/lib/components/kv-tree-environment/components/kv-tree-environment/kv-tree-environment.component.html

@@ -0,0 +1,57 @@
+<div class="flex flex-column h-full">
+  <div class="flex flex-row gap-2 p-2" [formGroup]="formFiltro">
+    @if(showSearchField()) {
+      <kv-input-text
+        placeholder="Pesquisar..."
+        icon="search"
+        formControlName="search"
+      ></kv-input-text>
+    }
+
+    <kv-button
+      severity="tertiary"
+      class="w-auto"
+      label="Expandir"
+      icon="expand_content"
+      (click)="expandirTodos()"
+    ></kv-button>
+
+    <kv-button
+      severity="tertiary"
+      class="w-auto"
+      label="Recolher"
+      icon="collapse_all"
+      (click)="colapsarTodos()"
+    ></kv-button>
+  </div>
+
+  <div class="pl-2 pb-2 flex-1 w-full flex flex-row items-center gap-2" style="min-height: 0; position: relative;">
+    <cdk-virtual-scroll-viewport class="h-full flex-1" itemSize="40">
+        <ul class="lista-arvore-virtual pr-2 py-2">
+          <no-arvore 
+            *cdkVirtualFor="let no of listaPlana(); trackBy: trackByNode" 
+            [noPlano]="no"
+            [enableSidebar]="enableSidebar()"
+            (noAlternado)="alternarNo($event)"
+            (actionExecuted)="onActionExecuted($event)"
+            (sidebarClick)="abrirSidebarParaNo($event)" />
+        </ul>
+      </cdk-virtual-scroll-viewport>
+
+    @if (sidebarVisible() && enableSidebar()) {
+      <kv-button
+        severity="tertiary"
+        icon="menu"
+        (click)="sidebarVisible.set(false)"
+      ></kv-button>
+    }
+
+    <p-sidebar [visible]="sidebarVisible()" (visibleChange)="sidebarVisible.set($event)" position="right" class="pr-2" [ngStyle]="{'flex': '0.6 1 0%'}" styleClass="w-full">
+      <ng-template pTemplate="headless">
+        @if (sidebarTemplate && currentSidebarNode()) {
+          <ng-container [ngTemplateOutlet]="sidebarTemplate" [ngTemplateOutletContext]="{ $implicit: currentSidebarNode() }"></ng-container>
+        }
+      </ng-template>
+    </p-sidebar>
+  </div>
+</div>

package/src/lib/components/kv-tree-environment/components/kv-tree-environment/kv-tree-environment.component.scss

@@ -0,0 +1,15 @@
+.grid-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+}
+
+.lista-arvore-virtual {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+::ng-deep .p-component-overlay {
+  display: none;
+}

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