npm package: @lakea/gravity-toast-adapter-ngneat-hot-toast
Description: An adapter for `GrToast` using [`@ngneat/hot-toast`](https://ngneat.github.io/hot-toast/) as implementation.
Latest version: 3.0.2

# @lakea/gravity-toast-adapter-ngneat-hot-toast

An adapter for `GrToast` using [`@ngneat/hot-toast`](https://ngneat.github.io/hot-toast/) as implementation.

## Installation

Install the library using NPM:

`npm install @lakea/gravity-toast-adapter-ngneat-hot-toast @ngneat/overview @ngneat/hot-toast --save`

Add this line to your main `styles.scss`:

```scss
@use 'node_modules/@lakea/gravity-toast-adapter-ngneat-hot-toast/styles/styles.scss';
```

Next, create a new file, `toast-adapter-root.module.ts` which exposes an Angular's module with a default configuration.

```typescript
import {NgModule} from '@angular/core';
import {HotToastModule} from '@ngneat/hot-toast';
import {GrToast} from '@lakea/gravity/ui';
import {GrToastAdapterNgneatHotToast} from '@lakea/gravity-toast-adapter-ngneat-hot-toast';

const TOAST_STYLE = {
  style: {
    color: 'var(--gr-toast-color, var(--gr-color-background-contrast))',
    background: 'var(--gr-toast-background-color, var(--gr-color-background))',
    border: 'var(--gr-toast-border, 1px solid var(--gr-color-border))',
    padding: 'var(--gr-toast-padding, 8px 16px)',
    borderRadius: 'var(--gr-toast-border-radius, 8px)',
    wordBreak: 'break-word',
    maxWidth: 'var(--gr-toast-max-width, 60vw)',
  },
  closeStyle: {
    color: 'var(--gr-toast-close-btn-color, var(--gr-color-background-contrast))',
    marginLeft: 'var(--gr-toast-close-btn-margin-left, 16px)',
    cursor: 'pointer',
    backgroundImage:
      "var(--gr-toast-close-btn-background-image, url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white' %3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e\"))",
  },
};

@NgModule({
  imports: [
    HotToastModule.forRoot({
      ...TOAST_STYLE,
    }),
  ],
  providers: [
    {
      provide: GrToast,
      useClass: GrToastAdapterNgneatHotToast,
    },
  ],
})
export class ToastAdapterRootModule {}
```

Import `ToastAdapterRootModule` to application root module like `app.module.ts`.

> You should import the ToastAdapterRootModule once in your root module.

The `ToastAdapterRootModule` file imports the `HotToastModule` from `@ngneat/hot-toast` library with a default style config and provide the adapter implementation too.

To configure the `@ngneat/hot-toast` library, read the docs [here](https://github.com/ngneat/hot-toast#installation).

---

## Creating your own adapter

Create your adapter implementation class extending `GrToast` abstraction:

```typescript
import {Injectable} from '@angular/core';

import {GrToast, GrToastObservableMessages, GrToastOptions, GrToastRef} from '@lakea/gravity/ui';

@Injectable()
export class GrToastAdapter extends GrToast {
  constructor() {
    super();
  }

  public success(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public info(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public warning(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public error(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public loading(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public observe<T>(messages: GrToastObservableMessages): (source: Observable<T>) => Observable<T> {
    // YOUR IMPLEMENTATION
  }
}

```

So, provide it on your application root module (maybe `app.module.ts`), like this:

```typescript
  providers: [
    {
      provide: GrToast,
      useClass: GrToastAdapter,
    }
  ]
```