npm package: @propmix/snackbar
Description: A simple stackable snack bar based on the Angular Material Snackbar component.
Latest version: 1.1.2

# Propmix Snackbar

A simple stackable snack bar based on the Angular Material Snackbar component.

## Peer Dependencies

Make sure you have the following minimum versions of dependencies installed.

- Angular 15.0.0 or higher
- Angular Material 15.0.0 or higher
- RxJS 7.0.0 or higher

## Installation

```bash
npm install @propmix/snackbar
```

## Importing

Import the `SnackbarModule` into the root module, usually AppModule, and we are good to go.

```typescript
import { SnackbarModule } from '@propmix/snackbar';

@NgModule({
  imports: [
    ...
    SnackbarModule
  ]
})
```

The snackbar has some default configurations which can be changed by providing a custom configuration while loading the module. All of the below configurations are optional.

```typescript
@NgModule({
  imports: [
    ...
    SnackbarModule.forRoot({
      position?: {
        vertical?: SnackbarVerticalPosition; // Default: 'top'
        horizontal?: SnackbarHorizontalPosition; // Default: 'end'
      };
      autoDismissDuration?: {
        success?: number; // Default: 4000
        info?: number; // Default: 6000
        warning?: number; // Default: undefined
        error?: number; // Default: undefined
      };
    }),
  ],
})
```

## Usage

**⚠ Warning :** If there is any custom global styling for the snackbar or mat-icon, make sure to remove it or make it component specific before using this library.

### Open Snack bar

You can use the `SnackbarService.push()` to open/add a snack bars onto the stack.

```typescript
import { SnackbarService } from '@propmix/snackbar';

constructor(private snackbarService: SnackbarService) {}

// Opens a snack bar that will be dismissed based on the default dismiss behavior.
this.snackbarService.push('error', 'This is a snack bar message');

// Opens a snack bar that will automatically close after 4 seconds
this.snackbarService.push('success', 'This is a snack bar message', 4000);
```

### Close Snack bar

You can use the `SnackbarService.pop()` to close/remove the first added or a specific snack bar from the stack.

```typescript
// Removes the first added snack bar from the stack
this.snackbarService.pop();
```

```typescript
const referenceId: number = this.snackbarService.push("success", "This is a snack bar message");

// Removes a specific snack bar from the stack
this.snackbarService.pop(referenceId);
```

### Clear all Snack bars

You can use the `SnackbarService.clearAll()` to close/remove all snack bars from the stack.

```typescript
this.snackbarService.clearAll();
```

### Default dismiss behavior

The default dismiss behavior changes based on the snackbar type as shown below.

| Snackbar Type | Duration for Auto-Dismissal |
| ------------- | --------------------------- |
| success       | 4000 ms                     |
| info          | 6000 ms                     |
| warning       | No Auto-dismiss             |
| error         | No Auto-dismiss             |

## API

### SnackbarService.push()

| Parameter | Type         | Required | Description                                                                                                                                                            |
| --------- | ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type      | SnackbarType | Yes      | Whether it should be a success, info, warning or error.                                                                                                                |
| message   | string       | Yes      | Message to be displayed in the snackbar.                                                                                                                               |
| duration  | number       | No       | Duration in milliseconds after which the snackbar should close.<br>If duration is not specified, the snackbar will be dismissed based on the default dismiss behavior. |

**Returns :** number - Reference ID of the snackbar that was added to the stack.

### SnackbarService.pop()

| Parameter   | Type   | Required | Description                                                                                                                              |
| ----------- | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| referenceId | number | No       | Reference ID of the snackbar to be removed from the stack.<br>If referenceId is not specified, the first added snackbar will be removed. |

**Returns :** void

### SnackbarService.clearAll()

**Returns :** void

## Interfaces

### SnackbarConfig

```typescript
{
  position: {
    vertical?: SnackbarVerticalPosition;
    horizontal?: SnackbarHorizontalPosition;
  };
  autoDismissDuration: {
    success?: number;
    info?: number;
    warning?: number;
    error?: number;
  };
}
```

### SnackbarType

```typescript
"success" | "info" | "warning" | "error";
```

### SnackbarVerticalPosition

```typescript
"top" | "bottom";
```

### SnackbarHorizontalPosition

```typescript
"start" | "center" | "end";
```