keevo-components 1.8.541 → 1.8.543

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

@@ -1,102 +0,0 @@
-<div class="kv-editor-container">
-  <div #editor id="kv-editor-toolbar" [ngClass]="{'error-border-toolbar': hasControlError()}" >
-    <span class="ql-formats">
-      <select class="ql-font">
-        <option value="roboto">Roboto</option>
-        <option value="monospace">Monospace</option>
-        <option value="inter">Inter</option>
-        <option selected>Sans Serif</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>
-
-      <span class="ql-format-group">
-        <select title="Size" class="ql-size">
-          <option value="15px">15px</option>
-          <option value="20px">20px</option>
-          <option value="30px">30px</option>
-          <option value="40px">40px</option>
-          <option value="50px">50px</option>
-          <option value="70px">70px</option>
-          <option value="90px">90px</option>
-        </select>
-      </span>
-    </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>
-
-  <div id="kv-editor" [style.height]="canvaHeigth" [ngClass]="{'error-border': hasControlError()}" ></div>
-</div>
-<kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
-
-
-<!------------------------------------------------------------------------------------------------------------------->
-
-  <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
-
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
-
-
-  <!-- Import fonts -->
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Inter:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Inter:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

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

@@ -1,45 +0,0 @@
-
-:host ::ng-deep .ql-font-roboto {
-  font-family: 'Roboto', sans-serif;
-}
-
-:host ::ng-deep .ql-font-inter {
-  font-family: "Inter var", sans-serif;
-}
-// :host ::ng-deep .ql-font-emoji {
-//   font-family: "Noto Color Emoji", sans-serif;
-// }
-
-:host ::ng-deep .ql-tooltip.ql-editing[data-mode="video"] {
-  transform: translate(40%, 0px);
-}
-
-
-
-:host ::ng-deep #kv-editor-toolbar
-{
-  border-radius: 10px 10px 0 0;
-}
-:host ::ng-deep #kv-editor
-{
-border-radius: 0 0 10px 10px;
-}
-
-.error-border-toolbar{
-  transition: all ease-in 0.2s;
-  border-top-color: #e24c4c !important;
-  border-bottom-color: #e24c4c !important;
-  border-left-color: #e24c4c !important;
-  border-right-color: #e24c4c !important;
-}
-.error-border{
-  border-color: #e24c4c !important;
-  transition: all ease-in 0.2s;
-}
-
-:host ::ng-deep .blot-formatter__resize-handle {
-  background: #eaeaea !important;
-}
-
-
-

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

@@ -1,177 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  Renderer2,
-} 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 {
-
-
-  constructor(
-    componentService: ComponentService, private renderer: Renderer2, private el: ElementRef) {
-    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.addQuillCss();
-      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);
-  
-    // Customizando o comportamento do Enter
-    const bindings = (Quill.import('modules/keyboard') as any).DEFAULTS.bindings;
-    
-    bindings['enter'] = {
-      key: 13, // Código da tecla Enter
-      handler: (range: any) => {
-      const quill = this.quill;
-      quill.insertEmbed(range.index, 'break', true, Quill.sources.USER);
-      quill.setSelection(range.index + 1, Quill.sources.SILENT);
-      return false; // Evita o comportamento padrão de criar um <p>
-      },
-    };
-
-    // Custom blot for <br> tag
-    const BlockEmbed = Quill.import('blots/block/embed');
-    class Break extends (BlockEmbed as any) {
-      static blotName = 'break';
-      static tagName = 'br';
-    }
-    Quill.register(Break);
-  
-    this.quill = new Quill('#kv-editor', {
-      theme: 'snow',
-      modules: {
-        toolbar: '#kv-editor-toolbar',
-        keyboard: {
-          bindings: bindings,
-        },
-      },
-      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());
-      }
-    });
-  }
-  
-  addQuillCss() {
-    const link = this.renderer.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css';
-
-    // Quando o CSS for carregado, inicialize o Quill
-    link.onload = () => {
-      this.initializeQuillEditor();
-    };
-
-    // Adiciona o link ao <head>
-    this.renderer.appendChild(document.head, link);
-  }
-
-
-
-  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

