sdk-message/README.md

Simple to use (Angular) component for displaying messages for a brief moment.

<img src="https://www.soodohkohd.com/assets/images/logo.png" title="soo-doh-kohd" height="200"/>

## Description:
The sdk-message component is an easy "toaster-like" messaging component that allows you to provide feedback to users.

## Angular Compatibility Chart

| Version | Compatibility |
|---------|---------------|
| >= 16   | ✔             |

**NOTE: This package leverages the [sdk-core-library](https://www.npmjs.com/package/sdk-core-library) for core configurations (i.e., colors, icons, etc.).**

## INSTALLATION:
Using NPM:

```bash
npm install --save sdk-message
```

## CONFIGURATION:
To configure the ```sdk-message``` for your application, add the following lines to your app.module.ts file:

```typescript
import { SDKMessageModule } from 'sdk-message';

@NgModule({
    imports: [
        SDKMessageModule
    ]
})
export class AppModule { }
```

## PROPERTIES:
```typescript
message: string = ""; // Message to display.
height: string = ""; // Height of the message box. Default value is "35px".
style: string = ""; // Custom style to apply to message. Default value includes blue background with white font.
timer: number = 5; // Time (in seconds) to display the message. Default value is shown.
```

## USAGE:
```html
<sdk-message [(message)]="message"></sdk-message>

<sdk-message [(message)]="message" height="50px"></sdk-message>

<sdk-message [(message)]="message" style="height: 50px;"></sdk-message>

<sdk-message [(message)]="message" style="color: red; background-color: yellow;" [timer]=10></sdk-message>
```

**NOTE:** The ```sdk-message``` component clears the calling 'message' property be default. This is the reason for the required two-way binding [(message)].

The message will remain on the screen for the "timer" amount. If you click the message, it will close. If you move your mouse over the message, it will pause until you move your mouse away - at which point the timer (countdown) will begin again.