keevo-components 1.8.540 → 1.8.541

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

@@ -0,0 +1,61 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+
+import { InputNumber } from 'primeng/inputnumber';
+
+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-number',
+  templateUrl: './kv-input-number.component.html',
+  styleUrls: [
+    './kv-input-number.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvInputNumberComponent),
+})
+export class KvInputNumberComponent extends BaseComponentInput<string> implements OnInit {
+  @Input() mode: 'currency' | 'decimal' = 'decimal';
+  @Input() digits: number = 0;
+  @Input() min: number = 0;
+  @Input() max!: number;
+  @Input() suffix!: string;
+
+  @ViewChild('inputNumber', { static: true }) inputNumber!: InputNumber;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    this.inputNumber.mode = this.mode;
+    this.inputNumber.locale = 'pt-BR';
+
+    switch (this.mode) {
+      case 'decimal':
+        this.configDecimal();
+        break;
+      case 'currency':
+        this.configCurrency();
+        break;
+    }
+  }
+
+  private configDecimal() {
+    if (!this.digits) this.inputNumber.useGrouping = false;
+    this.inputNumber.minFractionDigits = this.digits;
+    this.inputNumber.maxFractionDigits = this.digits;
+  }
+
+  private configCurrency() {
+    this.inputNumber.currency = 'BRL';
+  }
+}

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

@@ -0,0 +1,24 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+  />
+  <p-password
+    appendTo="body"
+    [class]="baseInputClass"
+    styleClass="inputs"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [toggleMask]="toggleMask"
+    [feedback]="feedback"
+    [mediumRegex]="mediumRegex"
+    [strongRegex]="strongRegex"
+    (onBlur)="onInputBlur($event)"
+    [autocomplete]="autocomplete"
+  >
+  </p-password>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

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

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

@@ -0,0 +1,23 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+  />
+  <input
+    pInputText
+    type="text"
+    [class]="baseInputClass"
+    class="inputs"
+    [disabled]="disabled"
+    [id]="componentId"
+    [(ngModel)]="value"
+    (blur)="onInputBlur($event)"
+    (input)="onInputInput($event)"
+    [maxlength]="maxLength"
+    [autocomplete]="autocomplete"
+    [placeholder]="placeholder"
+  >
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,18 @@
+.div-pai {
+  display: flex;
+  flex-direction: row;
+  column-gap: 0.25rem;
+  padding-right: 0;
+}
+
+.div-input {
+  width: 100%;
+}
+
+.div-button {
+  width: 20%;
+
+  button {
+    width: 100%;
+  }
+}

package/src/lib/components/kv-inputs/kv-input-text/kv-input-text.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';
+import { CapitalizePipe } from '../../../api/pipes/capitalize.pipe';
+
+@Component({
+  selector: 'kv-input-text',
+  templateUrl: './kv-input-text.component.html',
+  styleUrls: [
+    './kv-input-text.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvInputTextComponent),
+})
+export class KvInputTextComponent extends BaseComponentInput<string> implements OnInit {
+  @Input() textCaptalized: boolean = false;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {  
+    this.formControl = this.componentService.getFormControl();
+    if (this.formControl?.errors) this.showAsterisk = true;
+    if (this.textCaptalized) {
+      // REGRA:
+      // Só vai mudar o texto quando for dado de consulta (formControl.disabled)
+      // Quando for dado de inclusão/edição (formControl?.enabled), o texto ficará 
+      // como digitado pelo usuário ou buscado do banco de dados.      
+      if (this.formControl?.disabled) 
+        this.formControl?.setValue((new CapitalizePipe).transform(this.formControl?.value));    
+    }    
+  }
+}

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

@@ -0,0 +1,53 @@
+<kv-label
+  [componentId]="componentId"
+  [label]="label && label + (showAsterisk ? '*' : '')"
+/>
+<div class="p-inputgroup">
+  <span
+    class="p-inputgroup-addon flex align-items-center justify-content-center"
+    ><p-checkbox
+      [(ngModel)]="checkBoxValue"
+      [binary]="true"
+      [pTooltip]="tooltipCheckbox"
+      [disabled]="disabledCheckbox"
+    ></p-checkbox>
+  </span>
+@if(mask){
+  <p-inputMask
+  [class]="baseInputClass"
+  styleClass="inputs w-full"
+  class="w-full mask"
+  [inputId]="componentId"
+  [disabled]="disabled"
+  [placeholder]="placeholder"
+  [(ngModel)]="value"
+  [mask]="mask"
+  (onBlur)="onInputBlur($event)"
+  (onInput)="onInputInput($event)"
+  [autocomplete]="autocomplete"
+  [unmask]="true"
+  >
+  </p-inputMask>
+}
+@else {
+  <span class="p-float-label">
+    <input
+      type="text"
+      pInputText
+      [class]="baseInputClass"
+      [disabled]="disabled"
+      [placeholder]="placeholder"
+      [id]="componentId"
+      [(ngModel)]="value"
+      (blur)="onInputBlur($event)"
+      class="w-full"
+      style="height: 1.875rem"
+      [maxlength]="maxLength"
+    />
+  </span>
+}
+</div>
+
+
+
+<kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>

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

@@ -0,0 +1,41 @@
+.p-inputgroup-addon {
+  height: 1.875rem;
+  width: 1.875rem;
+  min-width: 1.875rem;
+}
+
+::ng-deep .p-checkbox {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+::ng-deep .p-checkbox .p-checkbox-box {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+
+::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
+  border-color: #004172;
+  background: #004172;
+
+  &:hover {
+    background-color: #002542;
+  }
+
+  &:active {
+    background-color: #002542;
+  }
+
+  &:disabled {
+    background-color: #002542;
+    opacity: 0.4;
+    cursor: auto;
+  }
+}
+
+::ng-deep .mask .p-inputmask{
+  //remover raio das bordas esquerdas
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}

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

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

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

@@ -0,0 +1,46 @@
+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', '../../keevo-components-styles.scss'],
+  providers: ComponentProviders(KvInputTextCheckboxComponent),
+})
+export class KvInputTextCheckboxComponent extends BaseComponentInput<string> implements OnInit {
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  @Output() readonly checkBoxEmit: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @Input() tooltipCheckbox!: string;
+  @Input() disabledCheckbox: boolean = false;
+
+  @Input() mask!: string;
+
+  private _checkBoxValue: boolean = false;
+
+  @Input() set checkBoxValueInput(value: boolean) {
+    this._checkBoxValue = value;
+  }
+
+  set checkBoxValue(value: boolean) {
+    this._checkBoxValue = value;
+    this.checkBoxEmit.emit(this._checkBoxValue);
+  }
+
+  get checkBoxValue(): boolean {
+    return this._checkBoxValue;
+  }
+
+}

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

