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

package/src/dvm/cart/seat-list.component.css

@@ -0,0 +1,281 @@
+.sdc-seat-list {
+  /* Color Variables - Customizable by consumers */
+  --sdc-seat-list-primary-bg: #2a2d3a;
+  --sdc-seat-list-card-bg: #ffffff;
+  --sdc-seat-list-text-primary: #ffffff;
+  --sdc-seat-list-text-secondary: #6b7280;
+  --sdc-seat-list-text-dark: #1f2937;
+  --sdc-seat-list-accent-orange: #f97316;
+  --sdc-seat-list-accent-green: #10b981;
+  --sdc-seat-list-accent-blue: #2563eb;
+  --sdc-seat-list-accent-blue-hover: #1d4ed8;
+  --sdc-seat-list-border-color: #e5e7eb;
+  --sdc-seat-list-icon-bg: #f5f5f5;
+  --sdc-seat-list-ticket-bg: #f9fafb;
+  --sdc-seat-list-ticket-bg-hover: #f3f4f6;
+  --sdc-seat-list-group-header-bg: #e4eaef;
+  --sdc-seat-list-group-header-hover: #f9fafb;
+
+  /* Spacing Variables - Customizable by consumers */
+  --sdc-seat-list-spacing-xs: 0.25rem;
+  --sdc-seat-list-spacing-sm: 0.5rem;
+  --sdc-seat-list-spacing-md: 1rem;
+  --sdc-seat-list-spacing-lg: 1.5rem;
+  --sdc-seat-list-spacing-xl: 2rem;
+
+  /* Border Radius - Customizable by consumers */
+  --sdc-seat-list-border-radius-sm: 0.375rem;
+  --sdc-seat-list-border-radius-md: 0.5rem;
+  --sdc-seat-list-border-radius-lg: 0.75rem;
+  --sdc-seat-list-border-radius-xl: 1.5rem;
+
+  /* Font Sizes - Customizable by consumers */
+  --sdc-seat-list-font-size-sm: 0.875rem;
+  --sdc-seat-list-font-size-base: 1rem;
+  --sdc-seat-list-font-size-lg: 1.125rem;
+  --sdc-seat-list-font-size-xl: 1.25rem;
+
+  /* Internal aliases for cleaner code */
+  --card-bg: var(--sdc-seat-list-card-bg);
+  --text-primary: var(--sdc-seat-list-text-primary);
+  --text-secondary: var(--sdc-seat-list-text-secondary);
+  --text-dark: var(--sdc-seat-list-text-dark);
+  --accent-orange: var(--sdc-seat-list-accent-orange);
+  --accent-green: var(--sdc-seat-list-accent-green);
+  --accent-blue: var(--sdc-seat-list-accent-blue);
+  --accent-blue-hover: var(--sdc-seat-list-accent-blue-hover);
+  --icon-bg: var(--sdc-seat-list-icon-bg);
+  --spacing-xs: var(--sdc-seat-list-spacing-xs);
+  --spacing-sm: var(--sdc-seat-list-spacing-sm);
+  --spacing-md: var(--sdc-seat-list-spacing-md);
+  --spacing-lg: var(--sdc-seat-list-spacing-lg);
+  --spacing-xl: var(--sdc-seat-list-spacing-xl);
+  --border-radius-sm: var(--sdc-seat-list-border-radius-sm);
+  --border-radius-md: var(--sdc-seat-list-border-radius-md);
+  --border-radius-lg: var(--sdc-seat-list-border-radius-lg);
+  --border-radius-xl: var(--sdc-seat-list-border-radius-xl);
+  --font-size-sm: var(--sdc-seat-list-font-size-sm);
+  --font-size-base: var(--sdc-seat-list-font-size-base);
+  --font-size-lg: var(--sdc-seat-list-font-size-lg);
+  --font-size-xl: var(--sdc-seat-list-font-size-xl);
+}
+
+.seat-list {
+  width: 100%;
+}
+
+.seat-list--simple {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.seat-list--simple .ticket {
+  margin-bottom: var(--spacing-sm);
+}
+
+.seat-list--simple .ticket:last-child {
+  margin-bottom: 0;
+}
+
+.seat-list--grouped {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.seat-group {
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+  background-color: var(--card-bg);
+  margin-bottom: var(--spacing-sm);
+}
+
+.seat-group:last-child {
+  margin-bottom: 0;
+}
+
+.seat-group__header {
+  width: 100%;
+  background-color: var(--sdc-seat-list-group-header-bg, transparent);
+  border: none;
+  padding: var(--spacing-md) var(--spacing-lg);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.seat-group__header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.seat-group__title {
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.seat-group__count {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.seat-group__chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--text-secondary);
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+  display: inline-block;
+}
+
+.seat-group__content {
+  max-height: 0;
+  overflow: hidden;
+  padding: 0 var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  transition:
+    max-height 0.2s ease-out,
+    padding 0.2s ease-out;
+}
+
+.seat-group__content.expanded {
+  max-height: 5000px;
+  padding: var(--spacing-md);
+  opacity: 1;
+  transition:
+    max-height 0.2s ease-in,
+    padding 0.2s ease-in;
+}
+
+.seat-group__content .ticket {
+  margin-bottom: 0;
+}
+
+.ticket {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-md);
+  background-color: var(--sdc-seat-list-ticket-bg, #f9fafb);
+  border-radius: var(--border-radius-md);
+  transition: all 0.2s ease;
+}
+
+.ticket:hover {
+  background-color: var(--sdc-seat-list-ticket-bg-hover, #f3f4f6);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.ticket__indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: var(--spacing-md);
+  flex-shrink: 0;
+}
+
+.ticket__info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.ticket__section {
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.ticket__price {
+  color: var(--accent-blue);
+  font-weight: 600;
+  font-size: var(--font-size-base);
+  margin: 0 var(--spacing-md);
+}
+
+.ticket__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}
+
+.ticket__actions-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.ticket__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--icon-bg);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-xs);
+}
+
+.ticket__icon-box .ticket__icon {
+  width: 16px;
+  height: 16px;
+  color: var(--accent-blue);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.ticket__icon-box .ticket__icon:hover {
+  color: var(--accent-blue-hover);
+}
+
+.ticket__action-btn {
+  background-color: var(--accent-blue);
+  color: var(--text-primary);
+  border: none;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius-lg);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.ticket__action-btn:hover {
+  background-color: var(--accent-blue-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+@media (max-width: 640px) {
+  .ticket {
+    padding: var(--spacing-sm);
+  }
+
+  .ticket__info {
+    font-size: 0.75rem;
+    gap: var(--spacing-xs);
+  }
+
+  .ticket__price {
+    font-size: var(--font-size-sm);
+    margin: 0 var(--spacing-sm);
+  }
+
+  .seat-group__header {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .seat-group__content {
+    padding: var(--spacing-sm);
+  }
+}

package/src/dvm/cart/seat-list.component.html

@@ -0,0 +1,85 @@
+<div class="sdc-seat-list">
+  @if (isGroupedMode()) {
+    <div class="seat-list seat-list--grouped">
+      @for (group of groups(); track group.id) {
+        <div class="seat-group">
+          <button class="seat-group__header" (click)="toggleGroup(group)">
+            <div class="seat-group__header-content">
+              <span class="seat-group__title">{{ group.title }}</span>
+              <span class="seat-group__count">{{ getGroupSeatCount(group) }}</span>
+            </div>
+            <ng-icon
+              [name]="isGroupExpanded(group) ? 'lucideChevronUp' : 'lucideChevronDown'"
+              size="16"
+              class="seat-group__chevron" />
+          </button>
+          <div class="seat-group__content" [class.expanded]="isGroupExpanded(group)">
+            @for (item of group.seats; track item.id) {
+              <div class="ticket">
+                <div class="ticket__indicator" [style.background-color]="getGroupIndicatorColor(group)"></div>
+                <div class="ticket__info">
+                  <span
+                    >Section <span class="ticket__section">{{ item.section }}</span></span
+                  >
+                  <span
+                    >Row <span class="ticket__section">{{ item.row }}</span></span
+                  >
+                  <span
+                    >Seat <span class="ticket__section">{{ item.seat }}</span></span
+                  >
+                </div>
+                <div class="ticket__actions">
+                  <div class="ticket__actions-left">
+                    <div class="ticket__price">${{ item.price }}</div>
+                    <div class="ticket__icon-box">
+                      <ng-icon hlm name="lucideMapPin" size="base" class="ticket__icon" (click)="onMapPinClick(item)" />
+                    </div>
+                    <div class="ticket__icon-box">
+                      <ng-icon hlm name="lucideEye" size="base" class="ticket__icon" (click)="onEyeClick(item)" />
+                    </div>
+                  </div>
+                  <button class="ticket__action-btn" (click)="onRemoveClick(item)">
+                    {{ getGroupActionButtonText(group) }}
+                  </button>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  } @else {
+    <div class="seat-list seat-list--simple">
+      @for (item of seats(); track item.id) {
+        <div class="ticket">
+          <div class="ticket__indicator" [style.background-color]="indicatorColor()"></div>
+          <div class="ticket__info">
+            <span
+              >Section <span class="ticket__section">{{ item.section }}</span></span
+            >
+            <span
+              >Row <span class="ticket__section">{{ item.row }}</span></span
+            >
+            <span
+              >Seat <span class="ticket__section">{{ item.seat }}</span></span
+            >
+          </div>
+          <div class="ticket__actions">
+            <div class="ticket__actions-left">
+              <div class="ticket__price">${{ item.price }}</div>
+              <div class="ticket__icon-box">
+                <ng-icon hlm name="lucideMapPin" size="base" class="ticket__icon" (click)="onMapPinClick(item)" />
+              </div>
+              <div class="ticket__icon-box">
+                <ng-icon hlm name="lucideEye" size="base" class="ticket__icon" (click)="onEyeClick(item)" />
+              </div>
+            </div>
+            <button class="ticket__action-btn" (click)="onActionClick(item)">
+              {{ actionButtonText() }}
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  }
+</div>

package/src/dvm/cart/seat-list.component.ts

@@ -0,0 +1,76 @@
+import { Component, input, output, computed, ViewEncapsulation } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
+import { CartItem } from './cart.types';
+
+export interface SeatGroup {
+  id: string | number;
+  title: string;
+  count?: string;
+  seats: CartItem[];
+  expanded?: boolean;
+  indicatorColor?: string;
+  actionButtonText?: string;
+}
+
+@Component({
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp })],
+  selector: 'sdc-seat-list',
+  standalone: true,
+  templateUrl: './seat-list.component.html',
+  styleUrls: ['./seat-list.component.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SeatListComponent {
+  seats = input<CartItem[]>([]);
+  groups = input<SeatGroup[]>([]);
+  actionButtonText = input<string>('Relocate');
+  indicatorColor = input<string>('#f97316');
+
+  mapPinClick = output<CartItem>();
+  eyeClick = output<CartItem>();
+  actionClick = output<CartItem>();
+  groupToggle = output<{ groupId: string | number; expanded: boolean }>();
+  removeClick = output<CartItem>();
+
+  isGroupedMode = computed(() => this.groups().length > 0);
+
+  onMapPinClick(item: CartItem): void {
+    this.mapPinClick.emit(item);
+  }
+
+  onEyeClick(item: CartItem): void {
+    this.eyeClick.emit(item);
+  }
+
+  onActionClick(item: CartItem): void {
+    this.actionClick.emit(item);
+  }
+
+  onRemoveClick(item: CartItem): void {
+    this.removeClick.emit(item);
+  }
+
+  isGroupExpanded(group: SeatGroup): boolean {
+    return group.expanded !== false;
+  }
+
+  toggleGroup(group: SeatGroup): void {
+    const expanded = !this.isGroupExpanded(group);
+    group.expanded = expanded;
+    this.groupToggle.emit({ groupId: group.id, expanded });
+  }
+
+  getGroupIndicatorColor(group: SeatGroup): string {
+    return group.indicatorColor || this.indicatorColor();
+  }
+
+  getGroupActionButtonText(group: SeatGroup): string {
+    return group.actionButtonText || this.actionButtonText();
+  }
+
+  getGroupSeatCount(group: SeatGroup): string {
+    return `(${group.seats.length})`;
+  }
+}