keevo-components 1.8.262 → 1.8.264

package/src/lib/components/kv-image-upload/kv-image-upload.component.html

@@ -0,0 +1,64 @@
+<div
+    (dragover)="onDragOver($event)"
+    (dragleave)="onDragLeave($event)"
+    (drop)="onDrop($event)"
+    class="relative overflow-hidden border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end"
+    [style.width]="widthComponent"
+    [style.height]="heightComponent"
+>
+
+    <div
+        class="w-full flex align-items-center justify-content-center"
+        style="cursor: pointer;"
+        (click)="fileInput.click()"
+    >
+        <input
+            type="file"
+            (change)="onFileSelected($event)"
+            #fileInput
+            hidden
+            accept="image/*"
+        >
+        <div
+            *ngIf="!fileSrc"
+            class="flex flex-column align-items-center justify-content-center"
+        >
+            <span
+                class="material-symbols-outlined mt-2"
+                style="font-size: 3rem;"
+            >
+                cloud_upload
+            </span>
+
+            @if(description) {
+            <p class="font-semibold">{{description}}</p>
+            } @else {
+            <p class="font-semibold">Arraste e solte uma imagem aqui, ou</p>
+            <p class="font-semibold">clique para selecioná-la</p>
+            }
+
+        </div>
+        <div *ngIf="fileSrc || file">
+            <img
+                [src]="fileSrc"
+                [alt]="file?.name"
+                class="w-full"
+                [style.maxHeight]="maxHeightImage"
+            >
+        </div>
+    </div>
+
+    @if(fileSrc || file) {
+        <button
+            style="background-color: transparent;"
+            pButton
+            (click)="deleteImage()"
+            class="absolute transition-colors transition-duration-500 text-red-700 hover:text-red-500 w-2rem h-2rem"
+            [text]="true"
+            [icon]="'pi pi-trash'"
+        >
+        </button>
+        }
+    
+
+</div>

package/src/lib/components/kv-image-upload/kv-image-upload.component.ts

@@ -0,0 +1,84 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NotificationService } from '../../api/services/notification.service';
+
+@Component({
+  selector: 'kv-image-upload',
+  templateUrl: './kv-image-upload.component.html',
+  styleUrl: './kv-image-upload.component.scss'
+})
+export class KvImageUploadComponent {
+
+  constructor(private notificationService: NotificationService) {
+
+  }
+  file: File | null = null;
+  @Input() fileSrc: string | ArrayBuffer | null = null;
+
+  @Input() widthComponent: string = '400px';
+  @Input() heightComponent: string = 'auto';
+  @Input() maxHeightImage: string = '400px';
+
+  @Input() description!: string;
+
+  @Output() fileEmit: EventEmitter<any> = new EventEmitter();
+  @Output() deleteEmit: EventEmitter<any> = new EventEmitter();
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.addDragOverClass(event);
+  }
+
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.removeDragOverClass(event);
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.removeDragOverClass(event);
+
+    if (event.dataTransfer && event.dataTransfer.files.length > 0) {
+      this.handleFile(event.dataTransfer.files[0]);
+    }
+  }
+
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.handleFile(input.files[0]);
+    }
+  }
+
+  handleFile(file: File) {
+    if (file.type.startsWith('image/')) {
+      this.file = file;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.fileSrc = reader.result;
+      };
+      reader.readAsDataURL(file);
+      this.fileEmit.emit(file)
+    } else {
+      this.notificationService.toastError('Apenas arquivos de imagem são permitidos.')
+    }
+  }
+
+  addDragOverClass(event: DragEvent) {
+    const container = event.target as HTMLElement;
+    container.classList.add('dragover');
+  }
+
+  removeDragOverClass(event: DragEvent) {
+    const container = event.target as HTMLElement;
+    container.classList.remove('dragover');
+  }
+
+  deleteImage() {
+    this.file = null;
+    this.fileSrc = null;
+    this.deleteEmit.emit()
+  }
+}

package/src/lib/components/kv-image-upload/kv-image-upload.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from "@angular/core";
+import { KvImageUploadComponent } from "./kv-image-upload.component";
+import { PrimeNgModule } from "../../api/modules/primeng.module";
+
+@NgModule({
+    declarations: [KvImageUploadComponent],
+    imports: [PrimeNgModule],
+    exports: [KvImageUploadComponent]
+})
+export class KvImageUploadModule { }

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

@@ -0,0 +1,12 @@
+<div class="field-checkbox flex flex-column align-items-start">
+  <p-checkbox
+    [binary]="true"
+    [disabled]="disabled"
+    [label]="label && (label + (showAsterisk ? '*' : ''))"
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    (onChange)="emitOnCheckChange($event)"
+  >
+  </p-checkbox>
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</div>

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

@@ -0,0 +1,32 @@
+::ng-deep {
+  @media only screen and (min-width: 1000px) {
+    .p-checkbox-label {
+      font-size: 16px;
+    }
+  }
+
+  @media only screen and (max-width: 1000px) {
+    .p-checkbox-label {
+      font-size: 12px;
+    }
+  }
+}
+
+::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
+  border-color: #004172;
+  background: #004172;
+
+  &:hover {
+    background-color: #002542;
+  }
+
+  &:active {
+    background-color: #002542;
+  }
+
+  &:disabled {
+    background-color: #002542;
+    opacity: 0.4;
+    cursor: auto;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+::ng-deep .p-dropdown .p-dropdown-label {
+    display: flex;
+    align-items: center;
+}
+
+::ng-deep .p-dropdown {
+    width: 100%;
+}
+
+
+@media only screen and (min-width: 700px) {
+    ::ng-deep .p-dropdown-panel {
+        max-width: 700px;
+    }
+}
+
+@media only screen and (max-width: 700px) {
+    ::ng-deep .p-dropdown-panel {
+        max-width: 400px;
+    }
+}

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

@@ -0,0 +1,40 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  TemplateRef
+} 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';
+
+@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) {
+    super(componentService, dialogService);
+  }
+
+  @Input() filterPlaceholder: string = '';
+  @Input() override placeholder: string = ' ';
+  @Input() dropDowValue!: any;
+  @Input() itemTemplate!: TemplateRef<any>;
+  @Input() selectedItemTemplate!: TemplateRef<any>;
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    if (this.dropDowValue) this.value = this.dropDowValue;
+  }  
+}

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

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