@3ddv/software-division-components 1.5.0 → 2.0.0

package/dist/fesm2022/3ddv-software-division-components-dvm-popover.mjs

@@ -0,0 +1,1080 @@
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule, CurrencyPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ApplicationRef, EnvironmentInjector, ElementRef, createEnvironmentInjector, createComponent, TemplateRef, Injectable, EventEmitter, ChangeDetectorRef, Output, Input, ChangeDetectionStrategy, Component, input, output, Inject } from '@angular/core';
+import { of } from 'rxjs';
+import { autoUpdate, arrow, computePosition, detectOverflow, inline, hide, autoPlacement, size, flip, shift, offset } from '@floating-ui/dom';
+import { createPopper } from '@popperjs/core';
+
+const DVM_FORMATTER = new InjectionToken('DvmFormatter');
+const CONFIGURATION_SERVICE = new InjectionToken('ConfigurationService');
+const DVM_SERVICE = new InjectionToken('DvmService');
+const THUMBNAIL_PROVIDER = new InjectionToken('ThumbnailProvider');
+const POPOVER_POSITIONER = new InjectionToken('PopoverPositioner');
+const POPOVER_MANAGER = new InjectionToken('PopoverManager');
+
+class PopoverService {
+    // SERVICES
+    appReference = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    // POPOVER STATE
+    popoverInstances = new Map();
+    popoverOptions = {
+        placement: 'bottom',
+        strategy: 'absolute',
+        middleware: [],
+    };
+    popoverTimerTimeInMs = 300;
+    currentPopoverId = '';
+    popoverTimer = null;
+    popoverInstancesWithTimers = new Map();
+    // Default mock providers for when no custom providers are provided
+    defaultMockProviders = [
+        {
+            provide: CONFIGURATION_SERVICE,
+            useValue: {
+                configuration: {
+                    dvmData: {
+                        venueId: 'default-venue',
+                    },
+                },
+            },
+        },
+        {
+            provide: DVM_FORMATTER,
+            useValue: {
+                transform: (value) => value.replace(/-/g, ' ').toUpperCase(),
+            },
+        },
+        {
+            provide: DVM_SERVICE,
+            useValue: {
+                viewer3dService: {
+                    isInitialized: () => true,
+                    getThumbnail: () => of('https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Default+Thumbnail'),
+                },
+            },
+        },
+    ];
+    // METHODS
+    setTimer() {
+        const myId = this.currentPopoverId;
+        this.clearTimer();
+        this.popoverTimer = setTimeout(() => {
+            if (this.currentPopoverId !== myId) {
+                return;
+            }
+            this.destroyAllPopovers();
+            this.popoverTimer = null;
+        }, this.popoverTimerTimeInMs);
+    }
+    clearTimer() {
+        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)
+     */
+    setPopoverTimer(popoverId, delayMs) {
+        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
+     */
+    clearPopoverTimer(popoverId) {
+        if (this.popoverTimer !== null) {
+            clearTimeout(this.popoverTimer);
+            this.popoverTimer = null;
+        }
+    }
+    /**
+     * Configures the default timer delay for popovers.
+     * @param delayMs - Delay in milliseconds
+     */
+    setTimerDelay(delayMs) {
+        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.
+     */
+    createPopover(popoverId, reference, content, options = {}) {
+        this.clearTimer();
+        // Comprobamos si ya existe una instancia de Popover con el mismo ID
+        this.checkPopoverInstance(popoverId ?? '');
+        this.currentPopoverId = popoverId;
+        const id = popoverId ?? `popover-${Date.now()}`; // ID unico del popover, proporcionado o auto
+        const referenceElement = reference instanceof ElementRef ? reference.nativeElement : reference; // Elemento de referencia
+        const popoverElement = this.createPopoverElement(content); // Elemento Popover
+        const finalOptions = {
+            // 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 = {
+            id,
+            element: popoverElement,
+            reference: referenceElement,
+            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, 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.
+     */
+    createPopoverComponentWithContent(popoverId, reference, component, inputs, contentProjection, options = {}, serviceOptions = {}) {
+        this.clearTimer();
+        // Comprobamos si ya existe una instancia de Popover con el mismo ID
+        this.checkPopoverInstance(popoverId ?? '');
+        this.currentPopoverId = popoverId;
+        const referenceElement = reference instanceof ElementRef ? reference.nativeElement : reference;
+        const popoverElement = 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 = createComponent(component, {
+            environmentInjector: customInjector,
+            hostElement: popoverElement,
+        });
+        const finalOptions = {
+            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 = {
+            id: popoverId,
+            element: popoverElement,
+            reference: referenceElement,
+            componentRef: componentReference,
+            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, 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.
+     */
+    createPopoverComponent(popoverId, reference, component, inputs, options = {}, serviceOptions = {}) {
+        this.clearTimer();
+        // Comprobamos si ya existe una instancia de Popover con el mismo ID
+        this.checkPopoverInstance(popoverId ?? '');
+        this.currentPopoverId = popoverId;
+        const referenceElement = reference instanceof ElementRef ? reference.nativeElement : reference; // Elemento de referencia
+        const popoverElement = 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 = createComponent(component, {
+            environmentInjector: customInjector,
+            hostElement: popoverElement,
+        }); // Instancia del componente Popover
+        const finalOptions = {
+            // 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 = {
+            id: popoverId,
+            element: popoverElement,
+            reference: referenceElement,
+            componentRef: componentReference,
+            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, 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.
+     */
+    destroyPopover(id) {
+        // Comprobamos si existe la instancia del Popover
+        const instance = 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.
+     */
+    destroyAllPopovers() {
+        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.
+     */
+    createPopoverElement(content) {
+        // Creamos el elemento Popover
+        const popoverElement = 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);
+        }
+        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.
+     */
+    checkPopoverInstance(id) {
+        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.
+     */
+    async calculatePosition(instance, options = {}) {
+        // 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
+     */
+    processContentProjection(componentRef, contentProjection) {
+        const componentInstance = componentRef.instance;
+        // 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
+     */
+    setContentProjection(componentInstance, projectionFlag, content) {
+        // 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[]}
+     */
+    setMiddlewares(middleware) {
+        // Array de Middlewares y orden de aplicación de los mismos
+        // https://floating-ui.com/docs/middleware#ordering
+        const middlewares = [];
+        const order = [
+            '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) {
+            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 = {
+                        name: 'detectOverflow',
+                        async fn(state) {
+                            await detectOverflow(state, middleware.detectOverflow);
+                            return {};
+                        },
+                    };
+                    middlewares.push(overflowMiddleware);
+                    break;
+                }
+            }
+        }
+        return middlewares;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Base component for popovers that provides timer functionality.
+ * Extend this component to create timer-aware popovers.
+ */
+class BasePopoverComponent {
+    popoverId = '';
+    autoHideDelay = 300; // milliseconds
+    enableAutoHide = true;
+    mouseEnter = new EventEmitter();
+    mouseLeave = new EventEmitter();
+    popoverHidden = new EventEmitter();
+    popoverService = inject(PopoverService);
+    cdr = inject(ChangeDetectorRef);
+    isMouseOver = false;
+    ngOnInit() {
+        if (this.enableAutoHide && this.popoverId) {
+            this.startAutoHideTimer();
+        }
+    }
+    ngOnDestroy() {
+        if (this.popoverId) {
+            this.popoverService.clearPopoverTimer(this.popoverId);
+        }
+    }
+    onMouseEnter(event) {
+        this.isMouseOver = true;
+        this.clearAutoHideTimer();
+        this.mouseEnter.emit(event);
+    }
+    onMouseLeave(event) {
+        this.isMouseOver = false;
+        if (this.enableAutoHide) {
+            this.startAutoHideTimer();
+        }
+        this.mouseLeave.emit(event);
+    }
+    hidePopover() {
+        if (this.popoverId) {
+            this.popoverService.destroyPopover(this.popoverId);
+            this.popoverHidden.emit();
+        }
+    }
+    startAutoHideTimer() {
+        if (this.popoverId && !this.isMouseOver) {
+            this.popoverService.setPopoverTimer(this.popoverId, this.autoHideDelay);
+        }
+    }
+    clearAutoHideTimer() {
+        if (this.popoverId) {
+            this.popoverService.clearPopoverTimer(this.popoverId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BasePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: BasePopoverComponent, isStandalone: true, selector: "ng-component", inputs: { popoverId: "popoverId", autoHideDelay: "autoHideDelay", enableAutoHide: "enableAutoHide" }, outputs: { mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", popoverHidden: "popoverHidden" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BasePopoverComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '', // Abstract component
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { popoverId: [{
+                type: Input
+            }], autoHideDelay: [{
+                type: Input
+            }], enableAutoHide: [{
+                type: Input
+            }], mouseEnter: [{
+                type: Output
+            }], mouseLeave: [{
+                type: Output
+            }], popoverHidden: [{
+                type: Output
+            }] } });
+
+class SeatPopoverComponent extends BasePopoverComponent {
+    data;
+    showLoader = true;
+    thumbnailProvider = inject(THUMBNAIL_PROVIDER, { optional: true });
+    cdr = inject(ChangeDetectorRef);
+    thumbnail;
+    isLoadingThumbnail = true;
+    ngOnInit() {
+        super.ngOnInit(); // Initialize base component timer logic
+        if (this.data.thumbnail) {
+            this.thumbnail = this.data.thumbnail;
+            this.isLoadingThumbnail = false;
+        }
+        else if (this.thumbnailProvider && this.showLoader) {
+            this.loadThumbnail();
+        }
+    }
+    loadThumbnail() {
+        this.thumbnailProvider.getThumbnail(this.data.id).subscribe({
+            next: url => {
+                this.thumbnail = url;
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get formattedSection() {
+        return this.data.section.includes('_') ? this.data.section.split('_')[1].split('-')[0] : this.data.section;
+    }
+    get formattedSeat() {
+        return this.data.seat.split('-')[2] || this.data.seat;
+    }
+    onEnter(event) {
+        this.onMouseEnter(event);
+    }
+    onLeave(event) {
+        this.onMouseLeave(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SeatPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SeatPopoverComponent, isStandalone: true, selector: "sdc-seat-popover", inputs: { data: "data", showLoader: "showLoader" }, usesInheritance: true, ngImport: i0, template: "<div\n  (mouseenter)=\"onEnter($event)\"\n  (mouseleave)=\"onLeave($event)\"\n  class=\"sdc-seat-popover\">\n  <div class=\"sdc-popover-thumbnail\">\n    @if (isLoadingThumbnail && showLoader) {\n      <div class=\"sdc-popover-loader\">\n        <div class=\"sdc-spinner\"></div>\n      </div>\n    }\n    @if (thumbnail && !isLoadingThumbnail) {\n      <div class=\"sdc-thumbnail-image\" [style.background-image]=\"'url(' + thumbnail + ')'\"></div>\n    }\n  </div>\n\n  <div class=\"sdc-popover-content\">\n    <div class=\"sdc-popover-grid\">\n      <div class=\"sdc-popover-col-left\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Section:</span>\n          {{ formattedSection }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Row:</span>\n          {{ data.row }}\n        </h5>\n      </div>\n      <div class=\"sdc-popover-col-right\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Seat:</span>\n          {{ formattedSeat }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Price:</span>\n          {{ data.price | currency: 'USD' }}\n        </h5>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.sdc-seat-popover{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-popover-loader{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner{display:inline-block;width:80px;height:80px}.sdc-spinner:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:sdc-spinner-rotate 1.2s linear infinite}@keyframes sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content{padding:.75rem}.sdc-popover-grid{display:flex;gap:1.25rem}.sdc-popover-col-left{flex:1}.sdc-popover-col-right{flex:1;text-align:right;min-width:max-content}.sdc-popover-label{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text{font-weight:var(--sdc-popover-label-text-font-weight, 400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SeatPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sdc-seat-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, CurrencyPipe], template: "<div\n  (mouseenter)=\"onEnter($event)\"\n  (mouseleave)=\"onLeave($event)\"\n  class=\"sdc-seat-popover\">\n  <div class=\"sdc-popover-thumbnail\">\n    @if (isLoadingThumbnail && showLoader) {\n      <div class=\"sdc-popover-loader\">\n        <div class=\"sdc-spinner\"></div>\n      </div>\n    }\n    @if (thumbnail && !isLoadingThumbnail) {\n      <div class=\"sdc-thumbnail-image\" [style.background-image]=\"'url(' + thumbnail + ')'\"></div>\n    }\n  </div>\n\n  <div class=\"sdc-popover-content\">\n    <div class=\"sdc-popover-grid\">\n      <div class=\"sdc-popover-col-left\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Section:</span>\n          {{ formattedSection }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Row:</span>\n          {{ data.row }}\n        </h5>\n      </div>\n      <div class=\"sdc-popover-col-right\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Seat:</span>\n          {{ formattedSeat }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Price:</span>\n          {{ data.price | currency: 'USD' }}\n        </h5>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.sdc-seat-popover{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-popover-loader{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner{display:inline-block;width:80px;height:80px}.sdc-spinner:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:sdc-spinner-rotate 1.2s linear infinite}@keyframes sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content{padding:.75rem}.sdc-popover-grid{display:flex;gap:1.25rem}.sdc-popover-col-left{flex:1}.sdc-popover-col-right{flex:1;text-align:right;min-width:max-content}.sdc-popover-label{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text{font-weight:var(--sdc-popover-label-text-font-weight, 400)}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], showLoader: [{
+                type: Input
+            }] } });
+
+class SectionPopoverComponent extends BasePopoverComponent {
+    data;
+    showLoader = true;
+    showBestAvailable = false;
+    showOpenSeatMap = true;
+    excludeSeatMapSections = ['S_BLCHADA', 'S_Bleacher'];
+    isTicketFeeEnabled = false;
+    load3dView = new EventEmitter();
+    selectForBA = new EventEmitter();
+    openSeatMap = new EventEmitter();
+    thumbnailProvider = inject(THUMBNAIL_PROVIDER, { optional: true });
+    cdr = inject(ChangeDetectorRef);
+    thumbnail;
+    isLoadingThumbnail = true;
+    ngOnInit() {
+        super.ngOnInit(); // Initialize base component timer logic
+        if (this.data.thumbnail) {
+            this.thumbnail = this.data.thumbnail;
+            this.isLoadingThumbnail = false;
+        }
+        else if (this.thumbnailProvider && this.showLoader) {
+            this.loadThumbnail();
+        }
+    }
+    loadThumbnail() {
+        this.thumbnailProvider.getThumbnail(this.data.id).subscribe({
+            next: url => {
+                this.thumbnail = url;
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get priceRangeDisplay() {
+        const { min, max } = this.data.priceRange;
+        return min === max ? min.toString() : `${min} - ${max}`;
+    }
+    get priceRangeWithFees() {
+        if (this.isTicketFeeEnabled && this.data.priceRangeWithFees) {
+            return this.data.priceRangeWithFees;
+        }
+        return undefined;
+    }
+    get shouldShowSeatMapButton() {
+        return (this.showOpenSeatMap &&
+            !this.excludeSeatMapSections.includes(this.data.section) &&
+            this.data.type !== 'general_admission');
+    }
+    onEnter(event) {
+        this.onMouseEnter(event);
+    }
+    onLeave(event) {
+        this.onMouseLeave(event);
+    }
+    onLoad3dView() {
+        this.load3dView.emit();
+    }
+    onSelectForBA() {
+        this.selectForBA.emit(!this.data.isSelectedForBA);
+    }
+    onOpenSeatMap() {
+        this.openSeatMap.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SectionPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SectionPopoverComponent, isStandalone: true, selector: "sdc-section-popover", inputs: { data: "data", showLoader: "showLoader", showBestAvailable: "showBestAvailable", showOpenSeatMap: "showOpenSeatMap", excludeSeatMapSections: "excludeSeatMapSections", isTicketFeeEnabled: "isTicketFeeEnabled" }, outputs: { load3dView: "load3dView", selectForBA: "selectForBA", openSeatMap: "openSeatMap" }, usesInheritance: true, ngImport: i0, template: "<div (mouseenter)=\"onEnter($event)\" (mouseleave)=\"onLeave($event)\" class=\"sdc-section-popover\">\n  <div class=\"sdc-popover-thumbnail\">\n    @if (isLoadingThumbnail && showLoader) {\n      <div class=\"sdc-popover-loader\">\n        <div class=\"sdc-spinner\"></div>\n      </div>\n    }\n    @if (thumbnail && !isLoadingThumbnail) {\n      <div\n        class=\"sdc-thumbnail-image sdc-thumbnail-clickable\"\n        [style.background-image]=\"'url(' + thumbnail + ')'\"\n        (click)=\"onLoad3dView()\">\n        <span class=\"sdc-thumbnail-overlay-text\">Click to open view</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"sdc-popover-content\">\n    <div class=\"sdc-popover-grid\">\n      <div class=\"sdc-popover-col-left\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Section:</span>\n          {{ data.section }}\n        </h5>\n        @if (isTicketFeeEnabled && priceRangeWithFees) {\n          <h5 class=\"sdc-popover-label\">\n            <span class=\"sdc-popover-label-text\">Price:</span> $ {{ priceRangeWithFees }}\n          </h5>\n        } @else {\n          <h5 class=\"sdc-popover-label\">\n            <span class=\"sdc-popover-label-text\">Price:</span> $ {{ priceRangeDisplay }}\n          </h5>\n        }\n      </div>\n      <div class=\"sdc-popover-col-right\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Available Seats:</span>\n          {{ data.availableQuantity }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Available ADA Seats:</span>\n          {{ data.adaQuantity }}\n        </h5>\n      </div>\n    </div>\n\n    <div class=\"sdc-popover-actions\">\n      @if (showBestAvailable) {\n        <button class=\"sdc-popover-btn sdc-popover-btn-primary sdc-popover-btn-mobile-only\" (click)=\"onSelectForBA()\">\n          {{ data.isSelectedForBA ? 'Deselect' : 'Select' }}\n        </button>\n      }\n      @if (shouldShowSeatMapButton) {\n        <button class=\"sdc-popover-btn sdc-popover-btn-secondary\" (click)=\"onOpenSeatMap()\">Open Seat Map</button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.sdc-section-popover{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-thumbnail-clickable{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px}.sdc-thumbnail-overlay-text{font-size:var(--sdc-thumbnail-overlay-font-size, 12px);color:var(--sdc-thumbnail-overlay-color, #ffffff);background-color:var(--sdc-thumbnail-overlay-bg, rgba(0, 0, 0, .5));padding:4px 8px;border-radius:4px}.sdc-popover-loader{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner{display:inline-block;width:80px;height:80px}.sdc-spinner:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 24px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:sdc-spinner-rotate 1.2s linear infinite}@keyframes sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content{padding:.75rem}.sdc-popover-grid{display:flex;gap:1.25rem}.sdc-popover-col-left{flex:1}.sdc-popover-col-right{flex:1;text-align:right;min-width:max-content}.sdc-popover-label{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text{font-weight:var(--sdc-popover-label-text-font-weight, 400)}.sdc-popover-actions{padding:.5rem 0;display:flex;justify-content:center;gap:.5rem}.sdc-popover-btn{border:none;border-radius:var(--sdc-btn-border-radius, 4px);padding:.5rem 1rem;height:var(--sdc-btn-height, 2.25rem);font-size:var(--sdc-btn-font-size, .75rem);cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1)}.sdc-popover-btn:hover:not(:disabled){transform:scale(.95)}.sdc-popover-btn:disabled{opacity:.3;cursor:not-allowed}.sdc-popover-btn-primary{background-color:var(--sdc-btn-primary-bg, #007bff);color:var(--sdc-btn-primary-color, white);margin-right:.5rem}.sdc-popover-btn-secondary{background-color:var(--sdc-btn-secondary-bg, white);color:var(--sdc-btn-secondary-color, #007bff);border:1px solid var(--sdc-btn-secondary-border, #007bff)}.sdc-popover-btn-secondary:hover:not(:disabled){color:var(--sdc-btn-secondary-hover-color, #0056b3)}.sdc-popover-btn-mobile-only{display:block}@media(min-width:768px){.sdc-popover-btn-mobile-only{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SectionPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sdc-section-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div (mouseenter)=\"onEnter($event)\" (mouseleave)=\"onLeave($event)\" class=\"sdc-section-popover\">\n  <div class=\"sdc-popover-thumbnail\">\n    @if (isLoadingThumbnail && showLoader) {\n      <div class=\"sdc-popover-loader\">\n        <div class=\"sdc-spinner\"></div>\n      </div>\n    }\n    @if (thumbnail && !isLoadingThumbnail) {\n      <div\n        class=\"sdc-thumbnail-image sdc-thumbnail-clickable\"\n        [style.background-image]=\"'url(' + thumbnail + ')'\"\n        (click)=\"onLoad3dView()\">\n        <span class=\"sdc-thumbnail-overlay-text\">Click to open view</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"sdc-popover-content\">\n    <div class=\"sdc-popover-grid\">\n      <div class=\"sdc-popover-col-left\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Section:</span>\n          {{ data.section }}\n        </h5>\n        @if (isTicketFeeEnabled && priceRangeWithFees) {\n          <h5 class=\"sdc-popover-label\">\n            <span class=\"sdc-popover-label-text\">Price:</span> $ {{ priceRangeWithFees }}\n          </h5>\n        } @else {\n          <h5 class=\"sdc-popover-label\">\n            <span class=\"sdc-popover-label-text\">Price:</span> $ {{ priceRangeDisplay }}\n          </h5>\n        }\n      </div>\n      <div class=\"sdc-popover-col-right\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Available Seats:</span>\n          {{ data.availableQuantity }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Available ADA Seats:</span>\n          {{ data.adaQuantity }}\n        </h5>\n      </div>\n    </div>\n\n    <div class=\"sdc-popover-actions\">\n      @if (showBestAvailable) {\n        <button class=\"sdc-popover-btn sdc-popover-btn-primary sdc-popover-btn-mobile-only\" (click)=\"onSelectForBA()\">\n          {{ data.isSelectedForBA ? 'Deselect' : 'Select' }}\n        </button>\n      }\n      @if (shouldShowSeatMapButton) {\n        <button class=\"sdc-popover-btn sdc-popover-btn-secondary\" (click)=\"onOpenSeatMap()\">Open Seat Map</button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.sdc-section-popover{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-thumbnail-clickable{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px}.sdc-thumbnail-overlay-text{font-size:var(--sdc-thumbnail-overlay-font-size, 12px);color:var(--sdc-thumbnail-overlay-color, #ffffff);background-color:var(--sdc-thumbnail-overlay-bg, rgba(0, 0, 0, .5));padding:4px 8px;border-radius:4px}.sdc-popover-loader{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner{display:inline-block;width:80px;height:80px}.sdc-spinner:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 24px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:sdc-spinner-rotate 1.2s linear infinite}@keyframes sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content{padding:.75rem}.sdc-popover-grid{display:flex;gap:1.25rem}.sdc-popover-col-left{flex:1}.sdc-popover-col-right{flex:1;text-align:right;min-width:max-content}.sdc-popover-label{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text{font-weight:var(--sdc-popover-label-text-font-weight, 400)}.sdc-popover-actions{padding:.5rem 0;display:flex;justify-content:center;gap:.5rem}.sdc-popover-btn{border:none;border-radius:var(--sdc-btn-border-radius, 4px);padding:.5rem 1rem;height:var(--sdc-btn-height, 2.25rem);font-size:var(--sdc-btn-font-size, .75rem);cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1)}.sdc-popover-btn:hover:not(:disabled){transform:scale(.95)}.sdc-popover-btn:disabled{opacity:.3;cursor:not-allowed}.sdc-popover-btn-primary{background-color:var(--sdc-btn-primary-bg, #007bff);color:var(--sdc-btn-primary-color, white);margin-right:.5rem}.sdc-popover-btn-secondary{background-color:var(--sdc-btn-secondary-bg, white);color:var(--sdc-btn-secondary-color, #007bff);border:1px solid var(--sdc-btn-secondary-border, #007bff)}.sdc-popover-btn-secondary:hover:not(:disabled){color:var(--sdc-btn-secondary-hover-color, #0056b3)}.sdc-popover-btn-mobile-only{display:block}@media(min-width:768px){.sdc-popover-btn-mobile-only{display:none}}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], showLoader: [{
+                type: Input
+            }], showBestAvailable: [{
+                type: Input
+            }], showOpenSeatMap: [{
+                type: Input
+            }], excludeSeatMapSections: [{
+                type: Input
+            }], isTicketFeeEnabled: [{
+                type: Input
+            }], load3dView: [{
+                type: Output
+            }], selectForBA: [{
+                type: Output
+            }], openSeatMap: [{
+                type: Output
+            }] } });
+
+var AppNodes;
+(function (AppNodes) {
+    AppNodes["Section"] = "section";
+    AppNodes["Row"] = "row";
+    AppNodes["Seat"] = "seat";
+    AppNodes["Ga"] = "general_admission";
+    AppNodes["Vip"] = "vip";
+})(AppNodes || (AppNodes = {}));
+
+class PopoverComponent {
+    // INPUTS
+    /**
+     * The node to attach the popover to.
+     */
+    node;
+    /**
+     * The current theme applied to the component.
+     */
+    theme = input('theme-sdc', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    // OUTPUTS
+    /**
+     * Emitted when the 3D view should be loaded.
+     */
+    load3dView = output();
+    /**
+     * Emitted when a section should be selected/deselected for best available.
+     */
+    selectSectionForBA = output();
+    /**
+     * Emitted when the seat map should be opened.
+     */
+    openSeatMap = output();
+    // SERVICES
+    dvm = inject(DVM_SERVICE);
+    cdr = inject(ChangeDetectorRef);
+    format = inject(DVM_FORMATTER);
+    configurationService = inject(CONFIGURATION_SERVICE);
+    popoverService = inject(PopoverService);
+    // COMPONENT STATE
+    Nodes = AppNodes;
+    thumbnail;
+    section;
+    row;
+    seat;
+    prices;
+    // Section popover specific properties
+    availableQuantity = 0;
+    adaQuantity = 0;
+    includedSectionForBA = false;
+    // Transformed data for new components
+    get seatData() {
+        if (this.node?.type === AppNodes.Seat) {
+            return this.transformToSeatData();
+        }
+        return null;
+    }
+    get sectionData() {
+        if (this.node?.type === AppNodes.Section || this.node?.type === AppNodes.Ga) {
+            return this.transformToSectionData();
+        }
+        return null;
+    }
+    // LC METHODS
+    ngOnInit() {
+        this.initComponent();
+    }
+    onEnter(_) {
+        this.popoverService.clearTimer();
+    }
+    onLeave(_) {
+        this.popoverService.setTimer();
+    }
+    // GETTERS
+    get price() {
+        return this.prices // Existen precios?
+            ? this.prices.length > 1 // Existen precios, pero más de uno?
+                ? Math.min(...this.prices.map(price => Number.parseInt(price))).toString()
+                : this.prices[0] // Si lo hay, sacamos el minimo, si no seteamos el primero ( y unico xd )
+            : undefined; // No existen precios
+    }
+    get priceRange() {
+        if (!this.prices || this.prices.length === 0) {
+            return '';
+        }
+        let priceRange = this.prices[0];
+        if (this.prices.length > 1 && this.prices[0] !== this.prices[1]) {
+            priceRange = `${this.prices[0]} - ${this.prices[1]}`;
+        }
+        return priceRange;
+    }
+    // METHODS
+    initComponent() {
+        this.setTexts();
+        this.getThumbnail();
+        // this.getPrice();
+    }
+    setTexts() {
+        const nodeId = this.format.transform(this.node?.id).split(' ');
+        // const translated = this.translationData()[this.node().id.split('-')[0]];
+        this.section = nodeId[0];
+        this.row = nodeId[1] ?? null;
+        this.seat = nodeId[2] ?? null;
+    }
+    getThumbnail() {
+        const viewer3dService = this.dvm.viewer3dService;
+        const options = {
+            // eslint-disable-next-line camelcase
+            venue_id: this.configurationService.configuration.dvmData.venueId,
+            // eslint-disable-next-line camelcase
+            view_id: this.node?.id,
+        };
+        if (!viewer3dService?.isInitialized()) {
+            return;
+        }
+        viewer3dService.getThumbnail(options, true).subscribe((thumbnailUrl) => {
+            this.thumbnail = thumbnailUrl;
+            this.cdr.markForCheck();
+        });
+    }
+    // Section popover methods
+    onLoad3dView() {
+        this.load3dView.emit({
+            node: this.node,
+            section: this.section,
+        });
+    }
+    onSelectSectionForBA(selected) {
+        this.includedSectionForBA = selected;
+        this.selectSectionForBA.emit({
+            node: this.node,
+            section: this.section,
+            selected: this.includedSectionForBA,
+        });
+    }
+    onOpenSeatMap() {
+        this.openSeatMap.emit({
+            node: this.node,
+            section: this.section,
+        });
+    }
+    // Data transformation methods
+    transformToSeatData() {
+        const nodeId = this.format.transform(this.node?.id).split(' ');
+        const section = nodeId[0];
+        const row = nodeId[1] ?? '';
+        const seat = nodeId[2] ?? '';
+        return {
+            id: this.node.id,
+            section: section,
+            row: row,
+            seat: seat,
+            price: this.price ? Number.parseFloat(this.price) : 0,
+            thumbnail: this.thumbnail,
+        };
+    }
+    transformToSectionData() {
+        const nodeId = this.format.transform(this.node?.id).split(' ');
+        const section = nodeId[0];
+        // Parse price range from existing prices array
+        let priceRange = { min: 0, max: 0 };
+        if (this.prices && this.prices.length > 0) {
+            const minPrice = Number.parseFloat(this.prices[0]);
+            const maxPrice = this.prices.length > 1 ? Number.parseFloat(this.prices[1]) : minPrice;
+            priceRange = { min: minPrice, max: maxPrice };
+        }
+        return {
+            id: this.node.id,
+            section: section,
+            priceRange: priceRange,
+            availableQuantity: this.availableQuantity,
+            adaQuantity: this.adaQuantity,
+            thumbnail: this.thumbnail,
+            type: this.node.type === AppNodes.Ga ? 'general_admission' : 'section',
+            isSelectedForBA: this.includedSectionForBA,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PopoverComponent, isStandalone: true, selector: "sdc-map-popover", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { load3dView: "load3dView", selectSectionForBA: "selectSectionForBA", openSeatMap: "openSeatMap" }, ngImport: i0, template: "<!-- SECTION POPOVER -->\n@if (sectionData) {\n  <sdc-section-popover\n    [data]=\"sectionData\"\n    id=\"pano-view\"\n    [popoverId]=\"'popover-' + node.id\"\n    [showBestAvailable]=\"true\"\n    [showOpenSeatMap]=\"true\"\n    [excludeSeatMapSections]=\"['S_BLCHADA', 'S_Bleacher']\"\n    (mouseEnter)=\"onEnter($event)\"\n    (mouseLeave)=\"onLeave($event)\"\n    (load3dView)=\"onLoad3dView()\"\n    (selectForBA)=\"onSelectSectionForBA($event)\"\n    (openSeatMap)=\"onOpenSeatMap()\">\n  </sdc-section-popover>\n}\n\n<!-- SEAT POPOVER -->\n@if (seatData) {\n  <sdc-seat-popover\n    id=\"pano-view\"\n    [data]=\"seatData\"\n    [popoverId]=\"'popover-' + node.id\"\n    (mouseEnter)=\"onEnter($event)\"\n    (mouseLeave)=\"onLeave($event)\">\n  </sdc-seat-popover>\n}\n", styles: [".lds-dual-ring{display:inline-block;width:80px;height:80px}.lds-dual-ring:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid #fff;border-color:#fff transparent #fff transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h5{margin:.25rem 0;font-size:.875rem;line-height:1.25rem}.font-normal{font-weight:400}.w-80{width:20rem}.h-48{height:12rem}.h-auto{height:auto}.text-white{color:#fff}.bg-black{background-color:#000}.rounded-xl{border-radius:.75rem}.overflow-hidden{overflow:hidden}.w-full{width:100%}.h-full{height:100%}.bg-center{background-position:center}.bg-cover{background-size:cover}.bg-no-repeat{background-repeat:no-repeat}.flex{display:flex}.justify-center{justify-content:center}.items-center{align-items:center}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.w-1\\/2{width:50%}.mr-5{margin-right:1.25rem}.min-w-max{min-width:max-content}.text-right{text-align:right}.viewer3d-image{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px;font-size:12px}.btn-main{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white{background-color:#fff;color:#007bff;border:1px solid #007bff;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white:hover{color:#0056b3}.tooltip-img{background-position:center;background-size:cover;background-repeat:no-repeat}.block{display:block}.md\\\\:hidden{display:none}@media(min-width:768px){.md\\\\:hidden{display:none}}.text-main{color:#007bff}.text-main-accent{color:#0056b3}.mr-2{margin-right:.5rem}.h-9{height:2.25rem}.text-xs{font-size:.75rem;line-height:1rem}.disabled\\\\:opacity-30:disabled{opacity:.3}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\\\:scale-95:hover{transform:scale(.95)}.disabled\\\\:hover\\\\:transform-none:disabled:hover{transform:none}.hover\\\\:text-main-accent:hover{color:#0056b3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SeatPopoverComponent, selector: "sdc-seat-popover", inputs: ["data", "showLoader"] }, { kind: "component", type: SectionPopoverComponent, selector: "sdc-section-popover", inputs: ["data", "showLoader", "showBestAvailable", "showOpenSeatMap", "excludeSeatMapSections", "isTicketFeeEnabled"], outputs: ["load3dView", "selectForBA", "openSeatMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sdc-map-popover', standalone: true, imports: [CommonModule, SeatPopoverComponent, SectionPopoverComponent], template: "<!-- SECTION POPOVER -->\n@if (sectionData) {\n  <sdc-section-popover\n    [data]=\"sectionData\"\n    id=\"pano-view\"\n    [popoverId]=\"'popover-' + node.id\"\n    [showBestAvailable]=\"true\"\n    [showOpenSeatMap]=\"true\"\n    [excludeSeatMapSections]=\"['S_BLCHADA', 'S_Bleacher']\"\n    (mouseEnter)=\"onEnter($event)\"\n    (mouseLeave)=\"onLeave($event)\"\n    (load3dView)=\"onLoad3dView()\"\n    (selectForBA)=\"onSelectSectionForBA($event)\"\n    (openSeatMap)=\"onOpenSeatMap()\">\n  </sdc-section-popover>\n}\n\n<!-- SEAT POPOVER -->\n@if (seatData) {\n  <sdc-seat-popover\n    id=\"pano-view\"\n    [data]=\"seatData\"\n    [popoverId]=\"'popover-' + node.id\"\n    (mouseEnter)=\"onEnter($event)\"\n    (mouseLeave)=\"onLeave($event)\">\n  </sdc-seat-popover>\n}\n", styles: [".lds-dual-ring{display:inline-block;width:80px;height:80px}.lds-dual-ring:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid #fff;border-color:#fff transparent #fff transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h5{margin:.25rem 0;font-size:.875rem;line-height:1.25rem}.font-normal{font-weight:400}.w-80{width:20rem}.h-48{height:12rem}.h-auto{height:auto}.text-white{color:#fff}.bg-black{background-color:#000}.rounded-xl{border-radius:.75rem}.overflow-hidden{overflow:hidden}.w-full{width:100%}.h-full{height:100%}.bg-center{background-position:center}.bg-cover{background-size:cover}.bg-no-repeat{background-repeat:no-repeat}.flex{display:flex}.justify-center{justify-content:center}.items-center{align-items:center}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.w-1\\/2{width:50%}.mr-5{margin-right:1.25rem}.min-w-max{min-width:max-content}.text-right{text-align:right}.viewer3d-image{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px;font-size:12px}.btn-main{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white{background-color:#fff;color:#007bff;border:1px solid #007bff;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white:hover{color:#0056b3}.tooltip-img{background-position:center;background-size:cover;background-repeat:no-repeat}.block{display:block}.md\\\\:hidden{display:none}@media(min-width:768px){.md\\\\:hidden{display:none}}.text-main{color:#007bff}.text-main-accent{color:#0056b3}.mr-2{margin-right:.5rem}.h-9{height:2.25rem}.text-xs{font-size:.75rem;line-height:1rem}.disabled\\\\:opacity-30:disabled{opacity:.3}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\\\:scale-95:hover{transform:scale(.95)}.disabled\\\\:hover\\\\:transform-none:disabled:hover{transform:none}.hover\\\\:text-main-accent:hover{color:#0056b3}\n"] }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], load3dView: [{ type: i0.Output, args: ["load3dView"] }], selectSectionForBA: [{ type: i0.Output, args: ["selectSectionForBA"] }], openSeatMap: [{ type: i0.Output, args: ["openSeatMap"] }] } });
+
+/**
+ * Generic popover manager service that handles popover lifecycle and positioning.
+ * This service is DVM-agnostic and delegates positioning logic to IPopoverPositioner.
+ */
+class PopoverManagerService {
+    currentPopoverId = '';
+    tooltip;
+    positioner;
+    constructor(positioner) {
+        this.positioner = positioner;
+    }
+    /**
+     * Shows a popover with the specified configuration.
+     * @param config - Configuration for the popover including component, data, and positioning
+     */
+    showPopover(config) {
+        config.container.clear();
+        this.currentPopoverId = config.nodeId;
+        this.tooltip = config.tooltip;
+        const componentRef = config.container.createComponent(config.component);
+        if (config.componentInputs) {
+            Object.entries(config.componentInputs).forEach(([key, value]) => {
+                componentRef.instance[key] = value;
+            });
+        }
+        if (config.eventHandlers) {
+            Object.entries(config.eventHandlers).forEach(([key, handler]) => {
+                const instance = componentRef.instance;
+                if (instance[key] && typeof instance[key].subscribe === 'function') {
+                    instance[key].subscribe(handler);
+                }
+            });
+        }
+        const placement = this.positioner.calculatePlacement(config.node, config.containerElement);
+        const offset = this.positioner.calculateOffset(config.node);
+        createPopper(config.node, this.tooltip, {
+            placement,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset,
+                    },
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: [],
+                    },
+                },
+            ],
+        });
+        this.tooltip.setAttribute('data-show', '');
+    }
+    /**
+     * Hides the popover for the specified node ID.
+     * @param nodeId - The node ID of the popover to hide
+     */
+    hidePopover(nodeId) {
+        if (this.currentPopoverId === nodeId) {
+            this.tooltip?.removeAttribute('data-show');
+        }
+    }
+    /**
+     * Clears all popovers.
+     */
+    clearAll() {
+        this.tooltip?.removeAttribute('data-show');
+        this.currentPopoverId = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverManagerService, deps: [{ token: POPOVER_POSITIONER }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverManagerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverManagerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [POPOVER_POSITIONER]
+                }] }] });
+
+/**
+ * DVM-specific positioning service for popovers.
+ * Handles calculation of popover placement and offset based on DVM node properties.
+ */
+class DvmPopoverPositionerService {
+    dvmService;
+    configService;
+    constructor(dvmService, configService) {
+        this.dvmService = dvmService;
+        this.configService = configService;
+    }
+    /**
+     * Calculates the optimal placement for a popover based on node position.
+     * @param node - The MapViewerNode to position relative to
+     * @param container - The container element for positioning reference
+     * @returns The calculated placement ('top' or 'bottom')
+     */
+    calculatePlacement(node, container) {
+        if (!node.aabb) {
+            throw new Error('Node AABB is not defined');
+        }
+        const nodeSceneCenter = [
+            node.aabb[0] + node.aabb[2] / 2,
+            node.aabb[1] + node.aabb[3] / 2,
+        ];
+        const nodeDomCenter = this.dvmService.viewerService.fromSceneToDom(nodeSceneCenter);
+        if (nodeDomCenter[1] > container.offsetHeight / 2) {
+            return 'top';
+        }
+        else {
+            return 'bottom';
+        }
+    }
+    /**
+     * Calculates the offset for popover positioning based on node type and configuration.
+     * @param node - The MapViewerNode to calculate offset for
+     * @returns An array of [x, y] offset values
+     */
+    calculateOffset(node) {
+        if (node.type === 'seat') {
+            return [0, 6];
+        }
+        if (node.type === 'section' || node.type === 'general_admission') {
+            const dvmData = this.configService.configuration.dvmData;
+            const sectionOffsets = dvmData?.sectionOffsets || {};
+            const nodeId = node.id;
+            const nodeOriginalId = node.original_id;
+            const dvmOffset = sectionOffsets[nodeId] ?? sectionOffsets[nodeOriginalId];
+            return dvmOffset ?? [0, 0];
+        }
+        return [0, 0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DvmPopoverPositionerService, deps: [{ token: DVM_SERVICE }, { token: CONFIGURATION_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DvmPopoverPositionerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DvmPopoverPositionerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DVM_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CONFIGURATION_SERVICE]
+                }] }] });
+
+/**
+ * Abstract base class for transforming data from source format to target popover format.
+ * Apps can extend this class to implement their own data transformation logic.
+ */
+class BasePopoverDataTransformer {
+}
+/**
+ * Abstract base class for transforming seat data to SeatPopoverData format.
+ * Apps should extend this class and implement the transform method with their
+ * specific seat data models.
+ */
+class BaseSeatDataTransformer extends BasePopoverDataTransformer {
+}
+/**
+ * Abstract base class for transforming section data to SectionPopoverData format.
+ * Apps should extend this class and implement the transform method with their
+ * specific section data models.
+ */
+class BaseSectionDataTransformer extends BasePopoverDataTransformer {
+}
+
+/*
+ * Public API Surface of software-division-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BasePopoverComponent, BasePopoverDataTransformer, BaseSeatDataTransformer, BaseSectionDataTransformer, CONFIGURATION_SERVICE, DVM_FORMATTER, DVM_SERVICE, DvmPopoverPositionerService, POPOVER_MANAGER, POPOVER_POSITIONER, PopoverComponent, PopoverManagerService, PopoverService, SeatPopoverComponent, SectionPopoverComponent, THUMBNAIL_PROVIDER };
+//# sourceMappingURL=3ddv-software-division-components-dvm-popover.mjs.map