appproject-components 1.0.48 → 1.0.49

package/src/lib/input-cep/input-cep.component.html

@@ -0,0 +1,38 @@
+<!--
+<div [formGroup]="form">
+-->
+<!--comando --inner-padding-end: utilizado pra remover padding desnecessários-->
+<div>
+    <ion-item lines="none" style="--background: inherited;--background-focused: transparent;--inner-padding-end: 0px;" [class]="itemClass"
+    [ngClass]="form?.get(formControlName)?.errors && (form?.get(formControlName)?.dirty || form?.get(formControlName)?.touched) ? 'error-shake' : '' "
+    >
+      <ion-label [position]="labelPosition">{{ label }}</ion-label>
+      <!-- formControlName={{formControlName}} -->
+      <ion-input #inputCep
+      type="tel" 
+      [placeholder]="placeholder"
+      maxlength="{{ max }}" 
+      (keydown)="digitarFormatado($event)" 
+      (keyup.enter)="onKeyEnter()"
+      (ionBlur)="onBlur()"
+      [value]="data"
+      (input)="writeValue(inputCep.value)"
+      [disabled]="readonly"></ion-input>
+
+      <ion-button size="small" slot="end" tabindex="-1"
+        style="margin-top: 25px; margin-inline-start: 4px !important; --padding-start:2px; --padding-end: 2px;" fill="clear" color="medium"
+        (click)="pesquisarClick()">
+        <ion-icon color="primary" name="search"></ion-icon>
+      </ion-button>
+  
+    </ion-item>
+  
+    <div class="validation-errors" *ngIf="form">
+      <ng-container *ngFor="let validation of validation_messages">
+        <div class="error-message"
+          *ngIf="form && form.get(formControlName)?.hasError(validation.type) && (form.get(formControlName)?.dirty || form.get(formControlName)?.touched)">
+          &#8226; {{ validation.message }}
+        </div>
+      </ng-container>
+    </div>
+  </div>

package/src/lib/input-cep/input-cep.component.spec.ts

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

package/src/lib/input-cep/input-cep.component.ts

