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

package/src/dvm/cart/cart.component.css

@@ -0,0 +1,103 @@
+.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/src/dvm/cart/cart.component.html

@@ -0,0 +1,31 @@
+<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/src/dvm/cart/cart.component.ts

@@ -0,0 +1,49 @@
+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/src/dvm/cart/cart.stories.ts

@@ -0,0 +1,370 @@
+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/src/dvm/cart/cart.types.ts

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

package/src/dvm/cart/index.ts

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

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

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './cart.component';
+export * from './seat-list.component';
+export * from './cart.types';
+