@@ -0,0 +1,23 @@
+<span>
+
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+  />
+  <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,24 @@
+<span>
+
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+  />
+  <p-calendar
+    appendTo="body"
+    [class]="baseInputClass"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [showIcon]="showIcon"
+    [icon]="'pi pi-clock'"
+    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,83 @@
+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';
+import { KvSelectButtonsComponent } from './kv-select-buttons/kv-select-buttons.component';
+import { KvTreeMultiSelectComponent } from './kv-tree-multi-select/kv-tree-multi-select.component';
+import { TimesCircleIcon } from 'primeng/icons/timescircle';
+
+@NgModule({
+  declarations: [
+    KvCheckComponent,
+    KvDropdownComponent,
+    KvEditorComponent,
+    KvInputCalendarComponent,
+    KvInputMaskComponent,
+    KvInputNumberComponent,
+    KvInputPasswordComponent,
+    KvInputTextareaComponent,
+    KvInputTextCheckboxComponent,
+    KvInputTextComponent,
+    KvInputTimeComponent,
+    KvMultiSelectComponent,
+    KvRadioGroupComponent,
+    KvSwitchComponent,
+    KvSelectButtonComponent,
+    KvSelectButtonsComponent,
+    KvTreeMultiSelectComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    kvErrorModule,
+    KvLabelModule,
+    PrimeNgModule,
+    ReactiveFormsModule,
+    SelectButtonModule,
+    TimesCircleIcon
+  ],
+  exports: [
+    KvCheckComponent,
+    KvDropdownComponent,
+    KvEditorComponent,
+    KvInputCalendarComponent,
+    KvInputMaskComponent,
+    KvInputNumberComponent,
+    KvInputPasswordComponent,
+    KvInputTextareaComponent,
+    KvInputTextCheckboxComponent,
+    KvInputTextComponent,
+    KvInputTimeComponent,
+    KvMultiSelectComponent,
+    KvRadioGroupComponent,
+    KvSwitchComponent,
+    KvSelectButtonComponent,
+    KvSelectButtonsComponent,
+    KvTreeMultiSelectComponent
+  ]
+})
+export class KvInputsModule { }

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

@@ -0,0 +1,85 @@
+<span [ngClass]="{'disable':  optionInactive === true}">
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+  />
+
+  <p-multiSelect
+    #multiSelect
+    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"
+    [appendTo]="appendTo"
+  >
+
+    @if (itemTemplate) {
+      <ng-template let-item pTemplate="item">
+        <ng-container
+          [ngTemplateOutlet]="itemTemplate"
+          [ngTemplateOutletContext]="{ $implicit: item }"
+        ></ng-container>
+      </ng-template>
+    } 
+
+    @if (multiSelect && toolTipSelectedItems) {
+      <ng-template let-value pTemplate="selectedItems">
+        @for (item of multiSelect.chipSelectedItems(); track $index) {
+          <div #token class="p-multiselect-token">
+            <span
+              class="p-multiselect-token-label"
+              [pTooltip]="multiSelect.getLabelByValue(item) "
+              tooltipPosition="top"
+            >
+              {{ multiSelect.getLabelByValue(item) }}
+            </span>
+    
+            @if (!disabled) {
+              <ng-container>
+                @if (!multiSelect.removeTokenIconTemplate) {
+                  <TimesCircleIcon
+                    [ngClass]="{ 'p-disabled': multiSelect.isOptionDisabled(item) }"
+                    [styleClass]="'p-multiselect-token-icon'"
+                    (click)="multiSelect.removeOption(item, $event)"
+                    [attr.tabindex]="0"
+                    [attr.data-pc-section]="'clearicon'"
+                    [attr.aria-hidden]="true"
+                  />
+                }
+                @if (multiSelect.removeTokenIconTemplate) {
+                  <span
+                    class="p-multiselect-token-icon"
+                    (click)="multiSelect.removeOption(item, $event)"
+                    [attr.tabindex]="0"
+                    [attr.data-pc-section]="'clearicon'"
+                    [attr.aria-hidden]="true"
+                  >
+                    <ng-container
+                      *ngTemplateOutlet="multiSelect.removeTokenIconTemplate"
+                    ></ng-container>
+                  </span>
+                }
+              </ng-container>
+            }
+          </div>
+        }
+      </ng-template>
+    }
+
+  </p-multiSelect>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>