keevo-components 2.0.105 → 2.0.107

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

@@ -0,0 +1,197 @@
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+import { CalendarTypeView } from 'primeng/calendar';
+
+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-calendar',
+  templateUrl: './kv-input-calendar.component.html',
+  styleUrls: [
+    './kv-input-calendar.component.scss',
+    '../../keevo-components-styles.scss',
+  ],
+  providers: ComponentProviders(KvInputCalendarComponent),
+})
+export class KvInputCalendarComponent
+  extends BaseComponentInput<Date>
+  implements OnInit
+{
+  @Input() isYear: boolean = false;
+  @Input() isMonthYear: boolean = false;
+
+  @Input() minDate!: Date;
+  @Input() maxDate!: Date;
+  @Input() defaultDate!: Date;
+
+  @Input() showButtonBar: boolean = false;
+  @Input() showIcon: boolean = true;
+  @Input() showTime: boolean = false;
+  @Input() selectionMode: 'single' | 'multiple' | 'range' = 'single';
+  
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  
+  @ViewChild('dateFilter') private dateFilter: any;
+
+  typeView: CalendarTypeView = 'date';
+  dateFormat: string = 'dd/mm/yy';
+
+  screenWidth!: number;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.screenWidth = window.innerWidth;
+  }
+
+  override writeValue(value: Date): void {
+    this.value = value;
+
+    if (value && typeof value === 'string') {
+      this.value = new Date(value);
+    }
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    if (this.isYear) {
+      this.typeView = 'year';
+      this.dateFormat = 'yy';
+    } else if (this.isMonthYear) {
+      this.typeView = 'month';
+      this.dateFormat = 'mm/yy';
+    } else {
+      this.typeView = 'date';
+      this.dateFormat = 'dd/mm/yy';
+    }
+    this.screenWidth = window.innerWidth;
+  }
+
+  protected onInputChange(event: any) {
+    this.hideOnRangeMode();
+    this.onSelectionValue.emit(event);
+
+    if (this.formControl) {
+      this.onSelectionChange.emit(this.formControl.value);
+    }
+  }
+
+  hideOnRangeMode() {
+    if (this.selectionMode == 'range') {
+      if (this.dateFilter.value[1]) {
+        this.dateFilter.hideOverlay();
+      }
+    }
+  }
+
+  lastInputValue: string = '';
+  onKeyDate(event: any) {
+    if (this.typeView === 'date') {
+
+      const inputElement = event.target;
+
+      let inputValue = inputElement.value.replace(/\D/g, ''); // Remove tudo que não seja dígito
+
+      const cursorPosition = inputElement.selectionStart; // Pega a posição atual do cursor
+
+      // Limita a entrada a 8 caracteres (ddmmyyyy)
+      if (inputValue.length > 8) {
+        inputValue = inputValue.substring(0, 8);
+      }
+
+      inputValue = this.maskDate(inputValue);
+      let indAdicao =
+        inputValue.length > this.lastInputValue.length ? true : false;
+
+      this.lastInputValue = inputValue;
+
+      // Calcula a diferença de tamanho após aplicar a máscara
+      const maskedLength = inputValue.length;
+      const lengthDiff = maskedLength - this.lastInputValue.length;
+
+      // Atualiza o valor do input sem perder a posição do cursor
+      inputElement.value = inputValue;
+
+      // Ajusta a posição do cursor de acordo com a mudança causada pela máscara
+      let newCursorPosition = cursorPosition + lengthDiff;
+
+      // Se o cursor estava exatamente em uma posição de barra e foi uma adição, ajusta para pular a barra ( somente na adição de caracteres )
+      if (indAdicao) {
+        if (cursorPosition === 3 || cursorPosition === 6) {
+          newCursorPosition += 1;
+        }
+      }
+      // Evita que o cursor vá além do final do valor digitado
+      if (newCursorPosition > inputElement.value.length) {
+        newCursorPosition = inputElement.value.length;
+      }
+
+      // Define a nova posição do cursor
+      inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
+    }
+  }
+
+  override onInputBlur(event: Event): void {
+    super.onInputBlur(event);
+    
+    if (this.typeView === 'date') {
+      const input = event.target as HTMLInputElement; // Cast para HTMLInputElement
+      if (input && input.value) {
+        const dateString = input.value; // Pega o valor do input
+        const [day, month, year] = dateString.split('/');
+
+
+        // Verifica se é uma data válida
+        if (
+          day &&
+          month &&
+          year &&
+          day.length === 2 &&
+          month.length === 2 &&
+          year.length === 4
+        ) {
+
+          const objDate = new Date(+year, +month - 1, +day);
+
+          if ((!isNaN(objDate.getTime())) && !(+month > 12 || +day > 31)) {
+            this.dateFilter.value = objDate; // Atribui a data sem barras ao dateFilter
+          }else{
+            this.formControl?.setErrors({ invalidDate: true, erroMessage: 'Data Invalida!' });
+          }
+        }
+
+
+        
+
+
+      }
+    }
+
+  }
+
+  maskDate(date: string): string {
+    // Aplica a máscara (dd/mm/yyyy)
+    let dateMasked = date;
+    if (date.length >= 5) {
+      dateMasked = date.replace(/^(\d{2})(\d{2})(\d{0,4})/, '$1/$2/$3'); // Formata como dd/mm/yyyy
+    } else if (date.length >= 3) {
+      dateMasked = date.replace(/^(\d{2})(\d{0,2})/, '$1/$2'); // Formata como dd/mm
+    }
+    return dateMasked;
+  }
+}

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

