Description:

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

NOTE: This package leverages the sdk-core-library for core configurations (i.e., colors, icons, etc.).

INSTALLATION:

Using NPM:

npm install --save sdk-window

CONFIGURATION:

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

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:

<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>

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