@@ -0,0 +1,186 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { BaseInputComponent } from '../baseInputComponent';
+
+@Component({
+  selector: 'kb-input-cep',
+  templateUrl: './input-cep.component.html',
+  styleUrls: ['./input-cep.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputCepComponent,
+    multi: true
+  }]
+})
+export class InputCepComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {
+
+  @Input() formato: string | null = '00000-000';
+  @Input() keyEnter: Function | null = null;
+  @Output() getResultados = new EventEmitter();
+
+  //control value acessor
+  public data: string | any = null;
+  private onChange: Function = (data: string) => { };
+  private onTouch: Function = () => { };
+  private disabled: boolean = false;
+  constructor() {
+    super();
+  }
+
+  writeValue(value: string | any): void {
+    //console.log('write value', value);
+    this.onChange(value);
+    this.data = value;
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = this.disabled;
+  }
+
+  override ngOnInit(): void {
+  }
+
+  digitarFormatado(event: any) {
+    //console.log(event);
+    if ((event.keyCode >= 48 && event.keyCode <= 57)
+      || (event.keyCode >= 96 && event.keyCode <= 105)
+      || (event.keyCode == 8)
+      || (event.keyCode == 9)
+      || (event.keyCode == 39)
+      || (event.keyCode == 37)
+      || (event.keyCode == 46)) {
+
+      //console.log(this.formControlName, this.form.get(this.formControlName).value);
+
+      setTimeout(() => {
+        if (this.form) {
+          this.form.patchValue({
+            [this.formControlName]: this.formataCampoValor(this.form.get(this.formControlName)?.value, this.formato ?? '', event)
+          });
+        } else {
+          this.data = this.formataCampoValor(this.data ?? '', this.formato ?? '', event);
+          this.writeValue(this.data);
+        }
+      }, 100);
+
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+
+  onKeyEnter() {
+    if (this.keyEnter != null) {
+      this.keyEnter();
+    } else {
+      if (this.getResultados != null) {
+        this.pesquisarClick();
+      }
+    }
+  }
+
+  onBlur() {
+    if (this.form) {
+      this.form.get(this.formControlName)?.markAsTouched();
+    }
+    if (this.blur) {
+      this.blur.emit(this.blurArgs);
+    }
+  }
+
+  formataCampoValor(valor: string, Mascara: string, evento: any) {
+    //console.log(valor);
+    if (!valor)
+      return null;
+    //console.log(evento);
+
+    //if (!this.keypressInteiro(evento))
+    //  return;
+
+    var boleanoMascara;
+
+    var Digitato = evento != null ? evento.keyCode : 0;
+    let exp = /\-|\.|\/|\(|\)| /g
+    let campoSoNumeros = valor.replace(exp, "");
+
+    var posicaoCampo = 0;
+    var NovoValorCampo = "";
+    var TamanhoMascara = campoSoNumeros.length;;
+
+    if (Digitato != 8) { // backspace 
+      for (let i = 0; i <= TamanhoMascara; i++) {
+        boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".")
+          || (Mascara.charAt(i) == "/"))
+        boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(")
+          || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " "))
+        if (boleanoMascara) {
+          NovoValorCampo += Mascara.charAt(i);
+          TamanhoMascara++;
+        } else {
+          NovoValorCampo += campoSoNumeros.charAt(posicaoCampo);
+          posicaoCampo++;
+        }
+      }
+      return NovoValorCampo;
+    } else {
+      return valor;
+    }
+  }
+
+  pesquisarClick() {
+    const cep = this.data;
+    //se não estiver informado o cep, não fazer a pesquisa
+    if (cep == null || cep == "") {
+      return;
+    }
+
+    this.getEnderecoPeloCep(cep).subscribe({
+      next: (result) => {
+        //console.log('result CEP', result);
+
+        let cidadePesquisa: string = result.localidade;
+        cidadePesquisa = this.converteCaracteresEspeciais(cidadePesquisa.toUpperCase());
+
+        if (this.getResultados) {
+          this.getResultados.emit(result);
+        }
+
+      }, error: (error) => {
+
+      }
+    });
+  }
+
+  //substituição de caracteres
+  converteCaracteresEspeciais(nome: string): string {
+    var res = nome.replace(/Ã/g, "A");
+    res = res.replace(/Á/g, "A");
+    res = res.replace(/Ç/g, "C");
+    res = res.replace(/É/g, "E");
+    res = res.replace(/Â/g, "A");
+    res = res.replace(/Ô/g, "O");
+    res = res.replace(/Ó/g, "O");
+    res = res.replace(/Ú/g, "U");
+    res = res.replace(/Í/g, "I");
+    return res;
+  }
+
+  getEnderecoPeloCep(cep: any): Observable<any> {
+    return new Observable((x) => {
+      var request = new XMLHttpRequest();
+      request.open('get', `https://viacep.com.br/ws/${cep}/json/`, true);
+      request.send();
+      request.onload = function () {
+        var data = JSON.parse(this.response);
+        x.next(data)
+      }
+    })
+  }
+}

package/src/lib/input-checkbox/input-checkbox.component.html

@@ -0,0 +1,12 @@
+<div>
+    <ion-item lines="none" style="--background: inherited; --background-focused: transparent; padding-right: 0px;" [class]="itemClass">
+        <ion-checkbox #inputCheck
+            [labelPlacement]="labelPlacement" [justify]="justify" 
+            [disabled]="readonly"
+            [checked]="data"
+            [color]="labelColor ?? 'primary'"            
+            (ionChange)="writeValue(inputCheck.checked)">
+            <span [style.color]="labelColor ?? 'auto'">{{ label }}</span> 
+        </ion-checkbox>
+    </ion-item>
+</div>

package/src/lib/input-checkbox/input-checkbox.component.scss

