keevo-components 1.5.189 → 1.5.191

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

@@ -0,0 +1,91 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <p-dropdown
+    appendTo="body"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [filter]="filter"
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    [options]="filteredOptions"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    [optionDisabled]="optionDisabled"
+    [group]="group"
+    [optionGroupLabel]="optionGroupLabel"
+    [optionGroupChildren]="optionGroupChildren"
+    [showClear]="showClear"
+    [lazy]="lazy"
+    scrollHeight="250px"
+    (onBlur)="onInputBlur($event)"
+    (onClick)="onInputClick($event)"
+    (onChange)="onInputChange($event)"
+    (onFilter)="onInputFilter($event)"
+    [style]="{'width':widthField}"
+    [panelStyle]="{ width: widthField, overflow: 'auto' }"
+    styleClass="inputs"
+  >
+
+    <ng-template
+      *ngIf="showAddButton"
+      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>
+
+
+
+
+    <!-- :: -->
+
+    <ng-template
+      let-selectedItem
+      pTemplate="item"
+      *ngIf="itemTemplate"
+    >
+      <ng-container
+        [ngTemplateOutlet]="itemTemplate"
+        [ngTemplateOutletContext]="{ $implicit: selectedItem }"
+      >
+
+      </ng-container>
+    </ng-template>
+
+
+    <ng-template
+      let-item
+      pTemplate="selectedItem"
+      *ngIf="selectedItemTemplate"
+    >
+      <ng-container
+        [ngTemplateOutlet]="selectedItemTemplate"
+        [ngTemplateOutletContext]="{ $implicit: item }"
+      >
+
+      </ng-container>
+    </ng-template>
+
+    <!-- :: -->
+
+
+  </p-dropdown>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

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

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit, TemplateRef } 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', '../../styles-components.scss'],
+  providers: ComponentProviders(DropdownComponent),
+})
+export class DropdownComponent extends BaseComponentDropDown implements OnInit{
+  constructor(
+    componentService: ComponentService,
+    dialogService: DialogService) {
+    super(componentService, dialogService);
+  }
+
+  @Input() dropDowValue!: any;
+  @Input() itemTemplate!: TemplateRef<any>;
+  @Input() selectedItemTemplate!: TemplateRef<any>;
+
+  override ngOnInit(): void {
+    if (this.dropDowValue)
+      this.value = this.dropDowValue;
+  }
+}

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

@@ -0,0 +1,90 @@
+
+<p-editor
+  [(ngModel)]="value"
+  [style]="{ height: canvaHeigth }"
+  [readonly]="readonly"
+  [placeholder]="placeholder"
+  (onTextChange)="textChange($event)"
+  (onSelectionChange)="selectionChange($event)"
+  [modules]="modules"
+>
+
+<ng-template pTemplate="header" >
+  <ng-container
+  [ngTemplateOutlet]="tollbartemplate"
+  *ngIf="tollbartemplate"
+  >
+  </ng-container>
+
+
+  <div id="toolbar-container" *ngIf="!tollbartemplate">
+    <span class="ql-formats">
+      <select class="ql-font">
+        <option selected>Sans Serif</option>
+        <option value="roboto">Roboto</option>
+        <option value="monospace">Monospace</option>
+        <option value="serif">Serif</option>
+
+      </select>
+
+      <select class="ql-header">
+        <option value="1">Titulo</option>
+        <option value="2">Subtitulo</option>
+        <option selected>Normal</option>
+    </select>
+
+      <select class="ql-size">
+        <option value="small">12px</option>
+        <option value="normal">16px</option>
+        <option value="large">24px</option>
+        <option value="huge">40px</option>
+      </select>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-bold"></button>
+      <button class="ql-italic"></button>
+      <button class="ql-underline"></button>
+      <button class="ql-strike"></button>
+    </span>
+    <span class="ql-formats">
+      <select class="ql-color"></select>
+      <select class="ql-background"></select>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-script" value="sub"></button>
+      <button class="ql-script" value="super"></button>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-header" value="1"></button>
+      <button class="ql-header" value="2"></button>
+      <button class="ql-blockquote"></button>
+      <button class="ql-code-block"></button>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-list" value="ordered"></button>
+      <button class="ql-list" value="bullet"></button>
+      <button class="ql-indent" value="-1"></button>
+      <button class="ql-indent" value="+1"></button>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-direction" value="rtl"></button>
+      <select class="ql-align"></select>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-link"></button>
+      <button class="ql-image"></button>
+      <button class="ql-video"></button>
+    </span>
+    <span class="ql-formats">
+      <button class="ql-clean"></button>
+    </span>
+  </div>
+
+
+
+</ng-template>
+
+</p-editor>
+
+<link href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

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

@@ -0,0 +1,4 @@
+
+:host ::ng-deep .ql-font-roboto {
+  font-family: 'Roboto', sans-serif;
+}

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

