keevo-components 1.8.126 → 1.8.127

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

@@ -0,0 +1,37 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  TemplateRef
+} from '@angular/core';
+
+@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 {
+  @Input() breakpoint: string = "1400px"; // Define a largura da tela na qual o componente deve alterar seu comportamento responsivo.
+  @Input() dragdrop: boolean = true; // Ativa/Desativa o arrasta e solta
+  @Input() filterBy!: string; // Campo de filtro nas listas.
+  @Input() itemTemplate!: TemplateRef<any>; // Como as listas são dinâmicas, obrigatoriamente um template deve ser informado para exibir os itens das listas
+  @Input() responsive: boolean = true; // Ativa/Desativa a responsividade automática
+  @Input() source!: any[]; // Lista de origem
+  @Input() sourceHeader: string = 'Título da lista de origem';
+  @Input() sourceStyle!: any; // Estilização da lista de origem
+  @Input() stripedRows: boolean = false; // Ativa/Desativa linhas com cores alternadas ("zebradas")
+  @Input() target!: any[]; // Lista de destino (Itens selecionados)
+  @Input() targetHeader: string = 'Título de lista de destino';
+  @Input() targetStyle!: any; // Estilização da lista de destino
+  @Input() showSourceControls: boolean = true; // Exibir controls da lista de origem
+  @Input() showTargetControls: boolean = true; // Exibir controls da lista de destino
+
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

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

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from "@angular/core";
+
+import { KvPickListComponent } from './kv-pick-list.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvPickListComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+  ],
+  exports: [
+    KvPickListComponent
+  ]
+})
+export class KvPickListModule { }

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.html

@@ -0,0 +1,38 @@
+<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' }"
+>
+    <div 
+        *ngIf="mode === 'determinate'" 
+        class="p-progressbar-value p-progressbar-value-animate {{barStyleClass}}" 
+        [style.width]="maxValue&&value? (value/maxValue*100)+'%' : value+'%'" 
+        style="display:flex" 
+        [style.background]="color" 
+        [attr.data-pc-section]="'value'"
+    >
+        <div 
+            class="p-progressbar-label {{labelStyleClass}}" 
+            [style.display]="value != null && value !== 0 ? 'flex' : 'none'" 
+            [attr.data-pc-section]="'label'"
+        >
+            <label *ngIf="showValue && maxValue">
+                {{value}}/{{maxValue}}               
+            </label>
+            <label *ngIf="showValue && !maxValue">
+                {{value}}%
+            </label>
+            <label *ngIf="showLabel">{{label}}</label>
+            
+        </div>
+    </div>
+    <div *ngIf="mode === 'indeterminate'" 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

