keevo-components 2.0.54 → 2.0.56

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

@@ -0,0 +1,119 @@
+import {
+  Component,
+  computed,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  input,
+  Input,
+  OnInit,
+  Output,
+  signal,
+  TemplateRef,
+  viewChild
+} from '@angular/core';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { BaseComponentDropDown } from '../../../api/base-components/base-component-dropdown';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+import { Dropdown } from 'primeng/dropdown';
+
+@Component({
+  selector: 'kv-dropdown',
+  templateUrl: './kv-dropdown.component.html',
+  styleUrls: [
+    './kv-dropdown.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvDropdownComponent),
+})
+export class KvDropdownComponent extends BaseComponentDropDown implements OnInit {
+  constructor(
+    componentService: ComponentService,
+    dialogService: DialogService,
+    private elRef: ElementRef
+  ) {
+    super(componentService, dialogService);
+  }
+
+  @Input() filterPlaceholder: string = '';
+  @Input() override placeholder: string = ' ';
+  @Input() dropDowValue!: any;
+  @Input() itemTemplate!: TemplateRef<any>;
+  @Input() selectedItemTemplate!: TemplateRef<any>;
+
+  @Input() virtualScroll: boolean = false;
+  @Input() virtualScrollItemSize!: number;
+
+  appendTo: any = input<any>('body');
+
+
+  changes = signal<number>(0);
+
+  @Output() onLazyLoad: EventEmitter<any> = new EventEmitter();
+
+  pDropDown = viewChild<any>(Dropdown);
+
+  // pDropDownWidth = signal<string>('');
+  pDropDownWidth = computed(() => {
+    this.changes(); //registra este sinal para considerar a detecção de mudanças
+
+    const el = this.pDropDown().el.nativeElement as HTMLElement;
+    const dimensions = el.getBoundingClientRect();
+    return `${dimensions.width}` + 'px';
+  });
+
+  dropDownWidth = signal<number>(0);
+  dropDownWidthPx = computed(() => `${this.dropDownWidth()}px`);
+
+  disabledOptions = input<any[]>([]);
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    if (this.dropDowValue) this.value = this.dropDowValue;
+
+    this.capitalizeOptions(this.options);
+  }
+
+  override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+    const el = this.elRef.nativeElement;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const target = entry.target as HTMLElement;
+        this.dropDownWidth.set(target.offsetWidth);
+      }
+    });
+
+    resizeObserver.observe(el);
+
+    setTimeout(() => {
+      this.setWidth();
+    }, 400);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  public onWindowResize() {
+    this.setWidth();
+  }
+
+  setWidth() {
+    const el = this.elRef.nativeElement;
+    this.dropDownWidth.set(el.offsetWidth);
+  }
+
+  onInputLazyLoad(event: any): void {
+    this.onLazyLoad.emit(event);
+  }
+
+  isOptionDisabled = computed(() => (option: any) => {
+    return this.disabledOptions().some(disabledOption => disabledOption.id === option[this.optionValue]);
+  })
+
+  getOptionTooltip = (option: any) => {
+    const disabledOption = this.disabledOptions().find(disabledOption => disabledOption.id === option[this.optionValue]);
+    return disabledOption ? disabledOption.tooltip : '';
+  }
+}

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

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

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

@@ -0,0 +1,235 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  signal,
+} 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;
+
+  initLoadComplete = signal<boolean>(false);
+ 
+  
+  private editorReadyPromise = new Promise<void>((resolve) => {
+    this.editorReadyResolver = resolve;
+  });
+
+
+  /**
+   * 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.handleInit();
+    }
+  }
+
+  private editorReadyResolver!: () => void;
+
+  async handleInit(){
+    await this.loadCss();
+    this.initializeQuillEditor();
+   
+  }
+
+  loadCss(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const cssElement = document.createElement('link');
+      cssElement.rel = 'stylesheet';
+      cssElement.href = 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css';
+  
+      cssElement.onload = () => resolve();  
+      cssElement.onerror = (err) => reject(err);
+  
+      document.head.appendChild(cssElement);
+    });
+  }
+
+  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,
+    });
+
+    const AlignStyle = Quill.import('attributors/style/align') as any;
+    Quill.register(AlignStyle, true);
+
+  
+    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());
+      }
+    });
+
+
+    this.editorReadyResolver();
+    this.initLoadComplete.set(true);
+
+    setTimeout(() => {
+      const control = this.formControl;
+      if (control && control.markAsPristine) {
+        control.markAsPristine(); 
+        control.markAsUntouched(); 
+      }
+    }, 0);   
+    
+  }
+  
+  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) {
+    this.updatingEditor = true
+    this.escrevaValor(value)
+  }
+
+
+ 
+
+
+
+  async escrevaValor(htmlvalue: any, rawvalue?:any) {
+
+    if(!this.initLoadComplete())
+      await this.editorReadyPromise
+    
+
+      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 = ''
+
+
+      } else {
+        this.updatingEditor = false
+      }
+
+
+  }
+}

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

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

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