keevo-components 1.8.125 → 1.8.127

package/src/lib/components/keevo-components-styles.scss

@@ -0,0 +1,11 @@
+label {
+  font-family: 'Inter var', 'Roboto', Arial, Helvetica, sans-serif;
+}
+
+:host ::ng-deep .inputs {
+  height: 35px;
+}
+
+* {
+  margin: 0;
+}

package/src/lib/components/keevo-components.module.ts

@@ -0,0 +1,72 @@
+import { NgModule } from '@angular/core';
+
+import { KvAvatarModule } from './kv-avatar/kv-avatar.module';
+import { KvButtonsModule } from './kv-buttons/kv-button.module';
+import { KvCarouselModule } from './kv-carousel/kv-carousel.module';
+import { KvChartModule } from './kv-chart/kv-chart.module';
+import { KvInputsModule } from './kv-inputs/kv-inputs.module';
+import { KvLoaderModule } from './kv-loader/kv-loader.module';
+import { KvLoginModule } from './kv-login/kv-login.module';
+import { KvMenuModule } from './kv-menu/kv-menu.module';
+import { KvModalModule } from './kv-modal/kv-modal.module';
+import { KvOrgchartModule } from './kv-orgchart/kv-orgchart.module';
+import { KvPageFormModule } from './kv-page-form/kv-page-form.module';
+import { KvPickListModule } from './kv-pick-list/kv-pick-list.module';
+import { KvProgressBarModule } from './kv-progress-bar/kv-progress-bar.module';
+import { KvTableEditModule } from './kv-table-edit/kv-table-edit.module';
+import { KvTableModule } from './kv-table/kv-table.module';
+import { KvTreetableModule } from './kv-tree-table/kv-tree-table.module';
+import { KvtreeViewModule } from './kv-tree-view/kv-tree-view.module';
+import { KvWorkspaceModule } from './kv-workspace/kv-workspace.module';
+import { KvStepperModule } from './kv-stepper/kv-stepper.module';
+import { KvImageUploadModule } from './kv-image-upload/kv-image-upload.module';
+
+@NgModule({
+  declarations: [
+  
+  ],
+  imports: [
+    KvAvatarModule,
+    KvButtonsModule,
+    KvCarouselModule,
+    KvChartModule,
+    KvInputsModule,
+    KvLoaderModule,
+    KvLoginModule,
+    KvMenuModule,
+    KvModalModule,
+    KvOrgchartModule,
+    KvPageFormModule,
+    KvPickListModule,
+    KvProgressBarModule,
+    KvTableModule,
+    KvTreetableModule,
+    KvtreeViewModule,
+    KvWorkspaceModule,
+    KvStepperModule,
+    KvImageUploadModule
+  ],
+  exports: [
+    KvAvatarModule,
+    KvButtonsModule,
+    KvCarouselModule,
+    KvChartModule,
+    KvInputsModule,
+    KvLoaderModule,
+    KvLoginModule,
+    KvMenuModule,
+    KvModalModule,
+    KvOrgchartModule,
+    KvPageFormModule,
+    KvPickListModule,
+    KvProgressBarModule,
+    KvTableEditModule,
+    KvTableModule,
+    KvTreetableModule,
+    KvtreeViewModule,
+    KvWorkspaceModule,
+    KvStepperModule,
+    KvImageUploadModule
+  ]
+})
+export class KeevoComponentsModule { }

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

@@ -0,0 +1,12 @@
+<div class="image-container">
+  <img [src]="getImageSrc() || imageService.userDefaultImage()" alt="Foto" class="container-foto" [style.border-color]="borderColor" [style.width.px]="width" [style.height.px]="height" (error)="handleImageError($event)" >
+  <div class="btn">
+    <input *ngIf="btnAlterarFoto" id="fotoEscolhida" type="file" accept="image/*" style="display:none" (change)="selectFotoSelecionada($event)">
+    <button *ngIf="btnAlterarFoto && !existeLogo" class="botao-alterar-foto border-circle" (click)="openFile()">
+      <i class="pi pi-camera icon-edit"></i>
+    </button>
+    <button *ngIf="btnAlterarFoto && existeLogo" class="botao-excluir-foto border-circle" (click)="removerFoto()">
+      <i class="pi pi-trash icon-delete"></i>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,45 @@
+img {
+  border-style: solid;
+  border-width: 4px;
+  border-radius: 50%;
+}
+
+.botao-alterar-foto {
+  border-style: none;
+  width: max-content;
+  background-color: rgb(82, 137, 180);
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 10px 12px;
+}
+
+.botao-alterar-foto i {
+  color: #fff;
+}
+
+.botao-excluir-foto {
+  border-style: none;
+  width: max-content;
+  background-color: rgb(82, 137, 180);
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 10px 12px;
+}
+
+.botao-excluir-foto i {
+  color: #fff;
+}
+
+.btn {
+  position: absolute;
+  top: 87%;
+  left: 87%;
+  transform: translate(-50%, -50%);
+}
+
+.image-container {
+  display: inline-block;
+  position: relative;
+}

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

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

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

