keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,14 @@
+<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"
+  [text]="text"
+></button>

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

@@ -0,0 +1,6 @@
+.btn-personalize {
+    height: 35px;
+}
+::ng-deep .p-button-label{
+    font-weight: 500 !important;
+}

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

@@ -0,0 +1,25 @@
+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;
+  }
+}

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

@@ -0,0 +1,13 @@
+<p-menu #menu [model]="items" appendTo="body" [popup]="true" (onShow)="handleShow()" (onHide)="handleHide()"></p-menu>
+<button
+    pButton
+    pRipple
+    class="{{classBtn}} btn-popup {{(size())}} {{type()}}"
+    [style.width]="'100%'"
+    [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,33 @@
+@import '../../keevo-components-styles.scss';
+@import '../../kv-button/kv-button.component.scss';
+
+// @import "../keevo-components-styles.scss";
+::ng-deep button {
+  border: none;
+  white-space: nowrap;
+}
+
+::ng-deep .small {
+  span {
+    font-weight: 500;
+    font-size: 0.625rem;
+  }
+}
+
+::ng-deep .normal {
+  span {
+    font-weight: 500;
+    font-size: 0.825rem;
+  }
+}
+
+::ng-deep .large {
+  span {
+    font-weight: 500;
+    font-size: 1rem;
+  }
+}
+
+::ng-deep .text {
+  background-color: none;
+}

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

@@ -0,0 +1,41 @@
+import {
+  Component,
+  input,
+  Input
+} from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+
+import { BaseComponentButton } from '../../../api/base-components/base-component-button';
+/**
+ * @deprecated Use o kv-button normal passando o parâmetro `[popup] = true`
+ */
+@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 = '';
+  size = input<'small' | 'normal' | 'large'>('normal');
+  type = input<'normal' | 'outline' | 'text'>('normal');
+
+  override icon: string = 'pi pi-chevron-down';
+
+  constructor() {
+    super();
+  }
+
+  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,18 @@
+.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;
+  }
+}
+
+::ng-deep .p-button-label{
+  font-weight: 500 !important;
+}

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,17 @@
+.btn-success {
+  background-color: #29b92d !important;
+  color: #fff !important;
+  height:35px;
+
+  &:hover {
+    background-color: #229925 !important;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+::ng-deep .p-button-label{
+  font-weight: 500 !important;
+}

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-card-selection/kv-card-selection.component.html

@@ -0,0 +1,63 @@
+<div
+  class="bg-white h-auto border-round-lg lg:p-3 p-1 flex flex-column gap-2 overflow-hidden"
+  [style.max-width.rem]="'45'"
+  [style.min-width]="minWidthCard()"
+>
+  <div class="px-2 flex flex-column align-items-center gap-2">
+    <img [src]="logo()" style="height: 4rem" class="py-2" />
+    <span class="text-sm">
+      Olá, <b>{{ nomeUsuario() }}</b
+      >. Bem vindo (a)! Escolha a <b>Licença</b> que deseja acessar:
+    </span>
+  </div>
+
+  @if(masters().length > 6) {
+  <div
+    class="col-12 grid formgrid p-fluid m-0 px-2 pt-2 pb-0"
+    [formGroup]="workspaceForm"
+  >
+    <kv-input-text
+      placeholder="Buscar licença"
+      class="col-12 m-0 p-0"
+      (onInput)="buscarMasters()"
+      formControlName="search"
+    ></kv-input-text>
+  </div>
+  }
+
+  <div
+    class="grid m-0 border-round-lg gap-2 p-2 {{
+      (filteredMasters().length > 6 || this.widthScreen() < 992) &&
+        'overflow-y-auto'
+    }} max-h-24rem cards-container"
+  >
+    @for(master of filteredMasters(); track $index) {
+    <div
+      class="{{
+        $index % 2 == 0 ? 'sm:col-6 col-12' : 'sm:col col-12'
+      }} p-0 card-option"
+      (click)="selectMaster(master)"
+    >
+      <div class="flex flex-column p-3 gap-1">
+        <div class="flex flex-row align-items-center gap-1 font-semibold mb-2">
+          <span class="material-symbols-outlined text-md"> article </span>
+          <span class="text-sm">{{ master.idmaster }}</span>
+        </div>
+
+        <span style="word-break: break-word font-medium" class="text-sm">{{
+          transformRazaoSocial()(master.nome)
+        }}</span>
+
+        <div class="flex flex-row align-items-center gap-1 font-semibold">
+          <span class="text-xs">{{
+            isEmpresa()(master.cpfcnpj) ? "CNPJ:" : "CPF:"
+          }}</span>
+          <span class="text-xs">{{ transformCpfCnpj()(master.cpfcnpj) }}</span>
+        </div>
+      </div>
+    </div>
+    } @if(filteredMasters().length == 0) {
+    <p>{{ emptyText() }}</p>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,54 @@
+.card-option {
+    // background-color: #F8FAFD;
+  background-color: white;
+  border-radius: 0.5rem;
+  border: 1px solid #eaeaea;
+  height: 7.5rem;
+  overflow: hidden;
+
+  transition: all 0.2s ease-in-out;
+
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid #581999;
+    background-color: rgba(208, 179, 221, 0.3);
+
+    span {
+      color: #581999;
+    }
+  }
+
+  &:active {
+    background-color: rgba(208, 179, 221, 0.6);
+  }
+}
+
+.cards-container {
+  &::-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);
+  }
+}
+
+span {
+  color: #64748b;
+}

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

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

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