@@ -0,0 +1,24 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+  />
+  <p-inputMask
+    [class]="baseInputClass"
+    styleClass="inputs"
+    [inputId]="componentId"
+    [disabled]="disabled"
+    [placeholder]="placeholder"
+    [(ngModel)]="value"
+    [mask]="mask"
+    (onBlur)="onInputBlur($event)"
+    (onInput)="onInputInput($event)"
+    (onComplete)="onCompleteComplete($event)"
+    [autocomplete]="autocomplete"
+    [unmask]="true"
+  >
+  </p-inputMask>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,35 @@
+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-mask',
+  templateUrl: './kv-input-mask.component.html',
+  styleUrls: [
+    './kv-input-mask.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvInputMaskComponent),
+})
+export class KvInputMaskComponent extends BaseComponentInput<string> implements OnInit {
+
+  @Input() mask: string = "";
+
+  @Output() onComplete: EventEmitter<any> = new EventEmitter();
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  onCompleteComplete($event: any) {
+    this.onComplete.emit($event)
+  }
+}

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

@@ -0,0 +1,23 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+  />
+  <p-inputNumber
+    #inputNumber
+    [disabled]="disabled"
+    [class]="baseInputClass"
+    [inputId]="componentId"
+    styleClass="inputs"
+    [min]="min"
+    [max]="max"
+    [suffix]="suffix"
+    [(ngModel)]="value"
+    (onBlur)="onInputBlur($event)"
+    [maxlength]="maxLength"
+  >
+  </p-inputNumber>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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-number-addon/kv-input-number-addon.component.html

@@ -0,0 +1,33 @@
+<span class="numberAddon">
+  <kv-label [componentId]="componentId" [label]="label && (label + (showAsterisk ? '*' : ''))" />
+  <p-inputGroup class="w-full">
+
+    <!-- Slot para addons à esquerda -->
+    <ng-content select="[leftAddon]"></ng-content>
+
+    @if (addonPosition === 'left' && addonText) {
+    <p-inputGroupAddon>{{addonText}}</p-inputGroupAddon>
+    }
+
+    <ng-content select="[buttonLeftAddon]"></ng-content>
+
+    <p-inputNumber #inputNumber [disabled]="disabled" [class]="baseInputClass" [inputId]="componentId"
+      styleClass="inputs" [min]="min" [max]="max" [suffix]="suffix" [(ngModel)]="value" (onBlur)="onInputBlur($event)"
+      [maxlength]="maxLength">
+    </p-inputNumber>
+
+    <ng-content select="[buttonRightAddon]"></ng-content>
+
+    <!-- Slot para addons à direita -->
+    <ng-content select="[rightAddon]"></ng-content>
+
+    @if (addonPosition === 'right' && addonText) {
+    <p-inputGroupAddon>{{addonText}}</p-inputGroupAddon>
+    }
+
+  </p-inputGroup>
+
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,5 @@
+::ng-deep .numberAddon {
+    .p-inputnumber-input{
+        border-radius: 0;
+    }
+}

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

@@ -0,0 +1,63 @@
+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-addon',
+  templateUrl: './kv-input-number-addon.component.html',
+  styleUrls: [
+    './kv-input-number-addon.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvInputNumberAddonComponent),
+})
+export class KvInputNumberAddonComponent extends BaseComponentInput<string> implements OnInit {
+  @Input() mode: 'currency' | 'decimal' = 'decimal';
+  @Input() digits: number = 0;
+  @Input() min: number = 0;
+  @Input() max!: number;
+  @Input() suffix!: string;
+  @Input() addonText!: string;
+  @Input() addonPosition: 'left' | 'right' = 'left';
+
+  @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-addon/kv-input-text-addon.component.html

@@ -0,0 +1,30 @@
+<span>
+  <kv-label [componentId]="componentId" [label]="label && (label + (showAsterisk ? '*' : ''))" />
+  <p-inputGroup class="w-full">
+    
+    <!-- Slot para addons à esquerda -->
+    <ng-content select="[leftAddon]"></ng-content>
+
+    @if (addonPosition === 'left' && addonText) {
+      <p-inputGroupAddon>{{addonText}}</p-inputGroupAddon>
+    }
+    
+    <ng-content select="[buttonLeftAddon]"></ng-content>
+
+    <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">
+
+    <ng-content select="[buttonRightAddon]"></ng-content>
+    
+    <!-- Slot para addons à direita -->
+    <ng-content select="[rightAddon]"></ng-content>
+    
+    @if (addonPosition === 'right' && addonText) {
+      <p-inputGroupAddon>{{addonText}}</p-inputGroupAddon>
+    }
+  </p-inputGroup>
+  
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,26 @@
+.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%;
+  }
+}
+
+::ng-deep .p-inputgroup-addon {
+  padding: 0 !important;
+}
+
+.p-button {
+  padding: 0 !important;
+}