@@ -0,0 +1,72 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output
+} from '@angular/core';
+
+import { ImagensService } from '../../api/services/imagens.service';
+
+@Component({
+  selector: 'kv-avatar',
+  templateUrl: './kv-avatar.component.html',
+  styleUrls: ['./kv-avatar.component.scss']
+})
+export class KvAvatarComponent {
+  @Input() imageUrl!: string;
+  @Input() borderColor: string = '#5289B4';
+  @Input() width: number = 135;
+  @Input() height: number = 135;
+  @Output() imageUrlChange = new EventEmitter<string>();
+  @Output() removerFotoEvent = new EventEmitter<void>();
+  existeLogo = false;
+
+  @Input() btnAlterarFoto: boolean = false;
+
+  constructor(public imageService: ImagensService) { }
+
+  getImageSrc(): string {
+    if (this.imageUrl && (this.imageUrl.startsWith('data:image') || this.imageUrl.startsWith('http') || this.imageUrl.startsWith('https'))) {
+      this.existeLogo = true;
+      return this.imageUrl;
+    } else if (this.imageUrl) {
+      this.existeLogo = true;
+      return 'data:image/jpg;base64,' + this.imageUrl;
+    } else {
+      this.existeLogo = false;
+      return this.imageService.userDefaultImage();
+    }
+  }
+
+  openFile() {
+    const inputElement: HTMLInputElement | null = document.getElementById('fotoEscolhida') as HTMLInputElement;
+    if (inputElement) {
+      inputElement.click();
+    }
+  }
+
+  selectFotoSelecionada(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        this.imageUrl = reader.result as string;
+        this.existeLogo = true;
+        this.imageUrlChange.emit(this.imageUrl);
+      };
+    }
+  }
+
+
+  removerFoto() {
+    this.imageUrl = '';
+    this.removerFotoEvent.emit();
+    this.existeLogo = false;
+    this.imageUrlChange.emit(this.imageUrl);
+  }
+
+  handleImageError(event: any) {
+    event.target.src = this.imageService.userDefaultImage();
+  }
+}

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

@@ -0,0 +1,21 @@
+import { ButtonModule } from 'primeng/button';
+import { CommonModule } from '@angular/common';
+import { FileUploadModule } from 'primeng/fileupload';
+import { NgModule } from "@angular/core";
+
+import { KvAvatarComponent } from "./kv-avatar.component";
+
+@NgModule({
+  declarations: [
+    KvAvatarComponent
+  ],
+  imports: [
+    CommonModule,
+    ButtonModule,
+    FileUploadModule
+  ],
+  exports: [
+    KvAvatarComponent
+  ]
+})
+export class KvAvatarModule { }

package/src/lib/components/kv-buttons/kv-button-personalize/kv-button-personalize.component.html

@@ -0,0 +1,16 @@
+<button
+  pButton
+  pRipple
+  [icon]="icon"
+  [label]="label"
+  [loading]="loading"
+  (click)="click($event)"
+  [disabled]="disabled"
+  class="btn-personalize"
+  [style.color]="textColor"
+  [style.backgroundColor]="backgroundColor"
+  [style.borderColor]="backgroundColor"
+  (mouseover)="onMouseOver()"
+  (mouseout)="onMouseOut()"
+  [text]="text"
+></button>

package/src/lib/components/kv-buttons/kv-button-personalize/kv-button-personalize.component.scss

@@ -0,0 +1,3 @@
+.btn-personalize {
+    height: 35px;
+}

