@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/alert-modal/alert-modal.component.ts

@@ -7,73 +7,46 @@ import {
   OnChanges,
   SimpleChanges,
   NO_ERRORS_SCHEMA,
-  ComponentFactoryResolver,
   ViewChild,
   ViewContainerRef,
   TemplateRef,
   OnDestroy,
-} from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { NgIf } from '@angular/common';
-import { ProgressBarModule } from 'primeng/progressbar';
-import { DropiModalComponent } from '../dropi-modal/dropi-modal.component';
-import { PTemplateDirective } from '../dropi-modal/p-template.directive';
-import {
-  TranslateLoader,
-  TranslateModule,
-  TranslateService,
-  TranslateStore,
-} from '@ngx-translate/core';
-import { NgPrimeModule } from '@app/ngprime.module';
-import { LoadingType } from '@app/utilities/enums/ui/alert-modal.enum';
-import { Subject, Subscription } from 'rxjs';
-import { TemplateAlertModalService } from '@app/ui/alert-modal/services/template-alert-modal.service';
-import { takeUntil } from 'rxjs/operators';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { HttpClient } from '@angular/common/http';
-import { SettingsService } from '@app/services/setting.service';
-import { ButtonComponent } from '../dropi-button/dropi-button.component';
+  Inject,
+} from "@angular/core";
+import { NgIf } from "@angular/common";
+import { ProgressBarModule } from "primeng/progressbar";
+import { DropiModalComponent } from "../dropi-modal/dropi-modal.component";
+import { PTemplateDirective } from "../dropi-modal/p-template.directive";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { ButtonComponent } from "../dropi-button/dropi-button.component";
 
-// ✅ Función de carga de traducciones
-export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
+export enum LoadingType {
+  Bowling = "bowling",
+  Heart = "heart",
 }
-// Definición de la interfaz ModalParams
+
 export interface ModalParams {
   tittle: string;
-  type?: 'question' | 'warning' | 'success' | 'error' | 'loading'; // Tipos predefinidos de modal
+  type?: "question" | "warning" | "success" | "error" | "loading";
   message: string;
-  primaryButton?: string; // Opcional, con un valor por defecto si no se define
+  primaryButton?: string;
   secondaryButton?: string;
-  loadingType?: LoadingType; // Tipo de animación cuando el loading es true
-  loadingTitle?: string; // Título mostrado cuando el modal está en estado de carga
-  loadingMessage?: string; // Mensaje mostrado cuando el modal está en estado de carga
-  withLoadingProgressBar?: boolean; // Si se muestra una barra de progreso cuando el loading es true
-  closable?: boolean; // Si el modal se puede cerrar manualmente
-  displayButtons?: boolean; // Si se muestran los botones
-  applyCountRegresive?: boolean; // Si se muestra un número que disminuye regresivamente en segundos
-  timer?: number; // Valor en el que iniciara la cuenta regresiva
+  loadingType?: LoadingType;
+  loadingTitle?: string;
+  loadingMessage?: string;
+  withLoadingProgressBar?: boolean;
+  closable?: boolean;
+  displayButtons?: boolean;
+  applyCountRegresive?: boolean;
+  timer?: number;
 }
 
