keevo-components 0.0.7 → 0.0.9

package/src/lib/inputs/check/check.component.html

@@ -0,0 +1,11 @@
+<div class="field-checkbox">
+  <p-checkbox
+    [binary]="true"
+    [disabled]="disabled"
+    [label]="label"
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    (onChange)="emitOnCheckChange($event)">
+  </p-checkbox>
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</div>

package/src/lib/inputs/check/check.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, 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-check',
+  templateUrl: './check.component.html',
+  styleUrls: ['./check.component.scss'],
+  providers: ComponentProviders(CheckComponent),
+})
+export class CheckComponent extends BaseComponentInput<boolean> implements OnInit {
+
+  @Output() onCheckChange: EventEmitter<any> = new EventEmitter();
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  emitOnCheckChange(event: any) {
+    this.onCheckChange.emit(event);
+  }
+}

package/src/lib/inputs/dropdown/dropdown.component.html

@@ -0,0 +1,41 @@
+<span class="p-float-label">
+
+  <p-dropdown
+    appendTo="body"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [filter]="filter"
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    [options]="filteredOptions"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    [showClear]="showClear"
+    [lazy]="true"
+    scrollHeight="100px"
+    (onBlur)="onInputBlur($event)"
+    (onClick)="onInputClick($event)"
+    (onChange)="selectionValue($event)">
+
+    <ng-template *ngIf="addButton" pTemplate="footer">
+      <p-divider></p-divider>
+      <div class="flex flex-wrap card-container p-1">
+        <div class="flex justify-content-center">
+          <button
+            pButton
+            label="Incluir"
+            pTooltip="Clique aqui para incluir um novo registro"
+            tooltipPosition="bottom"
+            icon="pi pi-plus"
+            class="p-button-rounded p-button-success mr-2"
+           (click)="addClick($event)"></button>
+        </div>
+      </div>
+    </ng-template>
+
+  </p-dropdown>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/inputs/dropdown/dropdown.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { DialogService } from 'primeng/dynamicdialog';
+import { ComponentService } from '../../api/services/component.service';
+import { ComponentProviders } from '../../api/helpers/component-providers';
+import { BaseComponentDropDown } from '../../api/base-components/base-component-dropdown';
+
+@Component({
+  selector: 'kv-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.scss'],
+  providers: ComponentProviders(DropdownComponent),
+})
+export class DropdownComponent extends BaseComponentDropDown {
+  constructor(
+    componentService: ComponentService,
+    dialogService: DialogService) {
+    super(componentService, dialogService);
+  }
+}

package/src/lib/inputs/input-calendar/input-calendar.component.html

@@ -0,0 +1,22 @@
+<span class="p-float-label">
+
+  <p-calendar
+    appendTo="body"
+    [class]="baseInputClass"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [minDate]="minDate"
+    [maxDate]="maxDate"
+    [selectionMode]="selectionMode"
+    [showButtonBar]="showButtonBar"
+    [showIcon]="showIcon"
+    [view]="typeView"
+    [dateFormat]="dateFormat"
+    (onBlur)="onInputBlur($event)">
+  </p-calendar>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,54 @@
+import { Component, Input, OnInit } 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: './input-calendar.component.html',
+  styleUrls: ['./input-calendar.component.scss'],
+  providers: ComponentProviders(InputCalendarComponent),
+})
+export class InputCalendarComponent extends BaseComponentInput<Date> implements OnInit {
+
+  @Input() isYear: boolean = false;
+  @Input() isMonthYear: boolean = false;
+  @Input() minDate!: Date;
+  @Input() maxDate!: Date;
+  @Input() showButtonBar: boolean = false;
+  @Input() showIcon: boolean = true;
+  @Input() selectionMode: 'single' | 'multiple' | 'range' = 'single';
+
+  typeView: CalendarTypeView = 'date';
+  dateFormat: string = 'dd/mm/yy';
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  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';
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+<span class="p-float-label">
+
+  <p-inputMask
+    [class]="baseInputClass"
+    [inputId]="componentId"
+    [placeholder]="placeholder"
+    [(ngModel)]="value"
+    [mask]="mask"
+    (onBlur)="onInputBlur($event)">
+  </p-inputMask>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,20 @@
+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-mask',
+  templateUrl: './input-mask.component.html',
+  styleUrls: ['./input-mask.component.scss'],
+  providers: ComponentProviders(InputMaskComponent),
+})
+export class InputMaskComponent extends BaseComponentInput<string> implements OnInit {
+
+  @Input() mask!: string;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

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

@@ -0,0 +1,15 @@
+<span class="p-float-label">
+  <p-inputNumber
+    #inputNumber
+    [class]="baseInputClass"
+    [inputId]="componentId"
+    [min]="min"
+    [max]="max"
+    [(ngModel)]="value"
+    (onBlur)="onInputBlur($event)">
+  </p-inputNumber>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,51 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { InputNumber } from 'primeng/inputnumber';
+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-number',
+  templateUrl: './input-number.component.html',
+  styleUrls: ['./input-number.component.scss'],
+  providers: ComponentProviders(InputNumberComponent),
+})
+export class InputNumberComponent extends BaseComponentInput<string> implements OnInit {
+  @Input() mode: 'currency' | 'decimal' = 'decimal';
+  @Input() digits: number = 0;
+  @Input() min: number = 0;
+  @Input() max!: number;
+
+  @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/inputs/input-password/input-password.component.html

@@ -0,0 +1,18 @@
+<span class="p-float-label">
+  <p-password
+    appendTo="body"
+    [class]="baseInputClass"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [toggleMask]="toggleMask"
+    [feedback]="feedback"
+    [mediumRegex]="mediumRegex"
+    [strongRegex]="strongRegex"
+    (blur)="onInputBlur($event)">
+  </p-password>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,23 @@
+import { Component, Input } 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: './input-password.component.html',
+  styleUrls: ['./input-password.component.scss'],
+  providers: ComponentProviders(InputPasswordComponent),
+})
+export class InputPasswordComponent extends BaseComponentInput<string> {
+
+  @Input() feedback: boolean = false;
+  @Input() mediumRegex: string = '';
+  @Input() strongRegex: string = '';
+  @Input() toggleMask: boolean = true;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

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

@@ -0,0 +1,14 @@
+<span class="p-float-label">
+  <input
+    pInputText
+    type="text"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [id]="componentId"
+    [(ngModel)]="value"
+    (blur)="onInputBlur($event)">
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/inputs/input-text/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/inputs/input-text/input-text.component.ts

@@ -0,0 +1,17 @@
+import { Component, 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-text',
+  templateUrl: './input-text.component.html',
+  styleUrls: ['./input-text.component.scss'],
+  providers: ComponentProviders(InputTextComponent),
+})
+export class InputTextComponent extends BaseComponentInput<string> implements OnInit {
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

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

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

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

@@ -0,0 +1,33 @@
+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: './input-textarea.component.html',
+  styleUrls: ['./input-textarea.component.scss'],
+  providers: ComponentProviders(InputTextareaComponent),
+})
+export class InputTextareaComponent 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/inputs/input-time/input-time.component.html

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

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