package/src/lib/components/kv-buttons/kv-button-personalize/kv-button-personalize.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+
+import { BaseComponentButton } from '../../../api/base-components/base-component-button';
+
+@Component({
+  selector: 'kv-button-personalize',
+  templateUrl: './kv-button-personalize.component.html',
+  styleUrls: ['./kv-button-personalize.component.scss']
+})
+export class KvButtonPersonalizeComponent extends BaseComponentButton {
+  
+  @Input() colorHover!: string;
+  @Input() textColor!: string;
+
+  backgroundColor!: string;
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit() {
+    this.colorHover = this.colorHover? this.colorHover : this.color;
+    this.backgroundColor = this.color;
+  }
+
+  onMouseOver() {
+    this.backgroundColor = this.colorHover;
+  }
+
+  onMouseOut() {
+    this.backgroundColor = this.color;
+  }
+
+}

package/src/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.html

@@ -0,0 +1,12 @@
+<p-menu #menu [model]="items" appendTo="body" [popup]="true" (onShow)="handleShow()" (onHide)="handleHide()"></p-menu>
+<button
+    pButton
+    pRipple
+    class="{{classBtn}} btn-popup"
+    [icon]="icon"
+    iconPos="right"
+    [label]="label"
+    [loading]="loading"
+    [disabled]="disabled"
+    (click)="menu.toggle($event)">
+</button>

package/src/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.scss

