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

package/src/dvm/neighbors/neighbors.component.ts

@@ -0,0 +1,218 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  ElementRef,
+  EventEmitter,
+  inject,
+  input,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { ThemeClass } from '@shared/types';
+import { Subscription } from 'rxjs';
+import { Direction, HasAvailabilityFn, NeighborsData, SectionChangeEvent, TranslateSectionIdFn } from './types';
+
+@Component({
+  selector: 'sdc-neighbors',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './neighbors.component.html',
+  styleUrl: './neighbors.component.css',
+})
+export class NeighborsComponent implements OnDestroy {
+  // VIEWCHILD
+  @ViewChild('neighborsContainer')
+  public readonly neighborsContainer!: ElementRef<HTMLDivElement>;
+
+  @ViewChild('currentSection', { static: false })
+  public readonly currentSection!: ElementRef<HTMLSpanElement>;
+
+  @ViewChild('currentSection3d', { static: false })
+  public readonly currentSection3d!: ElementRef<HTMLSpanElement>;
+
+  @ViewChild('leftSectionNumber', { static: false })
+  public readonly leftSectionElement!: ElementRef<HTMLSpanElement>;
+
+  @ViewChild('rightSectionNumber', { static: false })
+  public readonly rightSectionElement!: ElementRef<HTMLSpanElement>;
+
+  // SERVICES
+  private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
+
+  // REQUIRED INPUTS
+  public readonly neighborsData = input.required<NeighborsData>();
+  public readonly currentSectionId = input.required<string | null>();
+  public readonly translateTdcToMmc = input.required<TranslateSectionIdFn>();
+  public readonly translateMmcToTdc = input.required<TranslateSectionIdFn>();
+  public readonly hasAvailability = input.required<HasAvailabilityFn>();
+
+  // OPTIONAL INPUTS
+  public readonly isLoading = input<boolean>(false);
+  public readonly showElement = input<boolean>(true);
+  public readonly modeLr = input<boolean>(false);
+  public readonly className = input<string>('');
+  public readonly theme = input<ThemeClass>('theme-sdc');
+
+  // OUTPUTS
+  @Output() sectionChange = new EventEmitter<SectionChangeEvent>();
+
+  /**
+   * Computed class string that combines theme and user classes.
+   */
+  protected readonly computedClass = computed(() => {
+    const themeClass = this.theme();
+    const className = this.className();
+    return Array.from(new Set(['sdc-neighbors', themeClass, className]))
+      .filter(Boolean)
+      .join(' ');
+  });
+
+  // COMPONENT STATE
+  private readonly subscriptions: Subscription[] = [];
+
+  // COMPUTED STATE
+  protected readonly leftSectionId = computed(() => {
+    try {
+      const currentId = this.currentSectionId();
+      if (!currentId) return null;
+      return this.findAvailableNeighbor('prev', currentId);
+    } catch (error) {
+      return null;
+    }
+  });
+
+  protected readonly rightSectionId = computed(() => {
+    try {
+      const currentId = this.currentSectionId();
+      if (!currentId) return null;
+      return this.findAvailableNeighbor('next', currentId);
+    } catch (error) {
+      return null;
+    }
+  });
+
+  protected readonly currentSectionLabel = computed(() => {
+    try {
+      const currentId = this.currentSectionId();
+      if (!currentId) return 'Loading';
+
+      // Translate TDC ID to MMC ID for display
+      const mmcId = this.translateTdcToMmc()(currentId);
+      if (!mmcId) return currentId; // Fallback to TDC ID if translation fails
+
+      // Extract section number from MMC ID (assuming format like "S_31" or similar)
+      return mmcId.replace(/^S_/, '');
+    } catch (error) {
+      return 'Loading';
+    }
+  });
+
+  protected readonly leftSectionLabel = computed(() => {
+    try {
+      const leftId = this.leftSectionId();
+      if (!leftId) return null;
+
+      // Translate TDC ID to MMC ID for display
+      const mmcId = this.translateTdcToMmc()(leftId);
+      if (!mmcId) return leftId; // Fallback to TDC ID if translation fails
+
+      // Extract section number from MMC ID
+      return mmcId.replace(/^S_/, '');
+    } catch (error) {
+      return null;
+    }
+  });
+
+  protected readonly rightSectionLabel = computed(() => {
+    try {
+      const rightId = this.rightSectionId();
+      if (!rightId) return null;
+
+      // Translate TDC ID to MMC ID for display
+      const mmcId = this.translateTdcToMmc()(rightId);
+      if (!mmcId) return rightId; // Fallback to TDC ID if translation fails
+
+      // Extract section number from MMC ID
+      return mmcId.replace(/^S_/, '');
+    } catch (error) {
+      return null;
+    }
+  });
+
+  // NEIGHBOR RESOLUTION ALGORITHM
+  private findAvailableNeighbor(type: Direction, currentSectionTdcId: string): string | null {
+    try {
+      const neighborKey = type === 'prev' ? 'l' : 'r';
+      const noNeighborValue = 'none';
+
+      // 1. Translate TDC → MMC
+      const currentSectionMmcId = this.translateTdcToMmc()(currentSectionTdcId);
+      if (!currentSectionMmcId) return null;
+
+      // 2. Look up neighbor in data
+      const neighbors = this.neighborsData();
+      const neighbor = neighbors[currentSectionMmcId];
+      const neighborSectionMmcId = neighbor ? neighbor[neighborKey] : noNeighborValue;
+
+      // 3. Handle 'none' boundary
+      if (neighborSectionMmcId === noNeighborValue) {
+        return null;
+      }
+
+      // 4. Translate MMC → TDC
+      const neighborSectionTdcId = this.translateMmcToTdc()(neighborSectionMmcId);
+      if (!neighborSectionTdcId) return null;
+
+      // 5. Check availability
+      if (this.hasAvailability()(neighborSectionTdcId)) {
+        return neighborSectionTdcId;
+      }
+
+      // 6. Recursively find next available (skip unavailable sections)
+      return this.findAvailableNeighbor(type, neighborSectionTdcId);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  // GETTERS
+  public get leftSection(): string | null {
+    return this.leftSectionId();
+  }
+
+  public get rightSection(): string | null {
+    return this.rightSectionId();
+  }
+
+  public get section(): string | null {
+    return this.currentSectionLabel();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((sub: Subscription): void => sub.unsubscribe());
+  }
+
+  // METHODS
+  public navigateToSection(section: string): void {
+    if (section === 'none' || !section) {
+      return;
+    }
+
+    const leftId = this.leftSectionId();
+    const rightId = this.rightSectionId();
+
+    let direction: Direction;
+    if (section === leftId) {
+      direction = 'prev';
+    } else if (section === rightId) {
+      direction = 'next';
+    } else {
+      return;
+    }
+
+    this.sectionChange.emit({ direction, sectionId: section });
+  }
+}

package/src/dvm/neighbors/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

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

@@ -0,0 +1,2 @@
+export { NeighborsComponent } from './neighbors.component';
+export* from './types';

package/src/dvm/neighbors/story/arrow-left-black-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="7.561" height="13.484" viewBox="0 0 7.561 13.484">
+  <path id="arrow-left" d="M6.893,0a.409.409,0,0,1,.3.125.245.245,0,0,1,.075.087.463.463,0,0,1,.037.106.518.518,0,0,1,.012.112.44.44,0,0,1-.012.106.484.484,0,0,1-.037.1.392.392,0,0,1-.075.1l-5.7,5.7L7.118,12.06a.418.418,0,0,1,.106.187.429.429,0,0,1-.718.412L.582,6.736a.422.422,0,0,1,0-.6L6.593.125A.409.409,0,0,1,6.893,0Z" transform="translate(-0.107 0.35)" stroke="#000" stroke-width="0.7"/>
+</svg>

package/src/dvm/neighbors/story/mock-data.ts

@@ -0,0 +1,15 @@
+export const mockNeighbours = {
+  S_B102: { l: 'S_B101', r: 'S_B103' },
+};
+
+export const sectionsMmcToTdc = {
+  S_B101: '3503',
+  S_B102: '3504',
+  S_B103: '3505',
+};
+
+export const sectionsTdcToMmc = {
+  '3503': 'S_B101',
+  '3504': 'S_B102',
+  '3505': 'S_B103',
+};

package/src/dvm/neighbors/story/neighbours.stories.css

@@ -0,0 +1,12 @@
+.mock-side-button {
+  --p-button-primary-color: white;
+  --p-button-primary-background: black;
+  --p-button-primary-border-color: black;
+  --p-button-primary-hover-background: black;
+  --p-button-primary-hover-color: white;
+}
+
+.mock-middle-div {
+  background-color: red;
+  color: rgb(203, 26, 191);
+}

package/src/dvm/neighbors/story/neighbours.stories.ts

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { NeighborsComponent } from '../neighbors.component';
+import { mockNeighbours, sectionsMmcToTdc, sectionsTdcToMmc } from './mock-data';
+
+const meta: Meta<NeighborsComponent> = {
+  title: 'Dvm/Neighbours',
+  component: NeighborsComponent,
+  id: 'Neighbours',
+  argTypes: {
+    sectionChange: {
+      action: 'sectionChange',
+      description: 'Emitted when user navigates to a neighbor section',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<NeighborsComponent>;
+
+// Helper functions for stories
+const translateTdcToMmc = (tdcId: string): string | null => {
+  return sectionsTdcToMmc[tdcId as keyof typeof sectionsTdcToMmc] || null;
+};
+
+const translateMmcToTdc = (mmcId: string): string | null => {
+  return sectionsMmcToTdc[mmcId as keyof typeof sectionsMmcToTdc] || null;
+};
+
+const hasAvailability = (tdcId: string): boolean => {
+  // Mock availability - all sections are available
+  return true;
+};
+
+const hasLimitedAvailability = (tdcId: string): boolean => {
+  // Mock limited availability - only some sections available
+  const availableSections = ['3503', '3504'];
+  return availableSections.includes(tdcId);
+};
+
+export const Default: Story = {
+  args: {
+    neighborsData: mockNeighbours,
+    currentSectionId: '3504',
+    translateTdcToMmc,
+    translateMmcToTdc,
+    hasAvailability,
+    isLoading: false,
+    showElement: true,
+    modeLr: false,
+  },
+};
+
+export const WithLimitedAvailability: Story = {
+  args: {
+    neighborsData: mockNeighbours,
+    currentSectionId: '3504',
+    translateTdcToMmc,
+    translateMmcToTdc,
+    hasAvailability: hasLimitedAvailability,
+    isLoading: false,
+    showElement: true,
+    modeLr: false,
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    neighborsData: mockNeighbours,
+    currentSectionId: '3504',
+    translateTdcToMmc,
+    translateMmcToTdc,
+    hasAvailability,
+    isLoading: true,
+    showElement: true,
+    modeLr: false,
+  },
+};
+
+export const HiddenElement: Story = {
+  args: {
+    neighborsData: mockNeighbours,
+    currentSectionId: '3504',
+    translateTdcToMmc,
+    translateMmcToTdc,
+    hasAvailability,
+    isLoading: false,
+    showElement: false,
+    modeLr: false,
+  },
+};
+
+export const LeftRightMode: Story = {
+  args: {
+    neighborsData: mockNeighbours,
+    currentSectionId: '3504',
+    translateTdcToMmc,
+    translateMmcToTdc,
+    hasAvailability,
+    isLoading: false,
+    showElement: true,
+    modeLr: true,
+  },
+};
+
+export const NoCurrentSection: Story = {
+  args: {
+    neighborsData: mockNeighbours,
+    currentSectionId: null,
+    translateTdcToMmc,
+    translateMmcToTdc,
+    hasAvailability,
+    isLoading: false,
+    showElement: true,
+    modeLr: false,
+  },
+};

package/src/dvm/neighbors/types.ts

@@ -0,0 +1,14 @@
+export type Direction = 'prev' | 'next';
+
+export type DirectionObjectKeys = 'l' | 'r';
+
+export type NeighborsData = Record<string, Record<DirectionObjectKeys, string>>;
+
+export type NeighborsStyleClasses = {
+  sideButtonsClass?: string;
+  middleDivClass?: string;
+};
+
+export type TranslateSectionIdFn = (sectionId: string) => string | null;
+export type HasAvailabilityFn = (tdcId: string) => boolean;
+export type SectionChangeEvent = { direction: Direction; sectionId: string };

package/src/dvm/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "./public-api.ts"
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { PopoverService } from './popover.service';
+
+/**
+ * Base component for popovers that provides timer functionality.
+ * Extend this component to create timer-aware popovers.
+ */
+@Component({
+  template: '', // Abstract component
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export abstract class BasePopoverComponent implements OnInit, OnDestroy {
+  @Input() popoverId: string = '';
+  @Input() autoHideDelay: number = 300; // milliseconds
+  @Input() enableAutoHide: boolean = true;
+
+  @Output() mouseEnter = new EventEmitter<MouseEvent>();
+  @Output() mouseLeave = new EventEmitter<MouseEvent>();
+  @Output() popoverHidden = new EventEmitter<void>();
+
+  protected readonly popoverService = inject(PopoverService);
+  protected readonly cdr = inject(ChangeDetectorRef);
+
+  private isMouseOver = false;
+
+  ngOnInit(): void {
+    if (this.enableAutoHide && this.popoverId) {
+      this.startAutoHideTimer();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.popoverId) {
+      this.popoverService.clearPopoverTimer(this.popoverId);
+    }
+  }
+
+  protected onMouseEnter(event: MouseEvent): void {
+    this.isMouseOver = true;
+    this.clearAutoHideTimer();
+    this.mouseEnter.emit(event);
+  }
+
+  protected onMouseLeave(event: MouseEvent): void {
+    this.isMouseOver = false;
+    if (this.enableAutoHide) {
+      this.startAutoHideTimer();
+    }
+    this.mouseLeave.emit(event);
+  }
+
+  protected hidePopover(): void {
+    if (this.popoverId) {
+      this.popoverService.destroyPopover(this.popoverId);
+      this.popoverHidden.emit();
+    }
+  }
+
+  private startAutoHideTimer(): void {
+    if (this.popoverId && !this.isMouseOver) {
+      this.popoverService.setPopoverTimer(this.popoverId, this.autoHideDelay);
+    }
+  }
+
+  private clearAutoHideTimer(): void {
+    if (this.popoverId) {
+      this.popoverService.clearPopoverTimer(this.popoverId);
+    }
+  }
+}

package/src/dvm/popover/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/dvm/popover/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

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

@@ -0,0 +1,227 @@
+/* Loading spinner styles from external popover */
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-dual-ring:after {
+  content: ' ';
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 8px;
+  margin-top: 16px;
+  margin-left: 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(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Additional styles for better appearance */
+h5 {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+/* Ensure proper spacing and layout */
+.w-80 {
+  width: 20rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.bg-black {
+  background-color: #000000;
+}
+
+.rounded-xl {
+  border-radius: 0.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: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.min-w-max {
+  min-width: max-content;
+}
+
+.text-right {
+  text-align: right;
+}
+
+/* Section popover specific styles */
+.viewer3d-image {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 8px;
+  font-size: 12px;
+}
+
+/* Button styles */
+.btn-main {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.btn-white {
+  background-color: white;
+  color: #007bff;
+  border: 1px solid #007bff;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.btn-white:hover {
+  color: #0056b3;
+}
+
+/* Tooltip image styles for seat popover */
+.tooltip-img {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+/* Responsive utilities */
+.block {
+  display: block;
+}
+
+.md\\:hidden {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .md\\:hidden {
+    display: none;
+  }
+}
+
+/* Text color utilities */
+.text-main {
+  color: #007bff;
+}
+
+.text-main-accent {
+  color: #0056b3;
+}
+
+/* Spacing utilities */
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.disabled\\:opacity-30:disabled {
+  opacity: 0.3;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.hover\\:scale-95:hover {
+  transform: scale(0.95);
+}
+
+.disabled\\:hover\\:transform-none:disabled:hover {
+  transform: none;
+}
+
+.hover\\:text-main-accent:hover {
+  color: #0056b3;
+}