@@ -0,0 +1,20 @@
+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: './input-time.component.html',
+  styleUrls: ['./input-time.component.scss'],
+  providers: ComponentProviders(InputTimeComponent),
+})
+export class InputTimeComponent extends BaseComponentInput<string> implements OnInit {
+
+  @Input() showIcon: boolean = true;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

package/src/lib/inputs/kvinputs.module.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CheckComponent } from './check/check.component';
+import { DropdownComponent } from './dropdown/dropdown.component';
+import { InputCalendarComponent } from './input-calendar/input-calendar.component';
+import { InputMaskComponent } from './input-mask/input-mask.component';
+import { InputNumberComponent } from './input-number/input-number.component';
+import { InputPasswordComponent } from './input-password/input-password.component';
+import { InputTextComponent } from './input-text/input-text.component';
+import { InputTextareaComponent } from './input-textarea/input-textarea.component';
+import { InputTimeComponent } from './input-time/input-time.component';
+import { MultiSelectComponent } from './multi-select/multi-select.component';
+import { SwitchComponent } from './switch/switch.component';
+import { kvErrorModule } from '../api/components/error/kverror.module';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    CheckComponent,
+    DropdownComponent,
+    InputCalendarComponent,
+    InputMaskComponent,
+    InputNumberComponent,
+    InputPasswordComponent,
+    InputTextComponent,
+    InputTextareaComponent,
+    InputTimeComponent,
+    MultiSelectComponent,
+    SwitchComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    kvErrorModule,
+    PrimeNgModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    CheckComponent,
+    DropdownComponent,
+    InputCalendarComponent,
+    InputMaskComponent,
+    InputNumberComponent,
+    InputPasswordComponent,
+    InputTextComponent,
+    InputTextareaComponent,
+    InputTimeComponent,
+    MultiSelectComponent,
+    SwitchComponent,
+  ]
+})
+export class KvInputsModule { }

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

@@ -0,0 +1,21 @@
+<span class="p-float-label">
+  <p-multiSelect
+    appendTo="body"
+    display="chip"
+    inputId="multiselect"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [options]="options"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    [filter]="filter"
+    [showClear]="showClear"
+    [(ngModel)]="value"
+    (onChange)="selectionChange($event)"
+    (onPanelHide)="panelHide($event)">
+  </p-multiSelect>
+  <label [for]="componentId">{{ label }}</label>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,44 @@
+import { Component, EventEmitter, Input, OnInit, Output } 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-multi-select',
+  templateUrl: './multi-select.component.html',
+  styleUrls: ['./multi-select.component.scss'],
+  providers: ComponentProviders(MultiSelectComponent),
+})
+export class MultiSelectComponent extends BaseComponentInput<any> implements OnInit {
+
+  @Input() options: any;
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() filter: boolean = false;
+  @Input() showClear: boolean = false;
+
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onPanelHide: EventEmitter<any> = new EventEmitter();
+
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  public override get baseInputClass(): string {
+    return `p-multiselect-sm ${this.hasError ? 'ng-invalid ng-dirty' : ''}`;
+  }
+
+  selectionChange(event: Event) {
+    this.onSelectionChange.emit(event);
+  }
+
+  panelHide(event: Event) {
+    this.onPanelHide.emit(event);
+  }
+}

package/src/lib/inputs/switch/switch.component.html

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

package/src/lib/inputs/switch/switch.component.scss

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

package/src/lib/inputs/switch/switch.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, OnInit, Output } 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-switch',
+  templateUrl: './switch.component.html',
+  styleUrls: ['./switch.component.scss'],
+  providers: ComponentProviders(SwitchComponent),
+})
+export class SwitchComponent extends BaseComponentInput<boolean> implements OnInit {
+
+  @Output() onSwitchChange: EventEmitter<any> = new EventEmitter();
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  emitOnSwitchChange(event: any) {
+    this.onSwitchChange.emit(event);
+  }
+}