@@ -0,0 +1,31 @@
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+
+  &:hover {
+    background-color: #229925 !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+.btn-secondary {
+  background-color: #f2f3f5 !important;
+  color: rgba(0, 0, 0, .87) !important;
+
+  &:hover {
+    background-color: #ef5350 !important;
+    color: #FFF !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+
+.btn-popup{
+  height:35px;
+}

package/src/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.ts

@@ -0,0 +1,40 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+
+import { BaseComponentButton } from '../../../api/base-components/base-component-button';
+
+@Component({
+  selector: 'kv-button-popup',
+  templateUrl: './kv-button-popup.component.html',
+  styleUrls: ['./kv-button-popup.component.scss']
+})
+export class KvButtonPopupComponent extends BaseComponentButton {
+
+  @Input() items: MenuItem[] = [];
+  @Input() classBtn: string = '';
+
+  override icon: string = 'pi pi-chevron-down';
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit(){
+    console.log(this.classBtn)
+  }
+
+  handleShow() {
+    this.rotate();
+  }
+  handleHide() {
+    this.rotate();
+  }
+  rotate() {
+    this.icon = this.icon === 'pi pi-chevron-down' ? 'pi pi-chevron-up' : 'pi pi-chevron-down';
+  }
+
+}

package/src/lib/components/kv-buttons/kv-button-secondary/kv-button-secondary.component.html

@@ -0,0 +1,12 @@
+
+<button
+  pButton
+  pRipple
+  class="btn-secondary border-300"
+  [icon]="icon"
+  [label]="label"
+  [loading]="loading"
+  [disabled]="disabled"
+  (click)="click($event)">
+</button>
+

package/src/lib/components/kv-buttons/kv-button-secondary/kv-button-secondary.component.scss

@@ -0,0 +1,14 @@
+.btn-secondary {
+  background-color: #f2f3f5 !important;
+  color: rgba(0, 0, 0, .87) !important;
+  height:35px;
+
+  &:hover {
+    background-color: #ef5350 !important;
+    color: #FFF !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}

package/src/lib/components/kv-buttons/kv-button-secondary/kv-button-secondary.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { BaseComponentButton } from '../../../api/base-components/base-component-button';
+
+@Component({
+  selector: 'kv-button-secondary',
+  templateUrl: './kv-button-secondary.component.html',
+  styleUrls: ['./kv-button-secondary.component.scss']
+})
+export class KvButtonSecondaryComponent extends BaseComponentButton {
+  constructor() {
+    super();
+  }
+}

package/src/lib/components/kv-buttons/kv-button-success/kv-button-success.component.html

@@ -0,0 +1,11 @@
+<button
+  pButton
+  pRipple
+  class="btn-success border-green-500"
+  [icon]="icon"
+  [label]="label"
+  [loading]="loading"
+  [disabled]="disabled"
+  (click)="click($event)">
+</button>
+

package/src/lib/components/kv-buttons/kv-button-success/kv-button-success.component.scss

@@ -0,0 +1,13 @@
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+  height:35px;
+
+  &:hover {
+    background-color: #229925 !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}

package/src/lib/components/kv-buttons/kv-button-success/kv-button-success.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { BaseComponentButton } from '../../../api/base-components/base-component-button';
+
+@Component({
+  selector: 'kv-button-success',
+  templateUrl: './kv-button-success.component.html',
+  styleUrls: ['./kv-button-success.component.scss']
+})
+export class KvButtonSuccessComponent extends BaseComponentButton {
+  constructor() {
+    super();
+  }
+}

package/src/lib/components/kv-buttons/kv-button.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+
+import { KvButtonPersonalizeComponent } from './kv-button-personalize/kv-button-personalize.component';
+import { KvButtonPopupComponent } from './kv-button-popup/kv-button-popup.component';
+import { KvButtonSecondaryComponent } from './kv-button-secondary/kv-button-secondary.component';
+import { KvButtonSuccessComponent } from './kv-button-success/kv-button-success.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvButtonSecondaryComponent,
+    KvButtonSuccessComponent,
+    KvButtonPersonalizeComponent,
+    KvButtonPopupComponent
+  ],
+  imports: [
+    PrimeNgModule
+  ],
+  exports: [
+    KvButtonSecondaryComponent,
+    KvButtonSuccessComponent,
+    KvButtonPersonalizeComponent,
+    KvButtonPopupComponent
+  ]
+})
+export class KvButtonsModule { }

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

@@ -0,0 +1,8 @@
+<p-carousel id="carousel" [value]="carouselData" [indicatorStyleClass]="'carousel-indicator'" [autoplayInterval]="5000" 
+  [showIndicators]="true"  [showNavigators]="false" [numVisible]="1" [numScroll]="1" [circular]="true" styleClass="h-full">
+>
+  <ng-template pTemplate="item" let-banner class="justify-content-center align-items-center ">
+    <img [src]="banner.img" class="w-full border-round-banner" [style.height.px]="heightCarousel"
+      (click)="navigateToLink(banner.link)">
+  </ng-template>
+</p-carousel>

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

@@ -0,0 +1,32 @@
+::ng-deep  .p-carousel-indicators {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1rem;
+}
+
+::ng-deep .carousel-indicator {
+  width: 15px !important;
+  height: 4px !important;
+  margin: -3px !important;
+  padding: 0 !important;
+  background-color: rgba(238, 238, 238, 0.816);
+    &:hover {
+      background-color: rgb(239, 239, 239);
+    }
+}
+
+button.p-carousel-indicator.p-link{
+  background-color: aliceblue !important;
+}
+
+::ng-deep .p-carousel .p-carousel-content {
+  overflow: hidden !important;
+  position: relative;
+}
+
+
+::ng-deep .border-round-banner {
+  border-radius: 20px !important;
+  max-height: 500px; 
+}

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

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

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

@@ -0,0 +1,31 @@
+import { AfterViewInit, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kv-carousel',
+  templateUrl: './kv-carousel.component.html',
+  styleUrls: ['./kv-carousel.component.scss']
+})
+export class KvCarouselComponent implements AfterViewInit {
+
+  @Input() carouselData: any[] = [];
+  heightCarousel!: number;
+  widthCarousel!: number;
+
+  constructor(private cd: ChangeDetectorRef) { }
+
+  ngAfterViewInit(): void {
+    this.getCarouselHeight();
+    this.cd.detectChanges();
+  }
+
+  navigateToLink(link: string): void {
+    window.open(link, '_blank');
+  }
+
+  getCarouselHeight(): void {
+    const divCarousel = document.getElementById('carousel');
+    if (divCarousel) {
+      this.heightCarousel = divCarousel.offsetHeight;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,38 @@
+<div class="card h-full">
+  <div class="flex align-items-start justify-content-between mb-6">
+    <label class="text-900 text-xl font-semibold">{{ title }}</label>
+    <div>
+      <p-dropdown
+        *ngIf="showDatas"
+        [options]="periodos"
+        [(ngModel)]="selectedData"
+        optionLabel="label"
+        optionValue="value"
+        styleClass="w-15rem"
+        (onChange)="selectionValue($event)">
+      </p-dropdown>
+      <button
+        *ngIf="showMenu"
+        pButton
+        pRipple
+        icon="pi pi-ellipsis-h"
+        class="p-button-rounded p-button-secondary"
+        style="margin-left: 10px;"
+        (click)="menu.toggle($event)">
+      </button>
+      <p-menu
+        #menu
+        [popup]="true"
+        appendTo="body"
+        [model]="menuItems">
+      </p-menu>
+    </div>
+  </div>
+  <p-chart
+    #chart
+    [type]="type"
+    [data]="data"
+    [options]="options"
+    height="300px">
+  </p-chart>
+</div>