@3ddv/software-division-components 1.4.1 → 1.4.3

package/src/dvm/popover/public-api.ts

@@ -0,0 +1,14 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './popover.component';
+export * from './popover.config';
+export * from './popover.service';
+export type * from './types';
+export * from './base-popover.component';
+export * from './seat-popover/seat-popover.component';
+export * from './section-popover/section-popover.component';
+export * from './services/popover-manager.service';
+export * from './services/dvm-popover-positioner.service';
+export * from './transformers/base-popover-data-transformer';

package/src/dvm/popover/seat-popover/seat-popover.component.css

@@ -0,0 +1,89 @@
+: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, 0.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: 8px;
+  margin-top: 16px;
+  margin-left: 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(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.sdc-popover-content {
+  padding: 0.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: 0.25rem 0;
+  font-size: var(--sdc-popover-label-font-size, 0.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);
+}

package/src/dvm/popover/seat-popover/seat-popover.component.html

@@ -0,0 +1,40 @@
+<div
+  (mouseenter)="onEnter($event)"
+  (mouseleave)="onLeave($event)"
+  class="sdc-seat-popover">
+  <div class="sdc-popover-thumbnail">
+    @if (isLoadingThumbnail && showLoader) {
+      <div class="sdc-popover-loader">
+        <div class="sdc-spinner"></div>
+      </div>
+    }
+    @if (thumbnail && !isLoadingThumbnail) {
+      <div class="sdc-thumbnail-image" [style.background-image]="'url(' + thumbnail + ')'"></div>
+    }
+  </div>
+
+  <div class="sdc-popover-content">
+    <div class="sdc-popover-grid">
+      <div class="sdc-popover-col-left">
+        <h5 class="sdc-popover-label">
+          <span class="sdc-popover-label-text">Section:</span>
+          {{ formattedSection }}
+        </h5>
+        <h5 class="sdc-popover-label">
+          <span class="sdc-popover-label-text">Row:</span>
+          {{ data.row }}
+        </h5>
+      </div>
+      <div class="sdc-popover-col-right">
+        <h5 class="sdc-popover-label">
+          <span class="sdc-popover-label-text">Seat:</span>
+          {{ formattedSeat }}
+        </h5>
+        <h5 class="sdc-popover-label">
+          <span class="sdc-popover-label-text">Price:</span>
+          {{ data.price | currency: 'USD' }}
+        </h5>
+      </div>
+    </div>
+  </div>
+</div>

package/src/dvm/popover/seat-popover/seat-popover.component.ts

@@ -0,0 +1,74 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { CommonModule, CurrencyPipe } from '@angular/common';
+import { type SeatPopoverData } from '../types';
+import { THUMBNAIL_PROVIDER } from '../popover.config';
+import { BasePopoverComponent } from '../base-popover.component';
+
+@Component({
+  selector: 'sdc-seat-popover',
+  templateUrl: './seat-popover.component.html',
+  styleUrl: './seat-popover.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, CurrencyPipe],
+})
+export class SeatPopoverComponent extends BasePopoverComponent implements OnInit {
+  @Input() data!: SeatPopoverData;
+  @Input() showLoader: boolean = true;
+
+  private readonly thumbnailProvider = inject(THUMBNAIL_PROVIDER, { optional: true });
+  protected override readonly cdr = inject(ChangeDetectorRef);
+
+  protected thumbnail?: string;
+  protected isLoadingThumbnail = true;
+
+  override ngOnInit(): void {
+    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();
+    }
+  }
+
+  private loadThumbnail(): void {
+    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();
+      },
+    });
+  }
+
+  protected get formattedSection(): string {
+    return this.data.section.includes('_') ? this.data.section.split('_')[1].split('-')[0] : this.data.section;
+  }
+
+  protected get formattedSeat(): string {
+    return this.data.seat.split('-')[2] || this.data.seat;
+  }
+
+  protected onEnter(event: MouseEvent): void {
+    this.onMouseEnter(event);
+  }
+
+  protected onLeave(event: MouseEvent): void {
+    this.onMouseLeave(event);
+  }
+}

package/src/dvm/popover/section-popover/section-popover.component.css

