keevo-components 1.8.126 → 1.8.127

package/src/lib/components/kv-inputs/kv-input-text-checkbox/kv-input-text-checkbox.component.ts

@@ -0,0 +1,43 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-input-text-checkbox',
+  templateUrl: './kv-input-text-checkbox.component.html',
+  styleUrls: ['./kv-input-text-checkbox.component.scss'],
+  providers: ComponentProviders(KvInputTextCheckboxComponent),
+})
+export class KvInputTextCheckboxComponent extends BaseComponentInput<string> implements OnInit {
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  @Output() checkBoxEmit: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @Input() tooltipCheckbox!: string;
+  @Input() disabledCheckbox: boolean = false;
+
+  private _checkBoxValue: boolean = false;
+
+  set checkBoxValue(value: boolean) {
+    this._checkBoxValue = value;
+    this.emitCheckBoxValue();
+  }
+
+  get checkBoxValue(): boolean {
+    return this._checkBoxValue;
+  }
+
+  emitCheckBoxValue(): void {
+    this.checkBoxEmit.emit(this._checkBoxValue);
+  }
+}

package/src/lib/components/kv-inputs/kv-input-textarea/kv-input-textarea.component.html

@@ -0,0 +1,22 @@
+<span>
+
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <textarea
+    pInputTextarea
+    [autoResize]="autoResize"
+    [class]="baseInputClass"
+    [cols]="cols"
+    [disabled]="disabled"
+    [id]="componentId"
+    [rows]="rows"
+    [(ngModel)]="value"
+    (blur)="onInputBlur($event)"
+  >
+  </textarea>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/components/kv-inputs/kv-input-textarea/kv-input-textarea.component.ts

@@ -0,0 +1,40 @@
+import {
+  Component,
+  Input,
+  OnInit
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-input-textarea',
+  templateUrl: './kv-input-textarea.component.html',
+  styleUrls: [
+    './kv-input-textarea.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvInputTextareaComponent),
+})
+export class KvInputTextareaComponent extends BaseComponentInput<string> implements OnInit {
+  @Input() multiline: boolean = false;
+  @Input() rows: number = 2;
+  @Input() cols: number = 20;
+  @Input() autoResize: boolean = false;
+  @Input() maxValueLength: number = 0;
+
+  counterValueLength: number = 0;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    this.formControl?.valueChanges.subscribe((value: any) => {
+      this.counterValueLength = value?.length;
+    });
+  }
+}

package/src/lib/components/kv-inputs/kv-input-time/kv-input-time.component.html

@@ -0,0 +1,23 @@
+<span>
+
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <p-calendar
+    appendTo="body"
+    [class]="baseInputClass"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [showIcon]="showIcon"
+    styleClass="inputs"
+    [showTime]="true"
+    [timeOnly]="true"
+    (onBlur)="onInputBlur($event)"
+  >
+  </p-calendar>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/components/kv-inputs/kv-input-time/kv-input-time.component.ts

