appproject-components 1.0.46 → 1.0.47

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

@@ -0,0 +1,21 @@
+<div>
+    <ion-item lines="none" style="--background: inherited; --background-focused: transparent; padding-right: 0px;" [class]="itemClass"
+        [style.opacity]="readonly ? '0.5' : '1'">
+        <ion-radio-group [disabled]="readonly" #inputRadio 
+            [value]="data"
+            (ionChange)="writeValue(inputRadio.value)">
+            <span style="font-size: 13px">
+                {{ label }}
+            </span>
+            <ion-row>
+                <ion-col *ngFor="let item of itens">
+                    <ion-radio style="margin-right: 12px;" [color]="color" 
+                        labelPlacement="end" 
+                        justify="start"
+                        [value]="item[itemId]">
+                        {{ item[itemNome] }}</ion-radio><br />
+                </ion-col>
+            </ion-row>
+        </ion-radio-group>
+    </ion-item>
+</div>

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

@@ -0,0 +1,3 @@
+ion-item {
+    --min-height: var(--checkbox-min-height, 48px) !important;
+}

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

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

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

@@ -0,0 +1,49 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseInputComponent } from '../baseInputComponent';
+
+@Component({
+  selector: 'kb-input-radio',
+  templateUrl: './input-radio.component.html',
+  styleUrls: ['./input-radio.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputRadioComponent,
+    multi: true
+  }]
+})
+export class InputRadioComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {
+  @Input() itens: any[] = [];
+  @Input() itemId: string = "Id";
+  @Input() itemNome: string = "Nome";
+  @Input() color: string = "primary";
+  //control value acessor
+  public data!: string | 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-select/input-select.component.html

@@ -0,0 +1,29 @@
+<!--
+<div [formGroup]="form">
+-->
+<div>
+    <ion-item lines="none" style="--background: inherited; --background-focused: transparent;" [class]="itemClass" #itemSelect
+    [ngClass]="form?.get(formControlName)?.errors && (form?.get(formControlName)?.dirty || form?.get(formControlName)?.touched) ? 'error-shake' : '' "
+    >
+      <ion-label *ngIf="label" [position]="labelPosition" class="focus-label">{{ label }}</ion-label>
+      <!-- formControlName="{{ formControlName }}"  -->
+      <select #inputSelect
+        style="width: 100%;" (change)="onSelectChange(inputSelect.value)"
+        (blur)="onBlur()" (focus)="onEnter()" [disabled]="readonly">
+        <option *ngIf="itemNull" [value]="''" selected>{{ opcaoDefault }}</option>
+        <option *ngFor="let item of itens" [value]="item[itemId]" [selected]="item[itemId] == data">{{ item[itemNome] }}
+        </option>
+      </select>    
+    </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)?.touched)">
+          &#8226; {{ validation.message }}
+        </div>
+      </ng-container>
+    </div>
+    
+  </div>

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

@@ -0,0 +1,62 @@
+
+/*
+ion-label {
+    margin-bottom: 4px !important;
+}
+*/
+
+select {
+    padding: var(--select-padding, 4px);
+    border: 1px solid darkgray;
+    border-radius: 4px;    
+    width: 100%;
+    margin-top: 2px;    
+    height: var(--select-height, 29px);
+    margin-left: 0px;
+    margin-bottom: 2px;
+    background-color: white !important;
+}
+
+.no-padding {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;
+    height: 42px !important;
+}
+
+
+select:focus {
+    outline: none !important;
+    border: 1px solid lightblue !important;
+    ion-label{
+        color: var(--ion-color-label-focus, blue) !important;
+    }
+    /*
+    .focus-label {
+        color: var(--ion-color-label-focus, blue) !important;
+    }
+    */
+}
+
+
+
+.item-has-focus {
+    ion-label {
+        color: var(--ion-color-label-focus, blue) !important;
+    }
+}
+
+
+/*
+.no-padding-no-height {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;    
+}
+*/
+
+/*
+.padding-top {
+    --padding-top: 0px;
+}
+*/

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

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

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

