@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/dropi-tag/dropi-tag.component.ts

@@ -1,102 +1,32 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { Component, Input, OnInit } from "@angular/core";
-import { IconComponent } from "../icon/icon.component";
-import { trigger, transition, style, animate } from "@angular/animations";
-
-export type tagStates =
-  | "default"
-  | "success"
-  | "info"
-  | "warning"
-  | "error"
-  | "legacy";
-export type tagTypes = "primary" | "secondary";
 
 @Component({
-  selector: "dropi-wc-tag",
+  selector: "dropi-tag",
+  standalone: true,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: "./dropi-tag.component.html",
   styleUrls: ["./dropi-tag.component.scss"],
-  standalone: true,
-  imports: [CommonModule, IconComponent],
-  animations: [
-    trigger("fade", [
-      transition(":enter", [
-        style({ opacity: 0, transform: "scale(0.8)" }),
-        animate("200ms ease-out", style({ opacity: 1, transform: "scale(1)" })),
-      ]),
-      transition(":leave", [
-        animate(
-          "150ms ease-in",
-          style({ opacity: 0, transform: "scale(0.8)" }),
-        ),
-      ]),
-    ]),
-  ],
 })
 export class DropiTagComponent implements OnInit {
-  @Input() type: tagTypes = "primary";
-  @Input() state: tagStates = "default";
-  @Input() showIcon: boolean = false;
-  @Input() icon: string = "";
-  @Input() text: string = "";
-
-  colorMap: { [key: string]: string } = {
-    default: "Primary-Primary",
-    success: "Success-Success",
-    info: "Info-Info",
-    warning: "Warning-Warning",
-    error: "Error-Error",
-    legacy: "Gray-Gray",
-  };
-
-  fontColor: string;
-
-  get hasContent(): boolean {
-    return !!(this.text && this.text.trim().length > 0);
-  }
+  @Input() public label: string = "";
+  @Input() public text: string = "";
+  @Input() public icon: string = "";
+  @Input() public showIcon: boolean = false;
+  @Input() public fontColor: string = "inherit";
+  @Input() public hasContent: boolean = true;
 
-  ngOnInit() {
-    this.setState();
-  }
-
-  selectStyle() {
-    let stylesTags = {
-      primary: {
-        bgc: `var(--${this.colorMap[this.state]}-500)`,
-        cl: "var(--Neutral-White)",
-      },
-      secondary: {
-        bgc: `var(--${this.colorMap[this.state]}${this.state == "default" || this.state == "legacy" ? "-100" : "-50"})`,
-        cl: `var(--${this.colorMap[this.state]}${this.state == "default" ? "-500" : "-700"})`,
-      },
-    };
-
-    let styleToApply: {
-      "background-color": any;
-      "border-radius": any;
-      color: any;
-    };
-
-    if (stylesTags.hasOwnProperty(this.type)) {
-      const selectedStyle = stylesTags[this.type];
+  constructor() {}
 
-      styleToApply = {
-        "background-color": selectedStyle.bgc,
-        "border-radius": "var(--Border-5)",
-        color: selectedStyle.cl,
-      };
-
-      this.fontColor =
-        this.type == "primary"
-          ? "Neutral-White"
-          : this.colorMap[this.state] +
-            (this.state == "default" ? "-500" : "-700");
-
-      return styleToApply;
-    }
-  }
+  ngOnInit(): void {}
 
-  setState() {
-    return this.selectStyle();
+  public setState(): any {
+    return {};
   }
 }

package/src/components-source/dropi-text-area/dropi-text-area.component.ts

@@ -1,50 +1,26 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TextAreaProperties } from '@app/utilities/interfaces/ui/input-interface';
-import { Validators, ReactiveFormsModule } from '@angular/forms';
-import { IconComponent } from '../icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  Component,
+  Input,
+  OnInit,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Validators, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { TextAreaProperties } from "../../utilities/interfaces/ui/input-interface";
 
 @Component({
-  selector: 'app-dropi-text-area',
+  selector: "app-dropi-text-area",
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, TranslateModule, IconComponent],
-  templateUrl: './dropi-text-area.component.html',
-  styleUrls: ['./dropi-text-area.component.scss'],
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-text-area.component.html",
+  styleUrls: ["./dropi-text-area.component.scss"],
 })
 export class DropiTextAreaComponent implements OnInit {
-  /**
-   * Define las propiedades necesarias para un textArea.
-   *
-   * Cada campo debe contener las siguientes propiedades:
-   * - `formControl`: Control de formulario asociado al campo.
-   * - `label`: Texto descriptivo que se mostrará como etiqueta.
-   * - `placeholder`: Texto de ejemplo dentro del campo.
-   * - `maxLength`: Número máximo de caracteres permitidos.
-   *
-   * Propiedades opcionales:
-   * - `textHelper`: Texto de ayuda que se mostrará debajo del campo.
-   * - `id`: Identificador único del campo, personalizado.
-   * - `rows`: Número de filas visibles en el área de texto.
-   * - `resize`: Indica si el área de texto puede ser redimensionada por el usuario ('none' | 'both' | 'horizontal' | 'vertical').
-   * @type {TextAreaProperties}
-   */
   @Input() public textAreaProperties: TextAreaProperties;
-  /**
-   * Indica si se debe mostrar deshabilitiado el input.
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
   @Input() public disabled: boolean = false;
-  /**
-   * Indica si se debe mostrar el asterisco de obligatorio basado en si es requerido el formControl
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
   @Input() public showObligatoryAsterisk: boolean = false;
 
   ngOnInit() {
@@ -55,26 +31,24 @@ export class DropiTextAreaComponent implements OnInit {
     const control = this.textAreaProperties?.formControl;
     if (!control || !control.validator) return false;
     const validationResult = control.validator({} as any);
-
-    return !!validationResult?.['required'];
+    return !!validationResult?.["required"];
   }
 
   validateDisabled() {
     if (this.disabled) {
-      this.textAreaProperties.formControl.disable();
+      this.textAreaProperties?.formControl?.disable();
     } else {
-      this.textAreaProperties.formControl.enable();
+      this.textAreaProperties?.formControl?.enable();
     }
   }
 
   getErrorMessage(): string {
     const control = this.textAreaProperties?.formControl;
-
     if (control?.errors) {
-      if (control.errors['required']) {
-        return 'This field is required';
+      if (control.errors["required"]) {
+        return "This field is required";
       }
     }
-    return '';
+    return "";
   }
 }

package/src/components-source/dropi-tooltip/dropi-tooltip.component.ts

@@ -2,152 +2,63 @@ import {
   Component,
   Input,
   OnInit,
-  ViewEncapsulation,
-  HostListener,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IconComponent } from '../icon/icon.component';
-import { animate, style, transition, trigger } from '@angular/animations';
-
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipTrigger = 'hover' | 'click' | 'focus';
-export type ArrowPosition = 'start' | 'center' | 'end';
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'dropi-tooltip-v2',
+  selector: "app-dropi-tooltip",
   standalone: true,
-  imports: [CommonModule, IconComponent],
-  templateUrl: './dropi-tooltip.component.html',
-  styleUrls: ['./dropi-tooltip.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    trigger('tooltipAnimation', [
-      transition(':enter', [
-        style({ opacity: 0 }),
-        animate('200ms ease-out', style({ opacity: 1 })),
-      ]),
-      transition(':leave', [animate('150ms ease-in', style({ opacity: 0 }))]),
-    ]),
-  ],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-tooltip.component.html",
+  styleUrls: ["./dropi-tooltip.component.scss"],
 })
 export class DropiTooltipComponent implements OnInit {
-  @Input() text: string = '';
-  @Input() title: string = '';
-  @Input() label: string = '';
-  @Input() position: TooltipPosition = 'bottom';
-  @Input() arrowPosition: ArrowPosition = 'center';
-  @Input() trigger: TooltipTrigger = 'hover';
-  @Input() disabled: boolean = false;
-  @Input() showIcon: boolean = true;
-  @Input() showX: boolean = false;
-  @Input() iconName: string = 'Tooltip';
-  @Input() iconColor: string = '#7B8190';
-  @Input() iconSize: string = '14';
-  @Input() maxWidth: string = '280px';
-  @Input() minWidth: string = '300px';
-
-  isVisible: boolean = false;
-  private timeoutId: any;
-
-  constructor(
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef,
-  ) {}
-
-  ngOnInit(): void {}
-
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: Event): void {
-    if (this.trigger === 'click' && this.isVisible) {
-      const target = event.target as HTMLElement;
-      if (!this.elementRef.nativeElement.contains(target)) {
-        this.hide();
-      }
-    }
+  @Input() public text: string = "";
+  @Input() public maxWidth: string = "200px";
+  @Input() public minWidth: string = "auto";
+  @Input() public position: "top" | "bottom" | "left" | "right" = "top";
+  @Input() public arrowPosition: "start" | "center" | "end" = "center";
+  @Input() public trigger: "hover" | "click" | "focus" = "hover";
+  @Input() public disabled: boolean = false;
+  @Input() public showIcon: boolean = true;
+  @Input() public iconName: string = "Info";
+  @Input() public iconColor: string = "currentColor";
+  @Input() public iconSize: string = "24px";
+  @Input() public showX: boolean = false;
+
+  public isVisible: boolean = false;
+  public displayContent: string = "";
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.displayContent = this.text;
   }
 
-  @HostListener('document:keydown.escape', ['$event'])
-  onEscapeKey(event: KeyboardEvent): void {
-    if (this.isVisible) {
-      this.clearTimeout();
-      this.timeoutId = setTimeout(() => {
-        this.hide();
-      }, 10);
-      event.preventDefault();
-    }
+  public onMouseEnter(): void {
+    if (!this.disabled && this.trigger === "hover") this.isVisible = true;
   }
 
-  onMouseEnter(): void {
-    if (this.disabled || this.trigger !== 'hover') return;
-    this.clearTimeout();
-    this.show();
+  public onMouseLeave(): void {
+    if (this.trigger === "hover") this.isVisible = false;
   }
 
-  onMouseLeave(): void {
-    if (this.disabled || this.trigger !== 'hover') return;
-    this.clearTimeout();
-    this.timeoutId = setTimeout(() => {
-      this.hide();
-    }, 10);
+  public onClick(): void {
+    if (!this.disabled && this.trigger === "click")
+      this.isVisible = !this.isVisible;
   }
 
-  onClick(): void {
-    if (this.disabled || this.trigger !== 'click') return;
-    this.toggle();
+  public onFocus(): void {
+    if (!this.disabled && this.trigger === "focus") this.isVisible = true;
   }
 
-  onFocus(): void {
-    if (this.disabled || this.trigger !== 'focus') return;
-    this.show();
+  public onBlur(): void {
+    if (this.trigger === "focus") this.isVisible = false;
   }
 
-  onBlur(): void {
-    if (this.disabled || this.trigger !== 'focus') return;
-    this.hide();
-  }
-
-  onCloseClick(): void {
-    this.hide();
-  }
-
-  show(): void {
-    if (this.disabled || (!this.text.trim() && !this.title.trim() && !this.label.trim())) return;
-    this.isVisible = true;
-    this.cdr.detectChanges();
-  }
-
-  hide(): void {
+  public onCloseClick(): void {
     this.isVisible = false;
-    this.cdr.detectChanges();
-  }
-
-  toggle(): void {
-    if (this.isVisible) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-
-  private clearTimeout(): void {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = null;
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.clearTimeout();
-  }
-
-  // Helper para obtener el contenido a mostrar
-  get displayContent(): string {
-    if (this.text) return this.text;
-    if (this.title && this.label) return `<strong>${this.title}</strong><br>${this.label}`;
-    if (this.title) return this.title;
-    if (this.label) return this.label;
-    return '';
   }
 }

package/src/components-source/empty/empty.component.html

@@ -0,0 +1,3 @@
+<div class="text-center mt-5">
+  {{ text | translate }}
+</div>

package/src/components-source/empty/empty.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-empty',
+    templateUrl: './empty.component.html',
+    styleUrls: ['./empty.component.scss'],
+    standalone: true,
+    imports: [TranslateModule]
+})
+export class EmptyComponent implements OnInit {
+  @Input() public text: string = 'No results';
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/components-source/empty-state/empty-state.component.ts

@@ -1,31 +1,59 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ButtonComponent } from '../dropi-button/dropi-button.component';
-import { SettingsService } from '@app/services/setting.service';
-import { IconComponent } from '../icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { DropiIlustrationIconComponent } from '../dropi-ilustration-icon/dropi-ilustration-icon.component';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ButtonComponent } from "../dropi-button/dropi-button.component";
+import { IconComponent } from "../icon/icon.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { DropiIlustrationIconComponent } from "../dropi-ilustration-icon/dropi-ilustration-icon.component";
 
 @Component({
-  selector: 'app-empty-state',
+  selector: "app-empty-state",
   standalone: true,
-  imports: [CommonModule, ButtonComponent, IconComponent, TranslateModule, DropiIlustrationIconComponent],
-  templateUrl: './empty-state.component.html',
-  styleUrls: ['./empty-state.component.scss'],
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    IconComponent,
+    TranslateModule,
+    DropiIlustrationIconComponent,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./empty-state.component.html",
+  styleUrls: ["./empty-state.component.scss"],
 })
 export class EmptyStateComponent implements OnInit {
-  @Input() buttonText: string = '';
-  @Input() description: string = '';
-  @Input() buttonSeverity: 'primary' | 'secondary' | 'tertiary' = 'tertiary';
-  @Input() title: string = '';
+  @Input() buttonText: string = "";
+  @Input() description: string = "";
+  @Input() buttonSeverity: "primary" | "secondary" | "tertiary" = "tertiary";
+  @Input() title: string = "";
   @Output() buttonClickEvent = new EventEmitter();
-  brandName: string;
-  @Input() dropiIcon: 'success'| 'error'| 'warning'| 'info'| 'default'| 'loading'| 'sorry' = 'default';
+  brandName: string = "dropi";
+  @Input() dropiIcon:
+    | "success"
+    | "error"
+    | "warning"
+    | "info"
+    | "default"
+    | "loading"
+    | "sorry" = "default";
 
+  constructor(
+    @Inject("SettingsService") private readonly settingsService: any,
+  ) {}
 
-  constructor(private readonly settingsService: SettingsService) {}
   ngOnInit(): void {
-    this.brandName = this.settingsService.getBrandInfo().name.toLowerCase();
+    try {
+      this.brandName =
+        this.settingsService?.getBrandInfo()?.name?.toLowerCase() || "dropi";
+    } catch (e) {
+      this.brandName = "dropi";
+    }
   }
 
   buttonClick() {