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

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

@@ -1,218 +0,0 @@
-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

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

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

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

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

@@ -1,3 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,117 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,70 +0,0 @@
-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

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

package/src/dvm/popover/package.json

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

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

@@ -1,227 +0,0 @@
-/* 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;
-}