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

package/projects/software-division-components/src/shared/themes/sdc.css

@@ -0,0 +1,153 @@
+:root {
+  /* Font Families */
+  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Font Sizes */
+  --text-xxs: 0.625rem; /* 8px - Small labels, captions */
+  --text-xs: 0.75rem; /* 12px - Small labels, captions */
+  --text-sm: 0.875rem; /* 14px - Table content, form labels */
+  --text-base: 1rem; /* 16px - Body text, buttons */
+  --text-lg: 1.125rem; /* 18px - Section headings */
+  --text-xl: 1.25rem; /* 20px - Page titles */
+  --text-2xl: 1.5rem; /* 24px - Main headings */
+
+  /* Font Weights */
+  --font-light: 300; /* Light text */
+  --font-regular: 400; /* Normal body text */
+  --font-medium: 500; /* Medium emphasis */
+  --font-semibold: 600; /* Section headings */
+  --font-bold: 700; /* Strong emphasis, buttons */
+
+  /* Line Heights */
+  --leading-tight: 1.25; /* Tight line height for headings */
+  --leading-normal: 1.5; /* Normal line height for body text */
+  --leading-relaxed: 1.625; /* Relaxed line height for readability */
+
+  /* Spacing Scale */
+  --space-0: 0; /* No spacing */
+  --space-px: 1px; /* 1px spacing */
+  --space-0_5: 0.125rem; /* 2px - Minimal spacing */
+  --space-1: 0.25rem; /* 4px - Very small spacing */
+  --space-1_5: 0.375rem; /* 6px - Small spacing */
+  --space-2: 0.5rem; /* 8px - Small padding/margin */
+  --space-2_5: 0.625rem; /* 10px - Button padding */
+  --space-3: 0.75rem; /* 12px - Form element spacing */
+  --space-3_5: 0.875rem; /* 14px - Medium spacing */
+  --space-4: 1rem; /* 16px - Standard spacing unit */
+  --space-5: 1.25rem; /* 20px - Section spacing */
+  --space-6: 1.5rem; /* 24px - Large spacing */
+  --space-7: 1.75rem; /* 28px - Extra spacing */
+  --space-8: 2rem; /* 32px - Large section spacing */
+  --space-10: 2.5rem; /* 40px - Very large spacing */
+  --space-12: 3rem; /* 48px - Header/footer spacing */
+  --space-16: 4rem; /* 64px - Major section dividers */
+  --space-20: 5rem; /* 80px - Large container spacing */
+  --space-24: 6rem; /* 96px - Extra large spacing */
+
+  /* Border Radius */
+  --radius-none: 0; /* No border radius */
+  --radius-sm: 0.125rem; /* 2px - Small radius */
+  --radius-default: 0.25rem; /* 4px - Default button/input radius */
+  --radius-md: 0.375rem; /* 6px - Medium radius for cards */
+  --radius-lg: 0.5rem; /* 8px - Large radius */
+  --radius-xl: 0.75rem; /* 12px - Extra large radius */
+  --radius-2xl: 1rem; /* 16px - Very large radius */
+  --radius-3xl: 1.5rem; /* 24px - Extra large radius */
+  --radius-full: 9999px; /* Full circular radius */
+
+  /* Border Widths */
+  --border-0: 0; /* No border */
+  --border-default: 1px; /* Default border width */
+  --border-2: 2px; /* Thick border */
+  --border-3: 3px; /* Thick border */
+  --border-4: 4px; /* Very thick border */
+  --border-6: 6px; /* Extra thick border */
+  --border-8: 8px; /* Extra thick border */
+
+  /* Neutral Colors */
+  --color-neutral-50: hsl(210 40% 98%); /* #f8fafc - Lightest background */
+  --color-neutral-100: hsl(210 40% 96%); /* #f1f5f9 - Light background, table headers */
+  --color-neutral-200: hsl(214 32% 91%); /* #e2e8f0 - Border colors, dividers */
+  --color-neutral-300: hsl(215 20% 83%); /* #cbd5e1 - Disabled states, subtle borders */
+  --color-neutral-400: hsl(215 16% 65%); /* #94a3b8 - Placeholder text, inactive elements */
+  --color-neutral-500: hsl(215 19% 47%); /* #64748b - Secondary text, icons */
+  --color-neutral-600: hsl(215 25% 35%); /* #475569 - Primary text color */
+  --color-neutral-700: hsl(215 28% 27%); /* #334155 - Dark text, headings */
+  --color-neutral-800: hsl(217 33% 17%); /* #1e293b - Very dark text */
+  --color-neutral-900: hsl(222 47% 11%); /* #0f172a - Darkest text, high contrast */
+  --color-pure-white: hsl(0 0% 100%); /* #ffffff - Pure white backgrounds */
+  --color-pure-black: hsl(0 0% 0%); /* #000000 - Pure black text */
+
+  /* Primary Colors - Club Brand */
+  --color-primary: hsl(29.01 100% 52.55%); /* #ff8c00 - Main Club brand color */
+  --color-primary-hover: hsl(29.01 100% 44%); /* #e67e00 - Darker orange for hover states */
+  --color-primary-active: hsl(29.01 100% 36%); /* #cc7000 - Even darker for active/pressed states */
+  --color-primary-50: hsl(29.01 100% 97%); /* #fff8f0 - Very light orange background */
+  --color-primary-100: hsl(29.01 100% 91%); /* #fff0d7 - Light orange background */
+  --color-primary-200: hsl(29.01 100% 84%); /* #ffe8c0 - Soft orange for highlights */
+
+  /* Secondary Colors - Navy Blue */
+  --color-secondary: hsl(218.73 72.48% 21.37%); /* #1a2b4a - Deep navy blue for secondary actions */
+  --color-secondary-hover: hsl(218.73 72.48% 28%); /* #2a3f6a - Lighter navy for hover */
+  --color-secondary-active: hsl(218.73 72.48% 35%); /* #3a538a - Active state navy */
+  --color-secondary-50: hsl(218.73 72.48% 97%); /* #f7f9fc - Very light blue background */
+  --color-secondary-100: hsl(218.73 72.48% 93%); /* #eef2f9 - Light blue background */
+  --color-secondary-200: hsl(218.73 72.48% 87%); /* #e0e7f3 - Soft blue for highlights */
+
+  /* Alternative Colors - Light Blue/Cyan */
+  --color-alternative: hsl(199 89% 48%); /* #0ea5e9 - Cyan blue for alternative actions */
+  --color-alternative-hover: hsl(198 93% 39%); /* #0284c7 - Darker cyan for hover */
+  --color-alternative-active: hsl(201 96% 32%); /* #0369a1 - Active state cyan */
+  --color-alternative-50: hsl(204 100% 97%); /* #f0f9ff - Very light cyan background */
+  --color-alternative-100: hsl(204 94% 94%); /* #e0f2fe - Light cyan background */
+
+  /* Success Colors */
+  --color-success: hsl(158 64% 52%); /* #10b981 - Green for completed transactions, success states */
+  --color-success-hover: hsl(160 84% 39%); /* #059669 - Darker green for hover */
+  --color-success-active: hsl(161 94% 30%); /* #047857 - Active state green */
+  --color-success-50: hsl(151 81% 96%); /* #ecfdf5 - Light success background */
+  --color-success-100: hsl(149 80% 90%); /* #d1fae5 - Success message backgrounds */
+
+  /* Warning Colors */
+  --color-warning: hsl(43 96% 56%); /* #f59e0b - Amber/orange for warnings, pending states */
+  --color-warning-hover: hsl(32 95% 44%); /* #d97706 - Darker amber for hover */
+  --color-warning-active: hsl(30 100% 34%); /* #b45309 - Active state amber */
+  --color-warning-50: hsl(48 100% 96%); /* #fffbeb - Light warning background */
+  --color-warning-100: hsl(48 96% 89%); /* #fef3c7 - Warning message backgrounds */
+
+  /* Danger Colors */
+  --color-danger: hsl(0 72% 51%); /* #ef4444 - Red for cancelled transactions, errors, delete actions */
+  --color-danger-hover: hsl(0 73% 41%); /* #dc2626 - Darker red for hover */
+  --color-danger-active: hsl(0 79% 30%); /* #b91c1c - Active state red */
+  --color-danger-50: hsl(0 86% 97%); /* #fef2f2 - Light error background */
+  --color-danger-100: hsl(0 93% 94%); /* #fee2e2 - Error message backgrounds */
+
+  /*
+  * -----------------------------------------------------------
+  * Spartan UI standard theme (Updated with SDC color mappings)
+  * -----------------------------------------------------------
+  */
+  --font-sans: 'Geist Sans', sans-serif;
+  --background: var(--color-pure-white);
+  --foreground: var(--color-neutral-600);
+  --card: var(--color-pure-white);
+  --card-foreground: var(--color-neutral-600);
+  --popover: var(--color-pure-white);
+  --popover-foreground: var(--color-neutral-600);
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-pure-white);
+  --secondary: var(--color-neutral-100);
+  --secondary-foreground: var(--color-neutral-600);
+  --muted: var(--color-neutral-50);
+  --muted-foreground: var(--color-neutral-500);
+  --accent: var(--color-primary-200);
+  --accent-foreground: var(--color-neutral-700);
+  --destructive: var(--color-danger);
+  --destructive-foreground: var(--color-pure-white);
+  --border: var(--color-neutral-200);
+  --input: var(--color-neutral-200);
+  --ring: var(--color-primary);
+  --radius: var(--radius-lg);
+  color-scheme: light;
+}

