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

package/dvm/cart/seat-list.stories.ts

@@ -1,337 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { applicationConfig } from '@storybook/angular';
-import { provideIcons } from '@ng-icons/core';
-import { lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
-import { SeatListComponent, SeatGroup } from './seat-list.component';
-import { CartItem } from './cart.types';
-
-const meta: Meta<SeatListComponent> = {
-  title: 'Dvm/Cart/SeatList',
-  component: SeatListComponent,
-  id: 'SeatList',
-  decorators: [
-    applicationConfig({
-      providers: [
-        provideIcons({
-          lucideMapPin,
-          lucideEye,
-          lucideChevronDown,
-          lucideChevronUp,
-        }),
-      ],
-    }),
-  ],
-  argTypes: {
-    seats: {
-      control: 'object',
-      description: 'Array of seats to display in simple mode',
-      table: {
-        type: { summary: 'CartItem[]' },
-      },
-    },
-    groups: {
-      control: 'object',
-      description: 'Array of seat groups to display in accordion mode',
-      table: {
-        type: { summary: 'SeatGroup[]' },
-      },
-    },
-    actionButtonText: {
-      control: 'text',
-      description: 'Text displayed on the action button',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    indicatorColor: {
-      control: 'color',
-      description: 'Color of the indicator dot for seats',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    mapPinClick: {
-      action: 'mapPinClick',
-      description: 'Event emitted when map pin icon is clicked',
-      table: {
-        type: { summary: 'EventEmitter<CartItem>' },
-      },
-    },
-    eyeClick: {
-      action: 'eyeClick',
-      description: 'Event emitted when eye icon is clicked',
-      table: {
-        type: { summary: 'EventEmitter<CartItem>' },
-      },
-    },
-    actionClick: {
-      action: 'actionClick',
-      description: 'Event emitted when action button is clicked',
-      table: {
-        type: { summary: 'EventEmitter<CartItem>' },
-      },
-    },
-    removeClick: {
-      action: 'removeClick',
-      description: 'Event emitted when remove button is clicked',
-      table: {
-        type: { summary: 'EventEmitter<CartItem>' },
-      },
-    },
-    groupToggle: {
-      action: 'groupToggle',
-      description: 'Event emitted when a group accordion is toggled',
-      table: {
-        type: { summary: 'EventEmitter<{ groupId: string | number; expanded: boolean }>' },
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<SeatListComponent>;
-
-const sampleSeats: CartItem[] = [
-  {
-    id: 1,
-    section: '304',
-    row: '3',
-    seat: '1',
-    price: 300,
-  },
-  {
-    id: 2,
-    section: '304',
-    row: '3',
-    seat: '2',
-    price: 300,
-  },
-  {
-    id: 3,
-    section: '304',
-    row: '3',
-    seat: '3',
-    price: 300,
-  },
-  {
-    id: 4,
-    section: '304',
-    row: '3',
-    seat: '4',
-    price: 300,
-  },
-];
-
-const sampleGroups: SeatGroup[] = [
-  {
-    id: 'kept',
-    title: 'Kept Seats',
-    count: '(2)',
-    seats: [
-      {
-        id: 1,
-        section: '304',
-        row: '3',
-        seat: '1',
-        price: 300,
-      },
-      {
-        id: 2,
-        section: '304',
-        row: '3',
-        seat: '2',
-        price: 300,
-      },
-    ],
-    expanded: true,
-    indicatorColor: '#10b981',
-    actionButtonText: 'Remove',
-  },
-  {
-    id: 'relocated',
-    title: 'Relocated Seats',
-    count: '(0/2)',
-    seats: [],
-    expanded: false,
-    indicatorColor: '#f97316',
-    actionButtonText: 'Remove',
-  },
-  {
-    id: 'additional',
-    title: 'Additional Seats',
-    count: '(0/6)',
-    seats: [],
-    expanded: false,
-    indicatorColor: '#2563eb',
-    actionButtonText: 'Remove',
-  },
-];
-
-export const SimpleMode: Story = {
-  args: {
-    seats: sampleSeats,
-    actionButtonText: 'Relocate',
-    indicatorColor: '#f97316',
-  },
-};
-
-export const SimpleModeEmpty: Story = {
-  args: {
-    seats: [],
-    actionButtonText: 'Relocate',
-  },
-};
-
-export const SimpleModeSingle: Story = {
-  args: {
-    seats: [sampleSeats[0]],
-    actionButtonText: 'Relocate',
-  },
-};
-
-export const GroupedMode: Story = {
-  args: {
-    groups: sampleGroups,
-  },
-};
-
-export const GroupedModeAllExpanded: Story = {
-  args: {
-    groups: sampleGroups.map(group => ({ ...group, expanded: true })),
-  },
-};
-
-export const GroupedModeWithSeats: Story = {
-  args: {
-    groups: [
-      {
-        id: 'kept',
-        title: 'Kept Seats',
-        count: '(2)',
-        seats: [
-          {
-            id: 1,
-            section: '304',
-            row: '3',
-            seat: '1',
-            price: 300,
-          },
-          {
-            id: 2,
-            section: '304',
-            row: '3',
-            seat: '2',
-            price: 300,
-          },
-        ],
-        expanded: true,
-        indicatorColor: '#10b981',
-        actionButtonText: 'Remove',
-      },
-      {
-        id: 'relocated',
-        title: 'Relocated Seats',
-        count: '(2/2)',
-        seats: [
-          {
-            id: 3,
-            section: '305',
-            row: '5',
-            seat: '10',
-            price: 350,
-          },
-          {
-            id: 4,
-            section: '305',
-            row: '5',
-            seat: '11',
-            price: 350,
-          },
-        ],
-        expanded: false,
-        indicatorColor: '#f97316',
-        actionButtonText: 'Remove',
-      },
-      {
-        id: 'additional',
-        title: 'Additional Seats',
-        count: '(3/6)',
-        seats: [
-          {
-            id: 5,
-            section: '306',
-            row: '7',
-            seat: '15',
-            price: 250,
-          },
-          {
-            id: 6,
-            section: '306',
-            row: '7',
-            seat: '16',
-            price: 250,
-          },
-          {
-            id: 7,
-            section: '306',
-            row: '7',
-            seat: '17',
-            price: 250,
-          },
-        ],
-        expanded: false,
-        indicatorColor: '#2563eb',
-        actionButtonText: 'Remove',
-      },
-    ],
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    seats: sampleSeats,
-  },
-  render: args => ({
-    props: {
-      ...args,
-      mapPinClick: (item: CartItem) => console.log('Map pin clicked for:', item),
-      eyeClick: (item: CartItem) => console.log('Eye clicked for:', item),
-      actionClick: (item: CartItem) => console.log('Action clicked for:', item),
-    },
-    template: `
-      <sdc-seat-list
-        [seats]="seats"
-        [actionButtonText]="actionButtonText"
-        [indicatorColor]="indicatorColor"
-        (mapPinClick)="mapPinClick($event)"
-        (eyeClick)="eyeClick($event)"
-        (actionClick)="actionClick($event)">
-      </sdc-seat-list>
-    `,
-  }),
-};
-
-export const GroupedWithActions: Story = {
-  args: {
-    groups: sampleGroups,
-  },
-  render: args => ({
-    props: {
-      ...args,
-      mapPinClick: (item: CartItem) => console.log('Map pin clicked for:', item),
-      eyeClick: (item: CartItem) => console.log('Eye clicked for:', item),
-      removeClick: (item: CartItem) => console.log('Remove clicked for:', item),
-      groupToggle: (event: { groupId: string | number; expanded: boolean }) => console.log('Group toggled:', event),
-    },
-    template: `
-      <sdc-seat-list
-        [groups]="groups"
-        (mapPinClick)="mapPinClick($event)"
-        (eyeClick)="eyeClick($event)"
-        (removeClick)="removeClick($event)"
-        (groupToggle)="groupToggle($event)">
-      </sdc-seat-list>
-    `,
-  }),
-};

package/dvm/cart-item/cart-item.component.html

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

package/dvm/cart-item/cart-item.component.ts

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

package/dvm/cart-item/cart-item.service.ts

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

package/dvm/cart-item/cart.stories.ts

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { CartItemComponent } from './cart-item.component';
-
-const meta: Meta<CartItemComponent> = {
-  title: 'Dvm/CartItem',
-  component: CartItemComponent,
-  id: 'CartItem',
-};
-
-export default meta;
-
-type Story = StoryObj<CartItemComponent>;
-
-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/dvm/cart-item/index.ts

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

package/dvm/cart-item/ng-package.json

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

package/dvm/cart-item/public-api.ts

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

package/dvm/index.ts

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

package/dvm/legend/index.ts

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

package/dvm/legend/legend.component.css

@@ -1,49 +0,0 @@
-/* THEMEABLE LEGEND (pure CSS variables; md defaults) */
-.sdc-legend {
-  --sdc-legend-gap-y: var(--space-4);
-  --sdc-legend-padding-x: var(--space-7);
-  --sdc-legend-padding-y: var(--space-2);
-  --sdc-legend-font-size: var(--text-xs);
-  --sdc-legend-font-weight: var(--font-normal);
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sdc-legend-gap-y);
-  max-width: 375px;
-  padding: var(--sdc-legend-padding-y) var(--sdc-legend-padding-x);
-  font-size: var(--sdc-legend-font-size);
-  font-weight: var(--sdc-legend-font-weight);
-}
-
-/* Title */
-.sdc-legend__title {
-  font-weight: var(--font-semibold);
-  font-size: var(--text-lg);
-}
-
-/* SIZE TOKENS */
-.sdc-legend.size-xxs,
-.sdc-legend.size-xs {
-  --sdc-legend-padding-x: 0;
-  --sdc-legend-padding-y: 0;
-  --sdc-legend-font-size: var(--text-sm);
-}
-
-.sdc-legend.size-sm {
-  --sdc-legend-padding-x: var(--space-4);
-  --sdc-legend-padding-y: var(--space-1);
-}
-
-.sdc-legend.size-md {
-  --sdc-legend-padding-x: var(--space-7);
-  --sdc-legend-padding-y: var(--space-2);
-}
-
-.sdc-legend.size-lg {
-  --sdc-legend-gap-y: var(--space-6);
-  --sdc-legend-padding-x: var(--space-8);
-  --sdc-legend-padding-y: var(--space-4);
-  --sdc-legend-font-size: var(--text-md);
-  --sdc-legend-font-weight: var(--font-semibold);
-}

package/dvm/legend/legend.component.html

@@ -1,8 +0,0 @@
-<fieldset [class]="computedClass()">
-  @if (title()) {
-    <h1 class="sdc-legend__title">
-      {{ title() }}
-    </h1>
-  }
-  <sdc-legend-elements [elements]="elements()" [size]="size()" />
-</fieldset>

package/dvm/legend/legend.component.ts

@@ -1,41 +0,0 @@
-import { SIZE_ORDER, Size } from '@3ddv/software-division-components/shared';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { LegendElement, LegendSize } from './types';
-import { LegendElementsComponent } from './ui/legend-elements/legend-elements.component';
-
-@Component({
-  selector: 'sdc-legend',
-  standalone: true,
-  imports: [LegendElementsComponent],
-  templateUrl: './legend.component.html',
-  styleUrls: ['./legend.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LegendComponent {
-  public readonly title = input('');
-  public readonly size = input<Size>('md');
-  public readonly elements = input.required<LegendElement[]>();
-  public readonly className = input<string>('');
-
-  private readonly supportedSizes: LegendSize[] = ['xxs', 'xs', 'sm', 'md', 'lg'];
-
-  /** Normalize any Size → LegendSize by flooring to nearest supported size. */
-  private normalizeSize = (s: Size): LegendSize => {
-    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 LegendSize)) {
-        return candidate as LegendSize;
-      }
-    }
-    return 'md';
-  };
-
-  private readonly _effectiveSize = computed<LegendSize>(() => this.normalizeSize(this.size()));
-
-  protected readonly computedClass = computed(() => {
-    const normalizedSize = this._effectiveSize();
-    return ['sdc-legend', `size-${normalizedSize}`, this.className()].filter(Boolean).join(' ');
-  });
-}

package/dvm/legend/legend.stories.ts

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { LegendComponent } from './legend.component';
-
-const meta: Meta<LegendComponent> = {
-  title: 'Dvm/Legend',
-  component: LegendComponent,
-  id: 'Legend',
-};
-
-export default meta;
-
-type Story = StoryObj<LegendComponent>;
-
-export const Primary: Story = {
-  args: {},
-};

package/dvm/legend/ng-package.json

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

package/dvm/legend/public-api.ts

@@ -1,7 +0,0 @@
-/*
- * Public API Surface of software-division-components
- */
-
-export * from './legend.component';
-export * from './types';
-export * from './ui/legend-elements';

package/dvm/legend/types.ts

@@ -1,6 +0,0 @@
-export interface LegendElement {
-  color: string;
-  name: string;
-}
-
-export type LegendSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';

package/dvm/legend/ui/legend-elements/index.ts

@@ -1 +0,0 @@
-export * from './legend-elements.component';

package/dvm/legend/ui/legend-elements/legend-elements.component.css

@@ -1,49 +0,0 @@
-/* THEMEABLE LEGEND ELEMENTS (md defaults) */
-.sdc-legend-elements {
-  --slec-gap-x: 0;
-  --slec-gap-y: var(--space-6);
-
-  display: grid;
-  grid-auto-flow: row;
-  row-gap: var(--slec-gap-y);
-  column-gap: var(--slec-gap-x);
-}
-
-/* SIZE TOKENS (size-* drives spacing and alignment) */
-.sdc-legend-elements.size-xs {
-  --slec-gap-y: var(--space-2);
-}
-.sdc-legend-elements.size-sm {
-  --slec-gap-y: var(--space-4);
-}
-.sdc-legend-elements.size-md {
-  --slec-gap-y: var(--space-6);
-}
-.sdc-legend-elements.size-lg {
-  --slec-gap-y: var(--space-6);
-  --slec-gap-x: var(--space-8);
-}
-
-/* Item row */
-.sdc-legend-elements__item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start; /* default */
-}
-/* On lg, center items (old rule: lg centers, others start) */
-.sdc-legend-elements.size-lg .sdc-legend-elements__item {
-  justify-content: center;
-}
-
-/* Dot + label */
-.sdc-legend-elements__dot {
-  margin-right: var(--space-1_5);
-  border-radius: 9999px;
-  width: var(--space-3);
-  height: var(--space-3);
-  flex-shrink: 0;
-  outline: 0.1px solid gray;
-}
-.sdc-legend-elements__label {
-  white-space: nowrap;
-}

package/dvm/legend/ui/legend-elements/legend-elements.component.html

@@ -1,8 +0,0 @@
-<div [class]="computedClass()">
-  @for (element of elements(); track element.name) {
-    <div class="sdc-legend-elements__item">
-      <span class="sdc-legend-elements__dot" [style.backgroundColor]="element.color"></span>
-      <p class="sdc-legend-elements__label">{{ element.name }}</p>
-    </div>
-  }
-</div>

package/dvm/legend/ui/legend-elements/legend-elements.component.ts

@@ -1,41 +0,0 @@
-import { SIZE_ORDER, Size } from '@3ddv/software-division-components/shared';
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { LegendElement, LegendSize } from '../../types';
-
-@Component({
-  selector: 'sdc-legend-elements',
-  standalone: true, // ← important if you use `imports`
-  imports: [CommonModule],
-  templateUrl: './legend-elements.component.html',
-  styleUrls: ['./legend-elements.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LegendElementsComponent {
-  public readonly size = input<Size>('md');
-  public readonly elements = input.required<LegendElement[]>();
-  public readonly className = input<string>('');
-
-  private readonly supportedSizes: LegendSize[] = ['xs', 'sm', 'md', 'lg'];
-
-  private normalizeSize = (s: Size): LegendSize => {
-    const wantedIdx = SIZE_ORDER.indexOf(s);
-    if (wantedIdx === -1) return 'md';
-    for (let i = wantedIdx; i >= 0; i--) {
-      const cand = SIZE_ORDER[i];
-      if (this.supportedSizes.includes(cand as LegendSize)) return cand as LegendSize;
-    }
-    return 'md';
-  };
-
-  private readonly _effectiveSize = computed<LegendSize>(() => this.normalizeSize(this.size()));
-
-  protected readonly computedClass = computed(() => {
-    const sz = this._effectiveSize();
-    return ['sdc-legend-elements', `size-${sz}`, this.className()].filter(Boolean).join(' ');
-  });
-
-  protected readonly itemClasses = computed(() =>
-    this._effectiveSize() === 'lg' ? 'justify-center' : 'justify-start'
-  );
-}

package/dvm/loader/index.ts

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

package/dvm/loader/loader.component.html

@@ -1 +0,0 @@
-<div>loader component!</div>

package/dvm/loader/loader.component.ts

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

package/dvm/loader/loader.service.ts

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