Window JAVASCRIPT UI Component API

Window Javascript API

Class

Window

Window or Dialog displays the interactive custom confirmations, message boxes, alerts, warnings, errors, and modal dialogs.

Properties

addNewTabboolean

Determines if 'Add New' Tab inside the Tabs element is visible. Applicable only to TabsWindow

Default value

false

Example

Set the addNewTab property.

 <smart-window add-new-tab></smart-window>

Set the addNewTab property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.addNewTab = false;

Get the addNewTab property.

 const window = document.querySelector('smart-window');

 let addNewTab = window.addNewTab;

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-window animation='none'></smart-window>

Set the animation property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.animation = 'simple';

Get the animation property.

 const window = document.querySelector('smart-window');

 let animation = window.animation;

autoCapitalize"none" | "characters" | "words"

Determines whether and how the value should be automatically capitalized as it is entered/edited by the user. Applicable only to MultilinePromptWindow.

Allowed Values

"none" - Does not capitalize the input.
"characters" - Capitalizes every character that is entered.
"words" - Capitalizes only the first letter of every new words that is entered.

Default value

"none"

Example

Set the autoCapitalize property.

 <smart-window auto-capitalize='words'></smart-window>

Set the autoCapitalize property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.autoCapitalize = 'characters';

Get the autoCapitalize property.

 const window = document.querySelector('smart-window');

 let autoCapitalize = window.autoCapitalize;

autoExpandboolean

Determines whether element will auto expand when the input overflows vertically. Applicable only to MultilinePromptWindow.

Default value

false

Example

Set the autoExpand property.

 <smart-window auto-expand></smart-window>

Set the autoExpand property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.autoExpand = false;

Get the autoExpand property.

 const window = document.querySelector('smart-window');

 let autoExpand = window.autoExpand;

cancelLabelstring

Determines the label for the 'cancel' button inside the Prompt Window.

Default value

"Cancel"

Example

Set the cancelLabel property.

 <smart-window cancel-label='Ignore'></smart-window>

Set the cancelLabel property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.cancelLabel = 'Cancel';

Get the cancelLabel property.

 const window = document.querySelector('smart-window');

 let cancelLabel = window.cancelLabel;

completeLabelstring

Determines the label for the 'Complete' button insinde the Progress Window.

Default value

"Confirm"

Example

Set the completeLabel property.

 <smart-window complete-label='Finish'></smart-window>

Set the completeLabel property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.completeLabel = 'Complete';

Get the completeLabel property.

 const window = document.querySelector('smart-window');

 let completeLabel = window.completeLabel;

confirmLabelstring

Determines the label for the 'Confirm' button insinde the Prompt Window.

Default value

"Confirm"

Example

Set the confirmLabel property.

 <smart-window confirm-label='Agree'></smart-window>

Set the confirmLabel property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.confirmLabel = 'Confirm';

Get the confirmLabel property.

 const window = document.querySelector('smart-window');

 let confirmLabel = window.confirmLabel;

collapsedboolean

Determines if the window is collapsed or not. When collapsed the only the header of the window is visible.

Default value

false

Example

Set the collapsed property.

 <smart-window collapsed></smart-window>

Set the collapsed property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.collapsed = false;

Get the collapsed property.

 const window = document.querySelector('smart-window');

 let collapsed = window.collapsed;

closeOnMaskClickboolean

When a modal window is opened, thid property determines if clicking on the mask closes the window or not.

Default value

false

Example

Set the closeOnMaskClick property.

 <smart-window close-on-mask-click></smart-window>

Set the closeOnMaskClick property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.closeOnMaskClick = false;

Get the closeOnMaskClick property.

 const window = document.querySelector('smart-window');

 let closeOnMaskClick = window.closeOnMaskClick;

dataSource{label: string, content: string}[]

Determines the data source that will be loaded to the TabsWindow. Applicable only to TabsWindow.

Example

Set the dataSource property.

 <smart-window data-source='[{ "label": "Item 1", "content": "content 1" }, { "label": "Item 2", "content": "content 2" }, { "label": "Item 3", "content": "content 3", "selected": true }]'></smart-window>

Set the dataSource property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.dataSource = [{ label: 'Item A', content: 'Content A', index: 3 }, { label: 'Item B', labelSize: 100, content: 'Content B', selected: true, index: 2 }, { label: 'Item C', content: 'Content C', index: 1 }, { label: 'Item D', content: 'Content D', index: 0 }];

