sdk-window v2.1.1

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