@3ddv/software-division-components 1.3.0 → 1.4.0

package/projects/consumer-app/src/app/form/form.component.html

@@ -0,0 +1,196 @@
+<h1>Filters Form</h1>
+
+<sdc-datepicker></sdc-datepicker>
+
+<form [formGroup]="filtersForm" class="filters-form card theme-sdc" (ngSubmit)="onFiltersSubmit()">
+  <sdc-input
+    [styleClass]="radioStyleClasses"
+    name="events"
+    [control]="filtersForm.get('events')"
+    label="Events"
+    labelPosition="left"
+    placeholder="Select Event"
+    type="text" />
+
+  <sdc-input
+    name="status"
+    [control]="filtersForm.get('status')"
+    label="All"
+    labelPosition="left"
+    placeholder="Select Event"
+    type="text" />
+
+  <sdc-input
+    name="amenity"
+    [control]="filtersForm.get('amenity')"
+    label="Premium Space"
+    labelPosition="left"
+    placeholder="Premium Space Name"
+    type="text" />
+
+  <sdc-input
+    name="section"
+    [control]="filtersForm.get('section')"
+    label="Section"
+    labelPosition="left"
+    placeholder="Section"
+    type="text" />
+
+  <sdc-input name="account" [control]="filtersForm.get('account')" label="Account" labelPosition="left" type="text" />
+
+  <sdc-datepicker
+    [minDate]="filtersFormMinDate"
+    name="fromDate"
+    [control]="filtersForm.get('fromDate')"
+    label="From"
+    labelPosition="left"
+    [autoCloseOnSelect]="true"
+    placeholder="dd/mm/aaaa" />
+
+  <sdc-datepicker
+    [minDate]="filtersFormMinDate"
+    name="toDate"
+    [control]="filtersForm.get('toDate')"
+    label="To"
+    labelPosition="left"
+    [autoCloseOnSelect]="true"
+    placeholder="dd/mm/aaaa" />
+
+  <div class="submit">
+    <sdc-button className="submit-button" [styleClass]="['variant-secondary', 'size-circle-md']" type="submit"
+      >O</sdc-button
+    >
+  </div>
+</form>
+
+<br />
+<br />
+<br />
+
+<h1>Variants Examples Form</h1>
+<form [formGroup]="variantsExamplesForm" class="variants-form card theme-sdc" (ngSubmit)="onVariantsExamplesSubmit()">
+  <h2>Inputs</h2>
+  <hr />
+  <sdc-input
+    hint="Enter your full name"
+    name="name"
+    [control]="variantsExamplesForm.get('name')"
+    errorMessage="This is a custom error message"
+    label="Full Name (Always Show Errors)"
+    labelPosition="top"
+    placeholder="Enter your full name"
+    type="text"
+    [isTextarea]="true"
+    [textareaRows]="3"
+    [textareaCols]="30"
+    [textareaResize]="'none'"
+    errorDisplayMode="always" />
+
+  <div class="row-section">
+    <sdc-input
+      hint="Enter only numbers"
+      name="age"
+      [control]="variantsExamplesForm.get('age')"
+      label="Age (Numbers Only)"
+      labelPosition="left"
+      placeholder="Enter your age"
+      type="number"
+      errorDisplayMode="always" />
+
+    <sdc-input
+      hint="We'll never share your email with anyone else"
+      name="email"
+      [control]="variantsExamplesForm.get('email')"
+      label="Email Address (After Submit)"
+      labelPosition="left"
+      placeholder="Enter your email address"
+      type="email"
+      errorDisplayMode="after-submit" />
+  </div>
+
+  <br />
+  <br />
+
+  <h2>Radio Group</h2>
+  <hr />
+  <sdc-radio
+    label="Primary"
+    name="type"
+    value="primary"
+    [control]="variantsExamplesForm.get('type')"
+    [styleClass]="['size-sm']" />
+  <sdc-radio
+    label="Secondary"
+    name="type"
+    value="secondary"
+    [control]="variantsExamplesForm.get('type')"
+    [styleClass]="['size-md']" />
+  <sdc-radio
+    label="Alternative"
+    name="type"
+    value="alternative"
+    [control]="variantsExamplesForm.get('type')"
+    [styleClass]="['size-lg']" />
+  <sdc-radio
+    label="Success"
+    name="type"
+    value="success"
+    [control]="variantsExamplesForm.get('type')"
+    [styleClass]="['size-xl']" />
+
+  <br />
+  <br />
+
+  <h2>Checkbox</h2>
+  <hr />
+  <sdc-checkbox
+    label="Checkbox 1"
+    labelPosition="left"
+    name="checkbox1"
+    value="checkbox1"
+    [control]="variantsExamplesForm.get('checkbox1')"
+    [styleClass]="['variant-primary', 'size-sm']" />
+  <sdc-checkbox
+    label="Checkbox 2"
+    labelPosition="left"
+    name="checkbox2"
+    value="checkbox2"
+    [control]="variantsExamplesForm.get('checkbox2')"
+    [styleClass]="['variant-secondary', 'size-md']" />
+  <sdc-checkbox
+    label="Checkbox 3"
+    labelPosition="left"
+    name="checkbox3"
+    value="checkbox3"
+    [control]="variantsExamplesForm.get('checkbox3')"
+    [styleClass]="['variant-alternative', 'size-lg']" />
+  <sdc-checkbox
+    label="Checkbox 4"
+    labelPosition="left"
+    name="checkbox4"
+    value="checkbox4"
+    [control]="variantsExamplesForm.get('checkbox4')"
+    [styleClass]="['variant-primary', 'size-xl']" />
+
+  <br />
+  <br />
+
+  <h2>Datepicker</h2>
+  <hr />
+  <sdc-datepicker
+    [minDate]="minDate"
+    [maxDate]="maxDate"
+    name="birthday"
+    [control]="variantsExamplesForm.get('birthday')"
+    label="Birthday"
+    labelPosition="top"
+    [autoCloseOnSelect]="true"
+    placeholder="Select your birthday" />
+
+  <br />
+  <br />
+
+  <div class="submit">
+    <sdc-button [styleClass]="['variant-secondary', 'size-md']" type="submit"> Submit </sdc-button>
+  </div>
+</form>

