sdk-window/README.md

Resizable and movable (Angular) modal window.

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

## Description:
The sdk-window component is a reusable, modular window that can be resized or moved around the page.

## Angular Compatibility Chart

| Version | Compatibility |
|---------|---------------|
| 16      | EOL 2025      |
| 17      | EOL 2025      |
| 18      | ✔             |
| 19      | ✔             |
| 20      | Q3 2025       |

**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-window
```

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

```typescript
import { SDKWindowModule } from 'sdk-window';

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

## PROPERTIES:
#### Inputs:
- ```parent: (string):``` The id of the parent object. [Default "webspace"]
- ```windowID: (string):``` The id for the window.
- ```windowTitle: (string):``` The title to show in the header bar.
- ```windowColor: (string):``` The header bar background color. [Default "rgb(36, 144, 201)"]
- ```windowTitleColor: (string):``` The title font color. [Default "white"]
- ```windowContent: (TemplateRef):``` The reference name of the content template for the window.
- ```windowContentData: (any | undefined)``` Data passed into the content template.
- ```windowActions: (TemplateRef):``` The reference name of the actions template (i.e., buttons) to show in the right side of the header.
- ```windowActionsData: (any | undefined)``` Data passed into the actions template.
- ```zIndex: (number):``` The z-index (style) for the window. [Default 0]
- ```top: (string):``` Top position of the window. [Default "0"]
- ```left: (string):``` Left position of the window. [Default "0"]
- ```height: (string):``` Height of the window. [Default "500"]
- ```width: (string):``` Width of the window. [Default "600"]
- ```minHeight: (string):``` Minimum height of the window. [Default "300"]
- ```minWidth: (string):``` Minimum width of the window. [Default "300"]
- ```overflow: (string):``` Allow window content to be scrollable. [Default: "auto"]
- ```init: (boolean):``` Initially show the window. [Default false]
- ```fullscreen: (boolean):``` Set window to fullscreen (maximized). [Default false]
- ```centered: (boolean):``` Center window on init. [Default true]
- ```resizable: (boolean):``` Allow window to be resizable. [Default true]
- ```closeable: (boolean):``` Show close icon (right side of header). [Default true]
- ```maximize: (boolean):``` Show maximize icon (left side of header). [Default true]
- ```highlight: (boolean):``` Highlight window on focus. [Default true]

#### Outputs:
- ```adjustmentEvent``` Emitted when the window is resized or moved.

    returns:
    ```
    {
        window: (pointer to html element),
        top: (number),
        left: (number),
        height: (number),
        width: (number)
    }
    ```
- ```closeEvent``` Emitted when the window is closed.

## USAGE:
```html
<sdk-window
    [windowID]="'Demo'"
    [windowTitle]="'SDK-WINDOW Demo'"
    [windowContent]="content"
    [top]="'10'"
    [left]="'10'"
    [init]=true
    [centered]=false
    (adjustmentEvent)="windowMove($event)">
</sdk-window>

<ng-template #content>
    <div>window: {{ winProps.window }}</div>
    <div>top: {{ winProps.top }}</div>
    <div>left: {{ winProps.left }}</div>
    <div>height: {{ winProps.height }}</div>
    <div>width: {{ winProps.width }}</div>
</ng-template>
```

```typescript
public windowMove(event: any) {
    this.winProps = event;
}
```