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

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

@@ -1,36 +0,0 @@
-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/dvm/popover/types.ts

@@ -1,104 +0,0 @@
-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/dvm/stepper/index.ts

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

package/dvm/stepper/ng-package.json

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

package/dvm/stepper/public-api.ts

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

package/dvm/stepper/stepper.component.css

@@ -1,142 +0,0 @@
-/**
- * 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-accent);
-  --sdc-stepper-completed-color: var(--color-accent);
-}
-
-/* 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/dvm/stepper/stepper.component.html

@@ -1,9 +0,0 @@
-<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/dvm/stepper/stepper.component.ts

@@ -1,101 +0,0 @@
-import { SIZE_ORDER, Size, ThemeClass } from '@3ddv/software-division-components/shared';
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { Step, StepState, StepperSize } 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/dvm/stepper/types.ts

@@ -1,6 +0,0 @@
-import { Size } from '@3ddv/software-division-components/shared';
-
-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/dvm/ticket-info-item/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,31 +0,0 @@
-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/generic/add-digital-wallet/add-digital-wallet.component.css

@@ -1,76 +0,0 @@
-.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/generic/add-digital-wallet/add-digital-wallet.component.html

@@ -1,46 +0,0 @@
-<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/generic/add-digital-wallet/add-digital-wallet.component.ts

@@ -1,44 +0,0 @@
-import { BraintreeComponent, BraintreePayload } from '@3ddv/software-division-components/generic/braintree';
-import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject, input, output } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-
-@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/generic/add-digital-wallet/index.ts

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

package/generic/add-digital-wallet/ng-package.json

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

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

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

package/generic/braintree/braintree.component.css

@@ -1,7 +0,0 @@
-/* USE DESIGN TOKENS */
-
-:root {
-  --p-button-primary-color: white !important;
-  --p-button-primary-contrast-color: white !important;
-  --p-button-primary-hover-color: white !important;
-}