package/{shared/types.d.ts → projects/software-division-components/src/shared/types.ts}

@@ -1,19 +1,15 @@
-export declare const SIZES: {
-    readonly xxs: "xxs";
-    readonly xs: "xs";
-    readonly sm: "sm";
-    readonly md: "md";
-    readonly lg: "lg";
-    readonly xl: "xl";
-    readonly '2xl': "2xl";
-};
+export const SIZES = { xxs: 'xxs', xs: 'xs', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl', '2xl': '2xl' } as const;
+
 export type Size = (typeof SIZES)[keyof typeof SIZES];
+
 export type NgPipes = 'none' | 'currency' | 'date';
+
 export type NgSdComponentsConfigValues = 'generic' | 'backoffice';
+
 export interface NgSdComponentsConfig {
-    theme: NgSdComponentsConfigValues;
+  theme: NgSdComponentsConfigValues;
 }
+
 type Theme = 'backoffice' | 'sdc';
+
 export type ThemeClass = `theme-${Theme}`;
-export {};
-//# sourceMappingURL=types.d.ts.map

package/projects/software-division-components/src/types/sizes.type.ts

@@ -0,0 +1,3 @@
+export type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export const SIZE_ORDER: Size[] = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];

package/projects/software-division-components/src/utils/index.ts

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