@@ -0,0 +1,27 @@
+import {
+  Component,
+  Input,
+  OnInit
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-input-time',
+  templateUrl: './kv-input-time.component.html',
+  styleUrls: [
+    './kv-input-time.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvInputTimeComponent),
+})
+export class KvInputTimeComponent extends BaseComponentInput<string> implements OnInit {
+
+  @Input() showIcon: boolean = true;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

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

@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import {
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+import { KvCheckComponent } from './kv-check/kv-check.component';
+import { KvDropdownComponent } from './kv-dropdown/kv-dropdown.component';
+import { KvEditorComponent } from './kv-editor/kv-editor.component';
+import { kvErrorModule } from '../kv-error/kv-error.module';
+import { KvInputCalendarComponent } from './kv-input-calendar/kv-input-calendar.component';
+import { KvInputMaskComponent } from './kv-input-mask/kv-input-mask.component';
+import { KvInputNumberComponent } from './kv-input-number/kv-input-number.component';
+import { KvInputPasswordComponent } from './kv-input-password/kv-input-password.component';
+import { KvInputTextareaComponent } from './kv-input-textarea/kv-input-textarea.component';
+import { KvInputTextCheckboxComponent } from './kv-input-text-checkbox/kv-input-text-checkbox.component';
+import { KvInputTextComponent } from './kv-input-text/kv-input-text.component';
+import { KvInputTimeComponent } from './kv-input-time/kv-input-time.component';
+import { KvLabelModule } from '../kv-label/kv-label.module';
+import { KvMultiSelectComponent } from './kv-multi-select/kv-multi-select.component';
+import { KvRadioGroupComponent } from './kv-radio-group/kv-radio-group.component';
+import { KvSwitchComponent } from './kv-switch/kv-switch.component';
+import { KvSelectButtonComponent } from './kv-select-button/kv-select-button.component';
+import { SelectButtonModule } from 'primeng/selectbutton';
+
+@NgModule({
+  declarations: [
+    KvCheckComponent,
+    KvDropdownComponent,
+    KvEditorComponent,
+    KvInputCalendarComponent,
+    KvInputMaskComponent,
+    KvInputNumberComponent,
+    KvInputPasswordComponent,
+    KvInputTextareaComponent,
+    KvInputTextCheckboxComponent,
+    KvInputTextComponent,
+    KvInputTimeComponent,
+    KvMultiSelectComponent,
+    KvRadioGroupComponent,
+    KvSwitchComponent,
+    KvSelectButtonComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    kvErrorModule,
+    KvLabelModule,
+    PrimeNgModule,
+    ReactiveFormsModule,
+    SelectButtonModule
+  ],
+  exports: [
+    KvCheckComponent,
+    KvDropdownComponent,
+    KvEditorComponent,
+    KvInputCalendarComponent,
+    KvInputMaskComponent,
+    KvInputNumberComponent,
+    KvInputPasswordComponent,
+    KvInputTextareaComponent,
+    KvInputTextCheckboxComponent,
+    KvInputTextComponent,
+    KvInputTimeComponent,
+    KvMultiSelectComponent,
+    KvRadioGroupComponent,
+    KvSwitchComponent,
+    KvSelectButtonComponent,
+  ]
+})
+export class KvInputsModule { }

package/src/lib/components/kv-inputs/kv-multi-select/kv-multi-select.component.html

@@ -0,0 +1,45 @@
+<span [ngClass]="{'disable':  optionInactive === true}">
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+
+  <p-multiSelect
+    appendTo="body"
+    display="chip"
+    inputId="multiselect"
+    styleClass="inputs"
+    [class]="baseInputClass"
+    [group]="group"
+    [disabled]="disabled"
+    [options]="options"
+    [optionDisabled]=" inactiveOptions"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    [filter]="filter"
+    [showClear]="showClear"
+    [(ngModel)]="value"
+    (onChange)="selectionChange($event)"
+    (onPanelHide)="panelHide($event)"
+    [maxSelectedLabels]="maxSelectedLabels"
+      >
+
+
+    <ng-template
+      let-item
+      pTemplate="item"
+      *ngIf="itemTemplate"
+    >
+      <ng-container
+        [ngTemplateOutlet]="itemTemplate"
+        [ngTemplateOutletContext]="{ $implicit: item }"
+      >
+
+      </ng-container>
+    </ng-template>
+
+
+  </p-multiSelect>
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/components/kv-inputs/kv-multi-select/kv-multi-select.component.scss

@@ -0,0 +1,13 @@
+:host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper {
+  display: none !important;
+}
+
+
+::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.1rem 0.4rem;
+}
+
+::ng-deep .p-multiselect-label{
+  padding: 0.3rem 0.3rem;
+  display: flex;
+}

package/src/lib/components/kv-inputs/kv-multi-select/kv-multi-select.component.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  Input,
+  TemplateRef
+} from '@angular/core';
+
+import { BaseComponentMultiSelect } from '../../../api/base-components/base-component-multi-select';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-multi-select',
+  templateUrl: './kv-multi-select.component.html',
+  styleUrls: [
+    './kv-multi-select.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvMultiSelectComponent),
+})
+export class KvMultiSelectComponent extends BaseComponentMultiSelect {
+
+  @Input() group: boolean = false;
+  @Input() itemTemplate!: TemplateRef<any>;
+  @Input() maxSelectedLabels: number = 3;
+  @Input() optionInactive!: boolean;
+
+  inactiveOptions!: string;
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    if (this.optionInactive == true) {
+      this.inactiveOptions = 'inactive';
+      this.options.map((element: Object, index: number) => {
+        Object.defineProperty(element, 'inactive', {
+          value: true,
+        });
+      });
+    }
+  }
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

package/src/lib/components/kv-inputs/kv-radio-group/kv-radio-group.component.html

@@ -0,0 +1,19 @@
+<kv-label [label]="label" />
+<div [class.vertical-radio-group]="vertical">
+  <div class="option" *ngFor="let option of options; let isFirst = first">
+    <p-radioButton
+      [inputId]="option.id"
+      name="option"
+      [value]="option"
+      [(ngModel)]="selectedOpt"
+      (onClick)="selectedOption($event)"
+      [disabled]="disabled"
+      [class.ml-3]="!isFirst && !vertical"
+    >
+    </p-radioButton>
+    <label [for]="option.id" class="radio-option-label">
+      {{ option.description }}</label
+    >
+  </div>
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</div>

package/src/lib/components/kv-inputs/kv-radio-group/kv-radio-group.component.scss

@@ -0,0 +1,15 @@
+.option {
+  display: inline-block;
+  margin: 0;
+  height: 35px;
+  padding-top: 0.75rem;
+}
+
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.radio-option-label {
+  font-size: 1rem;
+}

package/src/lib/components/kv-inputs/kv-radio-group/kv-radio-group.component.ts