@@ -0,0 +1,157 @@
+: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, 0.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, 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: 8px;
+  margin-top: 16px;
+  margin-left: 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(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.sdc-popover-content {
+  padding: 0.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: 0.25rem 0;
+  font-size: var(--sdc-popover-label-font-size, 0.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: 0.5rem 0;
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.sdc-popover-btn {
+  border: none;
+  border-radius: var(--sdc-btn-border-radius, 4px);
+  padding: 0.5rem 1rem;
+  height: var(--sdc-btn-height, 2.25rem);
+  font-size: var(--sdc-btn-font-size, 0.75rem);
+  cursor: pointer;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sdc-popover-btn:hover:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.sdc-popover-btn:disabled {
+  opacity: 0.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: 0.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;
+  }
+}

package/src/dvm/popover/section-popover/section-popover.component.html

@@ -0,0 +1,58 @@
+<div (mouseenter)="onEnter($event)" (mouseleave)="onLeave($event)" class="sdc-section-popover">
+  <div class="sdc-popover-thumbnail">
+    @if (isLoadingThumbnail && showLoader) {
+      <div class="sdc-popover-loader">
+        <div class="sdc-spinner"></div>
+      </div>
+    }
+    @if (thumbnail && !isLoadingThumbnail) {
+      <div
+        class="sdc-thumbnail-image sdc-thumbnail-clickable"
+        [style.background-image]="'url(' + thumbnail + ')'"
+        (click)="onLoad3dView()">
+        <span class="sdc-thumbnail-overlay-text">Click to open view</span>
+      </div>
+    }
+  </div>
+
+  <div class="sdc-popover-content">
+    <div class="sdc-popover-grid">
+      <div class="sdc-popover-col-left">
+        <h5 class="sdc-popover-label">
+          <span class="sdc-popover-label-text">Section:</span>
+          {{ data.section }}
+        </h5>
+        @if (isTicketFeeEnabled && priceRangeWithFees) {
+          <h5 class="sdc-popover-label">
+            <span class="sdc-popover-label-text">Price:</span> $ {{ priceRangeWithFees }}
+          </h5>
+        } @else {
+          <h5 class="sdc-popover-label">
+            <span class="sdc-popover-label-text">Price:</span> $ {{ priceRangeDisplay }}
+          </h5>
+        }
+      </div>
+      <div class="sdc-popover-col-right">
+        <h5 class="sdc-popover-label">
+          <span class="sdc-popover-label-text">Available Seats:</span>
+          {{ data.availableQuantity }}
+        </h5>
+        <h5 class="sdc-popover-label">
+          <span class="sdc-popover-label-text">Available ADA Seats:</span>
+          {{ data.adaQuantity }}
+        </h5>
+      </div>
+    </div>
+
+    <div class="sdc-popover-actions">
+      @if (showBestAvailable) {
+        <button class="sdc-popover-btn sdc-popover-btn-primary sdc-popover-btn-mobile-only" (click)="onSelectForBA()">
+          {{ data.isSelectedForBA ? 'Deselect' : 'Select' }}
+        </button>
+      }
+      @if (shouldShowSeatMapButton) {
+        <button class="sdc-popover-btn sdc-popover-btn-secondary" (click)="onOpenSeatMap()">Open Seat Map</button>
+      }
+    </div>
+  </div>
+</div>

package/src/dvm/popover/section-popover/section-popover.component.ts

@@ -0,0 +1,106 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { type SectionPopoverData } from '../types';
+import { THUMBNAIL_PROVIDER } from '../popover.config';
+import { BasePopoverComponent } from '../base-popover.component';
+
+@Component({
+  selector: 'sdc-section-popover',
+  templateUrl: './section-popover.component.html',
+  styleUrl: './section-popover.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class SectionPopoverComponent extends BasePopoverComponent implements OnInit {
+  @Input() data!: SectionPopoverData;
+  @Input() showLoader: boolean = true;
+  @Input() showBestAvailable: boolean = false;
+  @Input() showOpenSeatMap: boolean = true;
+  @Input() excludeSeatMapSections: string[] = ['S_BLCHADA', 'S_Bleacher'];
+  @Input() isTicketFeeEnabled: boolean = false;
+
+  @Output() load3dView = new EventEmitter<void>();
+  @Output() selectForBA = new EventEmitter<boolean>();
+  @Output() openSeatMap = new EventEmitter<void>();
+
+  private readonly thumbnailProvider = inject(THUMBNAIL_PROVIDER, { optional: true });
+  protected override readonly cdr = inject(ChangeDetectorRef);
+
+  protected thumbnail?: string;
+  protected isLoadingThumbnail = true;
+
+  override ngOnInit(): void {
+    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();
+    }
+  }
+
+  private loadThumbnail(): void {
+    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();
+      },
+    });
+  }
+
+  protected get priceRangeDisplay(): string {
+    const { min, max } = this.data.priceRange;
+    return min === max ? min.toString() : `${min} - ${max}`;
+  }
+
+  protected get priceRangeWithFees(): string | undefined {
+    if (this.isTicketFeeEnabled && this.data.priceRangeWithFees) {
+      return this.data.priceRangeWithFees;
+    }
+    return undefined;
+  }
+
+  protected get shouldShowSeatMapButton(): boolean {
+    return (
+      this.showOpenSeatMap &&
+      !this.excludeSeatMapSections.includes(this.data.section) &&
+      this.data.type !== 'general_admission'
+    );
+  }
+
+  protected onEnter(event: MouseEvent): void {
+    this.onMouseEnter(event);
+  }
+
+  protected onLeave(event: MouseEvent): void {
+    this.onMouseLeave(event);
+  }
+
+  protected onLoad3dView(): void {
+    this.load3dView.emit();
+  }
+
+  protected onSelectForBA(): void {
+    this.selectForBA.emit(!this.data.isSelectedForBA);
+  }
+
+  protected onOpenSeatMap(): void {
+    this.openSeatMap.emit();
+  }
+}

