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

package/src/dvm/popover/transformers/base-popover-data-transformer.ts

@@ -0,0 +1,36 @@
+import { SeatPopoverData, SectionPopoverData } from '../types';
+
+/**
+ * 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.
+ */
+export abstract class BasePopoverDataTransformer<TSource, TTarget> {
+  /**
+   * Transforms source data to target popover data format.
+   * @param source - The source data to transform
+   * @param context - Optional context for additional transformation logic
+   * @returns The transformed data in target format
+   */
+  abstract transform(source: TSource, context?: any): TTarget;
+}
+
+/**
+ * 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.
+ */
+export abstract class BaseSeatDataTransformer<TSource> extends BasePopoverDataTransformer<
+  TSource,
+  SeatPopoverData
+> {}
+
+/**
+ * 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.
+ */
+export abstract class BaseSectionDataTransformer<TSource> extends BasePopoverDataTransformer<
+  TSource,
+  SectionPopoverData
+> {}
+

package/src/dvm/popover/types.ts

@@ -0,0 +1,104 @@
+import { ComponentRef, ElementRef, Type, ViewContainerRef } from '@angular/core';
+import {
+  ArrowOptions,
+  AutoPlacementOptions,
+  ComputePositionConfig,
+  DetectOverflowOptions,
+  FlipOptions,
+  HideOptions,
+  InlineOptions,
+  OffsetOptions,
+  Placement,
+  ShiftOptions,
+  SizeOptions,
+  VirtualElement,
+} from '@floating-ui/dom';
+import { Observable } from 'rxjs';
+import type { MapViewerNode } from '@3ddv/dvm-internal';
+
+export type PopoverPlacement = Placement;
+
+export interface PopoverInstance<T = unknown> {
+  id: string;
+  element: HTMLElement;
+  reference: HTMLElement | Element | VirtualElement | (ElementRef & VirtualElement);
+  componentRef?: ComponentRef<T>;
+  update?: () => void;
+  cleanup?: () => void;
+}
+
+export interface PopoverOptions extends Omit<ComputePositionConfig, 'middleware'> {
+  middleware?: MiddlewareOptions;
+}
+
+export interface MiddlewareOptions {
+  offset?: OffsetOptions;
+  shift?: ShiftOptions;
+  flip?: FlipOptions;
+  arrow?: ArrowOptions;
+  size?: SizeOptions;
+  autoPlacement?: AutoPlacementOptions;
+  hide?: HideOptions;
+  inline?: InlineOptions;
+  detectOverflow?: DetectOverflowOptions;
+}
+
+export enum AppNodes {
+  Section = 'section',
+  Row = 'row',
+  Seat = 'seat',
+  Ga = 'general_admission',
+  Vip = 'vip',
+}
+
+// Seat popover data interface
+export interface SeatPopoverData {
+  id: string;
+  section: string;
+  row: string;
+  seat: string;
+  price: number;
+  thumbnail?: string;
+}
+
+// Section popover data interface
+export interface SectionPopoverData {
+  id: string;
+  section: string;
+  priceRange: { min: number; max: number };
+  availableQuantity: number;
+  adaQuantity: number;
+  thumbnail?: string;
+  type?: 'section' | 'general_admission';
+  isSelectedForBA?: boolean;
+  priceRangeWithFees?: string;
+}
+
+// Thumbnail provider interface
+export interface IThumbnailProvider {
+  getThumbnail(nodeId: string): Observable<string>;
+}
+
+// Popover positioning interface
+export interface IPopoverPositioner {
+  calculatePlacement(node: MapViewerNode, container: HTMLElement): Placement;
+  calculateOffset(node: MapViewerNode): number[];
+}
+
+// Popover manager interfaces
+export interface IPopoverManager {
+  showPopover<T>(config: PopoverConfig<T>): void;
+  hidePopover(nodeId: string): void;
+  clearAll(): void;
+}
+
+export interface PopoverConfig<T> {
+  nodeId: string;
+  node: MapViewerNode;
+  container: ViewContainerRef;
+  tooltip: HTMLElement;
+  containerElement: HTMLElement;
+  component: Type<T>;
+  componentInputs?: Partial<T>;
+  eventHandlers?: Record<string, (...args: any[]) => void>;
+}

package/src/dvm/public-api.ts

