keevo-components 1.8.262 → 1.8.264

package/src/lib/components/kv-page-form/kv-page-form.component.html

@@ -0,0 +1,103 @@
+<div [formGroup]="formGroup" class="grid-nogutter m-0" id="page-form-container">
+  <!-- Renderização do form -->
+  <div class="col-12 p-0" id="page-form-content">
+    <ng-content></ng-content>
+  </div>
+
+  <!-- Divider -->
+  <!-- <p-divider class="col-12"></p-divider> -->
+
+  <!-- Barra de ações -->
+  <div
+    class="flex flex-column lg:flex-row justify-content-end col-12 gap-2 barra-acoes grid grid-nogutter p-fluid"
+  >
+    <kv-button
+      *ngIf="showBtnCancel"
+      [label]="txtBtnCancel"
+      [icon]="iconBtnCancel"
+      [disabled]="isSaveLoading"
+      (onClick)="cancel($event)"
+      class="w-full lg:w-auto"
+      severity="tertiary"
+    >
+    </kv-button>
+    <kv-button-popup
+      *ngIf="actionsCancelToogle && showBtnCancelToogle"
+      [label]="txtBtnCancelToogle"
+      [icon]="iconBtnCancelToogle"
+      (click)="menuCancel.toggle($event)"
+      class="w-full lg:w-auto"
+      [classBtn]="'tertiary'"
+      [disabled]="isSaveLoading"
+    >
+    </kv-button-popup>
+    <p-menu
+      #menuCancel
+      [popup]="true"
+      [model]="actionsCancelToogle"
+      appendTo="body"
+      class="w-full lg:w-auto"
+      [style.display]="'none'"
+    ></p-menu>
+
+    <kv-button
+      *ngIf="showBtnSecundary"
+      [label]="txtBtnSecundary"
+      [icon]="iconBtnSecundary"
+      [disabled]="isSaveLoading"
+      severity='secondary'
+      (onClick)="actionSecundary($event)"
+      class="w-full lg:w-auto"
+    ></kv-button>
+
+    <kv-button-popup
+      *ngIf="actionsToogle && showBtnToogle"
+      [label]="txtBtnToogle"
+      [icon]="iconBtnToogle"
+      (click)="menuToogle.toggle($event)"
+      class="w-full lg:w-auto"
+      classBtn="secondary"
+      [disabled]="isSaveLoading"
+    >
+    </kv-button-popup>
+    <p-menu
+      #menuToogle
+      [popup]="true"
+      [model]="actionsToogle"
+      appendTo="body"
+      class="w-full lg:w-auto"
+      [style.display]="'none'"
+    ></p-menu>
+
+    <kv-button
+      *ngIf="showBtnSave"
+      [label]="txtBtnSave"
+      [icon]="iconBtnSave"
+      [disabled]="disableBtnSave"
+      [loading]="isSaveLoading"
+      (onClick)="save($event)"
+      severity="primary"
+      class="w-full lg:w-auto"
+    />
+
+    <kv-button-popup
+      *ngIf="actionsSaveToogle && showBtnSaveToogle"
+      [label]="txtBtnSaveToogle"
+      [icon]="iconBtnSaveToogle"
+      (click)="menuSave.toggle($event)"
+      [loading]="isSaveLoading"
+      class="w-full lg:w-auto"
+      [classBtn]="'primary'"
+    >
+    </kv-button-popup>
+
+    <p-menu
+      #menuSave
+      [popup]="true"
+      [model]="actionsSaveToogle"
+      appendTo="body"
+      class="w-full lg:w-auto"
+      [style.display]="'none'"
+    ></p-menu>
+  </div>
+</div>

package/src/lib/components/kv-page-form/kv-page-form.component.scss

@@ -0,0 +1,76 @@
+// ::ng-deep .p-dialog .p-dialog-header {
+//     color: white !important;
+//     background: #002542 !important;
+//     display: flex !important;
+//     flex-wrap: wrap;
+// }
+
+// ::ng-deep .p-dialog .p-dialog-content {
+//     padding-top: 1rem;
+// }
+
+// ::ng-deep .p-dialog {
+//     min-width: 320px;
+// }
+
+// .sub-title {
+//     // color: white !important;
+//     color: yellow;
+//     position: relative;
+//     bottom: 25px;
+//     z-index: 1;
+// }
+
+// ::ng-deep .p-dialog-content {
+
+//     &::-webkit-scrollbar {
+//         width: 8px;
+
+//         &: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);
+//     }
+
+//     overflow-x: hidden;
+// }
+
+* {
+    padding-bottom: 0rem;
+    padding-top: 0rem;
+}
+
+.barra-acoes {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgb(255, 255, 255);
+    padding: 10px;
+    z-index: 999;
+}
+
+
+#page-form-container {
+    padding-bottom: 40px;
+}
+
+@media screen and (max-width: 991px) {
+    #page-form-container {
+        padding-bottom: 100px;
+    }
+}

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

package/src/lib/components/kv-page-form/kv-page-form.component.ts

