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

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

@@ -1,281 +0,0 @@
-.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/dvm/cart/seat-list.component.html

@@ -1,85 +0,0 @@
-<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/dvm/cart/seat-list.component.ts

@@ -1,76 +0,0 @@
-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})`;
-  }
-}