@@ -0,0 +1,9 @@
+export * from './cart';
+export * from './cart-item';
+export * from './legend';
+export * from './loader';
+export * from './map-loader';
+export * from './neighbors';
+export * from './popover';
+export * from './stepper';
+export * from './ticket-info-item';

package/src/dvm/stepper/index.ts

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

package/src/dvm/stepper/package.json

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

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

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './stepper.component';

package/src/dvm/stepper/stepper.component.css

@@ -0,0 +1,142 @@
+/**
+ * THEMEABLE STEPPER (pure CSS variables)
+ * Provide/override these in your theme classes (e.g., `.theme-sdc`, `.theme-astros`, etc.)
+ **/
+
+.sdc-stepper {
+  /* text */
+  --sdc-stepper-text-color: var(--color-neutral-300);
+  --sdc-stepper-normal-color: var(--color-neutral-500);
+  --sdc-stepper-active-color: var(--color-alternative);
+  --sdc-stepper-completed-color: var(--color-alternative);
+
+  /* separators */
+  --sdc-stepper-separator-color: var(--color-neutral-500);
+  --sdc-stepper-separator-opacity: 1;
+
+  /* spacing & typography per size (defaults for md) */
+  --sdc-stepper-gap-x: var(--space-2); /* horizontal gap between items */
+  --sdc-stepper-gap-y: 0; /* vertical gap for vertical orientation */
+  --sdc-stepper-font-size: var(--text-base);
+  --sdc-stepper-font-weight: var(--font-semibold);
+
+  /* separator content (set per size below) */
+  --sdc-stepper-separator-content: '-';
+
+  /* layout */
+  display: block;
+}
+
+/* VARIANT OVERRIDES */
+/* Light variant - for use on dark backgrounds */
+.sdc-stepper.variant-light {
+  --sdc-stepper-active-color: white;
+  --sdc-stepper-completed-color: white;
+}
+
+/* Dark variant - for use on light backgrounds (default) */
+.sdc-stepper.variant-dark {
+  --sdc-stepper-active-color: var(--color-alternative);
+  --sdc-stepper-completed-color: var(--color-alternative);
+}
+
+/* ORIENTATION */
+.sdc-stepper .sdc-stepper__list {
+  display: flex;
+  width: 100%;
+  text-align: center;
+  align-items: center;
+  font-weight: var(--sdc-stepper-font-weight);
+  color: var(--sdc-stepper-text-color);
+  gap: var(--sdc-stepper-gap-x);
+}
+
+.sdc-stepper.orientation-vertical .sdc-stepper__list {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sdc-stepper-gap-y);
+}
+
+/* ALIGNMENT (only meaningful in horizontal mode) */
+.sdc-stepper.align-start .sdc-stepper__list {
+  justify-content: flex-start;
+}
+.sdc-stepper.align-center .sdc-stepper__list {
+  justify-content: center;
+}
+.sdc-stepper.align-end .sdc-stepper__list {
+  justify-content: flex-end;
+}
+
+/* SIZE TOKENS (consumers may override via theme or by adding a size-* class to styleClass) */
+.sdc-stepper.size-xxs {
+  --sdc-stepper-gap-x: var(--space-1);
+  --sdc-stepper-font-size: var(--text-xxs);
+  --sdc-stepper-separator-content: '/';
+}
+.sdc-stepper.size-xs {
+  --sdc-stepper-gap-x: var(--space-1);
+  --sdc-stepper-font-size: var(--text-xs);
+  --sdc-stepper-separator-content: '/';
+}
+.sdc-stepper.size-sm {
+  --sdc-stepper-gap-x: var(--space-1_5);
+  --sdc-stepper-font-size: var(--text-sm);
+  --sdc-stepper-separator-content: '-';
+}
+.sdc-stepper.size-md {
+  --sdc-stepper-gap-x: var(--space-2);
+  --sdc-stepper-font-size: var(--text-base);
+  --sdc-stepper-separator-content: '-';
+}
+.sdc-stepper.size-lg {
+  --sdc-stepper-gap-x: var(--space-3);
+  --sdc-stepper-font-size: var(--text-lg);
+  --sdc-stepper-separator-content: '-';
+}
+
+/* ITEMS + SEPARATORS */
+.sdc-stepper__item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  color: inherit;
+}
+
+/* Separator (horizontal) */
+.sdc-stepper.orientation-horizontal .sdc-stepper__item:not(:last-child)::after {
+  content: var(--sdc-stepper-separator-content);
+  margin: 0 var(--space-2);
+  color: var(--sdc-stepper-separator-color);
+  opacity: var(--sdc-stepper-separator-opacity);
+}
+
+/* Separator (vertical = thin rule) */
+.sdc-stepper.orientation-vertical .sdc-stepper__item:not(:last-child)::after {
+  content: '';
+  display: block;
+  width: 1px;
+  height: var(--space-4);
+  margin: var(--space-1) 0;
+  background-color: var(--sdc-stepper-separator-color);
+  opacity: var(--sdc-stepper-separator-opacity);
+}
+
+/* TEXT + STATES */
+.sdc-stepper__text {
+  font-size: var(--sdc-stepper-font-size);
+  transition: color 0.2s ease-in-out;
+}
+
+/* Normal state inherits base text color */
+.sdc-stepper__text.state-active {
+  color: var(--sdc-stepper-active-color);
+}
+
+.sdc-stepper__text.state-normal {
+  color: var(--sdc-stepper-normal-color);
+}
+
+.sdc-stepper__text.state-completed {
+  color: var(--sdc-stepper-completed-color);
+}