@@ -0,0 +1,11 @@
+ion-item {
+    --min-height: var(--checkbox-min-height, 48px) !important;
+}
+
+ion-checkbox.checkbox-disabled {
+    opacity: var(--item-disabled-opacity, 0.6) !important;
+}
+
+span {
+    color: var(--checkbox-text-color, 'inherit') !important;
+}

package/src/lib/input-checkbox/input-checkbox.component.spec.ts

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

package/src/lib/input-checkbox/input-checkbox.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseInputComponent } from '../baseInputComponent';
+
+@Component({
+  selector: 'kb-input-checkbox',
+  templateUrl: './input-checkbox.component.html',
+  styleUrls: ['./input-checkbox.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputCheckboxComponent,
+    multi: true
+  }]
+})
+export class InputCheckboxComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {
+
+  @Input() justify: string = "start";
+  @Input() labelPlacement: string = "end";
+  //control value acessor
+  public data!: boolean | undefined;
+  private onChange: Function = (data: string) => { };
+  private onTouch: Function = () => { };
+  private disabled: boolean = false;
+  public console = console;
+
+  writeValue(value?: any): void {
+    console.log('write value', value);
+    this.onChange(value);
+    this.data = value;
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = this.disabled;
+  }
+  constructor() {
+    super();
+  }
+
+  
+
+  override ngOnInit(): void {
+  }
+}

package/src/lib/input-format/input-format.component.html

@@ -0,0 +1,32 @@
+<!--
+<div [formGroup]="form">
+-->
+<!--comando --inner-padding-end: utilizado pra remover padding desnecessários-->
+<div>
+    <ion-item lines="none" style="--background: inherited;--background-focused: transparent;--inner-padding-end: 0px;" [class]="itemClass"
+    [ngClass]="form?.get(formControlName)?.errors && (form?.get(formControlName)?.dirty || form?.get(formControlName)?.touched) ? 'error-shake' : '' "
+    >
+      <ion-label [position]="labelPosition">{{ label }}</ion-label>
+      <!-- formControlName={{formControlName}} -->
+      <ion-input #inputFormat
+      type="tel" 
+      [placeholder]="placeholder"
+      maxlength="{{ max }}" 
+      (keydown)="digitarFormatado($event)" 
+      (keyup.enter)="onKeyEnter()"
+      (ionBlur)="onBlur()"
+      [value]="data"
+      (input)="writeValue(inputFormat.value)"
+      [disabled]="readonly"></ion-input>
+  
+    </ion-item>
+  
+    <div class="validation-errors" *ngIf="form">
+      <ng-container *ngFor="let validation of validation_messages">
+        <div class="error-message"
+          *ngIf="form && form.get(formControlName)?.hasError(validation.type) && (form.get(formControlName)?.dirty || form.get(formControlName)?.touched)">
+          &#8226; {{ validation.message }}
+        </div>
+      </ng-container>
+    </div>
+  </div>

package/src/lib/input-format/input-format.component.scss

@@ -0,0 +1,47 @@
+/*
+@keyframes shake {
+    0% { transform: translate(20px); }
+    20% { transform: translate(-20px); }
+    40% { transform: translate(10px); }
+    60% { transform: translate(-10px); }
+    80% { transform: translate(4px); }
+    100% { transform: translate(0px); }
+}
+.error-shake {
+    ion-label {
+        color: red !important;
+    }
+    ion-input {
+        animation: shake 0.4s 1 linear;
+        border: 1px solid red !important;
+    }
+}
+*/
+
+/*
+.has-focus {
+    border: 1px solid var(--ion-color-bluetool, #1f477d);
+}
+*/
+
+/*
+ion-label {
+    margin-bottom: 4px !important;
+}
+*/
+
+/*
+ion-input {
+    padding: 4px;
+    border: 1px solid darkgray;
+    border-radius: 4px;    
+    width: 100%;
+    margin-top: 2px;    
+    max-height: 29px;
+}
+*/
+
+
+ .item-inner {
+    padding-right: 0px !important;
+}