package/projects/consumer-app/src/app/form/form.component.ts

@@ -0,0 +1,101 @@
+import {
+  ButtonComponent,
+  CheckboxComponent,
+  DatePickerComponent,
+  InputComponent,
+  RadioComponent,
+  RadioStyleClasses,
+} from '@3ddv/software-division-components';
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputComponent,
+    ButtonComponent,
+    RadioComponent,
+    CheckboxComponent,
+    DatePickerComponent,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './form.component.html',
+  styleUrl: './form.component.css',
+})
+export class FormComponent {
+  private readonly _formBuilder = inject(FormBuilder);
+
+  // Styles classes
+  public radioStyleClasses: RadioStyleClasses = ['variant-primary', 'size-md'];
+
+  // Filters form
+  public filtersForm = this._formBuilder.group({
+    events: [''],
+    status: [''],
+    amenity: [''],
+    section: [''],
+    account: [''],
+    fromDate: [undefined, Validators.required],
+    toDate: [undefined, Validators.required],
+  });
+
+  public filtersFormMinDate = new Date();
+
+  onFiltersSubmit(): void {
+    console.log(this.filtersForm.get('toDate')?.getRawValue());
+
+    if (this.filtersForm.valid) {
+      console.log('Form submitted successfully:', this.filtersForm.value);
+    } else {
+      console.log('Form is invalid, marking all as touched');
+      this.filtersForm.markAllAsTouched();
+
+      // Log validation errors for each field
+      Object.keys(this.filtersForm.controls).forEach(key => {
+        const control = this.filtersForm.get(key);
+        if (control?.errors) {
+          console.log(`${key} field errors:`, control.errors);
+        }
+      });
+    }
+  }
+
+  // Variants examples form
+  public variantsExamplesForm = this._formBuilder.group({
+    name: ['', [Validators.required, Validators.minLength(2)]],
+    age: ['', [Validators.required]],
+    email: ['', [Validators.required, Validators.email]],
+    type: ['primary', [Validators.required]],
+    checkbox1: [false, [Validators.requiredTrue]],
+    checkbox2: [true, [Validators.requiredTrue]],
+    checkbox3: [true, [Validators.requiredTrue]],
+    checkbox4: [true, [Validators.requiredTrue]],
+    birthday: [undefined, Validators.required],
+  });
+
+  /** The minimum date */
+  public minDate = new Date(2025, 8, 23);
+
+  /** The maximum date */
+  public maxDate = new Date(2025, 8, 27);
+
+  onVariantsExamplesSubmit(): void {
+    if (this.variantsExamplesForm.valid) {
+      console.log('Form submitted successfully:', this.variantsExamplesForm.value);
+    } else {
+      console.log('Form is invalid, marking all as touched');
+      this.variantsExamplesForm.markAllAsTouched();
+
+      // Log validation errors for each field
+      Object.keys(this.variantsExamplesForm.controls).forEach(key => {
+        const control = this.variantsExamplesForm.get(key);
+        if (control?.errors) {
+          console.log(`${key} field errors:`, control.errors);
+        }
+      });
+    }
+  }
+}