@@ -0,0 +1,73 @@
+import { Component, computed, effect, inject, input, output, signal } from '@angular/core';
+import { CpfCnpjPipe } from '../../api/pipes/cpfcnpj.pipe';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'kv-card-selection',
+  standalone: false,
+  templateUrl: './kv-card-selection.component.html',
+  styleUrl: './kv-card-selection.component.scss'
+})
+export class KvCardSelectionComponent {
+
+  masters = input<any>();
+
+  widthScreen = signal<number>(window.innerWidth);
+
+  filteredMasters = signal<any>([]);
+
+  emptyText = input<string>('Nenhum resultado encontrado');
+
+  logo = input<string>('https://work-assets.keevo.com.br/img/logo-keevocenter.png');
+  nomeUsuario = input<string>('');
+
+  onSelectMaster = output<any>();
+  onFilter = output<any>();
+
+  cpfCnpjPipe = inject(CpfCnpjPipe);
+  fb = inject(FormBuilder);
+
+  workspaceForm!: FormGroup;
+
+  transformCpfCnpj = computed(() => (cpfCnpj: string) => {
+    return this.cpfCnpjPipe.transform(cpfCnpj);
+  });
+
+  isEmpresa = computed(() => (cpfCnpj: string) => {
+    return cpfCnpj.length > 11;
+  })
+
+  minWidthCard = computed(() => {
+    return this.widthScreen() >= 992 ? '45rem' : '100%';
+  });
+
+  transformRazaoSocial = computed(() => (razaosocial: string) => {
+    return razaosocial.length > 72 ? `${razaosocial.substring(0, 72)}...` : razaosocial;
+  });
+
+  ngOnInit() {
+    this.workspaceForm = this.fb.group({
+      search: ['']
+    });
+
+    this.filteredMasters.set(this.masters());
+
+    window.addEventListener('resize', () => {
+      this.widthScreen.set(window.innerWidth);
+    });
+  }
+
+  selectMaster(master: any) {
+    this.onSelectMaster.emit(master);
+  }
+
+  buscarMasters() {
+    this.onFilter.emit(this.workspaceForm.value.search);
+    const searchValue = this.workspaceForm.value.search.toLowerCase();
+    this.filteredMasters.set(this.masters().filter((master: any) => {
+      return master.cpfcnpj.includes(searchValue) || 
+             master.nome.toLowerCase().includes(searchValue) || 
+             master.idmaster.toString().includes(searchValue);
+    }));
+  }
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvCardSelectionComponent } from './kv-card-selection.component';
+import { KvInputsModule } from "../kv-inputs/kv-inputs.module";
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [KvCardSelectionComponent],
+  imports: [
+    CommonModule,
+    KvInputsModule,
+    FormsModule,
+    ReactiveFormsModule
+],
+  exports: [KvCardSelectionComponent]
+})
+export class KvCardSelectionModule { }

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

@@ -0,0 +1,26 @@
+<p-carousel
+  [value]="carouselData"
+  [indicatorStyleClass]="'carousel-indicator'"
+  [autoplayInterval]="autoplayInterval"
+  [showIndicators]="true"
+  [showNavigators]="true"
+  [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.cursor]="banner.link ? 'pointer' : 'default'"
+      [style.height.px]="heightComputed()"
+      (click)="navigateToLink(banner.link)"
+    />
+  </ng-template>
+</p-carousel>

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

@@ -0,0 +1,47 @@
+::ng-deep .p-carousel-indicators {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -0.5rem;
+  // bottom: 0;
+}
+
+::ng-deep .carousel-indicator {
+
+  width: 0.5rem !important;
+  height: 0.5rem !important;
+  border-radius: 50% !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: 0.5rem !important;
+  max-height: 500px;
+}
+
+::ng-deep .p-carousel .p-carousel-content {
+  .p-carousel-next {
+    position: absolute;
+    right: 0;
+  }
+
+  .p-carousel-prev {
+    position: absolute;
+    left: 0;
+    z-index: 1000;
+  }
+}

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,40 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  computed,
+  input,
+  viewChild
+} from '@angular/core';
+import { Carousel } from 'primeng/carousel';
+
+@Component({
+  selector: 'kv-carousel',
+  templateUrl: './kv-carousel.component.html',
+  styleUrls: ['./kv-carousel.component.scss'],
+})
+export class KvCarouselComponent {
+  carouselContainer = viewChild(Carousel);
+
+  heightCarousel = input<number>();
+
+  heightComputed = computed(() => {
+    return (
+      this.heightCarousel() ??
+      this.carouselContainer()?.el.nativeElement.offsetHeight
+    );
+  });
+
+  @Input() carouselData: any[] = [];
+  @Input() autoplayInterval: number = 5000;
+
+  widthCarousel!: number;
+  isCollapsed: boolean = false;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  navigateToLink(link: string): void {
+    if(link !== null && link !== undefined && link !== '') 
+    window.open(link, '_blank');
+  }
+}

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 { }