package/src/dvm/stepper/stepper.component.html

@@ -0,0 +1,9 @@
+<nav [attr.aria-label]="'progress-stepper'" [class]="computedClass()">
+  <ol class="sdc-stepper__list">
+    @for (step of steps(); track step.name; let i = $index) {
+      <li class="sdc-stepper__item">
+        <span class="sdc-stepper__text" [class]="stateClass(i)"> {{ i + 1 }}. {{ step.action }} </span>
+      </li>
+    }
+  </ol>
+</nav>

package/src/dvm/stepper/stepper.component.ts

@@ -0,0 +1,102 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ThemeClass } from '../../public-api';
+import { Size, SIZE_ORDER } from '../../types/sizes.type';
+import { Step, StepperSize, StepState } from './types';
+
+@Component({
+  selector: 'sdc-stepper',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StepperComponent {
+  public readonly steps = input.required<Step[]>();
+  public readonly size = input<Size>('md');
+  public readonly routeName = input<string | null>(null);
+  public readonly theme = input<ThemeClass>('theme-sdc');
+  public readonly variant = input<'light' | 'dark'>('light');
+
+  /** Only these are supported for stepper. */
+  private readonly supportedSizes: StepperSize[] = ['xxs', 'xs', 'sm', 'md', 'lg'];
+
+  /** Normalize any Size → StepperSize by flooring to the nearest supported size. */
+  private normalizeSize = (s: Size): StepperSize => {
+    const wantedIdx = SIZE_ORDER.indexOf(s);
+    if (wantedIdx === -1) return 'md';
+
+    for (let i = wantedIdx; i >= 0; i--) {
+      const candidate = SIZE_ORDER[i];
+      if (this.supportedSizes.includes(candidate as StepperSize)) {
+        return candidate as StepperSize;
+      }
+    }
+    return 'md';
+  };
+
+  private readonly allowedAlign = ['align-start', 'align-center', 'align-end'] as const;
+  private readonly allowedOrientation = ['orientation-horizontal', 'orientation-vertical'] as const;
+  private readonly allowedSizes = SIZE_ORDER.map(s => `size-${s}`);
+
+  public readonly styleClass = input<
+    (
+      | (typeof this.allowedAlign)[number]
+      | (typeof this.allowedOrientation)[number]
+      | (typeof this.allowedSizes)[number]
+    )[]
+  >(['orientation-horizontal', 'align-center']);
+
+  public readonly className = input<string>('');
+
+  private readonly _validatedStyleClass = computed(() => {
+    const classes = this.styleClass() ?? [];
+    const valid = classes.filter(
+      c =>
+        this.allowedAlign.includes(c as any) ||
+        this.allowedOrientation.includes(c as any) ||
+        this.allowedSizes.includes(c as any)
+    );
+    if (valid.length !== classes.length) {
+      const invalid = classes.filter(c => !valid.includes(c));
+      console.warn(`StepperComponent: Ignored invalid styleClass: ${invalid.join(', ')}`);
+    }
+    return valid;
+  });
+
+  private readonly _effectiveSize = computed<StepperSize>(() => {
+    const sc = this._validatedStyleClass();
+    const rawOverride = sc
+      .filter(c => c.startsWith('size-'))
+      .slice(-1)[0]
+      ?.replace(/^size-/, '') as Size | undefined;
+
+    if (rawOverride) return this.normalizeSize(rawOverride);
+    return this.normalizeSize(this.size());
+  });
+
+  protected readonly computedClass = computed(() => {
+    const base = this._validatedStyleClass().filter(c => !c.startsWith('size-'));
+    const normalizedSize = this._effectiveSize();
+    const variantClass = `variant-${this.variant()}`;
+
+    return ['sdc-stepper', this.theme(), `size-${normalizedSize}`, variantClass, ...base, this.className()]
+      .filter(Boolean)
+      .join(' ');
+  });
+
+  protected stateForIndex(i: number): StepState {
+    const route = this.routeName();
+    if (!route) return 'normal';
+    const current = this.steps().findIndex(s => s.name === route);
+    if (current < 0) return 'normal';
+    if (current === i) return 'active';
+    if (current > i) return 'completed';
+    return 'normal';
+  }
+
+  protected stateClass(i: number): string {
+    return `state-${this.stateForIndex(i)}`;
+  }
+}

package/src/dvm/stepper/types.ts

@@ -0,0 +1,6 @@
+import { Size } from '../../types/sizes.type';
+
+export type Step = { action: string; name: string };
+export type StepperSize = Exclude<Size, 'xl' | '2xl'>;
+export type StepperTheme = 'light' | 'dark';
+export type StepState = 'normal' | 'active' | 'completed';

package/src/dvm/ticket-info-item/index.ts

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

package/src/dvm/ticket-info-item/package.json

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

package/src/dvm/ticket-info-item/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './ticket-info-item.component';
+export * from './ticket-info-item.service';

package/src/dvm/ticket-info-item/ticket-info-item.component.html

@@ -0,0 +1 @@
+<div>ticket-info-item component!</div>

package/src/dvm/ticket-info-item/ticket-info-item.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sdc-ticket-info-item',
+  standalone: true,
+  templateUrl: './ticket-info-item.component.html',
+})
+export class TicketInfoItemComponent {}