package/projects/consumer-app/src/app/table/action-column.component.ts

@@ -0,0 +1,46 @@
+import { ButtonComponent } from '@3ddv/software-division-components';
+import { Component, input, output } from '@angular/core';
+
+@Component({
+  selector: 'app-action-column',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: `
+    <sdc-button
+      [theme]="theme()"
+      [styleClass]="['variant-secondary', 'size-sm']"
+      [className]="className()"
+      (onClick)="onActionClick.emit($event)"
+    >
+      {{ buttonText() }}
+    </sdc-button>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+})
+export class ActionColumnComponent {
+  /**
+   * The theme to apply to the button component
+   */
+  public readonly theme = input<'theme-sdc'>('theme-sdc');
+
+  /**
+   * Additional CSS classes to apply to the button
+   */
+  public readonly className = input<string>('');
+
+  /**
+   * The text to display on the button
+   */
+  public readonly buttonText = input<string>('Details');
+
+  /**
+   * Event emitted when the action button is clicked
+   */
+  public readonly onActionClick = output<MouseEvent>();
+}

package/projects/consumer-app/src/app/table/table.component.css

@@ -0,0 +1,3 @@
+/* ::ng-deep:root .theme-sdc.sdc-button.status-button {
+  padding: 5rem;
+} */

package/projects/consumer-app/src/app/table/table.component.html

@@ -0,0 +1,17 @@
+<main>
+  <div>
+    <sdc-table
+      [maxVisiblePages]="maxVisiblePages"
+      [showFirstLastButtons]="showFirstLastButtons"
+      [data]="data"
+      [columns]="columns"
+      [showSelection]="showSelection"
+      [enableSort]="enableSort"
+      [theme]="currentTheme"
+      (sortingChange)="onSortingChange($event)"
+      (selectionChange)="onSelectionChange($event)"
+      (exportClick)="exportTransactions($event)"
+      [exportButtonText]="'Export Transactions'"
+      [pageSize]="5"></sdc-table>
+  </div>
+</main>

package/projects/consumer-app/src/app/table/table.component.ts

@@ -0,0 +1,277 @@
+import {
+  ColumnDef,
+  flexRenderComponent,
+  RowSelectionState,
+  TableComponent as SDCTableComponent,
+  SortingState,
+} from '@3ddv/software-division-components';
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActionColumnComponent } from './action-column.component';
+
+type Transaction = {
+  id: string;
+  accountNumber: string;
+  accountName: string;
+  date: string;
+  event: string;
+  premiumSpace: string;
+  section: string;
+  balance: string;
+  status: 'Completed' | 'Cancelled';
+};
+
+@Component({
+  selector: 'app-table',
+  standalone: true,
+  imports: [CommonModule, SDCTableComponent],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.css',
+})
+export class TableComponent {
+  // Table configuration properties
+  showSelection = true;
+  enableSort = ['accountNumber', 'date', 'status'];
+  enableHide = ['event', 'premiumSpace'];
+  maxVisiblePages = 5;
+  showFirstLastButtons = true;
+  currentTheme = 'theme-sdc' as const;
+
+  data: Transaction[] = [
+    {
+      id: '1',
+      accountNumber: 'ACC001',
+      accountName: 'John Doe',
+      date: 'May 28, 2025',
+      event: 'Mariners vs. Astros / 26G0921',
+      premiumSpace: 'Premium Space A',
+      section: 'Section 101',
+      balance: '$ 1710',
+      status: 'Completed',
+    },
+    {
+      id: '2',
+      accountNumber: 'ACC002',
+      accountName: 'Jane Smith',
+      date: 'May 28, 2025',
+      event: 'Mariners vs. Astros / 26G0921',
+      premiumSpace: 'No',
+      section: 'Section 102',
+      balance: '$ 1710',
+      status: 'Cancelled',
+    },
+    {
+      id: '3',
+      accountNumber: 'ACC003',
+      accountName: 'Bob Johnson',
+      date: 'May 28, 2025',
+      event: 'Mariners vs. Astros / 26G0921',
+      premiumSpace: 'Premium Space B',
+      section: 'Section 103',
+      balance: '$ 1710',
+      status: 'Completed',
+    },
+    {
+      id: '4',
+      accountNumber: 'ACC004',
+      accountName: 'Alice Brown',
+      date: 'May 29, 2025',
+      event: 'Mariners vs. Rangers / 26G0922',
+      premiumSpace: 'Premium Space C',
+      section: 'Section 201',
+      balance: '$ 1850',
+      status: 'Completed',
+    },
+    {
+      id: '5',
+      accountNumber: 'ACC005',
+      accountName: 'Charlie Wilson',
+      date: 'May 29, 2025',
+      event: 'Mariners vs. Rangers / 26G0922',
+      premiumSpace: 'No',
+      section: 'Section 202',
+      balance: '$ 1850',
+      status: 'Cancelled',
+    },
+    {
+      id: '6',
+      accountNumber: 'ACC006',
+      accountName: 'Diana Davis',
+      date: 'May 30, 2025',
+      event: 'Mariners vs. Angels / 26G0923',
+      premiumSpace: 'Premium Space D',
+      section: 'Section 301',
+      balance: '$ 1950',
+      status: 'Completed',
+    },
+    {
+      id: '7',
+      accountNumber: 'ACC007',
+      accountName: 'Edward Miller',
+      date: 'May 30, 2025',
+      event: 'Mariners vs. Angels / 26G0923',
+      premiumSpace: 'Premium Space E',
+      section: 'Section 302',
+      balance: '$ 1950',
+      status: 'Completed',
+    },
+    {
+      id: '8',
+      accountNumber: 'ACC008',
+      accountName: 'Fiona Garcia',
+      date: 'May 31, 2025',
+      event: 'Mariners vs. Athletics / 26G0924',
+      premiumSpace: 'No',
+      section: 'Section 401',
+      balance: '$ 1650',
+      status: 'Cancelled',
+    },
+  ];
+
+  columns: ColumnDef<Transaction>[] = [
+    {
+      accessorKey: 'status',
+      id: 'status',
+      header: 'Status',
+      cell: info => {
+        const status = info.getValue<string>();
+        const statusClass = status === 'Completed' ? 'text-green-600' : 'text-red-600';
+        return `<span class="capitalize ${statusClass}">${status}</span>`;
+      },
+    },
+    {
+      accessorKey: 'accountNumber',
+      id: 'accountNumber',
+      header: 'Account #',
+      cell: info => info.getValue<string>(),
+    },
+    {
+      accessorKey: 'date',
+      id: 'date',
+      header: 'Date',
+      cell: info => info.getValue<string>(),
+    },
+    {
+      accessorKey: 'event',
+      id: 'event',
+      header: 'Event',
+      cell: info => info.getValue<string>(),
+    },
+    {
+      accessorKey: 'premiumSpace',
+      id: 'premiumSpace',
+      header: 'Premium Space',
+      cell: info => info.getValue<string>(),
+    },
+    {
+      accessorKey: 'section',
+      id: 'section',
+      header: 'Section',
+      cell: info => info.getValue<string>(),
+    },
+    {
+      accessorKey: 'balance',
+      id: 'balance',
+      header: 'Balance',
+      cell: info => info.getValue<string>(),
+    },
+    // Action column
+    {
+      id: 'action',
+      header: '',
+      cell: () =>
+        flexRenderComponent(ActionColumnComponent, {
+          inputs: {
+            buttonText: 'Details',
+            theme: 'theme-sdc',
+          },
+          outputs: {
+            onActionClick: (event: MouseEvent) => this.handleActionClick(event),
+          },
+        }),
+    },
+  ];
+
+  // Event handlers for table interactions
+  onSortingChange(sortingState: SortingState) {
+    console.log('Sort state changed:', sortingState);
+    // Handle sorting state change - you can implement server-side sorting here
+  }
+
+  onSelectionChange(selectionState: RowSelectionState) {
+    console.log('Selection state changed:', selectionState);
+    // Handle selection state change - you can implement bulk actions here
+  }
+
+  // Action column click handler
+  handleActionClick(event: MouseEvent) {
+    console.log('Action button clicked:', event);
+    // Here you would typically navigate to a details page or open a modal
+    alert('Details button clicked! This would open transaction details.');
+  }
+
+  // Export functionality
+  exportTransactions(exportData: { selectedRows: Transaction[]; allRows: Transaction[] }) {
+    console.log('Exporting transactions:', exportData);
+
+    if (exportData.selectedRows.length > 0) {
+      alert(`Exporting ${exportData.selectedRows.length} selected transactions!`);
+      console.log('Selected rows to export:', exportData.selectedRows);
+    } else {
+      alert('No rows selected. Exporting all transactions.');
+      console.log('All rows to export:', exportData.allRows);
+    }
+
+    // Here you would typically call an API or create a download
+    // You can use exportData.selectedRows or exportData.allRows as needed
+  }
+
+  // Method to add a new transaction (for testing)
+  addTestTransaction() {
+    const newId = (this.data.length + 1).toString();
+    const newTransaction: Transaction = {
+      id: newId,
+      accountNumber: `ACC${newId.padStart(3, '0')}`,
+      accountName: `Test User ${newId}`,
+      date: new Date().toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }),
+      event: 'Test Event / TEST001',
+      premiumSpace: Math.random() > 0.5 ? 'Premium Space Test' : 'No',
+      section: `Section ${100 + Math.floor(Math.random() * 10)}`,
+      balance: `$ ${Math.floor(Math.random() * 2000) + 1000}`,
+      status: Math.random() > 0.3 ? 'Completed' : 'Cancelled',
+    };
+
+    this.data = [...this.data, newTransaction];
+    console.log('Added new transaction:', newTransaction);
+  }
+
+  // Method to log current table state (for debugging)
+  logTableState() {
+    console.log('Current table state:', {
+      dataLength: this.data.length,
+      columns: this.columns.length,
+      showSelection: this.showSelection,
+      enableSort: this.enableSort,
+      enableHide: this.enableHide,
+      maxVisiblePages: this.maxVisiblePages,
+      showFirstLastButtons: this.showFirstLastButtons,
+      currentTheme: this.currentTheme,
+    });
+  }
+
+  // Method to reset table to default state
+  resetTable() {
+    this.data = this.data.slice(0, 3); // Keep only first 3 transactions
+    this.showSelection = true;
+    this.enableSort = ['accountNumber', 'date', 'status'];
+    this.enableHide = ['event', 'premiumSpace'];
+    this.maxVisiblePages = 5;
+    this.showFirstLastButtons = true;
+    this.currentTheme = 'theme-sdc';
+    console.log('Table reset to default state');
+  }
+}

package/projects/consumer-app/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ConsumerApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/consumer-app/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

package/projects/consumer-app/src/styles.css

@@ -0,0 +1,35 @@
+/* Import library styles */
+@import '@3ddv/software-division-components/styles';
+
+/**
+ * The styles examples here are written from less specific to more specific (from top to bottom).
+ * 
+ * The styles in the library are written to comply with the design system of our products.
+ * It will only be needed an override when applying theme changes for each club.
+ * 
+ * Even though, we support specific components overrides for more fine grained control,
+ * and the more specific per component selector for special cases that need a custom component style.
+ * 
+*/
+
+/* SDC Theme Customizations - USEFUL TO APPLY STYLES PER CLUB / CLIENT */
+:root .theme-sdc {
+  --color-primary: 120, 100%, 25%; /* Green */
+}
+
+/*
+* Component type overrides - NOT RECOMMENDED
+* Apply to all the buttons except the ones that receives a styleClass variant
+* that modify the `--sdc-button-background` variable directly
+*/
+:root .theme-sdc.sdc-button {
+  --sdc-button-background: 60, 100%, 50%; /* Yellow */
+}
+
+/*
+* Component specific overrides with more specific selector - RECOMMENDED
+* Apply to all the buttons inlcuding the ones that receives a styleClass variant
+*/
+:root .theme-sdc.sdc-button.submit-button {
+  --sdc-button-background: 0, 100%, 50%; /* Red */
+}