-// Ejemplo de uso del componente AlertModalComponent:
-// <app-alert-modal
-//   [visible]="true"
-//   [loading]="false" // definir y manejar el estado de carga cuando tiene espera
-//   [params]="{
-//     tittle: 'Título',
-//     message: 'Mensaje',
-//     type: 'question',
-//     secondaryButton: 'Cancelar'
-//   }"
-// (primaryButtonEvent)="orderSuccess($event)" // funcion cuando se presiona el botón primario
-// (secondaryButtonEvent)="cancel($event)" // funcion cuando se presiona el botón secundario
-// (modalOpenChange)="restartAlertParams($event)" // función cuando se cierra el modal
-// ></app-alert-modal>
-
 @Component({
-  selector: 'app-alert-modal',
-  templateUrl: './alert-modal.component.html',
-  styleUrls: ['./alert-modal.component.scss'],
+  selector: "app-alert-modal",
+  templateUrl: "./alert-modal.component.html",
+  styleUrls: ["./alert-modal.component.scss"],
   standalone: true,
   imports: [
     DropiModalComponent,
@@ -94,7 +67,7 @@ export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
   @Input() baseZIndex: number = 0;
   @Output() modalOpenChange = new EventEmitter<boolean>();
   @Output() primaryButtonEvent = new EventEmitter<boolean>();
-  @ViewChild('modalContainer', { read: ViewContainerRef, static: true })
+  @ViewChild("modalContainer", { read: ViewContainerRef, static: true })
   modalContainer!: ViewContainerRef;
   @Output() secondaryButtonEvent = new EventEmitter<boolean>();
   @Output() onHide = new EventEmitter();
@@ -111,34 +84,29 @@ export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
   secondaryButton: string;
   sourceAnimation: string;
   loadingType: LoadingType = LoadingType.Bowling;
-  loadingTitle: string = 'Cargando...';
-  loadingMessage: string = 'Por favor, espere un momento';
+  loadingTitle: string = "Cargando...";
+  loadingMessage: string = "Por favor, espere un momento";
   withLoadingProgressBar: boolean = false;
   loadingAnimation = {
-    path: '/assets/lottie-files/loading.json',
-    width: '300px',
-    height: '300px',
-    marginBottom: '0px',
+    path: "/assets/lottie-files/loading.json",
+    width: "300px",
+    height: "300px",
+    marginBottom: "0px",
   };
 
-  configurationsJson: string = localStorage.getItem('DROPI_LoginResult');
-  brandName: string;
-
+  brandName: string = "dropi";
   imageWhiteBrand: string;
-
   interval: any;
   countRegresive: number = 0;
 
   constructor(
-    private templateService: TemplateAlertModalService,
-    private settingService: SettingsService,
-    private translateService: TranslateService,
+    @Inject("TemplateAlertModalService") private templateService: any,
+    @Inject("SettingsService") private settingService: any,
+    @Inject(TranslateService) private translateService: TranslateService,
   ) {
-    this.brandName = this.settingService.getBrandInfo()
+    this.brandName = this.settingService?.getBrandInfo()
       ? this.settingService.getBrandInfo()?.name.toLowerCase()
-      : 'dropi';
-    // private sanitizer: DomSanitizer,
-    // private componentFactoryResolver: ComponentFactoryResolver,
+      : "dropi";
   }
 
   ngOnInit(): void {
@@ -146,9 +114,9 @@ export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
     this.decideAnimation();
     this.decideLoadingAnimation();
 
-    this.templateService.currentTemplate$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(({ template, context }) => {
+    this.templateService?.currentTemplate$
+      ?.pipe(takeUntil(this.destroy$))
+      ?.subscribe(({ template, context }) => {
         this.alertTemplate = template;
         this.contextTemplate = context;
       });
@@ -166,14 +134,20 @@ export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
       this.tittle = this.params.tittle;
       this.type = this.params.type;
       this.message = this.params.message;
-      this.primaryButton = this.params.primaryButton ? this.params.primaryButton : 'Aceptar';
+      this.primaryButton = this.params.primaryButton
+        ? this.params.primaryButton
+        : "Aceptar";
       this.secondaryButton = this.params?.secondaryButton;
       this.displayButtons = this.params?.displayButtons == false ? false : true;
-      this.loadingType = this.params.loadingType ? this.params.loadingType : LoadingType.Bowling;
-      this.loadingTitle = this.params.loadingTitle ? this.params.loadingTitle : 'Cargando...';
+      this.loadingType = this.params.loadingType
+        ? this.params.loadingType
+        : LoadingType.Bowling;
+      this.loadingTitle = this.params.loadingTitle
+        ? this.params.loadingTitle
+        : "Cargando...";
       this.loadingMessage = this.params.loadingMessage
         ? this.params.loadingMessage
-        : 'Por favor, espere un momento';
+        : "Por favor, espere un momento";
       this.withLoadingProgressBar = this.params.withLoadingProgressBar
         ? this.params.withLoadingProgressBar
         : false;
@@ -184,8 +158,7 @@ export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   closeModal(): void {
-    this.visible = false; // Inicia animación interna en dropi-modal
-    // No emitimos modalOpenChange todavía para evitar que el padre destruya el componente (si usa *ngIf)
+    this.visible = false;
   }
 
   primaryButtonAction(): void {
@@ -202,20 +175,20 @@ export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
 
   decideAnimation() {
     switch (this.type) {
-      case 'question':
-        this.sourceAnimation = '/assets/lottie-files/question.json';
+      case "question":
+        this.sourceAnimation = "/assets/lottie-files/question.json";
         break;
-      case 'warning':
-        this.sourceAnimation = '/assets/lottie-files/warning.json';
+      case "warning":
+        this.sourceAnimation = "/assets/lottie-files/warning.json";
         break;
-      case 'success':
-        this.sourceAnimation = '/assets/lottie-files/success.json';
+      case "success":
+        this.sourceAnimation = "/assets/lottie-files/success.json";
         break;
-      case 'error':
-        this.sourceAnimation = '/assets/lottie-files/failure.json';
+      case "error":
+        this.sourceAnimation = "/assets/lottie-files/failure.json";
         break;
       default:
-        this.sourceAnimation = '';
+        this.sourceAnimation = "";
         break;
     }
   }
@@ -224,70 +197,67 @@ export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
     switch (this.loadingType) {
       case LoadingType.Bowling:
         const path =
-          this.brandName.toLowerCase() === 'dropi'
-            ? '/assets/lottie-files/loading.json'
-            : '/assets/lottie-files/loading-mb.json';
+          this.brandName.toLowerCase() === "dropi"
+            ? "/assets/lottie-files/loading.json"
+            : "/assets/lottie-files/loading-mb.json";
         this.loadingAnimation = {
           path,
-          width: '300px',
-          height: '300px',
-          marginBottom: '0px',
+          width: "300px",
+          height: "300px",
+          marginBottom: "0px",
         };
         break;
       case LoadingType.Heart:
         this.loadingAnimation = {
-          path: '/assets/lottie-files/heart.json',
-          width: '180px',
-          height: '180px',
-          marginBottom: '15px',
+          path: "/assets/lottie-files/heart.json",
+          width: "180px",
+          height: "180px",
+          marginBottom: "15px",
         };
         break;
     }
   }
 
-  // src\assets\img\white-brands-events
   decideImgWhiteBrand() {
     switch (this.type) {
-      case 'question':
+      case "question":
         return `/assets/img/white-brands-events/info.png`;
-      case 'warning':
+      case "warning":
         return `/assets/img/white-brands-events/warning.png`;
-      case 'success':
+      case "success":
         return `/assets/img/white-brands-events/success.png`;
-      case 'error':
+      case "error":
         return `/assets/img/white-brands-events/error.png`;
       default:
-        return '';
+        return "";
     }
   }
 
   startCountRegresive() {
     if (this.interval) {
-      clearInterval(this.interval); // Asegura que no haya un intervalo activo
+      clearInterval(this.interval);
     }
 
-    this.countRegresive = this.params.timer; // Reinicia la cuenta regresiva
+    this.countRegresive = this.params.timer;
 
     this.interval = setInterval(() => {
-      console.log('Regresiva:', this.countRegresive); // Depuración
       this.countRegresive--;
       if (this.countRegresive <= 0) {
-        clearInterval(this.interval); // Limpia el intervalo
+        clearInterval(this.interval);
       }
     }, 1000);
   }
 
   ngOnDestroy() {
-    this.destroy$.next(); // 🔹 Cancela todas las suscripciones que usan takeUntil(this.destroy$)
-    this.destroy$.complete(); // 🔹 Evita más emisiones en this.destroy$
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   onHideModal() {
-    this.modalOpenChange.emit(false); // Sincroniza estado con el padre al finalizar animación
+    this.modalOpenChange.emit(false);
     this.onHide.emit();
   }
 
-  //metodo para validar si llega un sólo mensaje string o un array de strings
   isArray(value: any): boolean {
     return Array.isArray(value);
   }

package/src/components-source/alert-validation/alert-validation.component.html

@@ -0,0 +1,8 @@
+<div class="alert-validation-container" *ngIf="visible">
+  <div class="alert-content">
+    <span class="message">{{ message }}</span>
+    <button *ngIf="routeLink" (click)="navigate()" class="nav-btn">
+      Ir al link
+    </button>
+  </div>
+</div>

package/src/components-source/alert-validation/alert-validation.component.scss

@@ -0,0 +1,225 @@
+.alertx-warning {
+  color: #664d03;
+  background-color: #ffecb5;
+  border-color: #fbe9c9;
+}
+
+.alertx {
+  position: relative;
+  padding: 0.75rem 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.alertx-text {
+  font-weight: 500;
+  margin-right: 0.3rem;
+  font-size: 14px;
+}
+
+.alertx-text-underline {
+  font-weight: 300;
+  margin-right: 1.3rem;
+  font-size: 14px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.alertx-text-underline2 {
+  font-weight: 300;
+  font-size: 14px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.alertx-failed {
+  color: #842029;
+  background-color: #f8d7da;
+  border-color: #f5c2c7;
+}
+
+.alertx.alertx-warning {
+  border-radius: 8px;
+  border: 1px solid var(--Warning-warning-400, #f4c370);
+  background: var(--Warning-warning-50, #fef8ed);
+}
+.alertx {
+  position: relative;
+  padding: 8px 12px;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.alertx-text-gray {
+  font-weight: 500;
+  margin-right: 0.3rem;
+  font-size: 14px;
+  color: #7b8190;
+}
+
+.alertx-text2 {
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.btnx-warning {
+  color: #fff;
+  background-color: #f1b44c;
+  border-color: #f1b44c;
+  font-weight: 500;
+}
+
+.contentcustom {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.imgTutorial {
+  object-fit: contain;
+}
+
+@media (max-width: 550px) {
+  .btnx-warning {
+    margin-top: 0.5rem;
+  }
+
+  .contentcustom {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+
+.disabledElement {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.alertx-warning1 {
+  color: #664d03;
+  background-color: #ffecb5;
+  border-color: #fbe9c9;
+}
+
+.alertx-gray {
+  color: #495057;
+  background-color: #f5f6f8;
+  border-color: #ced4da;
+}
+
+.alertx1 {
+  position: relative;
+  padding: 0.75rem 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.alertx-text1 {
+  font-weight: 500;
+  margin-left: 0.6rem;
+  margin-right: 1.3rem;
+  font-size: 14px;
+}
+
+.btnx-warning1 {
+  color: #fff;
+  font-weight: 500;
+  border-radius: 8px;
+  background: var(--Warning-warning-500, #f1b44c);
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
+.btnx-gray {
+  color: #fff;
+  background-color: #74788d;
+  border-color: #74788d;
+  font-weight: 500;
+}
+
+.iframeVideo {
+  border-radius: 15px;
+  margin-top: 1rem;
+  width: 100%;
+  height: 100%;
+}
+
+:host ::ng-deep .alert-modal-yt {
+  .p-dialog {
+    background-color: white !important;
+    box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 8px !important;
+    width: 70dvw;
+    box-sizing: border-box;
+    padding: 32px;
+    margin: 0 20px;
+    transition: all 0.3s ease-in-out;
+    height: auto;
+  }
+  .p-dialog-content {
+    padding: 0px;
+    overflow: hidden;
+  }
+  .p-dialog-header {
+    position: absolute;
+    right: -10px;
+    top: -10px;
+    background: transparent;
+  }
+}
+
+:host ::ng-deep .alert-modal2 {
+  .p-dialog {
+    background-color: white !important;
+    box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 8px !important;
+    width: 70dvw;
+    box-sizing: border-box;
+    padding: 32px;
+    margin: 0 20px;
+    transition: all 0.3s ease-in-out;
+    height: auto;
+  }
+  .p-dialog-content {
+    padding: 0px;
+    overflow: hidden;
+  }
+  .p-dialog-header {
+    position: absolute;
+    right: -10px;
+    top: -10px;
+    background: transparent;
+  }
+}
+
+@media (max-width: 550px) {
+  .alert-reason1 {
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+  .btnx-warning1 {
+    margin-top: 0.5rem;
+  }
+
+  .btnx-gray {
+    margin-top: 0.5rem;
+  }
+}

package/src/components-source/alert-validation/alert-validation.component.ts

@@ -0,0 +1,43 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+@Component({
+  selector: "app-alert-validation",
+  standalone: true,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./alert-validation.component.html",
+  styleUrls: ["./alert-validation.component.scss"],
+})
+export class AlertValidationComponent implements OnInit {
+  @Input() public visible: boolean = false;
+  @Input() public visibleSupport: boolean = false;
+  @Input() public message: string = "";
+  @Input() public routeLink?: string;
+  @Input() public status: any;
+  @Input() public isBillingDataCompleted: boolean = true;
+  @Input() public messageAlertObject: any;
+  @Input() public visibleTutorial: boolean = false;
+
+  constructor(@Inject("Router") private router: any) {}
+
+  ngOnInit(): void {}
+
+  public navigate(): void {
+    if (this.routeLink && this.router) {
+      this.router.navigate([this.routeLink]);
+    }
+  }
+
+  public goValidate(): void {}
+  public openModal2(): void {}
+  public closeModal(): void {}
+}

package/src/components-source/beta-tag/beta-tag.component.html

@@ -0,0 +1 @@
+<div class="betta-tag pulse">Beta</div>

package/src/components-source/beta-tag/beta-tag.component.scss

@@ -0,0 +1,26 @@
+.betta-tag {
+  position: absolute;
+  background-color: #34c38f;
+  padding: 1px 4px;
+  border-radius: 4px;
+  border: 1px solid #ffffff;
+  font-size: 10px;
+  color: #ffffff;
+  z-index: 9;
+  right: -6px;
+  top: -10px;
+  font-weight: 600;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-beta-tag',
+    templateUrl: './beta-tag.component.html',
+    styleUrls: ['./beta-tag.component.scss'],
+    standalone: true
+})
+export class BetaTagComponent {
+
+}

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

@@ -1,5 +1,13 @@
-<p-breadcrumb
-  class="max-w-full breadcumb-list mb-4 mt-4"
-  [model]="items"
-  [home]="home"
-></p-breadcrumb>
+<div class="breadcrumb-container">
+  <ul class="breadcrumb-list">
+    <li class="breadcrumb-item home" *ngIf="home">
+      <a [href]="home.routerLink">
+        <i [class]="home.icon"></i>
+      </a>
+    </li>
+    <li class="breadcrumb-item" *ngFor="let item of items">
+      <span class="separator">/</span>
+      <a [href]="item.routerLink">{{ item.label }}</a>
+    </li>
+  </ul>
+</div>

package/src/components-source/breadcrumb/breadcrumb.component.scss

@@ -28,6 +28,7 @@
   width: 12px;
 }
 
+/*
 :host ::ng-deep .card-icon {
   background-image: url('../../../assets/img/icons/card.svg');
   width: 20px;
@@ -39,8 +40,14 @@
     display: none;
   }
 }
+*/
 
 // color #A3A6B8 breadcrum disable color
-:host ::ng-deep .breadcumb-list .p-breadcrumb li.p-disabled span.p-menuitem-text {
+:host
+  ::ng-deep
+  .breadcumb-list
+  .p-breadcrumb
+  li.p-disabled
+  span.p-menuitem-text {
   color: #a3a6b8;
 }