@@ -1,37 +0,0 @@
-<span>
-  <kv-label
-    [componentId]="componentId"
-    [label]="label && label + (showAsterisk ? '*' : '')"
-  />
-  <p-calendar
-
-    dateMask
-    (onInput)="onKeyDate($event)"
-
-    #dateFilter
-    appendTo="body"
-    [class]="baseInputClass"
-    [id]="componentId"
-    [(ngModel)]="value"
-    [disabled]="disabled"
-    [defaultDate]="defaultDate"
-    [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"
-    [placeholder]="placeholder"
-  >
-  </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

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

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

@@ -1,197 +0,0 @@
-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() defaultDate!: 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();
-      }
-    }
-  }
-
-  lastInputValue: string = '';
-  onKeyDate(event: any) {
-    if (this.typeView === 'date') {
-
-      const inputElement = event.target;
-
-      let inputValue = inputElement.value.replace(/\D/g, ''); // Remove tudo que não seja dígito
-
-      const cursorPosition = inputElement.selectionStart; // Pega a posição atual do cursor
-
-      // Limita a entrada a 8 caracteres (ddmmyyyy)
-      if (inputValue.length > 8) {
-        inputValue = inputValue.substring(0, 8);
-      }
-
-      inputValue = this.maskDate(inputValue);
-      let indAdicao =
-        inputValue.length > this.lastInputValue.length ? true : false;
-
-      this.lastInputValue = inputValue;
-
-      // Calcula a diferença de tamanho após aplicar a máscara
-      const maskedLength = inputValue.length;
-      const lengthDiff = maskedLength - this.lastInputValue.length;
-
-      // Atualiza o valor do input sem perder a posição do cursor
-      inputElement.value = inputValue;
-
-      // Ajusta a posição do cursor de acordo com a mudança causada pela máscara
-      let newCursorPosition = cursorPosition + lengthDiff;
-
-      // Se o cursor estava exatamente em uma posição de barra e foi uma adição, ajusta para pular a barra ( somente na adição de caracteres )
-      if (indAdicao) {
-        if (cursorPosition === 3 || cursorPosition === 6) {
-          newCursorPosition += 1;
-        }
-      }
-      // Evita que o cursor vá além do final do valor digitado
-      if (newCursorPosition > inputElement.value.length) {
-        newCursorPosition = inputElement.value.length;
-      }
-
-      // Define a nova posição do cursor
-      inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
-    }
-  }
-
-  override onInputBlur(event: Event): void {
-    super.onInputBlur(event);
-    
-    if (this.typeView === 'date') {
-      const input = event.target as HTMLInputElement; // Cast para HTMLInputElement
-      if (input && input.value) {
-        const dateString = input.value; // Pega o valor do input
-        const [day, month, year] = dateString.split('/');
-
-
-        // Verifica se é uma data válida
-        if (
-          day &&
-          month &&
-          year &&
-          day.length === 2 &&
-          month.length === 2 &&
-          year.length === 4
-        ) {
-
-          const objDate = new Date(+year, +month - 1, +day);
-
-          if ((!isNaN(objDate.getTime())) && !(+month > 12 || +day > 31)) {
-            this.dateFilter.value = objDate; // Atribui a data sem barras ao dateFilter
-          }else{
-            this.formControl?.setErrors({ invalidDate: true, erroMessage: 'Data Invalida!' });
-          }
-        }
-
-
-        
-
-
-      }
-    }
-
-  }
-
-  maskDate(date: string): string {
-    // Aplica a máscara (dd/mm/yyyy)
-    let dateMasked = date;
-    if (date.length >= 5) {
-      dateMasked = date.replace(/^(\d{2})(\d{2})(\d{0,4})/, '$1/$2/$3'); // Formata como dd/mm/yyyy
-    } else if (date.length >= 3) {
-      dateMasked = date.replace(/^(\d{2})(\d{0,2})/, '$1/$2'); // Formata como dd/mm
-    }
-    return dateMasked;
-  }
-}

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

@@ -1,24 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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>