@dropi/ui-components 1.0.0

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

@@ -0,0 +1,295 @@
+/**
+ * @fileoverview Alert Modal component stories for Storybook
+ * @description Modal dialog for confirmations, warnings, and alerts
+ */
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { AlertModalComponent } from './alert-modal.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { provideTranslateService } from '../../../../.storybook/storybook.providers';
+import '@dotlottie/player-component';
+
+const meta: Meta<AlertModalComponent> = {
+  title: 'UI Dropi/Alert Modal',
+  component: AlertModalComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [TranslateModule],
+      providers: [...provideTranslateService()],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'light',
+    },
+    docs: {
+      description: {
+        component: `
+A modal dialog component for displaying confirmations, warnings, success messages, and errors.
+
+## Key Features
+- **Types**: question, warning, success, error, loading
+- **Loading state**: Built-in loading animation with progress bar
+- **Auto-translation**: Automatically translates text using i18n keys
+- **Buttons**: Primary and optional secondary button
+- **Responsive**: Bottom-sheet animation on mobile (slides up/down)
+- **Fixed width**: 440px on desktop, 100% on mobile
+
+## Mobile Behavior
+On screens ≤768px, the modal transforms into a bottom-sheet:
+- Slides up from the bottom when opening
+- Slides down when closing
+- Full width with rounded top corners
+
+## Usage
+\`\`\`html
+<app-alert-modal
+  [visible]="showModal"
+  [params]="modalParams"
+  [loading]="isLoading"
+  (primaryButtonEvent)="onConfirm()"
+  (secondaryButtonEvent)="onCancel()"
+  (modalOpenChange)="showModal = $event">
+</app-alert-modal>
+\`\`\`
+
+## Params Configuration
+\`\`\`typescript
+modalParams: ModalParams = {
+  type: 'warning',
+  tittle: 'Are you sure?',
+  message: 'This action cannot be undone',
+  primaryButton: 'Delete',
+  secondaryButton: 'Cancel',
+  displayButtons: true
+};
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    visible: {
+      control: 'boolean',
+      description: 'Controls modal visibility',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Shows loading animation',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    isStep: {
+      control: 'boolean',
+      description: 'Indicates if modal is part of a step flow',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    params: {
+      control: 'object',
+      description: 'Configuration object with type, title, message, and buttons',
+      table: {
+        type: { summary: 'AlertModalParams' },
+        category: 'Data',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AlertModalComponent>;
+
+// Template helper for all stories to ensure proper modal rendering
+const modalTemplate = (args: Record<string, unknown>) => ({
+  props: args,
+  template: `
+    <div style="min-height: 400px; display: flex; align-items: center; justify-content: center;">
+      <app-alert-modal
+        [visible]="visible"
+        [loading]="loading"
+        [params]="params">
+      </app-alert-modal>
+    </div>
+  `,
+});
+
+/**
+ * Question modal for user confirmations.
+ * Shows a question icon with two action buttons.
+ */
+export const Question: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: false,
+    params: {
+      type: 'question',
+      tittle: 'Are you sure you want to leave?',
+      message: 'If you exit, you will lose the information entered',
+      primaryButton: 'Yes, exit',
+      secondaryButton: 'Back',
+    },
+  },
+};
+
+/**
+ * Warning modal for destructive actions.
+ * Shows a warning icon to alert users about potential consequences.
+ */
+export const Warning: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: false,
+    params: {
+      type: 'warning',
+      tittle: 'Are you sure?',
+      message: 'This action cannot be undone',
+      primaryButton: 'Delete',
+      secondaryButton: 'Cancel',
+    },
+  },
+};
+
+/**
+ * Success modal for completed actions.
+ * Shows a success icon with confirmation message.
+ */
+export const Success: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: false,
+    params: {
+      type: 'success',
+      tittle: 'Action completed',
+      message: 'The operation was completed successfully',
+      primaryButton: 'Accept',
+    },
+  },
+};
+
+/**
+ * Error modal for displaying errors.
+ * Shows an error icon with error message.
+ */
+export const Error: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: false,
+    params: {
+      type: 'error',
+      tittle: 'Error',
+      message: 'An error occurred in the application, please try again later',
+      primaryButton: 'Accept',
+    },
+  },
+};
+
+/**
+ * Loading state modal.
+ * Shows a loading animation with progress message.
+ */
+export const Loading: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: true,
+    params: {
+      type: 'question',
+      tittle: 'Processing',
+      message: 'Please wait...',
+      primaryButton: 'Cancel',
+      loadingTitle: 'Loading',
+      loadingMessage: 'Please wait a moment',
+    },
+  },
+};
+
+/**
+ * Loading modal with progress bar.
+ * Used for operations that take longer to complete.
+ */
+export const LoadingWithProgressBar: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: true,
+    params: {
+      type: 'question',
+      tittle: 'Are you sure you want to leave?',
+      message: 'If you exit, you will lose the information entered',
+      primaryButton: 'Yes, exit',
+      secondaryButton: 'Back',
+      withLoadingProgressBar: true,
+      loadingTitle: 'Recharge in progress',
+      loadingMessage: 'We are processing your information',
+    },
+  },
+};
+
+/**
+ * Simple modal with single button.
+ * Used for informative alerts that only require acknowledgment.
+ */
+export const SingleButton: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: false,
+    params: {
+      type: 'warning',
+      tittle: 'Attention',
+      message: 'Please verify all required fields',
+      primaryButton: 'Accept',
+    },
+  },
+};
+
+/**
+ * Mobile bottom-sheet view.
+ * On mobile devices (≤768px), the modal transforms into a bottom-sheet
+ * that slides up from the bottom of the screen.
+ * 
+ * To preview: Use Storybook's viewport addon to switch to mobile view.
+ */
+export const MobileBottomSheet: Story = {
+  render: (args) => modalTemplate(args),
+  args: {
+    visible: true,
+    loading: false,
+    params: {
+      type: 'question',
+      tittle: 'Delete this item?',
+      message: 'This action cannot be undone. The item will be permanently removed.',
+      primaryButton: 'Yes, Delete',
+      secondaryButton: 'Cancel',
+      displayButtons: true,
+    },
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+    docs: {
+      description: {
+        story: 'On mobile screens, the modal slides up from the bottom as a bottom-sheet with rounded top corners.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,294 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  EventEmitter,
+  Output,
+  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';
+
+// ✅ Función de carga de traducciones
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
+}
+// Definición de la interfaz ModalParams
+export interface ModalParams {
+  tittle: string;
+  type?: 'question' | 'warning' | 'success' | 'error' | 'loading'; // Tipos predefinidos de modal
+  message: string;
+  primaryButton?: string; // Opcional, con un valor por defecto si no se define
+  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
+}
+
+// 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'],
+  standalone: true,
+  imports: [
+    DropiModalComponent,
+    PTemplateDirective,
+    NgIf,
+    TranslateModule,
+    ProgressBarModule,
+    ButtonComponent,
+  ],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() visible: boolean;
+  @Input() params: ModalParams;
+  @Input() loading: boolean;
+  @Input() isStep: boolean;
+  @Input() contentTemplate?: TemplateRef<any>;
+  @Input() baseZIndex: number = 0;
+  @Output() modalOpenChange = new EventEmitter<boolean>();
+  @Output() primaryButtonEvent = new EventEmitter<boolean>();
+  @ViewChild('modalContainer', { read: ViewContainerRef, static: true })
+  modalContainer!: ViewContainerRef;
+  @Output() secondaryButtonEvent = new EventEmitter<boolean>();
+  @Output() onHide = new EventEmitter();
+
+  alertTemplate: TemplateRef<any> | null = null;
+  contextTemplate: any = {};
+  private destroy$ = new Subject<void>();
+
+  tittle: string;
+  type: string;
+  message: string;
+  primaryButton: string;
+  displayButtons: boolean = true;
+  secondaryButton: string;
+  sourceAnimation: string;
+  loadingType: LoadingType = LoadingType.Bowling;
+  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',
+  };
+
+  configurationsJson: string = localStorage.getItem('DROPI_LoginResult');
+  brandName: string;
+
+  imageWhiteBrand: string;
+
+  interval: any;
+  countRegresive: number = 0;
+
+  constructor(
+    private templateService: TemplateAlertModalService,
+    private settingService: SettingsService,
+    private translateService: TranslateService,
+  ) {
+    this.brandName = this.settingService.getBrandInfo()
+      ? this.settingService.getBrandInfo()?.name.toLowerCase()
+      : 'dropi';
+    // private sanitizer: DomSanitizer,
+    // private componentFactoryResolver: ComponentFactoryResolver,
+  }
+
+  ngOnInit(): void {
+    this.updateParams();
+    this.decideAnimation();
+    this.decideLoadingAnimation();
+
+    this.templateService.currentTemplate$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(({ template, context }) => {
+        this.alertTemplate = template;
+        this.contextTemplate = context;
+      });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.updateParams();
+    this.decideAnimation();
+    this.decideLoadingAnimation();
+    this.imageWhiteBrand = this.decideImgWhiteBrand();
+  }
+
+  updateParams(): void {
+    if (this.params) {
+      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.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.loadingMessage = this.params.loadingMessage
+        ? this.params.loadingMessage
+        : 'Por favor, espere un momento';
+      this.withLoadingProgressBar = this.params.withLoadingProgressBar
+        ? this.params.withLoadingProgressBar
+        : false;
+      if (this.params.applyCountRegresive === true && this.visible) {
+        this.startCountRegresive();
+      }
+    }
+  }
+
+  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)
+  }
+
+  primaryButtonAction(): void {
+    this.primaryButtonEvent.emit(true);
+    if (!this.isStep) {
+      this.closeModal();
+    }
+  }
+
+  secondaryButtonAction(): void {
+    this.secondaryButtonEvent.emit(true);
+    this.closeModal();
+  }
+
+  decideAnimation() {
+    switch (this.type) {
+      case 'question':
+        this.sourceAnimation = '/assets/lottie-files/question.json';
+        break;
+      case 'warning':
+        this.sourceAnimation = '/assets/lottie-files/warning.json';
+        break;
+      case 'success':
+        this.sourceAnimation = '/assets/lottie-files/success.json';
+        break;
+      case 'error':
+        this.sourceAnimation = '/assets/lottie-files/failure.json';
+        break;
+      default:
+        this.sourceAnimation = '';
+        break;
+    }
+  }
+
+  decideLoadingAnimation() {
+    switch (this.loadingType) {
+      case LoadingType.Bowling:
+        const path =
+          this.brandName.toLowerCase() === 'dropi'
+            ? '/assets/lottie-files/loading.json'
+            : '/assets/lottie-files/loading-mb.json';
+        this.loadingAnimation = {
+          path,
+          width: '300px',
+          height: '300px',
+          marginBottom: '0px',
+        };
+        break;
+      case LoadingType.Heart:
+        this.loadingAnimation = {
+          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':
+        return `/assets/img/white-brands-events/info.png`;
+      case 'warning':
+        return `/assets/img/white-brands-events/warning.png`;
+      case 'success':
+        return `/assets/img/white-brands-events/success.png`;
+      case 'error':
+        return `/assets/img/white-brands-events/error.png`;
+      default:
+        return '';
+    }
+  }
+
+  startCountRegresive() {
+    if (this.interval) {
+      clearInterval(this.interval); // Asegura que no haya un intervalo activo
+    }
+
+    this.countRegresive = this.params.timer; // Reinicia la cuenta regresiva
+
+    this.interval = setInterval(() => {
+      console.log('Regresiva:', this.countRegresive); // Depuración
+      this.countRegresive--;
+      if (this.countRegresive <= 0) {
+        clearInterval(this.interval); // Limpia el intervalo
+      }
+    }, 1000);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next(); // 🔹 Cancela todas las suscripciones que usan takeUntil(this.destroy$)
+    this.destroy$.complete(); // 🔹 Evita más emisiones en this.destroy$
+  }
+
+  onHideModal() {
+    this.modalOpenChange.emit(false); // Sincroniza estado con el padre al finalizar animación
+    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-modal/services/template-alert-modal.service.ts

@@ -0,0 +1,75 @@
+import { ApplicationRef, inject, Injectable, createComponent, TemplateRef, Type } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+interface BaseComponent {
+  getTemplate(): TemplateRef<any>;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TemplateAlertModalService {
+  private appRef = inject(ApplicationRef);
+  private currentComponent: any;
+    private dataOutputSubject = new BehaviorSubject<any>(null);
+    dataOutput$ = this.dataOutputSubject.asObservable();
+
+  private currentContext = new BehaviorSubject<any>(null);
+  currentContext$ = this.currentContext.asObservable();
+
+  private templateSubject = new BehaviorSubject<{ template: TemplateRef<any> | null; context?: any }>({ template: null });
+  currentTemplate$ = this.templateSubject.asObservable();
+  private currentTemplateName;
+
+  constructor() {}
+
+  setTemplate(component: any, context: any = {}, templateName:string = '') {    
+    this.destroyComponentInstance(); // 🔹 Asegura que solo haya una instancia activa
+    this.createComponentInstance(component);
+    this.currentTemplateName = templateName
+    this.templateSubject.next({ template: this.currentComponent.getTemplate(templateName), context });
+  }
+
+  createComponentInstance<T extends BaseComponent>(component: Type<T>) {
+    // Crear instancia del componente dinámicamente
+    const componentRef = createComponent(component, {
+      environmentInjector: this.appRef.injector,
+    });
+
+    // Adjuntar la vista al ApplicationRef
+    this.appRef.attachView(componentRef.hostView);
+
+    this.currentComponent = componentRef.instance;
+
+    // Guardar la referencia del componenteRef para destruirlo después
+    (this.currentComponent as any)._componentRef = componentRef;
+  }
+
+  resfreshData(context){
+    this.currentContext.next( context );
+  }
+
+  destroyComponentInstance() {  
+    if (this.currentComponent) {
+      const componentRef = (this.currentComponent as any)._componentRef;
+
+      if (componentRef) {
+        this.appRef.detachView(componentRef.hostView); // 🔹 Remueve la vista de Angular
+        componentRef.destroy(); // 🔹 Destruye la instancia del componente
+      }
+
+      this.currentComponent = null; // 🔹 Limpia la referencia
+
+      // 🔹 Emitir un template vacío para limpiar el modal
+      this.templateSubject.next({ template: null, context: null });
+      this.dataOutputSubject.next(null);
+      this.currentContext.next(null);
+
+    }
+   
+  }
+
+  updateDataOutput(newData: any) {
+    this.dataOutputSubject.next(newData); // 🔹 Emite cambios a los suscriptores
+  }
+}