@@ -0,0 +1,167 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+import { ActionItem } from '../../api/components/table/action-item';
+
+@Component({
+  selector: 'kv-page-form',
+  templateUrl: './kv-page-form.component.html',
+  styleUrls: ['./kv-page-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KvPageFormComponent implements OnInit {
+  /**
+   * Configurações do formulário
+   */
+  @Input() formGroup: FormGroup = new FormGroup({});
+  @Input() TituloForm: string | undefined = '';
+  @Input() SubTituloForm: string | undefined = '';
+  @Input() isSaveLoading!: boolean;
+  @Input() popup: boolean = false;
+  @Input() locationUseComponent: 'page' | 'dialog' = 'dialog';
+  // @Input() expandMenu!: boolean;
+
+  /**
+   * Botão cancelar
+   */
+  @Input() iconBtnCancel: string = 'close';
+  @Input() showBtnCancel: boolean = true;
+  @Input() txtBtnCancel: string = 'Cancelar';
+
+  /**
+   * Botão de cancelar com opções
+   */
+  @Input() actionsCancelToogle!: ActionItem[];
+  @Input() iconBtnCancelToogle: string = 'pi pi-chevron-down';
+  @Input() showBtnCancelToogle: boolean = false;
+  @Input() txtBtnCancelToogle: string = 'Cancelar';
+
+  /**
+   * Botão salvar
+   */
+  @Input() iconBtnSave: string = 'save';
+  @Input() showBtnSave: boolean = true;
+  @Input() txtBtnSave: string = 'Salvar';
+  @Input() disableBtnSave: boolean = false;
+
+  /**
+   * Botão de salvar com opções
+   */
+  @Input() actionsSaveToogle!: ActionItem[];
+  @Input() iconBtnSaveToogle: string = 'pi pi-chevron-down';
+  @Input() showBtnSaveToogle: boolean = false;
+  @Input() txtBtnSaveToogle: string = 'Ações';
+
+  /**
+   * Botão genérico 'Secundary'
+   */
+  @Input() iconBtnSecundary!: string;
+  @Input() showBtnSecundary: boolean = false;
+  @Input() txtBtnSecundary!: string;
+  
+  
+  /**
+   * @deprecated Essa não é mais utilizado, favor utilizar a propriedade severityBtnSecundary
+   */
+  @Input() colorBtnSecundary: string = '';
+
+  /**
+   * Botão genérico com opções
+   */
+  @Input() actionsToogle!: ActionItem[];
+  @Input() iconBtnToogle: string = 'pi pi-chevron-down';
+  @Input() showBtnToogle: boolean = false;
+  @Input() txtBtnToogle: string = 'Ações';
+  @Input() classBtnToogle: string = 'bg-glue-500';
+
+  /**
+   * Botão fechar
+   */
+  @Input() disableBtnSair: boolean = true;
+
+  /**
+   * Salvar dados
+   */
+  @Output() onSave: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * Cancelar
+   */
+  @Output() onCancel: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * Ação do botão Secundary
+   */
+  @Output() onClickSecundary: EventEmitter<any> = new EventEmitter();
+
+  constructor(private fb: FormBuilder) {}
+
+  /**
+   * Adiciona sub-título à tela
+   */
+  addSubTitle() {
+    if (this.SubTituloForm) {
+      const headerElement = document.querySelector(
+        '.p-dialog .p-dialog-header'
+      );
+      if (headerElement) {
+        const subtitleElement = document.createElement('span');
+        subtitleElement.textContent = this.SubTituloForm;
+        subtitleElement.style.fontSize = '0.75rem';
+        subtitleElement.style.width = '100%';
+        subtitleElement.style.marginLeft = '2px';
+
+        headerElement.appendChild(subtitleElement);
+      }
+    }
+  }
+
+  ngOnInit() {
+    this.addSubTitle();
+    this.setPageFormContainerAttributes();
+  }
+
+  /**
+   * Dispara o método de cancelamento da tela
+   * @param event evento
+   */
+  cancel(event: Event) {
+    this.onCancel.emit(event);
+  }
+
+  /**
+   * Dispara o método de salvar da tela
+   * @param event evento
+   */
+  save(event: Event) {
+    this.onSave.emit(event);
+  }
+
+  actionSecundary(event: Event) {
+    this.onClickSecundary.emit(event);
+  }
+
+  /**
+   * Ajusta o tamanho da tela considerando o menu lateral
+   */
+  setPageFormContainerAttributes() {
+    if (this.locationUseComponent == 'page') {
+      var form = document.getElementById('page-form-container');
+
+      if (form) {
+        var widthFull = form.clientWidth;
+        var widthAdjusted;
+
+        widthAdjusted = widthFull - 332;
+      }
+    }
+  }
+}

package/src/lib/components/kv-page-form/kv-page-form.module.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import {
+    FormsModule,
+    ReactiveFormsModule
+} from "@angular/forms";
+
+import { KvPageFormComponent } from "./kv-page-form.component";
+
+import {
+    KvButtonModule,
+    KvButtonsModule,
+    PrimeNgModule
+} from "../../../public-api";
+
+@NgModule({
+    declarations: [
+        KvPageFormComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        PrimeNgModule,
+        KvButtonsModule,
+        KvButtonModule,
+        ReactiveFormsModule
+    ],
+    exports: [
+        KvPageFormComponent
+    ]
+})
+export class KvPageFormModule { }

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

@@ -0,0 +1,251 @@
+<!-- [formGroup]="formGroup" -->
+<div
+  class="grid-nogutter m-0"
+  id="page-form-container"
+>
+
+  <!-- Renderização do form -->
+  <div class="col-12 p-0" id="page-form-content">
+
+
+
+<!--______________________________________________________________________________________________________-->
+
+
+
+    <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">
+            <div class="content-panel" [dynamicComponent]="{ component: panel.contentTemplate, inputs: panel.inputs || {} }">
+              <!-- <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'
+            }"
+          >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+            <div class="flex flex-column lg:flex-row justify-content-end col-12 gap-2 barra-acoes grid grid-nogutter p-fluid">
+
+
+
+              <kv-button-secondary
+                *ngIf="showBtnCancel"
+                [label]="txtBtnCancel"
+                [icon]="iconBtnCancel"
+                [disabled]="isSaveLoading"
+                (click)="cancel($event)"
+                class="w-full lg:w-auto"
+              >
+              </kv-button-secondary>
+
+              <!-- panel.id !== 0 -->
+              @if(true){
+                <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()"
+                >
+                </kv-button-personalize>
+              }
+
+
+              <!-- panel.id !== panels.length - 1 -->
+              @if(true){
+                <kv-button-success
+                  (click)=" panel.id != panels.length-1 ? nextCallback.emit() : save($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>
+              }
+<!--
+              <kv-button-success
+                *ngIf="showBtnSave &&  panel.id === panels.length - 1 "
+                [label]="txtBtnSave"
+                [icon]="iconBtnSave"
+                [disabled]="disableBtnSave || panel.id !== panels.length - 1"
+                [loading]="isSaveLoading"
+                (click)="nextCallback.emit()"
+                (click)="!disableBtnSave ? save($event) : ''"
+                class="w-full lg:w-auto"
+              /> -->
+
+
+
+              <!-- @if(positionBtnToogle == 'start'){
+                <kv-button-popup
+                  *ngIf="actionsToogle && showBtnToogle"
+                  [label]="txtBtnToogle"
+                  [icon]="iconBtnToogle"
+                  (click)="menuToogle.toggle($event)"
+                  [disabled]="disableBtnToogle"
+                  class="w-full lg:w-auto"
+                  classBtn="{{classBtnToogle}}"
+                >
+                </kv-button-popup>
+                <p-menu
+                  #menuToogle
+                  [popup]="true"
+                  [model]="actionsToogle"
+                  appendTo="body"
+                  class="w-full lg:w-auto"
+                ></p-menu>
+              } -->
+
+              <!-- <kv-button-popup
+                  *ngIf="actionsCancelToogle && showBtnCancelToogle"
+                  [label]="txtBtnCancelToogle"
+                  [icon]="iconBtnCancelToogle"
+                  (click)="menuCancel.toggle($event)"
+                  class="w-full lg:w-auto"
+                  [classBtn]="'btn-secondary border-300'"
+                >
+                </kv-button-popup>
+                <p-menu
+                  #menuCancel
+                  [popup]="true"
+                  [model]="actionsCancelToogle"
+                  appendTo="body"
+                  class="w-full lg:w-auto"
+                ></p-menu> -->
+
+
+
+
+
+
+
+              <!-- <kv-button-popup
+                *ngIf="actionsSaveToogle && showBtnSaveToogle"
+                [label]="txtBtnSaveToogle"
+                [icon]="iconBtnSaveToogle"
+                (click)="menuSave.toggle($event)"
+                [loading]="isSaveLoading"
+                class="w-full lg:w-auto"
+                [classBtn]="'btn-success border-green-500'"
+              >
+              </kv-button-popup>
+
+              <p-menu
+                #menuSave
+                [popup]="true"
+                [model]="actionsSaveToogle"
+                appendTo="body"
+                class="w-full lg:w-auto"
+              ></p-menu> -->
+
+
+              <!-- @if(positionBtnToogle == 'end'){
+                <kv-button-popup
+                  *ngIf="actionsToogle && showBtnToogle"
+                  [label]="txtBtnToogle"
+                  [icon]="iconBtnToogle"
+                  (click)="menuToogle.toggle($event)"
+                  [disabled]="disableBtnToogle"
+                  class="w-full lg:w-auto"
+                  classBtn="{{classBtnToogle}}"
+                >
+                </kv-button-popup>
+                <p-menu
+                  #menuToogle
+                  [popup]="true"
+                  [model]="actionsToogle"
+                  appendTo="body"
+                  class="w-full lg:w-auto"
+                ></p-menu>
+              } -->
+
+            </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+          </div>
+
+        </ng-template>
+
+      </p-stepperPanel>
+    </ng-container>
+  </p-stepper>
+
+
+
+
+
+
+
+<!--______________________________________________________________________________________________________-->
+
+
+
+
+
+
+
+
+  </div>
+
+
+</div>