@@ -0,0 +1,96 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseInputComponent } from '../baseInputComponent';
+
+@Component({
+  selector: 'kb-input-select',
+  templateUrl: './input-select.component.html',
+  styleUrls: ['./input-select.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputSelectComponent,
+    multi: true
+  }]
+})
+export class InputSelectComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {  
+  @Output() selectChange = new EventEmitter();
+  @Output() selectChangeEntity = new EventEmitter();
+  @Input() itens: any[] = [];
+  @Input() itemId: string = "Id";
+  @Input() itemNome: string = "Nome";
+  @Input() showNovo: boolean = false;
+  @Input() itemNull: boolean = true;
+  @Input() opcaoDefault: string = 'Selecionar';
+
+  //para 'injeção' de estilo no foco
+  @ViewChild("itemSelect", {read: ElementRef}) itemSelect: any;
+
+  //control value acessor
+  public data: string | any;
+  private onChange: Function = (data: string) => {};
+  private onTouch: Function = () => {};
+  private disabled: boolean = false;
+  public console = console;
+
+  writeValue(value: string | any): void {
+    //console.log('write value select', 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(private renderer: Renderer2) { 
+    super();
+  }
+
+  override ngOnInit() {
+    if (this.readonly === true) {
+      //console.log("disabled");
+      setTimeout(() => {
+        //this.renderer.addClass(document.getElementById("item-select"), "item-has-focus");
+        this.renderer.addClass(this.itemSelect.nativeElement, "item-interactive-disabled");
+        //console.log('select focused', document.getElementById("item-select"));
+      }, 100);
+    }
+  }
+
+  onSelectChange(value: any) {
+    this.writeValue(value == '' ? null : value);    
+    if (this.selectChange != null) {
+      //console.log('emit', value);
+      this.selectChange.emit(value);
+    }
+    if (this.selectChangeEntity != null) {
+      const existe = this.itens.find(i => i[this.itemId] == value);
+      this.selectChangeEntity.emit(existe);
+    }
+  }
+
+  onBlur() {
+    //console.log('input select blur')
+    setTimeout(() => {
+      this.renderer.removeClass(this.itemSelect.nativeElement, "item-has-focus");
+    }, 200);
+
+    if (this.form) {
+      this.form.get(this.formControlName)?.markAsTouched();
+    }
+  }
+
+  onEnter() {
+    //adicionar classe ao ion-item
+    setTimeout(() => {
+      this.renderer.addClass(this.itemSelect.nativeElement, "item-has-focus");
+      //console.log('select focused', document.getElementById("item-select"));
+    }, 200);    
+  }
+
+}

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

@@ -0,0 +1,48 @@
+<!--
+<div [formGroup]="form">
+  [style.opacity]="readonly ? '0.8' : '1'"
+-->
+<div>
+    <ion-item lines="none" style="--background: inherited; --background-focused: transparent; padding-right: 0px;" [class]="itemClass"    
+    [ngClass]="form?.get(formControlName)?.errors && (form?.get(formControlName)?.dirty || form?.get(formControlName)?.touched) ? 'error-shake' : '' "
+    >
+      <ion-label position="{{ labelPosition }}">{{ label }}&nbsp;</ion-label>
+      <!-- formControlName="{{ campo }}"  -->
+      <ion-input #inputText
+        type="{{type}}"       
+        [placeholder]="placeholder" 
+        maxlength="{{ max }}"
+        (ionBlur)="onBlur()"
+        [value]="data"
+        (input)="writeValue(inputText.value)"          
+        autocomplete="new-password"
+        [style.--background]="inputBackgroungColor"
+        [disabled]="readonly"
+        [clearInput]="botaoLimpar">
+        <ion-icon *ngIf="iconInput" name="{{ iconInput }}"></ion-icon>
+      </ion-input>
+      
+      <ion-button size="small" slot="end" *ngIf="showSeePassword" style="margin-top: 27px; margin-inline-start: 4px !important;" fill="clear" color="dark" (click)="changeTypeOfInput()">
+        <!-- (click)="limparClick()" -->
+        <ion-icon [name]="type == 'password' ? 'eye-outline' : 'eye-off-outline' "></ion-icon>
+      </ion-button>
+
+      <ion-button size="small" slot="end" *ngIf="showCustomAction" style="margin-top: var(--input-text-custom-btn-margin-top, 27px); margin-inline-start: 4px !important;" fill="clear" color="dark" (click)="customClick()">
+        <!-- (click)="limparClick()" -->
+        <ion-icon slot="icon-only" [name]="customActionIcon"></ion-icon>
+      </ion-button>
+
+      <span *ngIf="inputSpanAfter" slot="end" class="inputSpanAfter-item">&nbsp;{{ inputSpanAfter }}</span>
+    </ion-item>
+  
+    <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>

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

