@funnelback/ng-sds/README.md

`@funnelback/ng-sds` is Bootstrap 5 based library that aims to implement the [Squiz Design System specification](https://designsystem.squiz.net/) in Angular.

# SDS Library

`@funnelback/ng-sds` is Bootstrap 5 based library that aims to implement the [Squiz Design System specification](https://designsystem.squiz.net/) in Angular.

## Demo
Demo and Documentation available at [http://docs.sds-angular.funnelback.com](http://docs.sds-angular.funnelback.com/latest/#/)

## Usage

The SDS library is published via npm. Install it into your project using

```bash
npm install @funnelback/ng-sds --save
```

### Dependencies

| SDS library version | Angular version | Bootstrap version |
| ------------------- | --------------- | ----------------- |
| 1.13.x (latest) | 19.0.x | 5.3.3 |
| 1.12.x | 18.2.x | 5.3.2 |
| 1.11.x | 17.3.x | 5.3.2 |
| 1.10.x | 16.2.x | 5.2.3 |
| 1.9.x | 15.2.x | 5.2.3 |
| 1.8.x | 14.3.x | 5.2.0 |
| 1.7.x | 13.4.x | 5.0.0 |
| 1.6.x | 13.4.x | 4.6.0 |
| 1.5.x | 12.2.x | 4.6.0 |
| 1.4.x | 12.2.x | 4.5.0 |
| 1.3.x | 10.2.x | 4.5.0 |
| 1.2.x | 7.2.x  | 4.0.0 |

#### 1.13.x (Angular v19.0.x)

Some of SDS components are driven by the third-party dependency [ng-bootstrap](https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap). If you wish to use any of those components, `ng-bootstrap` needs to be installed as a peer dependency:

```bash
npm install @ng-bootstrap/ng-bootstrap@^18.0.0 @popperjs/core@^2.11.8 --save
```

The SDS Icons component depends on [@material-design-icons/font](https://www.npmjs.com/package/@material-design-icons/font). If you wish to use the SDS Icons, these icons need to be installed as a peer dependency:

```bash
npm install @material-design-icons/font --save
```

You will then need to follow the [instructions](/icon/README.md) to import the fonts into your project.

The SDS Stepper component builds upon the [@angular/cdk](https://www.npmjs.com/package/@angular/cdk). If you wish to use the SDS Stepper component, this will need to be installed as a peer dependency:

```bash
npm install @angular/cdk@^19.0.6 --save
```

#### 1.12.x (Angular v18.2.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^17.0.0 @popperjs/core@^2.11.8 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^18.2.14 --save
```

#### 1.11.x (Angular v17.3.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^16.0.0 @popperjs/core@^2.11.8 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^17.3.6 --save
```

#### 1.10.x (Angular v16.2.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^15.0.0 @popperjs/core@^2.10.6 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^16.2.12 --save
```

#### 1.9.x (Angular v15.2.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^14.0.0 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^15.2.9 --save
```

#### 1.8.x (Angular v14.3.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^13.0.0 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^14.2.7 --save
```

#### 1.7.x (Angular v13.4.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^12.0.0 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^13.3.9 --save
```

#### 1.6.x (Angular v13.4.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^11.0.0 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^13.3.9 --save
```

#### 1.5.x (Angular v12.2.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^10.0.0 --save
npm install @material-design-icons/font --save
npm install @angular/cdk@^12.2.12 --save
```

#### 1.4.x (Angular v12.2.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^10.0.0 --save
npm install material-design-icons --save
npm install @angular/cdk@^12.2.12 --save
```

#### 1.3.x (Angular v10.2.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^10.0.0 --save
npm install material-design-icons --save
npm install @angular/cdk@^10.2.7 --save
```

#### 1.2.x (Angular v7.2.x)

```bash
npm install @ng-bootstrap/ng-bootstrap@^4.0.0 --save
npm install material-design-icons --save
npm install @angular/cdk@^7.2.0 --save
```

### Styling 

Import the following stylesheet globally:

```bash
node_modules/@funnelback/ng-sds/assets/scss/main.scss
```

### Components

In your typescript import main module with all SDS components:

```typescript
import { SdsModule } from '@funnelback/ng-sds';

@NgModule({
  imports: [SdsModule, ...],
})
export class AppModule(){}
```

Alternatively, import only the modules with SDS components that you need:

```typescript
import { Sds<ComponentYouNeed>Module } from '@funnelback/ng-sds';

@NgModule({
  imports: [Sds<ComponentYouNeed>Module, ...],
})
export class AppModule(){}
```