package/src/lib/input-format/input-format.component.spec.ts

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

package/src/lib/input-format/input-format.component.ts

@@ -0,0 +1,139 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseInputComponent } from '../baseInputComponent';
+
+@Component({
+  selector: 'kb-input-format',
+  templateUrl: './input-format.component.html',
+  styleUrls: ['./input-format.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputFormatComponent,
+    multi: true
+  }]
+})
+export class InputFormatComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {
+
+  @Input() formato: string | null = null;
+  @Input() keyEnter = new EventEmitter();
+  @ViewChild('inputFormat', { read: ElementRef, static: true}) inputFormatEdit;
+  
+  //control value acessor
+  public data: string | any = null;
+  private onChange: Function = (data: string) => {};
+  private onTouch: Function = () => {};
+  private disabled: boolean = false;
+  public console = console;
+
+  writeValue(value: string | any): void {
+    //console.log('write value', value);
+    this.onChange(value);
+    this.data = value;
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = this.disabled;
+  }
+
+  constructor() { 
+    super();
+  }
+
+  override ngOnInit() { }
+
+  digitarFormatado(event: any) {
+    //console.log(event);
+    const index = event.target.selectionStart >= 1 ? (event.target.selectionStart - 1) : 0;
+    const keyAt = event.target.value.charCodeAt(index);
+    if ((event.keyCode >= 48 && event.keyCode <= 57)
+     || (keyAt >= 48 && keyAt <= 57)
+     || (event.keyCode >= 96 && event.keyCode <= 105)
+     || (event.keyCode == 8)
+     || (event.keyCode == 9)
+     || (event.keyCode == 39)
+     || (event.keyCode == 37) 
+     || (event.keyCode == 46)) {
+
+      //console.log(this.formControlName, this.form.get(this.formControlName).value);
+
+      setTimeout(() => {
+        if (this.form) {
+          this.form.patchValue({
+            [this.formControlName]: this.formataCampoValor(this.form.get(this.formControlName)?.value, this.formato ?? '', event)
+          });
+        } else {
+          this.data = this.formataCampoValor(this.data ?? '', this.formato ?? '', event);
+          this.writeValue(this.data);
+        }
+      }, 100);
+
+      return true;
+    }
+    else {
+      return false;
+    }        
+  }
+
+  onKeyEnter() {
+    if (this.keyEnter != null) {
+      this.keyEnter.emit();
+    }
+  }
+
+  onBlur() {
+    if (this.form) {
+      this.form.get(this.formControlName)?.markAsTouched();
+    }
+    if (this.blur) {
+      this.blur.emit(this.blurArgs);
+    }
+  }
+
+  setFocus() {
+    this.inputFormatEdit.nativeElement.setFocus();
+  }
+
+  formataCampoValor(valor: string, Mascara: string, evento: any) {
+    console.log(valor);
+    if (!valor)
+      return null;
+    //console.log(evento);
+
+    //if (!this.keypressInteiro(evento))
+    //  return;
+
+    var boleanoMascara;
+
+    var Digitato = evento != null ? evento.keyCode : 0;
+    let exp = /\-|\.|\/|\(|\)| /g
+    let campoSoNumeros = valor.replace(exp, "");
+
+    var posicaoCampo = 0;
+    var NovoValorCampo = "";
+    var TamanhoMascara = campoSoNumeros.length;;
+
+    if (Digitato != 8) { // backspace 
+      for (let i = 0; i <= TamanhoMascara; i++) {
+        boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".")
+          || (Mascara.charAt(i) == "/"))
+        boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(")
+          || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " "))
+        if (boleanoMascara) {
+          NovoValorCampo += Mascara.charAt(i);
+          TamanhoMascara++;
+        } else {
+          NovoValorCampo += campoSoNumeros.charAt(posicaoCampo);
+          posicaoCampo++;
+        }
+      }
+      return NovoValorCampo;
+    } else {
+      return valor;
+    }
+  }
+}