@@ -0,0 +1,63 @@
+/*
+ion-label {
+    margin-bottom: 4px !important;
+    opacity: 1 !important;
+}
+*/
+.no-padding-end {
+    --inner-padding-end: 0;
+}
+
+ion-input {
+    ion-icon {
+        padding-right: 6px;
+        font-size: 18px;
+    }
+}
+
+/*
+ion-input {
+    padding: 2px;
+    border: 1px solid darkgray;
+    border-radius: 4px;    
+    width: 100%;
+    margin-top: 2px;    
+    max-height: 29px;
+    transition: .2s ease;
+}
+*/
+
+/*
+.padding {
+    //--inner-padding-end: auto; --padding-start: auto;
+    padding: auto;
+    padding-left: 0px;
+}
+*/
+
+/*
+.no-padding {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;
+    height: 39px !important;
+}
+*/
+
+/*
+.no-padding-no-height {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;    
+}
+*/
+
+/*
+.padding-top {
+    --padding-top: 0px;
+}
+*/
+
+.input-login {
+    height: 36px;
+}

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

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

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

@@ -0,0 +1,78 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseInputComponent } from '../baseInputComponent';
+
+@Component({
+  selector: 'kb-input-text',
+  templateUrl: './input-text.component.html',
+  styleUrls: ['./input-text.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputTextComponent,
+    multi: true
+  }]
+})
+export class InputTextComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {
+  @Input() iconInput?: string;
+  @Input() inputSpanAfter: string = null;
+  @ViewChild('inputText', { read: ElementRef, static: true}) inputTextEdit;
+  @Input() campoFoco: string;
+  showSeePassword!: boolean;
+  @Input() showCustomAction: boolean = false;
+  @Input() customActionIcon: string = "search-outline";
+  @Output() customActionClick = new EventEmitter();
+  //control value acessor
+  public data!: string | 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 {
+  }
+
+  onBlur() {
+    console.log('control name', this.formControlName);
+    if (this.form) {
+      this.form.get(this.formControlName)?.markAsTouched();
+    }
+  }
+
+  limparClick() {
+    this.writeValue(undefined);
+  }
+
+  isReadonly() {
+    return this.leitura;
+  }
+  changeTypeOfInput() {
+    this.type = 
+      this.type == 'password' ?
+      'text' : 'password';
+  }
+  setFocus() {
+    this.inputTextEdit.nativeElement.setFocus();
+  }
+
+  customClick() {
+    this.customActionClick.emit();
+  }
+}

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

@@ -0,0 +1,32 @@
+<!--
+<div [formGroup]="form">
+-->
+<div>
+    <ion-item lines="none" style="--background-focused: transparent;" [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 #inputValor
+        type="text"       
+        [placeholder]="placeholder" 
+        maxlength="{{ max }}"
+        (ionBlur)="onBlur()"
+        [value]="data"
+        (input)="writeValue(inputValor.value)"          
+        (keypress)="digitarValor($event)"
+        [clearInput]="botaoLimpar"
+        [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.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-valor/input-valor.component.scss

@@ -0,0 +1,47 @@
+/*
+ion-label {
+    margin-bottom: 4px !important;
+    opacity: 1 !important;
+    overflow: initial !important;
+}
+*/
+
+/*
+ion-input {
+    padding: 4px;
+    border: 1px solid darkgray;
+    border-radius: 4px;    
+    width: 100%; 
+    max-height: 27px;
+    text-align: right;
+}
+*/
+
+    .item-inner {
+        padding-right: 0px !important;
+    }
+
+    /*
+    .no-padding {
+        --inner-padding-end: 0px; --padding-start: 0px;    
+        --padding-bottom: 0px;
+        --inner-padding-bottom: 0px;
+        height: 39px !important;
+    }
+    */
+
+    .label-right {
+        ion-label{
+           transform-origin: right top;
+           align-self: flex-end;    
+           //margin-bottom: 4% !important;
+        }
+    }
+
+.align-to-right {
+    ion-label {
+        position: relative;
+        left: 25%;
+        text-align: end;
+    }
+}

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

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