package/src/dvm/popover/services/dvm-popover-positioner.service.ts

@@ -0,0 +1,73 @@
+import { inject, Injectable, Inject } from '@angular/core';
+import type { MapViewerNode, V2 } from '@3ddv/dvm-internal';
+import { Placement } from '@floating-ui/dom';
+import { IPopoverPositioner } from '../types';
+import { DVM_SERVICE, CONFIGURATION_SERVICE } from '../popover.config';
+import type { IDvmService, IConfigurationService } from '../popover.config';
+
+/**
+ * DVM-specific positioning service for popovers.
+ * Handles calculation of popover placement and offset based on DVM node properties.
+ */
+@Injectable()
+export class DvmPopoverPositionerService implements IPopoverPositioner {
+  private readonly dvmService: IDvmService;
+  private readonly configService: IConfigurationService;
+
+  constructor(
+    @Inject(DVM_SERVICE) dvmService: IDvmService,
+    @Inject(CONFIGURATION_SERVICE) configService: IConfigurationService
+  ) {
+    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: MapViewerNode, container: HTMLElement): Placement {
+    if (!node.aabb) {
+      throw new Error('Node AABB is not defined');
+    }
+
+    const nodeSceneCenter: [number, number] = [
+      node.aabb[0] + node.aabb[2] / 2,
+      node.aabb[1] + node.aabb[3] / 2,
+    ];
+
+    const nodeDomCenter: V2 = 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: MapViewerNode): number[] {
+    if (node.type === 'seat') {
+      return [0, 6];
+    }
+
+    if (node.type === 'section' || node.type === 'general_admission') {
+      const dvmData = this.configService.configuration.dvmData as any;
+      const sectionOffsets = dvmData?.sectionOffsets || {};
+      const nodeId = node.id as keyof typeof sectionOffsets;
+      const nodeOriginalId = node.original_id as keyof typeof sectionOffsets;
+      const dvmOffset = sectionOffsets[nodeId] ?? sectionOffsets[nodeOriginalId];
+
+      return dvmOffset ?? [0, 0];
+    }
+
+    return [0, 0];
+  }
+}
+

package/src/dvm/popover/services/popover-manager.service.ts

@@ -0,0 +1,88 @@
+import { inject, Injectable, Inject } from '@angular/core';
+import { createPopper } from '@popperjs/core';
+import type { IPopoverManager, IPopoverPositioner, PopoverConfig } from '../types';
+import { POPOVER_POSITIONER } from '../popover.config';
+
+/**
+ * Generic popover manager service that handles popover lifecycle and positioning.
+ * This service is DVM-agnostic and delegates positioning logic to IPopoverPositioner.
+ */
+@Injectable()
+export class PopoverManagerService implements IPopoverManager {
+  private currentPopoverId: string = '';
+  private tooltip?: HTMLElement;
+  private readonly positioner: IPopoverPositioner;
+
+  constructor(@Inject(POPOVER_POSITIONER) positioner: IPopoverPositioner) {
+    this.positioner = positioner;
+  }
+
+  /**
+   * Shows a popover with the specified configuration.
+   * @param config - Configuration for the popover including component, data, and positioning
+   */
+  showPopover<T>(config: PopoverConfig<T>): void {
+    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 as any)[key] = value;
+      });
+    }
+
+    if (config.eventHandlers) {
+      Object.entries(config.eventHandlers).forEach(([key, handler]) => {
+        const instance = componentRef.instance as any;
+        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: string): void {
+    if (this.currentPopoverId === nodeId) {
+      this.tooltip?.removeAttribute('data-show');
+    }
+  }
+
+  /**
+   * Clears all popovers.
+   */
+  clearAll(): void {
+    this.tooltip?.removeAttribute('data-show');
+    this.currentPopoverId = '';
+  }
+}
+