keevo-components 2.0.105 → 2.0.107

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

@@ -0,0 +1,75 @@
+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: 'determinate' | 'indeterminate' = '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-progress-bar-alternative/kv-progress-bar-alternative.component.html

@@ -0,0 +1,43 @@
+<div
+  role="progressbar"
+  [class]="styleClass ? styleClass : ''"
+  [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'
+  }"
+  [style.--progress-bar-height]="progressBarHeight"
+>
+  @if(mode === 'determinate') {
+  <div
+    class="p-progressbar-value p-progressbar-value-animate {{
+      barStyleClass
+    }} font-semibold"
+    [style.width]="
+      maxValue && value ? (value / maxValue) * 100 + '%' : value + '%'
+    "
+    [attr.data-pc-section]="'value'"
+  ></div>
+
+  <div
+    class="p-progressbar-label {{ labelStyleClass }} w-full"
+    [attr.data-pc-section]="'label'"
+  ></div>
+  } @if(mode === 'indeterminate') {
+  <div
+    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-alternative/kv-progress-bar-alternative.component.scss

@@ -0,0 +1,130 @@
+@layer primeng {
+    .p-progressbar {
+      background-color: #CBD5E1 !important;
+      position: relative;
+      overflow: hidden;
+      height: var(--progress-bar-height, 0.3rem);
+    }
+  
+    .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 {
+      font-size: 0.750rem;
+      color: white !important;
+      font-weight: 400;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  
+    .p-progressbar-determinate .p-progressbar-value-animate {
+      background-color: #002542 !important;
+      transition: width 1s ease-in-out;
+      border-radius: 0.2rem;
+    }
+  
+    .p-progressbar-indeterminate .p-progressbar-value::before {
+      background-color: #002542 !important;
+      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 {
+      background-color: #002542 !important;
+      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-alternative/kv-progress-bar-alternative.component.spec.ts

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

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

@@ -0,0 +1,82 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'kv-progress-bar-alternative',
+  standalone: false,
+  templateUrl: './kv-progress-bar-alternative.component.html',
+  styleUrl: './kv-progress-bar-alternative.component.scss'
+})
+export class KvProgressBarAlternativeComponent {
+  
+  /**
+   * 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.
+   * @deprecated Use label instead.
+   * @group Props
+   */
+  @Input() label: string | undefined;
+
+  /**
+   * Whether to display the progress bar value.
+   * @deprecated Use showValue instead.
+   * @group Props
+   */
+  @Input() showValue: boolean = true;
+  /**
+   * Whether to display the progress bar value.
+   * @deprecated Use showValue instead.
+   * @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: 'determinate' | 'indeterminate' = 'determinate';
+  /**
+   * Color for the background of the progress.
+   * @group Props
+   */
+  @Input() color: string | undefined;
+
+  @Input() progressBarHeight: string | undefined;
+}

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

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

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

@@ -0,0 +1,3 @@
+<div class='container'>
+  <div id='viewer'></div>
+</div>

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

@@ -0,0 +1,14 @@
+:host {
+    display: block;
+    height: 100%;
+  }
+  
+  .container {
+    height: 100%;
+    margin: 10px;
+  
+    .viewer {
+      height: 100%;
+    }
+  }
+  

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,44 @@
+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();
+
+  @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;
+  }
+}

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,94 @@
+<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 p-2">
+          <div
+            class="content-panel"
+            [dynamicComponent]="{
+              component: panel.contentTemplate,
+              inputs: panel.inputs || {}
+            }"
+          ></div>
+        </div>
+
+        <div
+          class="flex flex-column align-items-center lg:flex-row justify-content-{{
+            buttonsAlign()
+          }} col-12 gap-2 grid grid-nogutter p-fluid"
+        >
+        
+        @if(showBtnCancel()){
+
+        }
+        @if(showBtnCancel()){
+          <kv-button
+            [label]="txtBtnCancel()"
+            [icon]="iconBtnCancel()"
+            (click)="cancel($event)"
+            class="w-full lg:w-auto"
+            severity="tertiary"
+          />
+        }
+          <!-- <kv-button-secondary
+            *ngIf="showBtnCancel()"
+            [label]="txtBtnCancel()"
+            [icon]="iconBtnCancel()"
+            (click)="cancel($event)"
+            class="w-full lg:w-auto"
+          >
+          </kv-button-secondary> -->
+          <kv-button
+            label="Voltar"
+            class="w-full lg:w-auto"
+            icon="west"
+            [disabled]="panel.id == 0"
+            (onClick)="prevCallback.emit(); back($event)"
+            severity="secondary"
+          />
+          <!-- <kv-button-personalize
+            class="w-full lg:w-auto"
+            [label]="'Voltar'"
+            color="#002542"
+            [disabled]="panel.id == 0"
+            [icon]="'pi pi-arrow-left'"
+            (onClick)="prevCallback.emit(); back($event)"
+          >
+          </kv-button-personalize> -->
+
+          <kv-button
+            [label]="panel.id != panels.length - 1 ? 'Avançar ' : txtBtnSave()"
+            class="w-full lg:w-auto"
+            icon="east"
+            (click)="
+              panel.id != panels.length - 1 ? nextCallback.emit() : save($event)
+              ;
+              next($event)
+            "
+            severity="primary"
+          />
+          <!-- <kv-button-success
+            (click)="
+              panel.id != panels.length - 1 ? nextCallback.emit() : save($event)
+              ;
+              next($event)
+            "
+            class="w-full lg:w-auto"
+            [icon]="'pi pi-arrow-right'"
+            [label]="panel.id != panels.length - 1 ? 'Avançar ' : txtBtnSave()"
+            iconPos="right"
+          ></kv-button-success> -->
+        </div>
+      </ng-template>
+    </p-stepperPanel>
+  </ng-container>
+</p-stepper>

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

@@ -0,0 +1,43 @@
+@import "../keevo-components-styles.scss";
+
+.kv-stepper {
+    display: flex;
+    flex-direction: column;
+}
+
+:host ::ng-deep .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+  background-color: rgb(var(--kv-color-system)) !important;
+  color: white;
+}
+
+:host ::ng-deep .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+  background-color: rgb(var(--kv-color-system)) !important;;
+}
+
+// .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();
+  });
+});