@@ -0,0 +1,110 @@
+@layer primeng {
+    .p-progressbar {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .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 {
+        display: inline-flex;
+    }
+
+    .p-progressbar-determinate .p-progressbar-value-animate {
+        transition: width 1s ease-in-out;
+    }
+
+    .p-progressbar-indeterminate .p-progressbar-value::before {
+        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 {
+        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

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

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.ts

@@ -0,0 +1,79 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+
+@Component({
+  selector: 'kv-progress-bar',
+  templateUrl: './kv-progress-bar.component.html',
+  styleUrls: ['./kv-progress-bar.component.scss']
+})
+export class ProgressBarComponent {
+  /**
+       * Current value of the progress.
+       * @group Props
+       */
+  @Input() value: number | undefined;
+
+  /**
+       * Max value of the progress.
+       * @group Props
+       */
+  @Input() maxValue: number | undefined;
+
+  /**
+     * Label value of the progress.
+     * @group Props
+     */
+  @Input() label: string | undefined;
+
+  /**
+    * Whether to display the progress bar value.
+    * @group Props
+    */
+  @Input() showValue: boolean = true;
+  /**
+    * Whether to display the progress bar value.
+    * @group Props
+    */
+  @Input() showLabel: boolean = true;
+  /**
+    * Class of the element.
+    * @group Props
+    */
+  @Input() styleClass: string | undefined;
+
+  /**
+    * Class of the element.
+    * @group Props
+    */
+  @Input() labelStyleClass: string | undefined;
+
+  /**
+    * Class of the element.
+    * @group Props
+    */
+  @Input() barStyleClass: string | undefined;
+
+  /**
+    * Inline style of the element.
+    * @group Props
+    */
+  @Input() style: { [klass: string]: any } | null | undefined;
+  /**
+    * Unit sign appended to the value.
+    * @group Props
+    */
+  @Input() unit: string = '%';
+  /**
+    * Defines the mode of the progress
+    * @group Props
+    */
+  @Input() mode: string = 'determinate';
+  /**
+    * Color for the background of the progress.
+    * @group Props
+    */
+  @Input() color: string | undefined;
+
+}

package/src/lib/components/kv-progress-bar/kv-progress-bar.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { ProgressBarComponent as KvProgressBarComponent } from './kv-progress-bar.component';
+import { PrimeNgModule } from '../../../public-api';
+
+@NgModule({
+  declarations: [
+    KvProgressBarComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+  ],
+  exports: [
+    KvProgressBarComponent
+  ]
+})
+export class KvProgressBarModule { }

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

@@ -0,0 +1,12 @@
+<div class='container'>
+  <div class="voltar">
+    <p-button
+      pRipple
+      label="Voltar"
+      icon="pi pi-angle-left"
+      styleClass="p-button-success"
+      (click)="close()">
+    </p-button>
+  </div>
+  <div id='viewer'></div>
+</div>

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

@@ -0,0 +1,21 @@
+:host {
+    display: block;
+    height: 100%;
+  }
+  
+  .container {
+    height: 100%;
+    margin: 10px;
+  
+    .viewer {
+      height: 100%;
+    }
+  
+    .voltar {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      margin: 0 0 15px 10px;
+    }
+  }
+  

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

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

@@ -0,0 +1,50 @@
+import { AfterViewInit, EventEmitter, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+
+declare var Stimulsoft: any;
+
+@Component({
+  selector: 'kv-report',
+  templateUrl: './kv-report.component.html',
+  styleUrls: ['./kv-report.component.scss']
+})
+export class KvReportComponent implements OnInit, AfterViewInit {
+
+  stiViewer = new Stimulsoft.Viewer.StiViewer(undefined, 'StiViewer', false);
+  stiReport = new Stimulsoft.Report.StiReport();
+
+  @Output() onClose: EventEmitter<any> = new EventEmitter();
+
+  @Input() dataReport: any;
+  @Input() dataReportAlias: string = 'root';
+  @Input() dataReportName: string = 'root';
+  @Input() report: any;
+  @Input() stimulSoftLocalizationFile!: string;
+  @Input() stimulSoftLicenseKey!: string;
+
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    this.stiReport.load(this.report);
+    this.stiReport.dictionary.databases.clear();
+    this.stiReport.regData(this.dataReportAlias, this.dataReportName, this.dataReport);
+
+    this.stiViewer.report = this.stiReport;
+    this.stiViewer.renderHtml('viewer');
+  }
+
+  ngOnInit() {
+
+    if (this.stimulSoftLocalizationFile) {
+      const locName = 'Português (PT-BR)';
+      Stimulsoft.Base.Localization.StiLocalization.addLocalizationFile(this.stimulSoftLocalizationFile, false, locName);
+      Stimulsoft.Base.Localization.StiLocalization.cultureName = locName;
+    }
+
+    Stimulsoft.Base.StiLicense.key = this.stimulSoftLicenseKey;
+  }
+
+  close() {
+    this.onClose.emit();
+  }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from "@angular/core";
+
+import { PrimeNgModule } from "../../api/modules/primeng.module";
+import { KvReportComponent } from "./kv-report.component";
+
+@NgModule({
+    declarations: [
+      KvReportComponent
+    ],
+    imports: [
+      PrimeNgModule
+      
+    ],
+    exports:[
+      KvReportComponent
+    ]
+  })
+  export class KvReportModule { }

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

@@ -0,0 +1,44 @@
+<p-stepper [activeStep]="activeStep" [orientation]="orientation" [linear]="linear" (activeStepChange)="onActiveStepChange($event)">
+    <ng-container *ngFor="let panel of panels; let i = index">
+      <p-stepperPanel [header]="panel.header">
+        <ng-template pTemplate="content" let-nextCallback="nextCallback" let-prevCallback="prevCallback">
+          <div class="flex flex-column h-12rem">
+            <div class="content-panel">
+              <ng-container *ngComponentOutlet="panel.contentTemplate"></ng-container>
+            </div>
+          </div>
+          <div class="flex pt-4" [ngClass]="{'justify-content-between': panel.id !== 0, 'justify-content-end': panel.id === 0, 'justify-content-start': orientation === 'vertical'}">
+            <button
+            *ngIf="panel.id !== 0"
+            pButton
+            pRipple
+            class="btn-secondary border-300"
+            [icon]="'pi pi-arrow-left'"
+            [label]="'Back'"
+            (click)="prevCallback.emit()">
+            </button>
+            <button
+            *ngIf="panel.id !== panels.length - 1"
+            pButton
+            pRipple
+            class="btn-success border-green-500"
+            [icon]="'pi pi-arrow-right'"
+            [label]="'Next'"
+            (click)="nextCallback.emit()"
+            iconPos="right">
+            </button>
+            <button
+            *ngIf="btnConcluir && panel.id === panels.length - 1"
+            pButton
+            pRipple
+            class="btn-success border-green-500"
+            [label]="'Concluir'"
+            (click)="concluirCallback.emit()"
+            iconPos="right">
+            </button>
+          </div>
+        </ng-template>
+      </p-stepperPanel>
+    </ng-container>
+  </p-stepper>
+  

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

@@ -0,0 +1,41 @@
+.kv-stepper {
+    display: flex;
+    flex-direction: column;
+}
+
+:host ::ng-deep .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+  background-color: #002542;
+  color: #fff;
+}
+
+:host ::ng-deep .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+  background-color: #002542;
+}
+
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+  height:35px;
+
+  &:hover {
+    background-color: #229925 !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+.btn-secondary {
+  background-color: #f2f3f5 !important;
+  color: rgba(0, 0, 0, .87) !important;
+  height:35px;
+
+  &:hover {
+    background-color: #d8d9db !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}

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

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

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

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, Output, ContentChildren, QueryList, TemplateRef, Type } from '@angular/core';
+
+@Component({
+  selector: 'kv-stepper',
+  templateUrl: './kv-stepper.component.html',
+  styleUrls: ['./kv-stepper.component.scss']
+})
+
+export class KvStepperComponent {
+  @Input() panels: KvStepperPanel[] = [];
+  @Input() activeStep: number = 0;
+  @Input() orientation: 'vertical' | 'horizontal' = 'horizontal';
+  @Input() linear: boolean = false;
+  @Input() btnConcluir: boolean = true;
+  
+  @Output() activeStepChange = new EventEmitter<number>();
+  @Output() concluirCallback = new EventEmitter<void>();
+
+  onActiveStepChange(step: number) {
+    this.activeStep = step;
+    this.activeStepChange.emit(step);
+  }
+
+  assignIdsToPanels() {
+    this.panels.forEach((panel, index) => {
+      panel.id = index;
+    });
+  }
+
+  constructor() {
+    this.assignIdsToPanels();
+  }
+
+}
+
+export interface KvStepperPanel {
+  id: number;
+  header: string;
+  contentTemplate: Type<any>;
+}
+

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

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