@@ -0,0 +1,80 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnInit,
+  Output,
+  PLATFORM_ID,
+  TemplateRef,
+} 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';
+
+import Quill from "quill"
+
+@Component({
+  selector: 'kv-editor',
+  templateUrl: './editor.component.html',
+  styleUrls: ['./editor.component.scss'],
+  providers: [ComponentProviders(EditorComponent)],
+})
+export class EditorComponent extends BaseComponentInput<string>{
+  constructor(componentService: ComponentService) {
+    super(componentService);
+    const Font = Quill.import('formats/font');
+    Font.whitelist = ['roboto', 'serif', 'monospace'];
+
+    const ColorClass = Quill.import('attributors/class/color');
+    const SizeStyle = Quill.import('attributors/style/size');
+
+    Quill.register(Font, true);
+    Quill.register(ColorClass, true);
+    Quill.register(SizeStyle, true);
+  }
+  /**
+   * @type {boolean}
+   * @description
+   * Esse item define se o editor e somente para leitura
+   */
+
+  @Input() readonly: boolean = false;
+
+  /**
+   * @type {boolean}
+   * @description
+   * Esse item define o tamanho do canva
+   */
+  @Input() canvaHeigth: string = '380px';
+
+  @Input() debug: boolean = false;
+  @Input() modules!: object;
+
+  /**
+   * @type {TemplateRef}
+   * @description
+   * Esse item e opcional, mas caso precise de definir um template personalizado com base em clases css do quill poderar passar sua toolbar por aqui
+   */
+  @Input() tollbartemplate!: TemplateRef<any>;
+
+  /**
+   *  @description Executado a cada iteração
+   */
+  @Output() onTextChange: EventEmitter<any> = new EventEmitter();
+
+  /**
+   *  @description Executado a cada seleção
+   */
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+
+  textChange($event: any) {
+    this.onTextChange.emit($event);
+  }
+  selectionChange($event: any) {
+    this.onSelectionChange.emit($event);
+  }
+
+}

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

@@ -0,0 +1,30 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <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"
+    [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/inputs/input-calendar/input-calendar.component.ts

@@ -0,0 +1,81 @@
+import { Component, EventEmitter, 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';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'kv-input-calendar',
+  templateUrl: './input-calendar.component.html',
+  styleUrls: [
+    './input-calendar.component.scss',
+    '../../styles-components.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() 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';
+
+  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';
+    }
+  }
+
+  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/inputs/input-mask/input-mask.component.html

@@ -0,0 +1,20 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <p-inputMask
+    [class]="baseInputClass"
+    styleClass="inputs"
+    [inputId]="componentId"
+    [disabled]="disabled"
+    [placeholder]="placeholder"
+    [(ngModel)]="value"
+    [mask]="mask"
+    (onBlur)="onInputBlur($event)"
+  >
+  </p-inputMask>
+
+  <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', '../../styles-components.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,22 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <p-inputNumber
+    #inputNumber
+    [disabled]="disabled"
+    [class]="baseInputClass"
+    [inputId]="componentId"
+    styleClass="inputs"
+    [min]="min"
+    [max]="max"
+    [suffix]="suffix"
+    [(ngModel)]="value"
+    (onBlur)="onInputBlur($event)"
+  >
+  </p-inputNumber>
+
+  <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,52 @@
+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', '../../styles-components.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;
+  @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/inputs/input-password/input-password.component.html

@@ -0,0 +1,23 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <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)"
+  >
+  </p-password>
+
+  <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, 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: './input-password.component.html',
+  styleUrls: ['./input-password.component.scss', '../../styles-components.scss'],
+  providers: ComponentProviders(InputPasswordComponent),
+})
+export class InputPasswordComponent 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/inputs/input-text/input-text.component.html

@@ -0,0 +1,20 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label"
+  />
+  <input
+    pInputText
+    type="text"
+    [class]="baseInputClass"
+    class="inputs"
+    [disabled]="disabled"
+    [id]="componentId"
+    [(ngModel)]="value"
+    (blur)="onInputBlur($event)"
+    (input)="onInputInput($event)"
+  >
+
+  <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', '../../styles-components.scss'],
+  providers: ComponentProviders(InputTextComponent),
+})
+export class InputTextComponent extends BaseComponentInput<string> implements OnInit {
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+}

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

@@ -0,0 +1,32 @@
+<kv-label
+    [componentId]="componentId"
+    [label]="label"
+/>
+<div class="p-inputgroup ">
+    <span
+        class="p-inputgroup-addon"
+        style="height: 35px;"
+    ><p-checkbox
+            [(ngModel)]="checkBoxValue"
+            [binary]="true"
+            [pTooltip]="tooltipCheckbox"
+        ></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;"
+        />
+    </span>
+
+</div>