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

package/dvm/popover/public-api.ts

@@ -1,14 +0,0 @@
-/*
- * 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/dvm/popover/seat-popover/seat-popover.component.css

@@ -1,89 +0,0 @@
-: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/dvm/popover/seat-popover/seat-popover.component.html

@@ -1,40 +0,0 @@
-<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/dvm/popover/seat-popover/seat-popover.component.ts

@@ -1,74 +0,0 @@
-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/dvm/popover/section-popover/section-popover.component.css

@@ -1,157 +0,0 @@
-: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/dvm/popover/section-popover/section-popover.component.html

@@ -1,58 +0,0 @@
-<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/dvm/popover/section-popover/section-popover.component.ts

@@ -1,106 +0,0 @@
-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/dvm/popover/services/dvm-popover-positioner.service.ts

@@ -1,73 +0,0 @@
-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/dvm/popover/services/popover-manager.service.ts

@@ -1,88 +0,0 @@
-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 = '';
-  }
-}
-