package/projects/software-division-components/src/utils/public-api.ts

@@ -0,0 +1 @@
+export * from './validate-styles-for-component';

package/projects/software-division-components/src/utils/validate-styles-for-component.ts

@@ -0,0 +1,39 @@
+function validateCssClass(value: string, componentName?: string): asserts value is string {
+  const regex = /^([a-zA-Z][a-zA-Z0-9-_]*)(\s[a-zA-Z][a-zA-Z0-9-_]*)*$/;
+  const isValidCssClass = regex.test(value);
+
+  if (!isValidCssClass) {
+    throw new Error(
+      `Invalid CSS class string passed as input to "styleClasses" input, found on ${componentName}.
+      Please make sure your input is a valid CSS class or a list of whitespace-separated classes.
+      The value provided was: ${value}`
+    );
+  }
+}
+
+export function validateStylesForComponent<T extends Record<string, string> | string>(
+  componentName: string
+): (styles: T) => T {
+  return (styles: T): T => {
+    // Styles will be an empty string if they are not defined
+    if (styles === '') {
+      return styles;
+    }
+
+    if (typeof styles === 'string') {
+      // Some components just have to style one element,
+      // so a string input is sufficient
+      validateCssClass(styles, componentName);
+    } else {
+      // While others require an object ot be able to style
+      // different parts of the component, which requires an object
+      // to target different parts of the components with different classes
+      const stylesValues = Object.values(styles);
+      for (const styleValue of stylesValues) {
+        validateCssClass(styleValue, componentName);
+      }
+    }
+
+    return styles;
+  };
+}

