keevo-components 1.8.262 → 1.8.264

package/src/lib/components/kv-inputs/kv-editor/kv-editor.component.ts

@@ -0,0 +1,138 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+import Quill from 'quill';
+// import QuillBlotFormatter  from 'quill-blot-formatter-2';
+
+
+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-editor',
+  templateUrl: './kv-editor.component.html',
+  styleUrls: ['./kv-editor.component.scss',],
+  providers: ComponentProviders(KvEditorComponent),
+})
+export class KvEditorComponent extends BaseComponentInput<string> implements OnInit {
+  // BlotFormatter = QuillBlotFormatter;
+
+
+  constructor(
+    componentService: ComponentService) {
+    super(componentService);
+  }
+
+  @Input() readonly: boolean = false;
+  @Input() canvaHeigth: string = '380px';
+  @Input() debug: boolean = false;
+
+  @Output() onTextChange: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+
+  @Output() outputRaw: EventEmitter<string> = new EventEmitter();
+  @Output() outputHtml: EventEmitter<string> = new EventEmitter();
+
+
+  private updatingEditor: boolean = false;
+
+  quill!: Quill;
+
+
+  /**
+   * caso defina como "text" o texto ira ser enviado sem formatação
+   */
+  @Input() contentType: 'html' | 'text' = 'html';
+
+
+
+  override ngOnInit() {
+    super.ngOnInit()
+    if (!this.quill) {
+      this.initializeQuillEditor();
+    }
+  }
+
+
+  initializeQuillEditor() {
+    const ColorClass: any = Quill.import('attributors/class/color');
+    const ColorStyle: any = Quill.import('attributors/style/color');
+    const SizeStyle: any = Quill.import('attributors/style/size');
+    const Font: any = Quill.import('formats/font');
+    const Size: any = Quill.import('attributors/style/size');
+
+    Size.whitelist = ['15px', '20px', '30px', '40px', '50px', '70px', '90px'];
+    Font.whitelist = ['monospace', 'roboto', 'serif', 'inter'];
+
+    Quill.register(ColorStyle, true);
+    Quill.register(SizeStyle, true);
+    Quill.register(Font, true);
+    Quill.register(Size, true);
+
+    // Quill.register('modules/blotFormatter', this.BlotFormatter);
+
+
+    // blotFormatter: {}
+    this.quill = new Quill('#kv-editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: '#kv-editor-toolbar',
+      },
+
+      placeholder: this.label ? this.label : '',
+      readOnly: this.readonly,
+      debug: this.debug,
+    });
+
+
+    this.quill.on('selection-change', (range, oldRange, source) => {
+      this.onSelectionChange.emit({
+        range: range,
+        oldRange: oldRange,
+        source: source
+      });
+    });
+
+    this.quill.on('text-change', (delta, oldContents, source) => {
+      if (!this.updatingEditor) {
+        this.updatingEditor = false;
+
+        this.escrevaValor(this.quill.getSemanticHTML(), this.quill.getText())
+
+        this.onTextChange.emit({ delta: delta, oldContents: oldContents, source: source });
+        this.outputRaw.emit(this.quill.getText())
+        this.outputHtml.emit(this.quill.getSemanticHTML())
+
+      }
+    });
+
+  }
+
+  override writeValue(value: any): void {
+    this.updatingEditor = true
+    this.escrevaValor(value)
+  }
+
+
+  escrevaValor(htmlvalue: any, rawvalue?:any){
+    if (this.quill) {
+
+      if(this.updatingEditor){
+        this.quill.clipboard.dangerouslyPasteHTML(htmlvalue)
+      }
+
+      this.updatingEditor = false;
+      this.value= htmlvalue
+
+      if(rawvalue == "\n" || this.value =="\n")
+        this.value = ''
+
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && label + (showAsterisk ? '*' : '')"
+  />
+  <p-calendar
+    #dateFilter
+    appendTo="body"
+    [class]="baseInputClass"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [minDate]="minDate"
+    [maxDate]="maxDate"
+    [selectionMode]="selectionMode"
+    [showButtonBar]="showButtonBar"
+    [showIcon]="showIcon"
+    [showTime]="showTime"
+    [showOnFocus]="showTime || screenWidth > 1366 || selectionMode == 'range'"
+    [view]="typeView"
+    [dateFormat]="dateFormat"
+    (onBlur)="onInputBlur($event)"
+    (onClose)="onInputClose($event)"
+    (onSelect)="onInputChange($event)"
+    styleClass="inputs"
+  >
+  </p-calendar>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,19 @@
+::ng-deep .p-calendar-w-btn .p-datepicker-trigger {
+  background-color: #f2f3f5;
+  border: none;
+  color: black;
+  font-size: 25px;
+  border: solid 1px #d1d5db;
+
+  &:hover {
+    background-color: #d9dadb;
+  }
+
+  &:disabled {
+    background-color: #f2f3f5;
+  }
+
+  &:active {
+    background-color: #c0c1c2;
+  }
+}

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

@@ -0,0 +1,96 @@
+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() 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();
+      }
+    }
+  }
+}

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-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"
+    [ngClass]="{ 'capitalize': textCaptalized }"
+    [disabled]="disabled"
+    [id]="componentId"
+    [(ngModel)]="value"
+    (blur)="onInputBlur($event)"
+    (input)="onInputInput($event)"
+    [maxlength]="maxLength"
+    [autocomplete]="autocomplete"
+  >
+
+  <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,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-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 {
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  @Input() textCaptalized: boolean = false
+
+}

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

@@ -0,0 +1,35 @@
+<kv-label
+    [componentId]="componentId"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+/>
+<div class="p-inputgroup ">
+    <span
+        class="p-inputgroup-addon"
+        style="height: 35px;"
+    ><p-checkbox
+            [(ngModel)]="checkBoxValue"
+            [binary]="true"
+            [pTooltip]="tooltipCheckbox"
+            [disabled]="disabledCheckbox"
+        ></p-checkbox>
+
+    </span>
+
+    <span class="p-float-label">
+        <input
+            type="text"
+            pInputText
+            [class]="baseInputClass"
+            styleClass="inputs"
+            [disabled]="disabled"
+            [placeholder]="placeholder"
+            [id]="componentId"
+            [(ngModel)]="value"
+            (blur)="onInputBlur($event)"
+            style="height: 35px;"
+            class="w-full"
+        />
+    </span>
+</div>
+
+<kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>

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,43 @@
+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'],
+  providers: ComponentProviders(KvInputTextCheckboxComponent),
+})
+export class KvInputTextCheckboxComponent extends BaseComponentInput<string> implements OnInit {
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  @Output() checkBoxEmit: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @Input() tooltipCheckbox!: string;
+  @Input() disabledCheckbox: boolean = false;
+
+  private _checkBoxValue: boolean = false;
+
+  set checkBoxValue(value: boolean) {
+    this._checkBoxValue = value;
+    this.emitCheckBoxValue();
+  }
+
+  get checkBoxValue(): boolean {
+    return this._checkBoxValue;
+  }
+
+  emitCheckBoxValue(): void {
+    this.checkBoxEmit.emit(this._checkBoxValue);
+  }
+}