Get the dataSource property.

 const window = document.querySelector('smart-window');

 let dataSource = window.dataSource;

disabledboolean

Enables or disables the window.

Default value

false

Example

Set the disabled property.

 <smart-window disabled></smart-window>

Set the disabled property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.disabled = false;

Get the disabled property.

 const window = document.querySelector('smart-window');

 let disabled = window.disabled;

disableSnapboolean

Enables or disables the window snapping feature.

Default value

false

Example

Set the disableSnap property.

 <smart-window disable-snap></smart-window>

Set the disableSnap property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.disableSnap = false;

Get the disableSnap property.

 const window = document.querySelector('smart-window');

 let disableSnap = window.disableSnap;

disableEscapeboolean

By default the window is closing after the 'Escape' key is pressed. Set this property to true, if you want to disable that.

Default value

false

Example

Set the disableEscape property.

 <smart-window disable-escape></smart-window>

Set the disableEscape property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.disableEscape = false;

Get the disableEscape property.

 const window = document.querySelector('smart-window');

 let disableEscape = window.disableEscape;

disableKeyboardboolean

By default the window is handling keyboard keys like 'Arrows', 'Escape', etc. Set this property to true, if you want to disable that.

Default value

false

Example

Set the disableKeyboard property.

 <smart-window disable-keyboard></smart-window>

Set the disableKeyboard property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.disableKeyboard = false;

Get the disableKeyboard property.

 const window = document.querySelector('smart-window');

 let disableKeyboard = window.disableKeyboard;

displayMode"default" | "escaped"

Determines how the characters are displayed inside the input. Applicable to Prompt Window.

Allowed Values

"default" - Default behavior. Every character is as is.
"escaped" - Replaces the special characters with their corresponding character codes. For example, line breaks are replace with '\n'.

Default value

"default"

Try a demo showcasing the displayMode property.

Example

Set the displayMode property.

 <smart-window display-mode='escaped'></smart-window>

Set the displayMode property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.displayMode = 'default';

Get the displayMode property.

 const window = document.querySelector('smart-window');

 let displayMode = window.displayMode;

dropPosition"all" | "top" | "bottom" | "left" | "right" | "center" | "header" | "layout-top" | "layout-bottom" | "layout-left" | "layout-right"

