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 for core configurations (i.e., colors, icons, etc.).

INSTALLATION:

Using NPM:

1npm install --save sdk-window

CONFIGURATION:

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

1import { SDKWindowModule } from 'sdk-window';
2
3@NgModule({
4    imports: [
5        SDKWindowModule
6    ]
7})
8export 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:

1<sdk-window
2    [windowID]="'Demo'"
3    [windowTitle]="'SDK-WINDOW Demo'"
4    [windowContent]="content"
5    [top]="'10'"
6    [left]="'10'"
7    [init]=true
8    [centered]=false
9    (adjustmentEvent)="windowMove($event)">
10</sdk-window>
11
12<ng-template #content>
13    <div>window: {{ winProps.window }}</div>
14    <div>top: {{ winProps.top }}</div>
15    <div>left: {{ winProps.left }}</div>
16    <div>height: {{ winProps.height }}</div>
17    <div>width: {{ winProps.width }}</div>
18</ng-template>

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