@3ddv/software-division-components 1.4.2 → 1.4.7

package/projects/software-division-components/src/dvm/popover/popover.service.ts

@@ -1,627 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import {
-  ApplicationRef,
-  ComponentRef,
-  createComponent,
-  createEnvironmentInjector,
-  ElementRef,
-  EnvironmentInjector,
-  inject,
-  Injectable,
-  TemplateRef,
-} from '@angular/core';
-import { of } from 'rxjs';
-import {
-  arrow,
-  autoPlacement,
-  autoUpdate,
-  computePosition,
-  ComputePositionConfig,
-  detectOverflow,
-  flip,
-  hide,
-  inline,
-  Middleware,
-  offset,
-  shift,
-  size,
-  VirtualElement,
-} from '@floating-ui/dom';
-import { MiddlewareOptions, PopoverInstance, PopoverOptions } from './types';
-import { CONFIGURATION_SERVICE, DVM_FORMATTER, DVM_SERVICE } from './popover.config';
-import type { IConfigurationService, IDvmFormatter, IDvmService } from './popover.config';
-
-export interface PopoverContentProjection {
-  thumbnail?: TemplateRef<unknown> | string;
-  content?: TemplateRef<unknown> | string;
-  price?: TemplateRef<unknown> | string;
-}
-
-export interface PopoverServiceOptions {
-  providers?: any[];
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PopoverService {
-  // SERVICES
-  private readonly appReference: ApplicationRef = inject(ApplicationRef);
-  private readonly envInjector: EnvironmentInjector = inject(EnvironmentInjector);
-  private readonly document: Document = inject(DOCUMENT);
-
-  // POPOVER STATE
-  private readonly popoverInstances: Map<string, PopoverInstance> = new Map<string, PopoverInstance>();
-  private readonly popoverOptions: Partial<ComputePositionConfig> = {
-    placement: 'bottom',
-    strategy: 'absolute',
-    middleware: [],
-  };
-
-  private popoverTimerTimeInMs = 300;
-  private currentPopoverId = '';
-  private popoverTimer: ReturnType<typeof setTimeout> | null = null;
-  private popoverInstancesWithTimers: Map<string, PopoverInstance> = new Map();
-
-  // Default mock providers for when no custom providers are provided
-  private readonly defaultMockProviders = [
-    {
-      provide: CONFIGURATION_SERVICE,
-      useValue: {
-        configuration: {
-          dvmData: {
-            venueId: 'default-venue',
-          },
-        },
-      } as IConfigurationService,
-    },
-    {
-      provide: DVM_FORMATTER,
-      useValue: {
-        transform: (value: string) => value.replace(/-/g, ' ').toUpperCase(),
-      } as IDvmFormatter,
-    },
-    {
-      provide: DVM_SERVICE,
-      useValue: {
-        viewer3dService: {
-          isInitialized: () => true,
-          getThumbnail: () => of('https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Default+Thumbnail'),
-        },
-      } as any,
-    },
-  ];
-
-  // METHODS
-  public setTimer(): void {
-    const myId = this.currentPopoverId;
-    this.clearTimer();
-    this.popoverTimer = setTimeout(() => {
-      if (this.currentPopoverId !== myId) {
-        return;
-      }
-      this.destroyAllPopovers();
-      this.popoverTimer = null;
-    }, this.popoverTimerTimeInMs);
-  }
-
-  public clearTimer(): void {
-    if (this.popoverTimer !== null) {
-      clearTimeout(this.popoverTimer);
-      this.popoverTimer = null;
-    }
-  }
-
-  /**
-   * Sets a timer for a specific popover instance to auto-hide it after the specified delay.
-   * @param popoverId - The ID of the popover to set timer for
-   * @param delayMs - Delay in milliseconds (optional, defaults to configured delay)
-   */
-  public setPopoverTimer(popoverId: string, delayMs?: number): void {
-    this.clearPopoverTimer(popoverId);
-    const delay = delayMs ?? this.popoverTimerTimeInMs;
-
-    this.popoverTimer = setTimeout(() => {
-      this.destroyPopover(popoverId);
-    }, delay);
-  }
-
-  /**
-   * Clears the timer for a specific popover instance.
-   * @param popoverId - The ID of the popover to clear timer for
-   */
-  public clearPopoverTimer(popoverId: string): void {
-    if (this.popoverTimer !== null) {
-      clearTimeout(this.popoverTimer);
-      this.popoverTimer = null;
-    }
-  }
-
-  /**
-   * Configures the default timer delay for popovers.
-   * @param delayMs - Delay in milliseconds
-   */
-  public setTimerDelay(delayMs: number): void {
-    this.popoverTimerTimeInMs = delayMs;
-  }
-
-  /**
-   * Crea un popover y lo añade al DOM, usando un elemento de referencia y contenido HTML o string.
-   * Si ya existe un popover con el mismo ID, lo destruye antes de crear uno nuevo.
-   *
-   * @param popoverId   Identificador único del popover.
-   * @param reference   Elemento de referencia para posicionar el popover (HTMLElement, Element, VirtualElement o ElementRef).
-   * @param content     Contenido del popover (HTMLElement o string HTML).
-   * @param options     Opciones de configuración para el posicionamiento (placement, strategy, middleware, etc).
-   * @returns           Instancia del popover creado.
-   */
-  public createPopover(
-    popoverId: string,
-    reference: HTMLElement | Element | VirtualElement | (ElementRef & VirtualElement),
-    content: HTMLElement | string,
-    options: Partial<PopoverOptions> = {}
-  ): PopoverInstance<unknown> {
-    this.clearTimer();
-    // Comprobamos si ya existe una instancia de Popover con el mismo ID
-    this.checkPopoverInstance(popoverId ?? '');
-    this.currentPopoverId = popoverId;
-
-    const id: string = popoverId ?? `popover-${Date.now()}`; // ID unico del popover, proporcionado o auto
-    const referenceElement: unknown = reference instanceof ElementRef ? reference.nativeElement : reference; // Elemento de referencia
-    const popoverElement: HTMLElement = this.createPopoverElement(content); // Elemento Popover
-    const finalOptions: Partial<ComputePositionConfig> = {
-      // Opciones finales de posicionamiento
-      placement: options.placement || this.popoverOptions.placement,
-      strategy: options.strategy || this.popoverOptions.strategy,
-      middleware: options.middleware ? this.setMiddlewares(options.middleware) : this.popoverOptions.middleware,
-    };
-
-    // Añadimos el Popover al DOM
-    this.document.body.append(popoverElement);
-
-    // Creamos la instancia del Popover
-    const instance: PopoverInstance = {
-      id,
-      element: popoverElement,
-      reference: referenceElement as HTMLElement | Element | VirtualElement,
-      update: async () => this.calculatePosition(instance, finalOptions),
-    };
-
-    // Calculamos la posicion del Popover
-    void this.calculatePosition(instance, finalOptions);
-
-    // Añadimos la función de autoUpdate en la propiedad cleanup del Popover ( se llama al destruir el Popover )
-    instance.cleanup = autoUpdate(referenceElement as HTMLElement, popoverElement, () => instance.update!());
-
-    // Añadimos la instancia del Popover al mapa de instancias
-    this.popoverInstances.set(id, instance);
-
-    return instance;
-  }
-
-  /**
-   * Crea un popover que contiene un componente Angular con soporte para proyección de contenido.
-   * Si ya existe un popover con el mismo ID, lo destruye antes de crear uno nuevo.
-   *
-   * @param popoverId   Identificador único del popover.
-   * @param reference   Elemento de referencia para posicionar el popover (HTMLElement, Element, VirtualElement o ElementRef).
-   * @param component   Clase del componente Angular a renderizar dentro del popover.
-   * @param inputs      Propiedades de entrada para el componente.
-   * @param contentProjection Contenido proyectado para los slots del popover.
-   * @param options     Opciones de configuración para el posicionamiento (placement, strategy, middleware, etc).
-   * @returns           Instancia del popover creado, incluyendo la referencia al componente.
-   */
-  public createPopoverComponentWithContent<T>(
-    popoverId: string,
-    reference: HTMLElement | Element | VirtualElement | (ElementRef & VirtualElement),
-    component: new (...arguments_: unknown[]) => T,
-    inputs?: Partial<T>,
-    contentProjection?: PopoverContentProjection,
-    options: Partial<PopoverOptions> = {},
-    serviceOptions: PopoverServiceOptions = {}
-  ): PopoverInstance {
-    this.clearTimer();
-    // Comprobamos si ya existe una instancia de Popover con el mismo ID
-    this.checkPopoverInstance(popoverId ?? '');
-    this.currentPopoverId = popoverId;
-
-    const referenceElement: unknown = reference instanceof ElementRef ? reference.nativeElement : reference;
-    const popoverElement: HTMLElement = this.createPopoverElement();
-
-    // Create a custom environment injector with the required providers
-    const providers = serviceOptions.providers || this.defaultMockProviders;
-    const customInjector = createEnvironmentInjector(providers, this.envInjector);
-
-    const componentReference: ComponentRef<T> = createComponent(component, {
-      environmentInjector: customInjector,
-      hostElement: popoverElement,
-    });
-
-    const finalOptions: Partial<ComputePositionConfig> = {
-      placement: options.placement || this.popoverOptions.placement,
-      strategy: options.strategy || this.popoverOptions.strategy,
-      middleware: options.middleware ? this.setMiddlewares(options.middleware) : this.popoverOptions.middleware,
-    };
-
-    // Añadimos el Popover al DOM
-    this.document.body.append(popoverElement);
-
-    // Si tiene inputs, los asignamos al componente
-    if (inputs) {
-      for (const [key, value] of Object.entries(inputs)) {
-        componentReference.setInput(key, value);
-      }
-    }
-
-    // Procesamos la proyección de contenido
-    if (contentProjection) {
-      this.processContentProjection(componentReference, contentProjection);
-    }
-
-    // Encendemos el detectChanges del componente para que se renderice
-    componentReference.changeDetectorRef.detectChanges();
-
-    // Añadimos el componente al DOM
-    this.appReference.attachView(componentReference.hostView);
-
-    // Creamos la instancia del Popover
-    const instance: PopoverInstance = {
-      id: popoverId,
-      element: popoverElement,
-      reference: referenceElement as HTMLElement | Element | VirtualElement,
-      componentRef: componentReference as ComponentRef<unknown>,
-      update: async () => this.calculatePosition(instance, finalOptions),
-    };
-
-    const arrowElement = document.querySelector('#arrow')!;
-    finalOptions.middleware?.push(arrow({ element: arrowElement }));
-
-    // Calculamos la posicion del Popover
-    void this.calculatePosition(instance, finalOptions);
-
-    // Proporcionamos la función de autoUpdate en la propiedad cleanup del Popover
-    instance.cleanup = autoUpdate(referenceElement as HTMLElement, popoverElement, () => instance.update!());
-
-    // Añadimos la instancia del Popover al mapa de instancias
-    this.popoverInstances.set(popoverId, instance);
-
-    return instance;
-  }
-
-  /**
-   * Crea un popover que contiene un componente Angular, lo añade al DOM y lo posiciona.
-   * Si ya existe un popover con el mismo ID, lo destruye antes de crear uno nuevo.
-   *
-   * @param popoverId   Identificador único del popover.
-   * @param reference   Elemento de referencia para posicionar el popover (HTMLElement, Element, VirtualElement o ElementRef).
-   * @param component   Clase del componente Angular a renderizar dentro del popover.
-   * @param inputs      Propiedades de entrada para el componente.
-   * @param options     Opciones de configuración para el posicionamiento (placement, strategy, middleware, etc).
-   * @returns           Instancia del popover creado, incluyendo la referencia al componente.
-   */
-  public createPopoverComponent<T>(
-    popoverId: string,
-    reference: HTMLElement | Element | VirtualElement | (ElementRef & VirtualElement),
-    component: new (...arguments_: unknown[]) => T,
-    inputs?: Partial<T>,
-    options: Partial<PopoverOptions> = {},
-    serviceOptions: PopoverServiceOptions = {}
-  ): PopoverInstance {
-    this.clearTimer();
-    // Comprobamos si ya existe una instancia de Popover con el mismo ID
-    this.checkPopoverInstance(popoverId ?? '');
-    this.currentPopoverId = popoverId;
-
-    const referenceElement: unknown = reference instanceof ElementRef ? reference.nativeElement : reference; // Elemento de referencia
-    const popoverElement: HTMLElement = this.createPopoverElement(); // Elemento Popover
-
-    // Create a custom environment injector with the required providers
-    const providers = serviceOptions.providers || this.defaultMockProviders;
-    const customInjector = createEnvironmentInjector(providers, this.envInjector);
-
-    const componentReference: ComponentRef<T> = createComponent(component, {
-      environmentInjector: customInjector,
-      hostElement: popoverElement,
-    }); // Instancia del componente Popover
-    const finalOptions: Partial<ComputePositionConfig> = {
-      // Opciones de posicionamiento
-      placement: options.placement || this.popoverOptions.placement,
-      strategy: options.strategy || this.popoverOptions.strategy,
-      middleware: options.middleware ? this.setMiddlewares(options.middleware) : this.popoverOptions.middleware,
-    };
-
-    // Añadimos el Popover al DOM
-    this.document.body.append(popoverElement);
-
-    // Si tiene inputs, los asignamos al componente
-    if (inputs) {
-      for (const [key, value] of Object.entries(inputs)) {
-        componentReference.setInput(key, value);
-      }
-    }
-
-    // Encendemos el detectChanges del componente para que se renderice
-    componentReference.changeDetectorRef.detectChanges();
-
-    // Añadimos el componente al DOM
-    this.appReference.attachView(componentReference.hostView);
-
-    // Creamos la instancia del Popover
-    const instance: PopoverInstance = {
-      id: popoverId,
-      element: popoverElement,
-      reference: referenceElement as HTMLElement | Element | VirtualElement,
-      componentRef: componentReference as ComponentRef<unknown>,
-      update: async () => this.calculatePosition(instance, finalOptions),
-    };
-
-    const arrowElement = document.querySelector('#arrow')!;
-    finalOptions.middleware?.push(arrow({ element: arrowElement }));
-
-    // Calculamos la posicion del Popover
-    void this.calculatePosition(instance, finalOptions);
-
-    // Proporcionamos la función de autoUpdate en la propiedad cleanup del Popover ( se llama al destruir el Popover )
-    instance.cleanup = autoUpdate(referenceElement as HTMLElement, popoverElement, () => instance.update!());
-
-    // Añadimos la instancia del Popover al mapa de instancias
-    this.popoverInstances.set(popoverId, instance);
-
-    return instance;
-  }
-
-  /**
-   * Destruye un popover existente por su ID, eliminando su elemento del DOM y limpiando recursos.
-   *
-   * @param id  Identificador del popover a destruir.
-   */
-  public destroyPopover(id: string): void {
-    // Comprobamos si existe la instancia del Popover
-    const instance: PopoverInstance | undefined = this.popoverInstances.get(id);
-
-    if (!instance) {
-      return;
-    }
-
-    // Llamamos a la función de cleanup para eliminar el autoUpdate
-    instance.cleanup?.();
-
-    // Si hay comoponente, lo eliminamos del DOM
-    if (instance.componentRef) {
-      this.appReference.detachView(instance.componentRef.hostView);
-      instance.componentRef.destroy();
-    }
-
-    // Si hay elemento, lo eliminamos del DOM
-    if (instance.element && instance.element.parentNode) {
-      instance.element.remove();
-    }
-
-    // Eliminamos instancia del mapa
-    this.popoverInstances.delete(id);
-  }
-
-  /**
-   * Destruye todos los popovers existentes, eliminando sus elementos del DOM y limpiando recursos.
-   */
-  public destroyAllPopovers(): void {
-    for (const id of this.popoverInstances.keys()) {
-      this.destroyPopover(id);
-    }
-  }
-  /**
-   * Crea el elemento HTML base del popover, opcionalmente con contenido.
-   *
-   * @param content  Contenido a insertar en el popover (string, HTMLElement o ElementRef).
-   * @returns        Elemento HTML del popover.
-   */
-  private createPopoverElement(content?: string | HTMLElement | ElementRef): HTMLElement {
-    // Creamos el elemento Popover
-    const popoverElement: HTMLElement = this.document.createElement('div');
-
-    // Añadimos la clase Popover al elemento
-    popoverElement.classList.add('popover');
-
-    // Si se proporciona contenido, lo añadimos al Popover, si no, lo dejamos vacío
-    if (!content) {
-      return popoverElement;
-    }
-
-    if (typeof content === 'string') {
-      popoverElement.innerHTML = content;
-    } else {
-      const element = content instanceof ElementRef ? content.nativeElement : content;
-
-      popoverElement.append(element as HTMLElement);
-    }
-
-    return popoverElement;
-  }
-
-  /**
-   * Verifica si existe una instancia de popover con el ID dado y la destruye si es así.
-   *
-   * @param id  Identificador del popover a comprobar.
-   */
-  private checkPopoverInstance(id: string): void {
-    if (this.popoverInstances.has(id)) {
-      this.destroyPopover(id);
-    }
-  }
-
-  /**
-   * Calcula y aplica la posición del popover respecto a su elemento de referencia,
-   * usando las opciones de Floating UI.
-   *
-   * @param instance  Instancia del popover a posicionar.
-   * @param options   Opciones de configuración para el posicionamiento.
-   */
-  private async calculatePosition(
-    instance: PopoverInstance,
-    options: Partial<ComputePositionConfig> = {}
-  ): Promise<void> {
-    // Desestructuramos las opciones
-    const { placement, strategy, middleware } = options;
-
-    try {
-      // Calculamos la posicion del Popover en base a la referencia y el elemento Popover y las opciones proporcionadas
-      const { x, y } = await computePosition(instance.reference, instance.element, {
-        placement,
-        strategy,
-        middleware,
-      });
-
-      // Asignamos la posicion al elemento Popover
-      Object.assign(instance.element.style, {
-        position: strategy,
-        top: `${y}px`,
-        left: `${x}px`,
-      });
-    } catch (error) {
-      console.error('Error positioning popover', error);
-    }
-  }
-
-  /**
-   * Procesa la proyección de contenido para el componente popover.
-   *
-   * @param componentRef Referencia al componente creado
-   * @param contentProjection Contenido a proyectar en los slots
-   */
-  private processContentProjection<T>(
-    componentRef: ComponentRef<T>,
-    contentProjection: PopoverContentProjection
-  ): void {
-    const componentInstance = componentRef.instance as any;
-
-    // Procesamos cada slot de contenido
-    if (contentProjection.thumbnail) {
-      this.setContentProjection(componentInstance, 'hasThumbnailProjection', contentProjection.thumbnail);
-    }
-
-    if (contentProjection.content) {
-      this.setContentProjection(componentInstance, 'hasContentProjection', contentProjection.content);
-    }
-
-    if (contentProjection.price) {
-      this.setContentProjection(componentInstance, 'hasPriceProjection', contentProjection.price);
-    }
-  }
-
-  /**
-   * Establece la proyección de contenido para un slot específico.
-   *
-   * @param componentInstance Instancia del componente
-   * @param projectionFlag Flag que indica si hay proyección
-   * @param content Contenido a proyectar
-   */
-  private setContentProjection(
-    componentInstance: any,
-    projectionFlag: string,
-    content: TemplateRef<unknown> | string
-  ): void {
-    // Marcamos que hay proyección de contenido
-    componentInstance[projectionFlag] = true;
-
-    // Si es un TemplateRef, lo almacenamos para uso posterior
-    if (content instanceof TemplateRef) {
-      componentInstance[`${projectionFlag}Template`] = content;
-    } else if (typeof content === 'string') {
-      // Si es string, lo almacenamos como HTML
-      componentInstance[`${projectionFlag}Html`] = content;
-    }
-  }
-
-  /**
-   * Set Middlewares
-   * Método que recibe un objeto de opciones de middleware y devuelve un array de middlewares cargados con sus opciones.
-   *
-   * Para ello, necesitamos establecer un orden de aplicación de los middlewares, ya que la computación de la posición
-   * depende del estado de los middlewares aplicados anteriormente. Además, como son funciones, hacemos switch para
-   * cargar el middleware correspondiente en cada caso a excepción de detectOverflow, que es un middleware especial
-   * que no se aplica directamente, sino que se ejecuta como una función asíncrona sobre el estado devuelto de los middlewares (si los hay).
-   *
-   * @param middleware
-   * @returns {Middleware[]}
-   */
-  private setMiddlewares(middleware: MiddlewareOptions): Middleware[] {
-    // Array de Middlewares y orden de aplicación de los mismos
-    // https://floating-ui.com/docs/middleware#ordering
-
-    const middlewares: Middleware[] = [];
-    const order: (keyof MiddlewareOptions)[] = [
-      'offset',
-      'shift',
-      'flip',
-      'arrow',
-      'size',
-      'autoPlacement',
-      'inline',
-      'hide',
-      'detectOverflow',
-    ];
-
-    // Recorremos el array de orden y aplicamos los middlewares en el orden indicado
-    for (const key of order as (keyof MiddlewareOptions)[]) {
-      if (!middleware[key]) {
-        continue;
-      }
-
-      switch (key) {
-        case 'offset': {
-          middlewares.push(offset(middleware.offset));
-          break;
-        }
-
-        case 'shift': {
-          middlewares.push(shift(middleware.shift));
-          break;
-        }
-
-        case 'flip': {
-          middlewares.push(flip(middleware.flip));
-          break;
-        }
-
-        case 'arrow': {
-          middlewares.push(arrow(middleware.arrow!));
-          break;
-        }
-
-        case 'size': {
-          middlewares.push(size(middleware.size));
-          break;
-        }
-
-        case 'autoPlacement': {
-          middlewares.push(autoPlacement(middleware.autoPlacement));
-          break;
-        }
-
-        case 'hide': {
-          middlewares.push(hide(middleware.hide));
-          break;
-        }
-
-        case 'inline': {
-          middlewares.push(inline(middleware.inline));
-          break;
-        }
-
-        case 'detectOverflow': {
-          const overflowMiddleware: Middleware = {
-            name: 'detectOverflow',
-            async fn(state) {
-              await detectOverflow(state, middleware.detectOverflow);
-              return {};
-            },
-          };
-          middlewares.push(overflowMiddleware);
-          break;
-        }
-      }
-    }
-
-    return middlewares;
-  }
-}