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

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

@@ -1,277 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<!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

@@ -1,6 +0,0 @@
-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

@@ -1,35 +0,0 @@
-/* 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 */
-}

package/projects/consumer-app/tsconfig.app.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/app",
-    "types": []
-  },
-  "files": ["src/main.ts"],
-  "include": ["src/**/*.d.ts"]
-}

package/projects/consumer-app/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}

package/projects/software-division-components/.claude/settings.local.json

@@ -1,9 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(pnpm run build:lib:*)",
-      "Bash(pnpm run build)",
-      "Bash(pnpm install)"
-    ]
-  }
-}

package/projects/software-division-components/.postcssrc.json

@@ -1,5 +0,0 @@
-{
-  "plugins": {
-    "@tailwindcss/postcss": {}
-  }
-}

package/projects/software-division-components/.storybook/main.ts

@@ -1,28 +0,0 @@
-import { StorybookConfig } from '@storybook/angular';
-
-// Configuration taken from https://dev.to/brandontroberts/using-storybook-with-angular-and-vite-48ga
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.ts'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-designs',
-    '@storybook/addon-a11y',
-    '@storybook/addon-docs',
-    '@storybook/addon-jsdoc-to-mdx',
-    '@storybook/addon-themes',
-  ],
-  framework: {
-    name: '@storybook/angular',
-    options: {},
-  },
-  staticDirs: ['../public'],
-  core: {
-    builder: {
-      name: '@storybook/builder-webpack5',
-      options: {},
-    },
-  },
-};
-export default config;

package/projects/software-division-components/.storybook/manager-head.html

@@ -1 +0,0 @@
-<link rel="icon" type="image/jpg" href="/3ddv-logo.jpg" />

package/projects/software-division-components/.storybook/preview.ts

@@ -1,30 +0,0 @@
-import { withThemeByClassName } from '@storybook/addon-themes';
-import { applicationConfig, type Preview } from '@storybook/angular';
-import { provideSdc } from '../src/shared';
-
-const preview: Preview = {
-  tags: ['autodocs'],
-  decorators: [
-    applicationConfig({
-      providers: [provideSdc()],
-    }),
-    withThemeByClassName({
-      themes: {
-        light: 'light-theme',
-        dark: 'dark-theme',
-      },
-      defaultTheme: 'light',
-    }),
-  ],
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-// setCompodocJson(docJson);
-export default preview;

package/projects/software-division-components/.storybook/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true
-  },
-  "angularCompilerOptions": {
-    "strictTemplates": true
-  },
-  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
-  "include": ["../src/**/*.stories.*", "../src/**/*.css", "./preview.ts"],
-  "files": ["./typings.d.ts"]
-}

package/projects/software-division-components/.storybook/typings.d.ts

@@ -1,4 +0,0 @@
-declare module '*.md' {
-  const content: string;
-  export default content;
-}

package/projects/software-division-components/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Mobile Media Content
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/projects/software-division-components/components.json

@@ -1,3 +0,0 @@
-{
-  "componentsPath": "libs/ui"
-}