@3ddv/software-division-components 1.4.2 → 1.4.7

package/projects/software-division-components/src/dvm/cart/cart.component.css

@@ -1,103 +0,0 @@
-.sdc-cart {
-  /* Color Variables */
-  --primary-bg: #2a2d3a;
-  --card-bg: #ffffff;
-  --card-header-bg: #9ca3af;
-  --text-primary: #ffffff;
-  --text-secondary: #6b7280;
-  --text-dark: #1f2937;
-  --accent-orange: #f97316;
-  --accent-blue: #2563eb;
-  --accent-blue-hover: #1d4ed8;
-  --border-color: #e5e7eb;
-  --icon-bg: #f5f5f5;
-
-  /* Spacing Variables */
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-
-  /* Border Radius */
-  --border-radius-sm: 0.375rem;
-  --border-radius-md: 0.5rem;
-  --border-radius-lg: 1rem;
-  --border-radius-xl: 1.5rem;
-
-  /* Font Sizes */
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-}
-
-/* Cart Component */
-.cart {
-  max-width: 500px;
-  margin: 0 auto;
-}
-
-.cart__title {
-  color: var(--text-primary);
-  font-size: var(--font-size-2xl);
-  font-weight: 700;
-  margin-bottom: var(--spacing-lg);
-  text-align: left;
-}
-
-.cart__container {
-  background-color: var(--card-bg);
-  border-radius: var(--border-radius-xl);
-  overflow: hidden;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-}
-
-/* Cart Header */
-.cart__header {
-  background-color: var(--card-header-bg);
-  padding: var(--spacing-md) var(--spacing-lg);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.cart__header-title {
-  color: var(--text-primary);
-  font-size: var(--font-size-lg);
-  font-weight: 600;
-}
-
-.cart__select-all {
-  background-color: var(--text-primary);
-  color: var(--text-secondary);
-  border: none;
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--border-radius-lg);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.cart__select-all:hover {
-  background-color: #f3f4f6;
-  transform: translateY(-1px);
-}
-
-/* Ticket List Container */
-.cart__tickets {
-  padding: var(--spacing-md);
-}
-
-/* Responsive Design */
-@media (max-width: 640px) {
-  body {
-    padding: var(--spacing-md);
-  }
-
-  .cart__title {
-    font-size: var(--font-size-xl);
-  }
-}

package/projects/software-division-components/src/dvm/cart/cart.component.html

@@ -1,31 +0,0 @@
-<div class="sdc-cart">
-  <div class="cart">
-    <div class="cart__container">
-      <div class="cart__header">
-        <h2 class="cart__header-title">{{ headerTitle() }}</h2>
-        <button class="cart__select-all" (click)="onSelectAll()">{{ selectAllText() }}</button>
-      </div>
-
-      <div class="cart__tickets">
-        @if (groups().length > 0) {
-          <sdc-seat-list
-            [groups]="groups()"
-            [actionButtonText]="relocateButtonText()"
-            (mapPinClick)="onMapPinClick($event)"
-            (eyeClick)="onEyeClick($event)"
-            (removeClick)="onRemoveClick($event)"
-            (groupToggle)="onGroupToggle($event)">
-          </sdc-seat-list>
-        } @else {
-          <sdc-seat-list
-            [seats]="items()"
-            [actionButtonText]="relocateButtonText()"
-            (mapPinClick)="onMapPinClick($event)"
-            (eyeClick)="onEyeClick($event)"
-            (actionClick)="onRelocateClick($event)">
-          </sdc-seat-list>
-        }
-      </div>
-    </div>
-  </div>
-</div>

package/projects/software-division-components/src/dvm/cart/cart.component.ts

@@ -1,49 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { SeatListComponent, SeatGroup } from './seat-list.component';
-import { CartItem } from './cart.types';
-
-@Component({
-  imports: [SeatListComponent],
-  selector: 'sdc-cart',
-  standalone: true,
-  templateUrl: './cart.component.html',
-  styleUrls: ['./cart.component.css'],
-})
-export class CartComponent {
-  headerTitle = input<string>('Your Current Tickets');
-  selectAllText = input<string>('Select All');
-  relocateButtonText = input<string>('Relocate');
-  items = input<CartItem[]>([]);
-  groups = input<SeatGroup[]>([]);
-
-  selectAll = output<void>();
-  mapPinClick = output<CartItem>();
-  eyeClick = output<CartItem>();
-  relocateClick = output<CartItem>();
-  removeClick = output<CartItem>();
-  groupToggle = output<{ groupId: string | number; expanded: boolean }>();
-
-  onSelectAll(): void {
-    this.selectAll.emit();
-  }
-
-  onMapPinClick(item: CartItem): void {
-    this.mapPinClick.emit(item);
-  }
-
-  onEyeClick(item: CartItem): void {
-    this.eyeClick.emit(item);
-  }
-
-  onRelocateClick(item: CartItem): void {
-    this.relocateClick.emit(item);
-  }
-
-  onRemoveClick(item: CartItem): void {
-    this.removeClick.emit(item);
-  }
-
-  onGroupToggle(event: { groupId: string | number; expanded: boolean }): void {
-    this.groupToggle.emit(event);
-  }
-}

package/projects/software-division-components/src/dvm/cart/cart.stories.ts

@@ -1,370 +0,0 @@
-import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular';
-import { CartComponent } from './cart.component';
-import { CartItem } from './cart.types';
-import { SeatGroup } from './seat-list.component';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronDown, lucideChevronUp, lucideEye, lucideMapPin } from '@ng-icons/lucide';
-
-const meta: Meta<CartComponent> = {
-  title: 'Dvm/Cart',
-  component: CartComponent,
-  id: 'Cart',
-  decorators: [
-    applicationConfig({
-      providers: [
-        provideIcons({
-          lucideMapPin,
-          lucideEye,
-          lucideChevronDown,
-          lucideChevronUp,
-        }),
-      ],
-    }),
-  ],
-  argTypes: {
-    headerTitle: {
-      control: 'text',
-      description: 'Title displayed in the cart header',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    selectAllText: {
-      control: 'text',
-      description: 'Text displayed on the select all button',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    relocateButtonText: {
-      control: 'text',
-      description: 'Text displayed on the relocate button',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    items: {
-      control: 'object',
-      description: 'Array of cart items 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[]' },
-      },
-    },
-    selectAll: {
-      action: 'selectAll',
-      description: 'Event emitted when select all button is clicked',
-      table: {
-        type: { summary: 'EventEmitter<void>' },
-      },
-    },
-    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>' },
-      },
-    },
-    relocateClick: {
-      action: 'relocateClick',
-      description: 'Event emitted when relocate button is clicked',
-      table: {
-        type: { summary: 'EventEmitter<CartItem>' },
-      },
-    },
-    removeClick: {
-      action: 'removeClick',
-      description: 'Event emitted when remove button is clicked (grouped mode)',
-      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<CartComponent>;
-
-const sampleItems: CartItem[] = [
-  {
-    id: 1,
-    section: 'A',
-    row: '12',
-    seat: '5',
-    price: 75.0,
-  },
-  {
-    id: 2,
-    section: 'B',
-    row: '8',
-    seat: '15',
-    price: 85.0,
-  },
-  {
-    id: 3,
-    section: 'C',
-    row: '20',
-    seat: '3',
-    price: 65.0,
-  },
-];
-
-export const Empty: Story = {
-  args: {
-    items: [],
-  },
-};
-
-export const SingleItem: Story = {
-  args: {
-    items: [
-      {
-        id: 1,
-        section: 'A',
-        row: '12',
-        seat: '5',
-        price: 75.0,
-      },
-    ],
-  },
-};
-
-export const MultipleItems: Story = {
-  args: {
-    items: sampleItems,
-  },
-};
-
-export const CustomLabels: Story = {
-  args: {
-    headerTitle: 'My Tickets',
-    selectAllText: 'Select All Tickets',
-    relocateButtonText: 'Change Seats',
-    items: sampleItems,
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    items: sampleItems,
-  },
-  render: args => ({
-    props: {
-      ...args,
-      selectAll: () => console.log('Select all clicked'),
-      mapPinClick: (item: CartItem) => console.log('Map pin clicked for:', item),
-      eyeClick: (item: CartItem) => console.log('Eye clicked for:', item),
-      relocateClick: (item: CartItem) => console.log('Relocate clicked for:', item),
-    },
-    template: `
-      <sdc-cart
-        [items]="items"
-        (selectAll)="selectAll()"
-        (mapPinClick)="mapPinClick($event)"
-        (eyeClick)="eyeClick($event)"
-        (relocateClick)="relocateClick($event)">
-      </sdc-cart>
-    `,
-  }),
-};
-
-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 WithGroups: Story = {
-  args: {
-    headerTitle: 'Your New Tickets',
-    selectAllText: 'Remove All',
-    groups: sampleGroups,
-  },
-};
-
-export const WithGroupsAllExpanded: Story = {
-  args: {
-    headerTitle: 'Your New Tickets',
-    selectAllText: 'Remove All',
-    groups: sampleGroups.map(group => ({ ...group, expanded: true })),
-  },
-};
-
-export const WithGroupsAndSeats: Story = {
-  args: {
-    headerTitle: 'Your New Tickets',
-    selectAllText: 'Remove All',
-    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 WithGroupsActions: Story = {
-  args: {
-    headerTitle: 'Your New Tickets',
-    selectAllText: 'Remove All',
-    groups: sampleGroups,
-  },
-  render: args => ({
-    props: {
-      ...args,
-      selectAll: () => console.log('Select all clicked'),
-      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-cart
-        [headerTitle]="headerTitle"
-        [selectAllText]="selectAllText"
-        [relocateButtonText]="relocateButtonText"
-        [groups]="groups"
-        (selectAll)="selectAll()"
-        (mapPinClick)="mapPinClick($event)"
-        (eyeClick)="eyeClick($event)"
-        (removeClick)="removeClick($event)"
-        (groupToggle)="groupToggle($event)">
-      </sdc-cart>
-    `,
-  }),
-};

package/projects/software-division-components/src/dvm/cart/cart.types.ts

@@ -1,8 +0,0 @@
-export interface CartItem {
-  id: string | number;
-  section: string;
-  row: string;
-  seat: string;
-  price: number;
-}
-

package/projects/software-division-components/src/dvm/cart/index.ts

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