package/src/dvm/ticket-info-item/ticket-info-item.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TicketInfoItemService {
+  constructor() {}
+}

package/src/dvm/ticket-info-item/ticket-info-item.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { TicketInfoItemComponent } from './ticket-info-item.component';
+
+const meta: Meta<TicketInfoItemComponent> = {
+  title: 'Dvm/TicketInfoItem',
+  component: TicketInfoItemComponent,
+  id: 'TicketInfoItem',
+};
+
+export default meta;
+
+type Story = StoryObj<TicketInfoItemComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/generic/add-digital-wallet/add-digital-wallet.component.css

@@ -0,0 +1,76 @@
+.sdc-digital-wallet {
+  --sdc-digital-wallet-max-width: 32rem;
+  --sdc-digital-wallet-padding: var(--space-2) var(--space-0);
+
+  --sdc-digital-wallet-title-size: var(--text-lg);
+  --sdc-digital-wallet-title-weight: var(--font-bold);
+  --sdc-digital-wallet-title-leading: var(--leading-tight);
+
+  --sdc-digital-wallet-braintree-max-h: 24rem;
+  --sdc-digital-wallet-braintree-overflow: auto;
+
+  --sdc-digital-wallet-submit-radius: var(--radius-3xl);
+  --sdc-digital-wallet-submit-text-size: var(--text-base);
+  --sdc-digital-wallet-submit-text-weight: var(--font-bold);
+  --sdc-digital-wallet-submit-text-color: var(--color-secondary-active);
+
+  --sdc-digital-wallet-error-size: 1rem;
+  --sdc-digital-wallet-error-color: var(--color-danger);
+
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: var(--sdc-digital-wallet-max-width);
+  padding: var(--sdc-digital-wallet-padding);
+  margin: 0 auto;
+}
+
+.sdc-digital-wallet__inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  overflow-y: auto;
+}
+
+.sdc-digital-wallet__title {
+  font-size: var(--sdc-digital-wallet-title-size);
+  font-weight: var(--sdc-digital-wallet-title-weight);
+  line-height: var(--sdc-digital-wallet-title-leading);
+}
+
+.sdc-digital-wallet__braintree {
+  max-height: var(--sdc-digital-wallet-braintree-max-h);
+  overflow-y: var(--sdc-digital-wallet-braintree-overflow);
+}
+
+.sdc-digital-wallet__submit {
+  border-radius: var(--sdc-digital-wallet-submit-radius);
+  font-size: var(--sdc-digital-wallet-submit-text-size);
+  font-weight: var(--sdc-digital-wallet-submit-text-weight);
+  color: hsl(var(--sdc-digital-wallet-submit-text-color));
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+
+.sdc-digital-wallet__default-card {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.sdc-digital-wallet__error {
+  font-size: var(--sdc-digital-wallet-error-size);
+  color: hsl(var(--sdc-digital-wallet-error-color));
+}
+
+@media (min-width: 1024px) {
+  .sdc-digital-wallet {
+    --sdc-digital-wallet-padding: var(--space-6) var(--space-6);
+    --sdc-digital-wallet-title-size: var(--text-xl);
+    --sdc-digital-wallet-braintree-max-h: none;
+  }
+}

package/src/generic/add-digital-wallet/add-digital-wallet.component.html

@@ -0,0 +1,46 @@
+<div class="sdc-digital-wallet theme-sdc" id="add-patron-card-modal">
+  <div class="sdc-digital-wallet__inner">
+    <h2 class="sdc-digital-wallet__title">ADD YOUR CARD</h2>
+
+    <sdc-braintree
+      class="sdc-digital-wallet__braintree"
+      [isDigitalWalletPayment]="true"
+      [token]="token()"
+      (onSubmit)="onDigitalWalletSubmitted($event)">
+      <div>
+        @if (showIsDefaultCardCheckbox()) {
+          <label
+            id="braintree-use-default-card-checkbox"
+            class="flex justify-center py-4 sdc-digital-wallet__default-card">
+            <input type="checkbox" [formControl]="useDefaultCardCtrl" />
+            Make this my default card
+          </label>
+        }
+
+        @if (errorMessage()) {
+          <p class="sdc-digital-wallet__error">
+            {{ errorMessage() || 'Something bad happened' }}
+          </p>
+        }
+
+        <div class="flex justify-center gap-4 pt-4">
+          @if (showCancelButton()) {
+            <button
+              class="disabled:opacity-30 mr-3 md:mr-6 disabled:hover:transform-none hover:scale-95 transition-transform sdc-digital-wallet__cancel btn-main-reverse"
+              id="braintree-cancel-button"
+              type="button"
+              (click)="onCancel()">
+              Cancel
+            </button>
+          }
+          <button
+            class="disabled:opacity-30 disabled:hover:transform-none hover:scale-95 transition-transform sdc-digital-wallet__submit btn-main"
+            id="braintree-save-button"
+            type="button">
+            Save Card
+          </button>
+        </div>
+      </div>
+    </sdc-braintree>
+  </div>
+</div>

package/src/generic/add-digital-wallet/add-digital-wallet.component.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject, input, output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { BraintreeComponent } from '../braintree/braintree.component';
+import { BraintreePayload } from '../braintree/types';
+
+@Component({
+  standalone: true,
+  selector: 'sdc-add-digital-wallet',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BraintreeComponent, ReactiveFormsModule],
+  templateUrl: './add-digital-wallet.component.html',
+  styleUrls: ['./add-digital-wallet.component.css'],
+})
+export class AddDigitalWalletComponent implements OnInit {
+  // INPUTS
+  public token = input.required<string>();
+  public errorMessage = input<string | null>(null);
+  public showCancelButton = input<boolean>(false);
+  public showIsDefaultCardCheckbox = input<boolean>(false);
+
+  // OUTPUTS
+  public readonly braintreePayload = output<BraintreePayload>();
+  public readonly cancelClick = output<void>();
+  public readonly useDefaultCard = output<boolean>();
+
+  // STATE
+  public useDefaultCardCtrl = new FormControl(false);
+  private readonly destroyRef = inject(DestroyRef);
+
+  public ngOnInit(): void {
+    this.useDefaultCardCtrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+      this.useDefaultCard.emit(!!value);
+    });
+  }
+
+  public onDigitalWalletSubmitted(data: BraintreePayload): void {
+    console.log('EMIT BRAINTREE SUBMIT', data);
+    this.braintreePayload.emit(data);
+  }
+
+  public onCancel() {
+    this.cancelClick.emit();
+  }
+}

package/src/generic/add-digital-wallet/index.ts

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

package/src/generic/add-digital-wallet/public-api.ts

@@ -0,0 +1 @@
+export * from './add-digital-wallet.component';