package/projects/software-division-components/styles.css

@@ -0,0 +1,40 @@
+/* spartan components styles */
+@import '@angular/cdk/overlay-prebuilt.css';
+@import '@spartan-ng/brain/hlm-tailwind-preset.css';
+
+/* Import themes */
+@import './src/shared/themes/sdc.css';
+
+/* Select component adjustments */
+@media (max-width: 1024px) {
+  .cdk-overlay-pane:has(> hlm-select-content),
+  .cdk-overlay-pane:has(> hlm-select-content.full-width) {
+    width: 100% !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+}
+/* Import component styles */
+@import './src/generic/braintree/braintree.component.css';
+@import './src/backoffice/datepicker/datepicker.component.css';
+
+.dialog-overlay-margin {
+  margin: 0 1rem;
+}
+
+/* Ripple effect styles */
+.sdc-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--sdc-button-ripple-color);
+  transform: scale(0);
+  animation: ripple-animation 0.6s linear;
+  pointer-events: none;
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,30 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "../../dist",
+    "paths": {
+      "@backoffice/*": ["./src/backoffice/*"],
+      "@utils/*": ["./src/utils"],
+      "@shared/*": ["./src/shared/*"],
+      "@dvm/*": ["./src/dvm/*"],
+      "@generic/*": ["./src/generic/*"]
+    }
+  },
+  "angularCompilerOptions": {
+    "disableTypeScriptVersionCheck": true,
+    "fullTemplateTypeCheck": true,
+    "annotateForClosureCompiler": false,
+    "strictTemplates": true,
+    "strictMetadataEmit": true,
+    "skipTemplateCodegen": false,
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "compilationMode": "partial",
+    "flatModuleOutFile": "software-division-components.js",
+    "flatModuleId": "software-division-components"
+  }
+}

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

