npm package: @nettyapps/ntybase
Description: This library provides foundational services and components for NettyApps Angular applications.
Latest version: 21.1.34

# Netty Base Library

Netty Base Library
The @nettyapps/ntybase library provides foundational services and components for Angular applications, including theme management, authentication, alerts, menus, and AG-Grid integration.

## Installation

```bash
npm install @nettyapps/ntybase
```

## Theme Management Systems

The `@nettyapps/ntybase` library provides flexible theme management through two complementary systems:

1. Color Palette - For primary/secondary color schemes
2. App Theme - For light/dark mode system

### Adding New Color Themes

#### Generating Custom Color Palettes with Angular Material

Angular Material provides a powerful schematic for automatically generating complete color palettes from base colors, eliminating the need to manually create theme files.

#### 1. Install Required Packages

First ensure you have `@angular/material` and `@angular/cdk` installed:

```bash
npm install @angular/material @angular/cdk
```

##### 2. Generate a Custom Palette

Use the Angular CLI to generate a custom palette:

```bash
ng generate @angular/material:theme-color
```

#### 3. Output Structure

The schematic will generate:

```
src/
└── app/
    └── themes/
        ├── custom-themes.css   # Your custom palette definition
        └── deep-bluetheme.css  # Generated palette variables
```

#### 4. Using the Generated Theme

Import and use your theme:

`custom-themes.css`:

```scss
@import "./deep-bluetheme.css";
```

`styles.scss`:

```scss
@use "@angular/material" as mat;
@include mat.core();
@import "./app/themes/custom-themes.css";
```

Here's an example of the generated theme CSS that will be available in `deep-blue-theme.css`

```scss
/* Note: Color palettes are generated from primary: #1976D2 */
.deep-blue-theme {
  /* COLOR SYSTEM VARIABLES */
  color-scheme: dark;

  /* Required field */
  --mat-sys-required: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-inverse-primary));
  --mat-nty-save-record-header-bar: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-primary));
  --mat-nty-save-record-identifier: light-dark(var(--mat-sys-on-primary-container), var(--mat-sys-on-primary));

  /* Primary palette variables */
  --mat-sys-primary: light-dark(#005faf, #a5c8ff);
  --mat-sys-on-primary: light-dark(#ffffff, #00315f);
  --mat-sys-primary-container: light-dark(#d4e3ff, #004786);
  --mat-sys-on-primary-container: light-dark(#001c3a, #d4e3ff);
  --mat-sys-inverse-primary: light-dark(#a5c8ff, #005faf);
  --mat-sys-primary-fixed: light-dark(#d4e3ff, #d4e3ff);
  --mat-sys-primary-fixed-dim: light-dark(#a5c8ff, #a5c8ff);
  --mat-sys-on-primary-fixed: light-dark(#001c3a, #001c3a);
  --mat-sys-on-primary-fixed-variant: light-dark(#004786, #004786);

  /* Secondary palette variables */
  --mat-sys-secondary: light-dark(#475f84, #afc8f1);
  --mat-sys-on-secondary: light-dark(#ffffff, #163153);
  --mat-sys-secondary-container: light-dark(#d4e3ff, #2f486a);
  --mat-sys-on-secondary-container: light-dark(#001c3a, #d4e3ff);
  --mat-sys-secondary-fixed: light-dark(#d4e3ff, #d4e3ff);
  --mat-sys-secondary-fixed-dim: light-dark(#afc8f1, #afc8f1);
  --mat-sys-on-secondary-fixed: light-dark(#001c3a, #001c3a);
  --mat-sys-on-secondary-fixed-variant: light-dark(#2f486a, #2f486a);
}
```

### Configuring ColorPalette Service

#### Define Your Theme Colors

After generating your palettes, integrate them with the ColorPalette service:

```typescript
import { ColorPalette } from '@nettyapps/ntybase';

private colorPalette = inject(ColorPalette);

constructor() {
  this.loadCustomThemes();
}

private loadCustomThemes(): void {
  const customThemes = [
    {
      id: 'deep-blue',
      primary: '#1976D2',
      displayName: 'Deep Blue',
    },
    {
      id: 'green',
      primary: '#00796B',
      displayName: 'Green'
    },
    {
      id: 'orange',
      primary: '#E65100',
      displayName: 'Orange'
    },
    {
      id: 'purple',
      primary: '#6200EE',
      displayName: 'Purple'
    },
    {
      id: 'red',
      primary: '#C2185B',
      displayName: 'Red'
    },
    {
      id: 'blue-orange',
      primary: '#0D5EA6',
      displayName: 'Blue/Orange'
    },
    {
      id: 'gray',
      primary: '#555',
      displayName: 'Gray'
    },
  ];

  this.colorPalette.setThemes(customThemes);

  // Set default theme
  this.colorPalette.setTheme('green');
}
```