Applicable to TabsWindow when docked inside a DockingLayout Custom Element.
Determines where the window(it's tab items as well) can be dropped inside the DockingLayout.
The property is an array that accepts multiple positions. Note: Positions with prefix 'layout-' are applied to the Tab item children of the TabsWidnow owner that is being dragged. The rest of the positions indicate the allowed drop position inside the hovered target(TabsWindow). Used only by smartDockingLayout custom elements. Determines the possible drop position inside the DockingLayout. The following values are allowed.

Default value

Example

Set the dropPosition property.

 <smart-window drop-position=''top', 'bottom', 'center', 'layout-top', 'layout-bottom''></smart-window>

Set the dropPosition property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.dropPosition = all;

Get the dropPosition property.

 const window = document.querySelector('smart-window');

 let dropPosition = window.dropPosition;

formatFunctionfunction | null

A callback function defining the new format for the label of the Progress Bar. Applicable only to ProgressWindow.

Example

Set the formatFunction property.

 <smart-window format-function='function(value) { return value + "$" }'></smart-window>

Set the formatFunction property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.formatFunction = function(value) { return "$" + value };

Get the formatFunction property.

 const window = document.querySelector('smart-window');

 let formatFunction = window.formatFunction;

footerPosition"bottom" | "none"

Determines the position of the footer of the window element.

Default value

"top"

Example

Set the footerPosition property.

 <smart-window footer-position='none'></smart-window>

Set the footerPosition property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.footerPosition = 'bottom';

Get the footerPosition property.

 const window = document.querySelector('smart-window');

 let footerPosition = window.footerPosition;

footerTemplateany

Determines the template for the Dialog section of the window. By default footerTemplate is null.

Example

Set the footerTemplate property.

 <smart-window footer-template='templateA'></smart-window>

Set the footerTemplate property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.footerTemplate = templateB;

Get the footerTemplate property.

 const window = document.querySelector('smart-window');

 let footerTemplate = window.footerTemplate;

headerButtonsstring[]

Set's the buttons that will be visible in the header section.

Example

Set the headerButtons property.

 <smart-window header-buttons='["pin", "minimize", "maximize",  "close"]'></smart-window>

Set the headerButtons property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.headerButtons = ["collapse", "close"];

Get the headerButtons property.

 const window = document.querySelector('smart-window');

 let headerButtons = window.headerButtons;

headerTemplateany

Determines the template for the Dialog section of the window. By default headerTemplate is null.

Example

Set the headerTemplate property.

 <smart-window header-template='templateA'></smart-window>

Set the headerTemplate property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.headerTemplate = templateB;

Get the headerTemplate property.

 const window = document.querySelector('smart-window');

 let headerTemplate = window.headerTemplate;

headerPosition"top" | "bottom" | "left" | "right" | "none"

Determines the position of the header of the window element.

Default value

"top"

Example

Set the headerPosition property.

 <smart-window header-position='left'></smart-window>

Set the headerPosition property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.headerPosition = 'bottom';

Get the headerPosition property.

 const window = document.querySelector('smart-window');

 let headerPosition = window.headerPosition;

hintany

Sets additional helper text below the text box. The hint is visible only when the text box is focued. Applicable to Prompt Window.

Example

Set the hint property.

 <smart-window hint='Helper text'></smart-window>

Set the hint property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.hint = Hint;

Get the hint property.

 const window = document.querySelector('smart-window');

 let hint = window.hint;

indeterminateboolean

Sets the value of the Progress bar to indeterminate state(null) and starts the animation. Applicable only to ProgressWindow.

Default value

false

Example

Set the indeterminate property.

 <smart-window indeterminate></smart-window>

Set the indeterminate property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.indeterminate = false;

Get the indeterminate property.

 const window = document.querySelector('smart-window');

 let indeterminate = window.indeterminate;

invertedboolean

Sets the filling direction of the Progress Bar. Applicable only to ProgressWindow.

Default value

false

Example

Set the inverted property.

 <smart-window inverted></smart-window>

Set the inverted property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.inverted = false;

Get the inverted property.

 const window = document.querySelector('smart-window');

 let inverted = window.inverted;

labelstring

The label of the window that appears in the header area.

Default value

Example

Set the label property.

 <smart-window label='Window 1'></smart-window>

Set the label property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.label = 'New Window';

Get the label property.

 const window = document.querySelector('smart-window');

 let label = window.label;

liveResizeboolean

When enabled the resizing operation happens live. By default it's not enabled and during resizing a highlighter around the edges of the window appears to outline the current size of the element.

Default value

false

Example

Set the liveResize property.

 <smart-window live-resize></smart-window>

Set the liveResize property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.liveResize = true;

Get the liveResize property.

 const window = document.querySelector('smart-window');

 let liveResize = window.liveResize;

layoutany

Applicable only to TabsWindow when used with a DockingLayout custom element.Used only by smartDockingLayout. Determines the owner smartDockingLayout that the window belongs to. When the tabsWindow has been removed from a DockingLayout element, the property is used to indicate that it belongs to that particular Dockinglayout. Accepts a string, representing the ID of a smartDockingLayout on the page, or an instance of smartDokcingLayout.

Example

Set the layout property.

 <smart-window layout='dockingLayoutId1'></smart-window>

Set the layout property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.layout = dockingLayoutId2;

Get the layout property.

 const window = document.querySelector('smart-window');

 let layout = window.layout;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-window locale='de'></smart-window>

Set the locale property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.locale = 'fr';

Get the locale property.

 const window = document.querySelector('smart-window');

 let locale = window.locale;

lockedboolean

Applicable only to TabsWindow when docked inside a DockingLayout Custom Element.Determines of the item can be resized or not.

Default value

false

Example

Set the locked property.

 <smart-window locked></smart-window>

Set the locked property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.locked = false;

Get the locked property.

 const window = document.querySelector('smart-window');

 let locked = window.locked;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

 <smart-window localize-format-function='function(){return '...'}'></smart-window>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

 const window = document.querySelector('smart-window');

 let localizeFormatFunction = window.localizeFormatFunction;

maximizedboolean

Determines if the window is maximized or not. When maximized the window covers the whole viewport.

Default value

false

Example

Set the maximized property.

 <smart-window maximized></smart-window>

Set the maximized property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.maximized = false;

Get the maximized property.

 const window = document.querySelector('smart-window');

 let maximized = window.maximized;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property.

 <smart-window messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-window>

Set the messages property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property.

 const window = document.querySelector('smart-window');

 let messages = window.messages;

modalboolean

Determines if the window is modal or not. If true the user can only interact with the window and nothing else on the page.

Default value

false

Example

Set the modal property.

 <smart-window modal></smart-window>

Set the modal property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.modal = false;

Get the modal property.

 const window = document.querySelector('smart-window');

 let modal = window.modal;

maxstring | number | null

Applicable to TabsWindow when docked inside a DockingLayout Custom Element. Determines the max size of the item. Applicable to Progress Window by allowing the user to specify the maximum of the ProgressBar.

Default value

Example

Set the max property.

 <smart-window max='250'></smart-window>

Set the max property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.max = 100;

Get the max property.

 const window = document.querySelector('smart-window');

 let max = window.max;

minstring | number | null

Applicable to TabsWindow when docked inside DockingLayout Custom Element. Determines the min size of the item. Applicable to Progress Window by allowing the user to specify the minimu of the ProgressBar.

Default value

Example

Set the min property.

 <smart-window min='50'></smart-window>

Set the min property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.min = 100;

Get the min property.

 const window = document.querySelector('smart-window');

 let min = window.min;

minimizedboolean

Determines if the window is minimized or not. When minimized the window is docked at the bottom left corner of the viewport.

Default value

false

Example

Set the minimized property.

 <smart-window minimized></smart-window>

Set the minimized property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.minimized = false;

Get the minimized property.

 const window = document.querySelector('smart-window');

 let minimized = window.minimized;

maxLengthnumber

Sets or gets the maximum number of characters that the user can enter. Applicable to Prompt/MultilinePrompt Window.

Example

Set the maxLength property.

 <smart-window max-length='120'></smart-window>

Set the maxLength property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.maxLength = 150;

Get the maxLength property.

 const window = document.querySelector('smart-window');

 let maxLength = window.maxLength;

minLengthnumber

Sets or gets the minimum number of characters that the user have to enter to trigger the auto complete functionality. Applicable to Prompt/MultilinePrompt Window.

Default value

Try a demo showcasing the minLength property.

Example

Set the minLength property.

 <smart-window min-length='1'></smart-window>

Set the minLength property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.minLength = 3;

Get the minLength property.

 const window = document.querySelector('smart-window');

 let minLength = window.minLength;

openedboolean

Determines if the window is visible or not.

Default value

false

Example

Set the opened property.

 <smart-window opened></smart-window>

Set the opened property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.opened = false;

Get the opened property.

 const window = document.querySelector('smart-window');

 let opened = window.opened;

pinnedboolean

Determines if the window is pinned or not. Pinned window is a window that can't be dragged but can be resized.

Default value

false

Example

Set the pinned property.

 <smart-window pinned></smart-window>

Set the pinned property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.pinned = false;

Get the pinned property.

 const window = document.querySelector('smart-window');

 let pinned = window.pinned;

placeholderstring

Determines the input's placeholder. Applicable to Prompt Window.

Default value

Try a demo showcasing the placeholder property.

Example

Set the placeholder property.

 <smart-window placeholder='Choose:'></smart-window>

Set the placeholder property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.placeholder = 'Submit';

Get the placeholder property.

 const window = document.querySelector('smart-window');

 let placeholder = window.placeholder;

promptLabelstring

Determines the label for the Input insinde the PromptWindow.

Default value

Example

Set the promptLabel property.

 <smart-window prompt-label='Please Enter:'></smart-window>

Set the promptLabel property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.promptLabel = '';

Get the promptLabel property.

 const window = document.querySelector('smart-window');

 let promptLabel = window.promptLabel;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

 <smart-window readonly></smart-window>

Set the readonly property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.readonly = true;

Get the readonly property.

 const window = document.querySelector('smart-window');

 let readonly = window.readonly;

resizeIndicatorboolean

When applied a resize indicator is displayed in the bottom right corner of the window and resizing operation can be initiated only from its position.

Default value

false

Example

Set the resizeIndicator property.

 <smart-window resize-indicator></smart-window>

Set the resizeIndicator property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.resizeIndicator = false;

Get the resizeIndicator property.

 const window = document.querySelector('smart-window');

 let resizeIndicator = window.resizeIndicator;

resizeMode"none" | "horizontal" | "vertical" | "both" | "top" | "bottom" | "left" | "right"

Determines the resizing mode of the window.
Several modes are available:

none - resizing is disabled.
vertical - vertical resizing is allowed.
horizontal - horizontal resizing is allowed.
both - horizontal and vertical resizing is allowed.
top - the window can only be resized from the top side.
bottom - the window is resizable only from the bottom side.
left - the window can be resized only from the left side.
right - the window can be resized only from the right side.

Default value

"none"

Example

Set the resizeMode property.

 <smart-window resize-mode='vertical'></smart-window>

Set the resizeMode property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.resizeMode = 'horizontal';

Get the resizeMode property.

 const window = document.querySelector('smart-window');

 let resizeMode = window.resizeMode;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-window right-to-left></smart-window>

Set the rightToLeft property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.rightToLeft = false;

Get the rightToLeft property.

 const window = document.querySelector('smart-window');

 let rightToLeft = window.rightToLeft;

requiredboolean

Specifies that the user must fill the input before submitting a form with the text box.Applicable to Prompt Window.

Default value

false

Example

Set the required property.

 <smart-window required></smart-window>

Set the required property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.required = false;

Get the required property.

 const window = document.querySelector('smart-window');

 let required = window.required;

requiredMessagestring

Specifies the message that will appear if required is set and no value is provided in the input. Applicable to Prompt Window.

Default value

Example

Set the requiredMessage property.

 <smart-window required-message='Required'></smart-window>

Set the requiredMessage property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.requiredMessage = 'Mandatory';

Get the requiredMessage property.

 const window = document.querySelector('smart-window');

 let requiredMessage = window.requiredMessage;

selectAllOnFocusboolean

Determines whether the content of the input will be selected on focus or not. Applicable to Prompt Window.

Default value

false

Example

Set the selectAllOnFocus property.

 <smart-window select-all-on-focus></smart-window>

Set the selectAllOnFocus property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.selectAllOnFocus = false;

Get the selectAllOnFocus property.

 const window = document.querySelector('smart-window');

 let selectAllOnFocus = window.selectAllOnFocus;

selectedIndexnumber | null

Sets or gets which tab is selected. Applicable only to TabsWindow.

Example

Set the selectedIndex property.

 <smart-window selected-index='2'></smart-window>

Set the selectedIndex property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.selectedIndex = 0;

Get the selectedIndex property.

 const window = document.querySelector('smart-window');

 let selectedIndex = window.selectedIndex;

selectionMode"click" | "dblclick" | "mouseenter" | "none"

Determines the way the user can switch between tabs. Applicable only to TabsWindow.

Default value

"click"

Example

Set the selectionMode property.

 <smart-window selection-mode='dblclick'></smart-window>

Set the selectionMode property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.selectionMode = 'mouseenter';

Get the selectionMode property.

 const window = document.querySelector('smart-window');

 let selectionMode = window.selectionMode;

selectionEndnumber

Indicates the index of the last character in the current selection. Applicable only to MultilinePromptWindow.

Default value

Example

Set the selectionEnd property.

 <smart-window selection-end='40'></smart-window>

Set the selectionEnd property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.selectionEnd = 60;

Get the selectionEnd property.

 const window = document.querySelector('smart-window');

 let selectionEnd = window.selectionEnd;

selectionStartnumber

Indicates the index to the first character in the current selection. Applicable only to MultilinePromptWindow.

Default value

Example

Set the selectionStart property.

 <smart-window selection-start='40'></smart-window>

Set the selectionStart property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.selectionStart = 60;

Get the selectionStart property.

 const window = document.querySelector('smart-window');

 let selectionStart = window.selectionStart;

showProgressValueboolean

Enables/Disabled the label for the Progress Bar. Applicable only to Progress Window.

Default value

false

Example

Set the showProgressValue property.

 <smart-window show-progress-value></smart-window>

Set the showProgressValue property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.showProgressValue = false;

Get the showProgressValue property.

 const window = document.querySelector('smart-window');

 let showProgressValue = window.showProgressValue;

siblingsobject[]

A getter that returns the siblings (that share the same parent) of a LayoutPanel item that is docked inside a DockingLayout. The siblings are also DockingLayout items ( LayoutPanels).Applicable only to TabsWindow when docked inside a DockingLayout.

sizestring

Applicable to TabsWindow when nested inside a DockingLayout Custom Element. Determines the size of the item.

Default value

Example

Set the size property.

 <smart-window size='250'></smart-window>

Set the size property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.size = '25%';

Get the size property.

 const window = document.querySelector('smart-window');

 let size = window.size;

spellCheckboolean

Specifies whether the element is to have its spelling and grammar checked or not. Applicable only to MultilinePromptWindow.

Default value

false

Example

Set the spellCheck property.

 <smart-window spell-check></smart-window>

Set the spellCheck property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.spellCheck = false;

Get the spellCheck property.

 const window = document.querySelector('smart-window');

 let spellCheck = window.spellCheck;

tabCloseButtonsboolean

Sets or gets whether close buttons are displayed inside the Tab Strip of the TabsWindow. Applicable only to TabsWindow.

Default value

false

Example

Set the tabCloseButtons property.

 <smart-window tab-close-buttons></smart-window>

Set the tabCloseButtons property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.tabCloseButtons = false;

Get the tabCloseButtons property.

 const window = document.querySelector('smart-window');

 let tabCloseButtons = window.tabCloseButtons;

tabCloseButtonMode"default" | "selected"

Determines if the close button is visible on select or always. Applicable only to TabsWindow.

Default value

"default"

Example

Set the tabCloseButtonMode property.

 <smart-window tab-close-button-mode='left'></smart-window>

Set the tabCloseButtonMode property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.tabCloseButtonMode = 'bottom';

Get the tabCloseButtonMode property.

 const window = document.querySelector('smart-window');

 let tabCloseButtonMode = window.tabCloseButtonMode;

tabOverflow"auto" | "hidden" | "scroll"

Sets or gets the Tabs scroll buttons behavior. Applicable only when tabLayout is 'scroll'. Applicable only to TabsWindow.

Default value

"auto"

Example

Set the tabOverflow property.

 <smart-window tab-overflow='hidden'></smart-window>

Set the tabOverflow property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.tabOverflow = 'scroll';

Get the tabOverflow property.

 const window = document.querySelector('smart-window');

 let tabOverflow = window.tabOverflow;

tabPosition"top" | "bottom" | "left" | "right" | "hidden"

Detetmines Tab Strip is positioned of the TabsWindow. Applicable only to TabsWindow.

Default value

"top"

Example

Set the tabPosition property.

 <smart-window tab-position='bottom'></smart-window>

Set the tabPosition property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.tabPosition = 'left';

Get the tabPosition property.

 const window = document.querySelector('smart-window');

 let tabPosition = window.tabPosition;

tabScrollButtonsPosition"near" | "far" | "both"

Sets or gets the position of the scroll buttons inside the Tab header of the TabsWindow. Applicable only to TabsWindow.

Default value

"both"

Example

Set the tabScrollButtonsPosition property.

 <smart-window tab-scroll-buttons-position='near'></smart-window>

Set the tabScrollButtonsPosition property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.tabScrollButtonsPosition = 'far';

Get the tabScrollButtonsPosition property.

 const window = document.querySelector('smart-window');

 let tabScrollButtonsPosition = window.tabScrollButtonsPosition;

tabTextOrientation"horizontal" | "vertical"

Sets or gets the orientation of the text in the tabs labels of the TabsWindow. Applicable only to TabsWindow.

Default value

"horizontal"

Example

Set the tabTextOrientation property.

 <smart-window tab-text-orientation='vertical'></smart-window>

Set the tabTextOrientation property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.tabTextOrientation = 'horizontal';

Get the tabTextOrientation property.

 const window = document.querySelector('smart-window');

 let tabTextOrientation = window.tabTextOrientation;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-window theme='blue'></smart-window>

Set the theme property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.theme = 'red';

Get the theme property.

 const window = document.querySelector('smart-window');

 let theme = window.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-window unfocusable></smart-window>

Set the unfocusable property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.unfocusable = false;

Get the unfocusable property.

 const window = document.querySelector('smart-window');

 let unfocusable = window.unfocusable;

valuestring? | number?

Determines the value of the TextBox/ProgressBar inside the Dialog/Prompt/Progress Window

Default value

Example

Set the value property.

 <smart-window value='50'></smart-window>

Set the value property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.value = Value;

Get the value property.

 const window = document.querySelector('smart-window');

 let value = window.value;

windowParentany

Determines the actual parent of the element. The window can size and move only in the area of that element.

Example

Set the windowParent property.

 <smart-window window-parent='container1'></smart-window>

Set the windowParent property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.windowParent = 'body';

Get the windowParent property.

 const window = document.querySelector('smart-window');

 let windowParent = window.windowParent;

wrap"hard" | "soft" | "off"

Indicates how the input wraps text. Applicable only to MultilinePromptWindow.

Allowed Values

"hard" - The text in the input is wrapped (contains newlines) when submitted in a form. The cols attribute must be specified.
"soft" - The text in the injput is not wrapped when submitted in a form. This is default
"off" - The text inside the input is not being wrapped to a new line when submitted in a form.

Default value

"soft"

Example

Set the wrap property.

 <smart-window wrap='hard'></smart-window>

Set the wrap property by using the HTML Element's instance.

 const window = document.querySelector('smart-window');

 window.wrap = 'soft';

Get the wrap property.

 const window = document.querySelector('smart-window');

 let wrap = window.wrap;

Events

openingCustomEvent

This event is triggered just before the window starts opening.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onOpening

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of opening event.

const window = document.querySelector('smart-window');
window.addEventListener('opening', function (event) {
	// event handling code goes here.
})

openCustomEvent

This event is triggered when the window is opened( visible ).

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event.

const window = document.querySelector('smart-window');
window.addEventListener('open', function (event) {
	// event handling code goes here.
})

closingCustomEvent

This event is triggered just before the window starts closing.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onClosing

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event.

const window = document.querySelector('smart-window');
window.addEventListener('closing', function (event) {
	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the window is closed( hidden )

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event.

const window = document.querySelector('smart-window');
window.addEventListener('close', function (event) {
	// event handling code goes here.
})

collapseCustomEvent

This event is triggered when the window is collapsed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCollapse

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapse event.

const window = document.querySelector('smart-window');
window.addEventListener('collapse', function (event) {
	// event handling code goes here.
})

dragEndCustomEvent

This event is triggered when window's dragging is ended.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragEnd

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragEnd event.

const window = document.querySelector('smart-window');
window.addEventListener('dragEnd', function (event) {
	// event handling code goes here.
})

dragStartCustomEvent

This event is triggered when window's dragging is started.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragStart

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragStart event.

const window = document.querySelector('smart-window');
window.addEventListener('dragStart', function (event) {
	// event handling code goes here.
})

expandCustomEvent

This event is triggered when the window is expanded.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onExpand

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expand event.

const window = document.querySelector('smart-window');
window.addEventListener('expand', function (event) {
	// event handling code goes here.
})

maximizeCustomEvent

This event is triggered when the window is maximized.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onMaximize

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of maximize event.

const window = document.querySelector('smart-window');
window.addEventListener('maximize', function (event) {
	// event handling code goes here.
})

minimizeCustomEvent

This event is triggered when the window is minimized.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onMinimize

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of minimize event.

const window = document.querySelector('smart-window');
window.addEventListener('minimize', function (event) {
	// event handling code goes here.
})

resizeEndCustomEvent

This event is triggered when window's resizing is ended.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeEnd

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeEnd event.

const window = document.querySelector('smart-window');
window.addEventListener('resizeEnd', function (event) {
	// event handling code goes here.
})

resizeStartCustomEvent

This event is triggered when window's resizing is started.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeStart

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeStart event.

const window = document.querySelector('smart-window');
window.addEventListener('resizeStart', function (event) {
	// event handling code goes here.
})

restoreCustomEvent

This event is triggered when the window is restored to it's previous state before maximization.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRestore

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of restore event.

const window = document.querySelector('smart-window');
window.addEventListener('restore', function (event) {
	// event handling code goes here.
})

Methods

appendChild( node: Node): T

Arguments

nodeNode

A TabItem element that should be added to the rest of the items as the last item.

ReturnsNode

bringToFront(): void

Sets the window to the top level so the user can interact with it.

Invoke the bringToFront method.

const window = document.querySelector('smart-window');
window.bringToFront();

clear(): void

Clears the content of the Window.

Invoke the clear method.

const window = document.querySelector('smart-window');
window.clear();

close(): void

Closes the window.

Invoke the close method.

const window = document.querySelector('smart-window');
window.close();

collapse(): HTMLElement

Collapses the window.

ReturnsHTMLElement

Invoke the collapse method.

const window = document.querySelector('smart-window');
const result = window.collapse("First","Second");

ensureVisible( index: number): void

Makes sure a tab item is visible by scrolling to it. Applicable only to TabsWindow.

Arguments

indexnumber

The index of the tab to scroll to.

Invoke the ensureVisible method.

const window = document.querySelector('smart-window');
window.ensureVisible(2);

expand(): []

Expands the window after being collapsed.

Returns[]

Invoke the expand method.

const window = document.querySelector('smart-window');
const result = window.expand();

insert( index: number, details: any): void

Inserts a new tab and an associated content section. Applicable only to TabsWindow.

Arguments

indexnumber

The index to insert a new tab at.

detailsany

An Object with the fields "label", "labelSize", "content" and "group".

Invoke the insert method.

const window = document.querySelector('smart-window');
window.insert(1,{"label":"New TAB","content":"New content"});

insertBefore( newNode: Node, referenceNode?: Node | null): T

Arguments

newNodeNode

The "smart-tab-item" node to insert.

referenceNode?Node | null

The "smart-tab-item" node before which newNode is inserted.

ReturnsNode

move( left: string | number, top: string | number): void

Moves the window to a new position

Arguments

leftstring | number

Left position. For example: '100px'.

topstring | number

Top position. For example: '100px'.

Invoke the move method.

const window = document.querySelector('smart-window');
window.move("tabItem");

maximize(): void

Maximizes the window to fill the area.

Invoke the maximize method.

const window = document.querySelector('smart-window');
window.maximize();

minimize(): void

Minimizes the window.

Invoke the minimize method.

const window = document.querySelector('smart-window');
window.minimize();

open(): void

Opens the window

Invoke the open method.

const window = document.querySelector('smart-window');
window.open();

pin(): void

Pins the window. Disables window dragging.

Invoke the pin method.

const window = document.querySelector('smart-window');
window.pin();

removeAt( index: number): void

Removes a tab and its associated content section. Applicable only to TabsWindow.

Arguments

indexnumber

The index of the tab to remove.

Invoke the removeAt method.

const window = document.querySelector('smart-window');
window.removeAt(5);

removeChild( node: Node): T

Arguments

nodeNode

The "smart-tab-item" node to remove.

ReturnsNode

restore(): void

Restores the window to it's previous size before maximization/minimization.

Invoke the restore method.

const window = document.querySelector('smart-window');
window.restore();

select( index: number): void

Selects a tab. Applicalbe only to TabsWindow elements.

Arguments

indexnumber

The index of the tab to select.

Invoke the select method.

const window = document.querySelector('smart-window');
window.select(5);

unpin(): void

Unpins the window. Enables window dragging.

Invoke the unpin method.

const window = document.querySelector('smart-window');
window.unpin();

updateLabel( label: string): void

Updates the header label.

Arguments

labelstring

The new label of the Header.

Invoke the updateLabel method.

const window = document.querySelector('smart-window');
window.updateLabel("Updated content");

updateContent( content: string | HTMLElement): void

Updates the content.

Arguments

contentstring | HTMLElement

The new content of the window.

Invoke the updateContent method.

const window = document.querySelector('smart-window');
window.updateContent("Updated content");

update( index: number, label: string, content: string | HTMLElement): void

Updates a TAB in TAB Window and its associated content section. Applies only to TabsWindow elements.

Arguments

indexnumber

The index of the tab to update.

labelstring

The new label of the tab. The value can be the id of an HTMLTemplateElement

contentstring | HTMLElement

The new content of the tab.

Invoke the update method.

const window = document.querySelector('smart-window');
window.update(5,"Updated TAB","Updated content");

CSS Variables

--smart-window-default-heightvar()

Default value

"var(--smart-box-height)"

smartWindow default height

--smart-window-default-widthvar()

Default value

"var(--smart-box-width)"

smartWindow default width

--smart-window-header-heightvar()

Default value

"var(--smart-bar-height)"

smartWindow header height

Default value

"var(--smart-bar-height)"

smartWindow footer height

--smart-window-min-widthvar()

Default value

"250px"

smartWindow header width

--smart-window-header-footer-paddingvar()

Default value

"10px"

smartWindow header and footer padding