package/src/lib/input-pesquisa/input-pesquisa.component.html

@@ -0,0 +1,77 @@
+<div style="padding-inline-end: 0px;">
+    <ion-item lines="none" style="--background: inherited; --background-focused: transparent; margin-top: 2px;" [class]="itemClass">
+      <ion-label position="{{ labelPosition }}">{{ label }}</ion-label>
+      <!-- formControlName="{{ campo }}"  -->
+      <ion-spinner *ngIf="!podePesquisar"
+        style="--min-height: 0px !important; margin-inline-end: 5px !important; margin-top: 16px;" 
+        slot="start" name="lines"></ion-spinner>
+      <!-- (ionBlur)="verificarPesquisa()" -->
+      <!-- conflito com click da lista -->
+      <ion-input #inputPesquisa
+        [legacy]="true"
+        type="{{type}}" 
+        [placeholder]="placeholder" 
+        maxlength="{{ max }}" 
+        (ionBlur)="onBlur($event)"
+        [value]="textoPesquisa" (input)="writePesquisa(inputPesquisa.value)" 
+        (keyup)="showPesquisa($event)"
+        autocomplete="off" [style.--background]="inputBackgroungColor"
+        (click)="dropDownPesquisa(-1)"
+        [disabled]="readonly" debounce="500"></ion-input>
+      <ion-button size="small" slot="end" tabindex="-1"
+        class="botao-limpar" fill="clear" color="medium"
+        (click)="limparClick()">
+        <ion-icon name="close-outline"></ion-icon>
+      </ion-button>
+  
+      
+      <ion-button size="small" slot="end" tabindex="-1"
+        class="botao-limpar" fill="clear" color="medium"
+        (click)="pesquisarClick()">
+        <ion-icon color="primary" name="search"></ion-icon>
+      </ion-button>
+      
+      
+    </ion-item>
+  
+    <ion-list tabindex="-1" [hidden]="!selectElementVisivel || !listaPesquisa || listaPesquisa.length == 0" class="pesquisa-list" style="max-height: 250px; overflow-y: auto;">
+      
+      <ion-item tabindex="-1" button *ngFor="let item of listaPesquisa" 
+      (click)="selecionarComboClick(item)" [id]="selectId + 'IonItem' + item['Index']"
+        class="pesquisa-item">
+        <!-- {{ item | json}} -->
+        <span [class]="{'selected-item': item['Selected'] === true}" [innerHTML]="highlight(item[campoDisplay])"></span>
+      </ion-item>
+  
+    </ion-list>
+  
+    <!--
+    <ion-select interface="popover" #selectElement tabindex="-1" [hidden]="!selectElementVisivel"
+      (ionChange)="selecionarComboChange($event.target.value)">
+      <ion-select-option *ngFor="let item of listaPesquisa" [value]="item[campoId]" (click)="selecionarComboClick(item[campoId])">
+        {{ item[campoDisplay] }}
+      </ion-select-option>
+    </ion-select>
+    -->
+  
+    <!--
+    <select [id]="selectId" #selectElement tabindex="-1" [hidden]="!selectElementVisivel"
+      (change)="selecionarComboChange($event.target.value)" class="pesquisa-select">
+      <option *ngFor="let item of listaPesquisa" [value]="item[campoId]" (click)="selecionarComboClick(item[campoId])">
+        {{ item[campoDisplay] }}
+      </option>
+  
+    </select>
+    -->
+  
+    <div class="validation-errors" *ngIf="form">
+  
+      <ng-container *ngFor="let validation of validation_messages">
+        <div class="error-message"
+          *ngIf="form.get(formControlName)?.hasError(validation.type) && (form.get(formControlName)?.dirty || form.get(formControlName)?.touched)">
+          &#8226; {{ validation.message }}
+        </div>
+      </ng-container>
+  
+    </div>
+  </div>