@@ -0,0 +1,15 @@
+/* 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": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/scripts/generate-versions.js

@@ -0,0 +1,60 @@
+import fs from 'fs';
+import path from 'path';
+import {
+  default as projectPackageJson,
+  default as sdcPackageJson,
+} from '../projects/software-division-components/package.json' with { type: 'json' };
+const readmePath = path.resolve('./README.md');
+const backupReadmePath = path.resolve('./README.backup.md');
+
+// Extract versions from package.json
+const versions = {
+  angular: projectPackageJson.peerDependencies['@angular/core'],
+};
+
+const sdcVersions = {
+  storybook: sdcPackageJson.devDependencies['@storybook/angular'],
+};
+
+const badges = `
+![Angular Badge](https://img.shields.io/badge/Angular-${versions.angular.replace('^', '').replace('~', '')}-dd0031?logo=angular&style=for-the-badge)
+![Storybook Badge](https://img.shields.io/badge/Storybook-${sdcVersions.storybook.replace('^', '').replace('~', '')}-ff4785?logo=storybook&style=for-the-badge)
+`;
+
+// Read the existing README.md
+let readmeContent = '';
+if (fs.existsSync(readmePath)) {
+  readmeContent = fs.readFileSync(readmePath, 'utf-8');
+
+  // Backup the original README.md
+  fs.writeFileSync(backupReadmePath, readmeContent);
+  console.log(`Backup created: ${backupReadmePath}`);
+}
+
+const overviewMarker = '## **Overview**';
+const index = readmeContent.indexOf(overviewMarker);
+
+if (index === -1) {
+  console.error('"Overview" section not found in README.md. Badges will not be updated.');
+  process.exit(1);
+}
+
+// Insert badges after the "Overview" section
+const beforeOverview = readmeContent.slice(0, index + overviewMarker.length);
+let afterOverview = readmeContent.slice(index + overviewMarker.length);
+
+// Define the badge block pattern to look for
+const badgeBlockPattern = /(?:\n\n(?:!\[.*?\]\(.*?\)\n)+)/;
+
+// If badges are found
+if (badgeBlockPattern.test(afterOverview)) {
+  afterOverview = afterOverview.replace(badgeBlockPattern, `\n${badges}`);
+} else {
+  afterOverview = `\n${badges}${afterOverview}`;
+}
+
+const updatedReadmeContent = `${beforeOverview}${afterOverview}`;
+
+// Write the updated content back to README.md
+fs.writeFileSync(readmePath, updatedReadmeContent);
+console.log(`Badges were updated on the README file.`);

package/scripts/watch-dist.js

@@ -0,0 +1,222 @@
+/**
+ * Watch script for software-division-components library
+ *
+ * This script watches for changes in the library source files and:
+ * 1. Reinstalls dependencies when source files change
+ * 2. Touches a file to trigger Angular rebuild
+ * 3. Lets Angular handle its own rebuild process
+ */
+
+import { execSync, spawn } from 'child_process';
+import chokidar from 'chokidar';
+import fs from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+console.log('🔍 Watching dist folder for library changes...');
+
+// Watch the dist folder for library changes
+const distPath = join(__dirname, '../dist');
+console.log(`📁 Watching dist path: ${distPath}`);
+
+// Test if the path exists
+try {
+  if (fs.existsSync(distPath)) {
+    console.log('✅ Dist folder exists');
+  } else {
+    console.log('❌ Dist folder does not exist');
+  }
+} catch (error) {
+  console.log('❌ Error checking dist folder:', error.message);
+}
+
+const watcher = chokidar.watch(distPath, {
+  persistent: true,
+  ignoreInitial: true,
+  awaitWriteFinish: {
+    stabilityThreshold: 500,
+    pollInterval: 100,
+  },
+  usePolling: true,
+  interval: 1000,
+});
+
+let rebuildTimeout;
+let isRebuilding = false;
+
+// Function to start the Angular dev server using spawn (non-blocking)
+function startDevServer() {
+  try {
+    console.log('🚀 Starting Angular dev server...');
+
+    // Use spawn instead of execSync to avoid blocking
+    const ngProcess = spawn('ng', ['serve', 'consumer-app'], {
+      cwd: join(__dirname, '..'),
+      stdio: 'pipe', // Don't inherit stdio to avoid blocking
+      detached: true, // Detach from parent process
+    });
+
+    // Handle process events
+    ngProcess.stdout.on('data', data => {
+      const output = data.toString();
+      if (output.includes('Compiled successfully') || output.includes('Live Reload Server')) {
+        console.log('✅ Angular dev server started successfully');
+      }
+    });
+
+    ngProcess.stderr.on('data', data => {
+      const error = data.toString();
+      if (error.includes('Port already in use')) {
+        console.log('⚠️  Port already in use, trying to kill existing process...');
+        try {
+          execSync('pkill -f "ng serve"', { stdio: 'ignore' });
+          setTimeout(() => startDevServer(), 2000); // Retry after killing
+        } catch (killError) {
+          console.error('❌ Could not kill existing process');
+        }
+      }
+    });
+
+    ngProcess.on('error', error => {
+      console.error('❌ Error starting Angular dev server:', error.message);
+    });
+
+    ngProcess.on('exit', code => {
+      if (code !== 0) {
+        console.log(`⚠️  Angular dev server exited with code ${code}`);
+      }
+    });
+
+    // Store the process reference for later use
+    global.ngProcess = ngProcess;
+
+    console.log('✅ Angular dev server process started (non-blocking)');
+  } catch (startError) {
+    console.error('❌ Error starting Angular dev server:', startError.message);
+    console.log('💡 You may need to start the dev server manually: ng serve consumer-app');
+  }
+}
+
+// Function to restart the Angular dev server
+function restartDevServer() {
+  try {
+    console.log('🔄 Restarting Angular dev server...');
+
+    // Kill the existing process if we have a reference
+    if (global.ngProcess) {
+      try {
+        global.ngProcess.kill('SIGTERM');
+        console.log('✅ Stopped existing Angular dev server process');
+      } catch (killError) {
+        console.log('ℹ️  Could not kill existing process');
+      }
+    }
+
+    // Also try to kill any other ng serve processes
+    try {
+      execSync('pkill -f "ng serve"', { stdio: 'ignore' });
+      console.log('✅ Killed all ng serve processes');
+    } catch (killError) {
+      console.log('ℹ️  No existing Angular dev server found to stop');
+    }
+
+    // Wait a moment for processes to fully terminate
+    setTimeout(() => {
+      startDevServer();
+    }, 2000);
+  } catch (error) {
+    console.error('❌ Error restarting dev server:', error.message);
+  }
+}
+
+watcher.on('change', filePath => {
+  if (isRebuilding) return;
+
+  const fileName = filePath.split('/').pop();
+  console.log(`📁 Dist file changed: ${fileName}`);
+
+  clearTimeout(rebuildTimeout);
+  rebuildTimeout = setTimeout(() => {
+    if (isRebuilding) return;
+
+    console.log('🔄 Library files changed, refreshing package link...');
+    isRebuilding = true;
+
+    try {
+      console.log('📦 Reinstalling package...');
+      execSync('pnpm install', { stdio: 'inherit', cwd: join(__dirname, '..') });
+      console.log('✅ Package reinstalled successfully');
+
+      console.log('⏳ Waiting for package to be fully available...');
+      setTimeout(() => {
+        console.log('🔄 Restarting Angular dev server...');
+        restartDevServer();
+
+        isRebuilding = false;
+        console.log('🔄 Package link refreshed successfully');
+        console.log('🔄 Angular dev server will restart with fresh dependencies...');
+      }, 2000);
+    } catch (error) {
+      console.error('❌ Error refreshing package:', error.message);
+      isRebuilding = false;
+    }
+  }, 5000);
+});
+
+watcher.on('add', filePath => {
+  console.log(`📁 ADD EVENT: ${filePath}`);
+});
+
+watcher.on('unlink', filePath => {
+  console.log(`📁 UNLINK EVENT: ${filePath}`);
+});
+
+watcher.on('ready', () => {
+  console.log('✅ Dist folder watcher started successfully');
+  console.log('💡 Library changes in dist/ will automatically restart the Angular dev server');
+  console.log('💡 This ensures fresh dependencies are loaded');
+
+  // Install the package for the first time
+  execSync('pnpm install', { stdio: 'inherit', cwd: join(__dirname, '..') });
+  console.log('✅ Package reinstalled successfully');
+
+  // Automatically start the dev server when ready
+  console.log('🚀 Starting initial Angular dev server...');
+  startDevServer();
+});
+
+watcher.on('error', error => {
+  console.error('❌ Watcher error:', error);
+});
+
+// Cleanup function for graceful shutdown
+function cleanup() {
+  console.log('\n🔄 Shutting down gracefully...');
+
+  if (global.ngProcess) {
+    try {
+      global.ngProcess.kill('SIGTERM');
+      console.log('✅ Stopped Angular dev server');
+    } catch (error) {
+      console.log('⚠️  Could not stop Angular dev server');
+    }
+  }
+
+  try {
+    execSync('pkill -f "ng serve"', { stdio: 'ignore' });
+    console.log('✅ Killed all remaining ng serve processes');
+  } catch (error) {
+    // Ignore errors
+  }
+
+  process.exit(0);
+}
+
+// Handle process termination signals
+process.on('SIGINT', cleanup);
+process.on('SIGTERM', cleanup);
+
+console.log('🚀 Starting dist folder watcher with automatic dev server restart...');

package/tsconfig.json

@@ -0,0 +1,46 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "emitDecoratorMetadata": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "outDir": "./dist",
+    "lib": [
+      "ESNext",
+      "dom"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@spartan-ng/helm/dialog": [
+        "./libs/ui/ui-dialog-helm/src/index.ts"
+      ],
+      "@spartan-ng/helm/icon": [
+        "./projects/software-division-components/src/generic/icon/libs/ui/ui-icon-helm/src/index.ts"
+      ],
+      "@software-division/components/carousel": [
+        "./libs/ui/ui-carousel-helm/src/index.ts"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "enableIvy": true,
+    "compilationMode": "partial"
+  }
+}

package/3ddv-software-division-components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"3ddv-software-division-components.d.ts","sourceRoot":"","sources":["../src/3ddv-software-division-components.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,cAAc,CAAC"}