@@ -0,0 +1,59 @@
+import {
+  Component,
+  DoCheck,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentService } from '../../../api/services/component.service';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+
+@Component({
+  selector: 'kv-radio-group',
+  templateUrl: './kv-radio-group.component.html',
+  styleUrls: [
+    './kv-radio-group.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvRadioGroupComponent),
+})
+export class KvRadioGroupComponent extends BaseComponentInput<any> implements OnInit, DoCheck {
+
+  @Input() options: any[] = [
+    { id: 0, description: 'Não' },
+    { id: 1, description: 'Sim' },
+  ];
+
+  @Input() optionValueDefault!: any
+  @Input() vertical: boolean = false;
+
+  @Output() onSelectedOption: EventEmitter<any> = new EventEmitter();
+
+  selectedOpt: any = null;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    this.selectedDefault();
+  }
+
+  ngDoCheck(): void {
+    this.selectedDefault();
+  }
+
+  selectedDefault() {
+    if (this.optionValueDefault != undefined && !this.selectedOpt) {
+      let item = this.options.find(opt => opt.id === this.optionValueDefault);
+      if (item) this.selectedOpt = item;
+    }
+  }
+
+  selectedOption(event: any) {
+    this.onSelectedOption.emit(event.value.id);
+  }
+}

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.html

@@ -0,0 +1,26 @@
+@if(value) {
+<p-selectButton
+    [options]="options"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    (onChange)="selectionChange($event)"
+    (onOptionClick)="onOptionClick($event)"
+    [multiple]="mutiple"
+    [disabled]="disabled"
+    [(ngModel)]="value"
+/>
+} @else {
+<div [formGroup]="formGroup">
+    <p-selectButton
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        (onChange)="selectionChange($event)"
+        (onOptionClick)="onOptionClick($event)"
+        [multiple]="mutiple"
+        [disabled]="disabled"
+        [formControlName]="formControlName"
+        [(ngModel)]="value"
+    />
+</div>
+}

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.scss

@@ -0,0 +1,5 @@
+:host ::ng-deep .p-selectbutton .p-button.p-highlight {
+    background: #183462 !important;
+    border: #183462;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.03), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.12);
+}

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvSelectButtonComponent } from './kv-select-button.component';
+
+describe('KvSelectButtonComponent', () => {
+  let component: KvSelectButtonComponent;
+  let fixture: ComponentFixture<KvSelectButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [KvSelectButtonComponent]
+    });
+    fixture = TestBed.createComponent(KvSelectButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.ts

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'kv-select-button',
+  templateUrl: './kv-select-button.component.html',
+  styleUrls: ['./kv-select-button.component.scss']
+})
+export class KvSelectButtonComponent {
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() optionClick: EventEmitter<any> = new EventEmitter();
+
+  @Input() formGroup!: FormGroup
+  @Input() formControlName!: string
+  @Input() options: any[] = []
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() mutiple: boolean = false
+  @Input() disabled: boolean = false
+
+  @Input() value: any;
+
+  selectionChange(event: any) {
+    this.onSelectionChange.emit(event);
+  }
+
+  onOptionClick(event: any) {
+    this.optionClick.emit(event);
+  }
+}

package/src/lib/components/kv-inputs/kv-switch/kv-switch.component.html

@@ -0,0 +1,13 @@
+<div class="center field-checkbox">
+
+  <p-inputSwitch
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [readonly]="readonly"
+    (ngModelChange)="emitOnSwitchChange($event)">
+  </p-inputSwitch>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</div>

package/src/lib/components/kv-inputs/kv-switch/kv-switch.component.scss

@@ -0,0 +1,3 @@
+// p-inputSwitch {
+//   padding-right: 0.5rem;
+// }

package/src/lib/components/kv-inputs/kv-switch/kv-switch.component.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-switch',
+  templateUrl: './kv-switch.component.html',
+  styleUrls: [
+    './kv-switch.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvSwitchComponent),
+})
+export class KvSwitchComponent extends BaseComponentInput<boolean> implements OnInit {
+
+  @Input() readonly!: boolean;
+  @Input() switchValue!: boolean;
+
+  @Output() onSwitchChange: EventEmitter<any> = new EventEmitter();
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    if (this.switchValue)
+      this.value = this.switchValue;
+  }
+
+  emitOnSwitchChange(event: any) {
+    this.onSwitchChange.emit(event);
+  }
+}

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

@@ -0,0 +1,6 @@
+<p class="m-0">
+    <label
+        [for]="componentId"
+        class="label-style"
+    >{{ label }}</label>
+</p>

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

@@ -0,0 +1,9 @@
+::ng-deep .label-style {
+    position: relative;
+    // top: 13px;
+    left: 1px;
+    font-size: 0.80rem !important;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+    font-family: 'Inter var', 'Roboto', Arial, Helvetica, sans-serif !important;
+}

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

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

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

@@ -0,0 +1,14 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+
+@Component({
+  selector: 'kv-label',
+  templateUrl: './kv-label.component.html',
+  styleUrls: ['./kv-label.component.scss']
+})
+export class KvLabelComponent {
+  @Input() componentId!: string;
+  @Input() label!: string;
+}

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KvLabelComponent } from './kv-label.component';
+
+@NgModule({
+  declarations: [
+    KvLabelComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    KvLabelComponent
+  ]
+})
+export class KvLabelModule { }

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

@@ -0,0 +1 @@
+<ngx-loading [show]="(loading | async) || false"></ngx-loading>