Window JAVASCRIPT UI Component API

Window Javascript API

Class

Window

Window

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

Selector

smart-window

Properties

AaddNewTabDetermines whether the 'Add New' tab within the Tabs element is currently visible to the user. Note: This property is only relevant when used with the TabsWindow component; it does not apply to other components.
AanimationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. If set to any other supported value, animations will be enabled and behave according to the specified mode.
AautoCapitalizeControls the automatic capitalization behavior for user input as it is entered or edited. This setting specifies whether characters are auto-capitalized (e.g., sentences, words, or all characters) in the input field. Note: This property is only relevant when used with the MultilinePromptWindow component.
AautoExpandSpecifies whether the element should automatically expand its height to accommodate vertically overflowing input. Note: This setting only applies to MultilinePromptWindow components.
CcancelLabelSpecifies the text displayed on the 'Cancel' button within the Prompt Window. This label informs users which button will dismiss or close the prompt without taking any action.
CcompleteLabelSpecifies the text that appears on the 'Complete' button within the Progress Window, allowing customization of the button label to better suit user interface requirements.
CconfirmLabelSpecifies the text displayed on the 'Confirm' button within the Prompt Window, allowing customization of the button label to suit your application's context.
CcollapsedIndicates whether the window is currently collapsed. When set to true, only the window's header is displayed while the content area is hidden. If false, both the header and the full content of the window are visible.
CcloseOnMaskClickWhen a modal window is opened, this property specifies whether clicking on the overlay (mask) outside the modal will close the window. Set it to true to allow users to dismiss the modal by clicking the mask, or false to require an explicit action (such as clicking a close button) to close the modal.
DdataSourceSpecifies the data source to be loaded into the TabsWindow component. This property is relevant exclusively for the TabsWindow and will not affect other components.
DdisabledControls whether the window is active and visible to the user. When enabled, the window is operational and can be interacted with; when disabled, the window is hidden or inactive, and user interactions are ignored.
DdisableSnapControls whether the window snapping feature is active. When enabled, users can automatically align and resize windows by dragging them to the edges or corners of the screen. Disabling this feature prevents windows from snapping into place during movement.
DdisableEscapeBy default, pressing the 'Escape' key will automatically close the window. To prevent the window from closing when 'Escape' is pressed, set this property to true.
DdisableKeyboardBy default, the window handles certain keyboard inputs such as the arrow keys ('ArrowUp', 'ArrowDown', etc.), 'Escape', and similar keys for scrolling or navigation actions. Set this property to true to disable the window’s default keyboard handling, allowing you to manage these key events manually within your application.
DdisplayModeSpecifies the visual presentation of characters entered within the input field. For example, this setting can control whether characters are shown as plain text or masked (such as for password fields). This option applies specifically to the Prompt Window component.
DdropPosition''Applicable to TabsWindow components when they are docked within a DockingLayout Custom Element.This property specifies the valid drop locations for the window—and its tab items—inside the DockingLayout. The property accepts an array of positional values, allowing you to define multiple allowable drop zones.Details: Positions prefixed with 'layout-' apply to each individual tab item (child element) of the TabsWindow being dragged. These determine where tab items can be dropped within the overall layout, outside their original container. Other position values (without the 'layout-' prefix) indicate allowed drop positions directly within the hovered target TabsWindow, specifying where the whole window or its tabs can be placed relative to the target window.Notes: This property is used exclusively by smartDockingLayout custom elements. It controls the possible drop targets—both at the window and tab levels—within the DockingLayout environment.Allowed Values: The array values specify the permitted drop positions. Refer to the documentation for a complete list of supported position strings.
FformatFunctionA callback function that specifies how to format the label displayed on the Progress Bar. This function allows customization of the label's content or appearance based on the current progress value. Note: This property is only applicable to the ProgressWindow component.
FfooterPositionSpecifies the exact placement or alignment of the footer section within the window element, such as positioning it at the bottom, fixed, absolute, or relative to other content. This property controls where the footer appears in relation to the window’s layout.
FfooterTemplateSpecifies the custom template used to render the footer section of the Dialog window. If footerTemplate is set to null (the default), the Dialog will not display a footer section. You can provide a template string or a function to customize the appearance and content of the Dialog’s footer.
HheaderButtonsSpecifies which buttons will be displayed in the header section, allowing you to control the visibility of header actions for users. Click for more details. Property object's options:
    HheaderTemplateSpecifies the custom template to be used for rendering the header section of the dialog window. If headerTemplate is set to null (the default value), the dialog will display its standard header layout. By providing a template, you can fully customize the appearance and content of the dialog's header area.
    HheaderPositionSpecifies the exact placement of the header section within the window element, such as top, bottom, left, or right. This setting controls where the header appears relative to the content of the window.
    HhintDisplays supplementary helper text beneath the text box, providing users with additional guidance or context. This hint appears only when the text box is focused (i.e., the user is actively typing or has selected the field). Note: This property is specifically applicable to the Prompt Window component.
    IindeterminateSets the Progress bar value to the indeterminate state ('null'), activating its loading animation to indicate ongoing progress without a defined endpoint. Note: This property is only applicable when used within a ProgressWindow component.
    IinvertedSpecifies the direction in which the Progress Bar fills (e.g., left-to-right, right-to-left, top-to-bottom, or bottom-to-top). Note: This property is only applicable when used within a ProgressWindow component.
    LlabelSpecifies the text displayed as the window title in the header section, typically shown at the top of the application window or dialog box.
    LliveResizeWhen enabled, the resizing operation updates the element’s size in real time as the user drags its edges, providing immediate visual feedback. By default, this feature is disabled; instead, a highlighter appears around the edges of the window during resizing to indicate the prospective new size, while the element itself resizes only once the operation is complete.
    LlayoutNote: This property is relevant only for TabsWindow elements that are utilized within a DockingLayout custom element.This property is exclusively used by smartDockingLayout to specify ownership of a TabsWindow. It determines which smartDockingLayout instance the window is associated with. If a TabsWindow is removed from its parent DockingLayout element, this property continues to reference the original docking layout to which it belonged.The property accepts either: A string representing the id of a smartDockingLayout present on the page. An instance of a smartDockingLayout object.This allows for flexible identification of the owning layout, either by ID or by direct reference to the layout instance.
    UunlockKeyGets or sets the unlockKey, a unique code required to activate or unlock access to the product’s full features or licensed functionality.
    LlocaleSpecifies the language to be used for displaying messages. This property can be set or retrieved, and works in conjunction with the messages property to determine which set of localized messages is shown to the user. Changing the language updates the displayed messages accordingly.
    LlockedNote: This property is only applicable to a TabsWindow when it is docked within a DockingLayout custom element. When enabled, it controls whether the TabsWindow can be resized by the user. If set to true, users will be able to adjust the size of the TabsWindow within the DockingLayout; if set to false, resizing will be disabled and the TabsWindow will have a fixed size.
    LlocalizeFormatFunctionCallback function used within the localization module, typically invoked when a localization event occurs (e.g., language change, resource load). This callback handles tasks such as updating UI elements or retrieving localized content based on the current language settings.
    MmaximizedIndicates whether the window is currently maximized. When set to true, the window expands to fill the entire available viewport, covering all other interface elements and leaving no visible borders or title bars. If false, the window retains its previous size and position. This property can be used to programmatically check or control the window’s maximized state within the application.
    MmessagesDefines or retrieves an object containing localized strings used throughout the widget’s user interface. This property allows developers to customize the widget’s displayed text for different languages and regions. It is typically used together with the locale property to ensure that the widget adapts its content based on the selected language or regional settings.
    MmodalSpecifies whether the window should function as a modal dialog. When set to true, the window captures user focus and prevents interaction with any other elements on the page until it is closed. This ensures that the user must address or dismiss the modal window before returning to the rest of the content.
    MmaxFor use with TabsWindow when docked within a DockingLayout custom element: Specifies the maximum size that the TabsWindow component can occupy when it is docked. For the ProgressWindow component: Defines the maximum value for the progress bar, allowing users to set the upper limit of the ProgressBar's range.
    MminApplicable to TabsWindow when docked inside a DockingLayout custom element. Specifies the minimum allowed size for the item within the layout, ensuring it does not shrink below this value during resizing operations.Also applies to ProgressWindow, where it lets the user set the minimum value for the ProgressBar, defining the lowest possible progress state that can be represented.
    MminimizedIndicates whether the window is currently minimized. When set to true, the window is reduced to an icon or compact form and positioned (docked) in the bottom left corner of the viewport. If false, the window remains in its normal, active state.
    MmaxLengthSpecifies or retrieves the maximum number of characters a user is allowed to enter into the input field. This property applies to both Prompt and MultilinePrompt windows. If set, the input will be limited to the defined character count, preventing users from entering more characters than specified.
    MminLengthDefines the minimum number of characters a user must enter before the autocomplete feature is activated. This property can be both set (to specify the desired threshold) and retrieved (to check the current threshold). Note: This setting is only applicable to Prompt and MultilinePrompt windows.
    OopenedIndicates whether the window is currently visible to the user. Returns true if the window is displayed on the screen and can be interacted with, and false if it is hidden or minimized.
    PpinnedIndicates whether the window is pinned. A pinned window cannot be moved (dragged) by the user, but it can still be resized. When set to true, this property disables window dragging while allowing resizing operations.
    PplaceholderSpecifies the placeholder text that appears inside the input field before the user enters a value. Note: This option is only applicable to the Prompt Window component.
    PpromptLabelSpecifies the text label displayed above or alongside the input field within the PromptWindow component. This label helps users understand what information is expected in the input field.
    RreadonlyIf the element has the "readonly" attribute, users cannot modify its value; the field will display data in a non-editable state, though users can still select and copy its contents. This differs from a "disabled" element, as a "readonly" field remains focusable and included in form submissions.
    RresizeIndicatorWhen this option is enabled, a resize handle appears in the bottom-right corner of the window. Users can initiate the resizing operation exclusively by dragging this indicator; resizing from any other window edge or corner is disabled.
    RresizeModeSpecifies how the window can be resized by the user.Available resizing modes: none – Disables all window resizing; the window size is fixed. vertical – Allows the window to be resized only vertically (top and bottom edges). horizontal – Allows the window to be resized only horizontally (left and right edges). both – Enables both horizontal and vertical resizing; the window can be resized in any direction. top – The window can only be resized by dragging the top edge. bottom – The window can only be resized by dragging the bottom edge. left – The window can only be resized by dragging the left edge. right – The window can only be resized by dragging the right edge.Choose the desired mode to control which edges of the window users can drag to resize, or to prevent resizing entirely.
    RrightToLeftGets or sets a value that determines whether the element’s alignment is configured to support right-to-left (RTL) languages and text direction, such as Arabic or Hebrew. Use this property to ensure proper display and alignment for locales that require RTL font and layout support.
    RrequiredIndicates that the input field is required and must be filled out by the user before the form can be submitted. If left empty, the form submission will be blocked, prompting the user to complete this field. 'Note:' This setting is applicable to the Prompt Window.
    RrequiredMessageDefines the error message displayed when the required attribute is enabled and the user submits the input field without providing a value. This setting only applies to the Prompt Window interface.
    SselectAllOnFocusSpecifies whether the input field's content should be automatically highlighted (selected) when the field gains focus. Note: This setting applies specifically to the Prompt Window component.
    SselectedIndexSpecifies or retrieves the currently selected tab within the component. This property applies exclusively to the TabsWindow component.
    SselectionModeSpecifies how the user is allowed to navigate between different tabs within the interface. This property is relevant only when using the TabsWindow component.
    SselectionEndSpecifies the zero-based index position of the last character included in the current text selection. Note: This property is relevant only for use within MultilinePromptWindow components.
    SselectionStartSpecifies the zero-based index of the first character in the currently selected text within the prompt window. This property is only applicable when using the MultilinePromptWindow component.
    SshowProgressValueControls the visibility of the label displayed on the Progress Bar. Note: This setting is only applicable when used within the Progress Window component.
    SsiblingsA getter that retrieves all sibling LayoutPanel instances—those sharing the same immediate parent—when a LayoutPanel item is docked within a DockingLayout. The returned siblings are also DockingLayout items (specifically, other LayoutPanels). This property is only available for TabsWindow components that are docked inside a DockingLayout.
    SsizeRelevant when a TabsWindow component is nested within a DockingLayout custom element. This property specifies the size (width or height, depending on layout orientation) allocated to the TabsWindow within the docking layout, allowing developers to control how much space the window occupies relative to other docked components.
    SspellCheckIndicates whether spelling and grammar checking should be enabled for the element. This property determines if the content entered within the element will be reviewed for spelling and grammatical errors. Note: This option is only relevant for the MultilinePromptWindow component.
    TtabCloseButtonsDetermines whether close buttons are shown on each tab within the Tab Strip of the TabsWindow. You can use this property to enable or disable the visibility of close buttons on tabs, allowing users to close individual tabs directly from the Tab Strip. Note: This property is only applicable to the TabsWindow component.
    TtabCloseButtonModeSpecifies when the close button is visible—either only when a tab is selected or always visible on all tabs. Note: This property applies exclusively to the TabsWindow component.
    TtabOverflowSpecifies how the scroll buttons for tabs are displayed or behave. This option is only relevant when the tabLayout property is set to 'scroll', allowing tabs to be scrolled horizontally. Note: This property applies exclusively to the TabsWindow component.
    TtabPositionDetermines the position of the Tab Strip within the TabsWindow. Note: This property applies exclusively to the TabsWindow component.
    TtabScrollButtonsPositionDefines or retrieves the position of the scroll buttons located within the tab header of a TabsWindow component. This setting is exclusively applicable to TabsWindow instances and allows you to control where the scroll buttons appear (for example, at the start, end, or both ends of the tab header).
    TtabTextOrientationDefines or retrieves the orientation of the text displayed in the tab labels within the TabsWindow component. This property determines whether the tab text is laid out horizontally or vertically. Note: This property is exclusively applicable to the TabsWindow component and has no effect on other components.
    TthemeSpecifies the visual theme to be applied. The theme controls the appearance, including colors, fonts, and styling, of the element to ensure a consistent look and feel across the user interface.
    UunfocusableIf this property is set to true, the element will be excluded from keyboard navigation and cannot receive focus either programmatically or via user interaction. This ensures that users will be unable to focus on the element using methods such as the Tab key or calling focus() in JavaScript.
    VvalueSpecifies the current value displayed within the TextBox or ProgressBar component inside a Dialog, Prompt, or Progress Window. This value can represent user input (for TextBox) or progress status (for ProgressBar) and is used to dynamically update the UI element's content or state.
    WwindowParentSpecifies the actual parent element of the target element. The window's sizing and movement are restricted to the boundaries of this parent element, meaning the window can only be resized or repositioned within the visible area of the designated parent.
    WwrapSpecifies the text-wrapping behavior for the input field. Note: This property is only relevant when used with the MultilinePromptWindow component.

    Events

    OopeningThis event is triggered immediately before the window begins its opening process, allowing developers to perform any preparatory actions or modifications prior to the window becoming visible to the user.
    OopenThis event is triggered when the window becomes visible to the user—specifically, when it is opened or brought into view.
    CclosingThis event is triggered immediately before the window begins the closing process, allowing developers to execute custom logic or prompt the user for confirmation before the window is fully closed.
    CcloseThis event is triggered when the window is closed or becomes hidden, such as when the user closes the browser tab, navigates away, or minimizes the window, causing it to no longer be visible to the user.
    CcollapseThis event is triggered whenever the application window is minimized or collapsed by the user. It allows you to execute custom logic in response to the window being hidden from view.
    DdragEndThis event is triggered when the user finishes dragging the window, signaling the completion of the drag-and-drop operation. It occurs after the mouse button is released and the window movement has stopped.
    DdragStartThis event is triggered when the user initiates a window drag operation, indicating that the dragging of the window has begun. It fires as soon as the user starts moving the window, typically by clicking and holding the window's title bar.
    EexpandThis event is triggered whenever the window is resized to a larger size, indicating that the user has expanded the window either by dragging its edges or by maximizing it.
    MmaximizeThis event is triggered whenever the application window transitions into a maximized state. It fires immediately after the window expands to fill the available screen space, allowing developers to implement custom logic in response to the window being maximized by the user or programmatically.
    MminimizeThis event is triggered whenever the application window is minimized by the user. It occurs immediately after the minimize action takes place, allowing developers to execute custom logic—such as pausing background processes, saving state, or updating the UI—in response to the window being minimized.
    RresizeEndThis event is triggered when the user completes resizing the browser window, specifically after the resizing action has finished and the window size is no longer changing.
    RresizeStartThis event is triggered when the user initiates a window resize action, such as clicking and dragging the window’s edge or corner to change its dimensions. It marks the beginning of the window resizing process, allowing you to execute scripts or handle UI updates as soon as resizing starts.
    RrestoreThis event is triggered when the window is returned to its original size and position after being maximized, effectively restoring it to the state it was in prior to maximization.

    Methods

    BbringToFrontSets the window to the highest z-order level, bringing it to the foreground and ensuring it is visible and accessible for user interaction above all other open windows.
    CclearRemoves all existing content from the window, effectively resetting the window’s display area to an empty state. This operation clears any text, images, or elements currently visible within the window.
    CcloseCloses the currently active window in the application, terminating its user interface and releasing any associated resources. If there are unsaved changes or prompts, the user may be asked to confirm before the window is closed.
    CcollapseMinimizes the window, reducing it to a smaller icon or hidden state, without closing the application.
    EensureVisibleEnsures the specified tab item is brought into view by automatically scrolling the tab bar as needed. This functionality is exclusive to the TabsWindow component.
    EexpandRestores the window to its full size and visibility after it has been collapsed or minimized, allowing users to view and interact with its contents again.
    IinsertInserts a new tab along with its corresponding content section into the user interface. This function is specifically designed for use within the TabsWindow component and will not operate outside of this context.
    MmoveRevised Description:"Sets the window's position on the screen by moving it to specified X and Y coordinates, effectively relocating the window to a new location."
    MmaximizeExpands the window to occupy the entire available viewing area, ensuring it fills all usable screen space without overlapping system taskbars or menus.
    MminimizeReduces the window to the taskbar or dock, temporarily hiding it from view without closing the application.
    OopenOpens a new browser window or tab with the specified URL or content, allowing additional web pages or resources to be displayed alongside the current page.
    PpinPrevents the window from being moved by locking its position. Disables the ability to drag or reposition the window, ensuring it remains fixed in place.
    RremoveAtRemoves a tab along with its corresponding content section from the interface. This function is designed to work exclusively within the TabsWindow component.
    RrestoreRestores the window to its previous dimensions and position before it was maximized or minimized, returning it to the exact size and location it had prior to those actions.
    SselectSelects the specified tab within the interface. This action applies exclusively to elements of type TabsWindow.
    UunpinRemoves the pinned (fixed) state from the window, allowing the user to freely move or drag the window to a different position on the screen.
    UupdateLabelUpdates the text displayed in the header label to reflect new information or changes, ensuring that the header accurately represents the current content or context of the section.
    UupdateContentReplaces the existing content with new or modified information, ensuring that the displayed data reflects the latest updates or changes.
    UupdateUpdates an individual tab within a TabsWindow component and modifies its corresponding content section. This operation exclusively applies to elements of the TabsWindow type. Use this function to change tab labels, update active states, or refresh the content associated with a specific tab within the TabsWindow interface.

    Properties

    addNewTabboolean

    Determines whether the 'Add New' tab within the Tabs element is currently visible to the user.
    Note: This property is only relevant when used with the TabsWindow component; it does not apply to other components.

    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 retrieves the current animation mode. When this property is set to 'none', all animations are disabled. If set to any other supported value, animations will be enabled and behave according to the specified mode.

    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"

    Controls the automatic capitalization behavior for user input as it is entered or edited. This setting specifies whether characters are auto-capitalized (e.g., sentences, words, or all characters) in the input field. Note: This property is only relevant when used with the MultilinePromptWindow component.

    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

    Specifies whether the element should automatically expand its height to accommodate vertically overflowing input.
    Note: This setting only applies to MultilinePromptWindow components.

    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

    Specifies the text displayed on the 'Cancel' button within the Prompt Window. This label informs users which button will dismiss or close the prompt without taking any action.

    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

    Specifies the text that appears on the 'Complete' button within the Progress Window, allowing customization of the button label to better suit user interface requirements.

    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

    Specifies the text displayed on the 'Confirm' button within the Prompt Window, allowing customization of the button label to suit your application's context.

    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

    Indicates whether the window is currently collapsed. When set to true, only the window's header is displayed while the content area is hidden. If false, both the header and the full content of the window are 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, this property specifies whether clicking on the overlay (mask) outside the modal will close the window. Set it to true to allow users to dismiss the modal by clicking the mask, or false to require an explicit action (such as clicking a close button) to close the modal.

    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}[]

    Specifies the data source to be loaded into the TabsWindow component. This property is relevant exclusively for the TabsWindow and will not affect other components.

    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

    Controls whether the window is active and visible to the user. When enabled, the window is operational and can be interacted with; when disabled, the window is hidden or inactive, and user interactions are ignored.

    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

    Controls whether the window snapping feature is active. When enabled, users can automatically align and resize windows by dragging them to the edges or corners of the screen. Disabling this feature prevents windows from snapping into place during movement.

    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, pressing the 'Escape' key will automatically close the window. To prevent the window from closing when 'Escape' is pressed, set this property to true.

    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 handles certain keyboard inputs such as the arrow keys ('ArrowUp', 'ArrowDown', etc.), 'Escape', and similar keys for scrolling or navigation actions. Set this property to true to disable the window’s default keyboard handling, allowing you to manage these key events manually within your application.

    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"

    Specifies the visual presentation of characters entered within the input field. For example, this setting can control whether characters are shown as plain text or masked (such as for password fields). This option applies specifically to the Prompt Window component.

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

    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 components when they are docked within a DockingLayout Custom Element.

    This property specifies the valid drop locations for the window—and its tab items—inside the DockingLayout. The property accepts an array of positional values, allowing you to define multiple allowable drop zones.



    Details:


    • Positions prefixed with 'layout-' apply to each individual tab item (child element) of the TabsWindow being dragged. These determine where tab items can be dropped within the overall layout, outside their original container.

    • Other position values (without the 'layout-' prefix) indicate allowed drop positions directly within the hovered target TabsWindow, specifying where the whole window or its tabs can be placed relative to the target window.



    Notes:

    • This property is used exclusively by smartDockingLayout custom elements.

    • It controls the possible drop targets—both at the window and tab levels—within the DockingLayout environment.



    Allowed Values:
    The array values specify the permitted drop positions. Refer to the documentation for a complete list of supported position strings.

    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 that specifies how to format the label displayed on the Progress Bar. This function allows customization of the label's content or appearance based on the current progress value.
    Note: This property is only applicable to the ProgressWindow component.

    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"

    Specifies the exact placement or alignment of the footer section within the window element, such as positioning it at the bottom, fixed, absolute, or relative to other content. This property controls where the footer appears in relation to the window’s layout.

    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

    Specifies the custom template used to render the footer section of the Dialog window. If footerTemplate is set to null (the default), the Dialog will not display a footer section. You can provide a template string or a function to customize the appearance and content of the Dialog’s footer.

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

    Specifies which buttons will be displayed in the header section, allowing you to control the visibility of header actions for users.

    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

    Specifies the custom template to be used for rendering the header section of the dialog window. If headerTemplate is set to null (the default value), the dialog will display its standard header layout. By providing a template, you can fully customize the appearance and content of the dialog's header area.

    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"

    Specifies the exact placement of the header section within the window element, such as top, bottom, left, or right. This setting controls where the header appears relative to the content of the window.

    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

    Displays supplementary helper text beneath the text box, providing users with additional guidance or context. This hint appears only when the text box is focused (i.e., the user is actively typing or has selected the field).
    Note: This property is specifically applicable to the Prompt Window component.

    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 Progress bar value to the indeterminate state ('null'), activating its loading animation to indicate ongoing progress without a defined endpoint.
    Note: This property is only applicable when used within a ProgressWindow component.

    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

    Specifies the direction in which the Progress Bar fills (e.g., left-to-right, right-to-left, top-to-bottom, or bottom-to-top).
    Note: This property is only applicable when used within a ProgressWindow component.

    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

    Specifies the text displayed as the window title in the header section, typically shown at the top of the application window or dialog box.

    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 updates the element’s size in real time as the user drags its edges, providing immediate visual feedback. By default, this feature is disabled; instead, a highlighter appears around the edges of the window during resizing to indicate the prospective new size, while the element itself resizes only once the operation is complete.

    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

    Note: This property is relevant only for TabsWindow elements that are utilized within a DockingLayout custom element.

    This property is exclusively used by smartDockingLayout to specify ownership of a TabsWindow. It determines which smartDockingLayout instance the window is associated with. If a TabsWindow is removed from its parent DockingLayout element, this property continues to reference the original docking layout to which it belonged.

    The property accepts either:


    • A string representing the id of a smartDockingLayout present on the page.

    • An instance of a smartDockingLayout object.



    This allows for flexible identification of the owning layout, either by ID or by direct reference to the layout instance.

    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;

    unlockKeystring

    Gets or sets the unlockKey, a unique code required to activate or unlock access to the product’s full features or licensed functionality.

    Default value

    ""

    Example

    Set the unlockKey property. 

     <smart-window unlock-key=''></smart-window>

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

     const window = document.querySelector('smart-window');
     window.unlockKey = '1111-2222-3333-4444-5555';

    Get the unlockKey property. 

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

    localestring

    Specifies the language to be used for displaying messages. This property can be set or retrieved, and works in conjunction with the messages property to determine which set of localized messages is shown to the user. Changing the language updates the displayed messages accordingly.

    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

    Note: This property is only applicable to a TabsWindow when it is docked within a DockingLayout custom element. When enabled, it controls whether the TabsWindow can be resized by the user. If set to true, users will be able to adjust the size of the TabsWindow within the DockingLayout; if set to false, resizing will be disabled and the TabsWindow will have a fixed size.

    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 function used within the localization module, typically invoked when a localization event occurs (e.g., language change, resource load). This callback handles tasks such as updating UI elements or retrieving localized content based on the current language settings.

    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

    Indicates whether the window is currently maximized. When set to true, the window expands to fill the entire available viewport, covering all other interface elements and leaving no visible borders or title bars. If false, the window retains its previous size and position. This property can be used to programmatically check or control the window’s maximized state within the application.

    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

    Defines or retrieves an object containing localized strings used throughout the widget’s user interface. This property allows developers to customize the widget’s displayed text for different languages and regions. It is typically used together with the locale property to ensure that the widget adapts its content based on the selected language or regional settings.

    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

    Specifies whether the window should function as a modal dialog. When set to true, the window captures user focus and prevents interaction with any other elements on the page until it is closed. This ensures that the user must address or dismiss the modal window before returning to the rest of the content.

    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

    For use with TabsWindow when docked within a DockingLayout custom element:
    Specifies the maximum size that the TabsWindow component can occupy when it is docked.

    For the ProgressWindow component:
    Defines the maximum value for the progress bar, allowing users to set the upper limit of the ProgressBar's range.

    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 a DockingLayout custom element. Specifies the minimum allowed size for the item within the layout, ensuring it does not shrink below this value during resizing operations.

    Also applies to ProgressWindow, where it lets the user set the minimum value for the ProgressBar, defining the lowest possible progress state that can be represented.

    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

    Indicates whether the window is currently minimized. When set to true, the window is reduced to an icon or compact form and positioned (docked) in the bottom left corner of the viewport. If false, the window remains in its normal, active state.

    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

    Specifies or retrieves the maximum number of characters a user is allowed to enter into the input field. This property applies to both Prompt and MultilinePrompt windows. If set, the input will be limited to the defined character count, preventing users from entering more characters than specified.

    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

    Defines the minimum number of characters a user must enter before the autocomplete feature is activated. This property can be both set (to specify the desired threshold) and retrieved (to check the current threshold).
    Note: This setting is only applicable to Prompt and MultilinePrompt windows.

    Default value

    2
    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

    Indicates whether the window is currently visible to the user. Returns true if the window is displayed on the screen and can be interacted with, and false if it is hidden or minimized.

    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

    Indicates whether the window is pinned. A pinned window cannot be moved (dragged) by the user, but it can still be resized. When set to true, this property disables window dragging while allowing resizing operations.

    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

    Specifies the placeholder text that appears inside the input field before the user enters a value.
    Note: This option is only applicable to the Prompt Window component.

    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

    Specifies the text label displayed above or alongside the input field within the PromptWindow component. This label helps users understand what information is expected in the input field.

    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 has the "readonly" attribute, users cannot modify its value; the field will display data in a non-editable state, though users can still select and copy its contents. This differs from a "disabled" element, as a "readonly" field remains focusable and included in form submissions.

    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 this option is enabled, a resize handle appears in the bottom-right corner of the window. Users can initiate the resizing operation exclusively by dragging this indicator; resizing from any other window edge or corner is disabled.

    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"

    Specifies how the window can be resized by the user.

    Available resizing modes:


    • none – Disables all window resizing; the window size is fixed.

    • vertical – Allows the window to be resized only vertically (top and bottom edges).

    • horizontal – Allows the window to be resized only horizontally (left and right edges).

    • both – Enables both horizontal and vertical resizing; the window can be resized in any direction.

    • top – The window can only be resized by dragging the top edge.

    • bottom – The window can only be resized by dragging the bottom edge.

    • left – The window can only be resized by dragging the left edge.

    • right – The window can only be resized by dragging the right edge.



    Choose the desired mode to control which edges of the window users can drag to resize, or to prevent resizing entirely.

    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

    Gets or sets a value that determines whether the element’s alignment is configured to support right-to-left (RTL) languages and text direction, such as Arabic or Hebrew. Use this property to ensure proper display and alignment for locales that require RTL font and layout support.

    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

    Indicates that the input field is required and must be filled out by the user before the form can be submitted. If left empty, the form submission will be blocked, prompting the user to complete this field.
    'Note:' This setting is applicable to the 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

    Defines the error message displayed when the required attribute is enabled and the user submits the input field without providing a value. This setting only applies to the Prompt Window interface.

    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

    Specifies whether the input field's content should be automatically highlighted (selected) when the field gains focus.
    Note: This setting applies specifically to the Prompt Window component.

    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

    Specifies or retrieves the currently selected tab within the component. This property applies exclusively to the TabsWindow component.

    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"

    Specifies how the user is allowed to navigate between different tabs within the interface. This property is relevant only when using the TabsWindow component.

    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

    Specifies the zero-based index position of the last character included in the current text selection.
    Note: This property is relevant only for use within MultilinePromptWindow components.

    Default value

    0

    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

    Specifies the zero-based index of the first character in the currently selected text within the prompt window. This property is only applicable when using the MultilinePromptWindow component.

    Default value

    0

    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

    Controls the visibility of the label displayed on the Progress Bar.
    Note: This setting is only applicable when used within the Progress Window component.

    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 retrieves all sibling LayoutPanel instances—those sharing the same immediate parent—when a LayoutPanel item is docked within a DockingLayout. The returned siblings are also DockingLayout items (specifically, other LayoutPanels).
    This property is only available for TabsWindow components that are docked inside a DockingLayout.

    sizestring

    Relevant when a TabsWindow component is nested within a DockingLayout custom element. This property specifies the size (width or height, depending on layout orientation) allocated to the TabsWindow within the docking layout, allowing developers to control how much space the window occupies relative to other docked components.

    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

    Indicates whether spelling and grammar checking should be enabled for the element. This property determines if the content entered within the element will be reviewed for spelling and grammatical errors. Note: This option is only relevant for the MultilinePromptWindow component.

    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

    Determines whether close buttons are shown on each tab within the Tab Strip of the TabsWindow. You can use this property to enable or disable the visibility of close buttons on tabs, allowing users to close individual tabs directly from the Tab Strip.
    Note: This property is only applicable to the TabsWindow component.

    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"

    Specifies when the close button is visible—either only when a tab is selected or always visible on all tabs.
    Note: This property applies exclusively to the TabsWindow component.

    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"

    Specifies how the scroll buttons for tabs are displayed or behave. This option is only relevant when the tabLayout property is set to 'scroll', allowing tabs to be scrolled horizontally. Note: This property applies exclusively to the TabsWindow component.

    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"

    Determines the position of the Tab Strip within the TabsWindow.
    Note: This property applies exclusively to the TabsWindow component.

    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"

    Defines or retrieves the position of the scroll buttons located within the tab header of a TabsWindow component. This setting is exclusively applicable to TabsWindow instances and allows you to control where the scroll buttons appear (for example, at the start, end, or both ends of the tab header).

    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"

    Defines or retrieves the orientation of the text displayed in the tab labels within the TabsWindow component. This property determines whether the tab text is laid out horizontally or vertically.

    Note: This property is exclusively applicable to the TabsWindow component and has no effect on other components.

    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

    Specifies the visual theme to be applied. The theme controls the appearance, including colors, fonts, and styling, of the element to ensure a consistent look and feel across the user interface.

    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 this property is set to true, the element will be excluded from keyboard navigation and cannot receive focus either programmatically or via user interaction. This ensures that users will be unable to focus on the element using methods such as the Tab key or calling focus() in JavaScript.

    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?

    Specifies the current value displayed within the TextBox or ProgressBar component inside a Dialog, Prompt, or Progress Window. This value can represent user input (for TextBox) or progress status (for ProgressBar) and is used to dynamically update the UI element's content or state.

    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

    Specifies the actual parent element of the target element. The window's sizing and movement are restricted to the boundaries of this parent element, meaning the window can only be resized or repositioned within the visible area of the designated parent.

    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"

    Specifies the text-wrapping behavior for the input field.
    Note: This property is only relevant when used with the MultilinePromptWindow component.

    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 immediately before the window begins its opening process, allowing developers to perform any preparatory actions or modifications prior to the window becoming visible to the user.

    • 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 becomes visible to the user—specifically, when it is opened or brought into view.

    • 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 immediately before the window begins the closing process, allowing developers to execute custom logic or prompt the user for confirmation before the window is fully closed.

    • 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 or becomes hidden, such as when the user closes the browser tab, navigates away, or minimizes the window, causing it to no longer be visible to the user.

    • 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 whenever the application window is minimized or collapsed by the user. It allows you to execute custom logic in response to the window being hidden from view.

    • 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 the user finishes dragging the window, signaling the completion of the drag-and-drop operation. It occurs after the mouse button is released and the window movement has stopped.

    • 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 the user initiates a window drag operation, indicating that the dragging of the window has begun. It fires as soon as the user starts moving the window, typically by clicking and holding the window's title bar.

    • 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 whenever the window is resized to a larger size, indicating that the user has expanded the window either by dragging its edges or by maximizing it.

    • 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 whenever the application window transitions into a maximized state. It fires immediately after the window expands to fill the available screen space, allowing developers to implement custom logic in response to the window being maximized by the user or programmatically.

    • 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 whenever the application window is minimized by the user. It occurs immediately after the minimize action takes place, allowing developers to execute custom logic—such as pausing background processes, saving state, or updating the UI—in response to the window being 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 the user completes resizing the browser window, specifically after the resizing action has finished and the window size is no longer changing.

    • 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 the user initiates a window resize action, such as clicking and dragging the window’s edge or corner to change its dimensions. It marks the beginning of the window resizing process, allowing you to execute scripts or handle UI updates as soon as resizing starts.

    • 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 returned to its original size and position after being maximized, effectively restoring it to the state it was in prior to 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 highest z-order level, bringing it to the foreground and ensuring it is visible and accessible for user interaction above all other open windows.


    Invoke the bringToFront method.

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

    clear(): void

    Removes all existing content from the window, effectively resetting the window’s display area to an empty state. This operation clears any text, images, or elements currently visible within the window.


    Invoke the clear method.

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

    close(): void

    Closes the currently active window in the application, terminating its user interface and releasing any associated resources. If there are unsaved changes or prompts, the user may be asked to confirm before the window is closed.


    Invoke the close method.

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

    collapse(): HTMLElement

    Minimizes the window, reducing it to a smaller icon or hidden state, without closing the application.

    ReturnsHTMLElement

    Invoke the collapse method.

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

    ensureVisible( index: number): void

    Ensures the specified tab item is brought into view by automatically scrolling the tab bar as needed. This functionality is exclusive to the TabsWindow component.

    Arguments

    indexnumber

    The index of the tab to scroll to.


    Invoke the ensureVisible method.

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

    expand(): []

    Restores the window to its full size and visibility after it has been collapsed or minimized, allowing users to view and interact with its contents again.

    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 along with its corresponding content section into the user interface. This function is specifically designed for use within the TabsWindow component and will not operate outside of this context.

    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

    Revised Description:
    "Sets the window's position on the screen by moving it to specified X and Y coordinates, effectively relocating the window to a new location."

    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

    Expands the window to occupy the entire available viewing area, ensuring it fills all usable screen space without overlapping system taskbars or menus.


    Invoke the maximize method.

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

    minimize(): void

    Reduces the window to the taskbar or dock, temporarily hiding it from view without closing the application.


    Invoke the minimize method.

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

    open(): void

    Opens a new browser window or tab with the specified URL or content, allowing additional web pages or resources to be displayed alongside the current page.


    Invoke the open method.

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

    pin(): void

    Prevents the window from being moved by locking its position. Disables the ability to drag or reposition the window, ensuring it remains fixed in place.


    Invoke the pin method.

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

    removeAt( index: number): void

    Removes a tab along with its corresponding content section from the interface. This function is designed to work exclusively within the TabsWindow component.

    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 its previous dimensions and position before it was maximized or minimized, returning it to the exact size and location it had prior to those actions.


    Invoke the restore method.

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

    select( index: number): void

    Selects the specified tab within the interface. This action applies exclusively to elements of type TabsWindow.

    Arguments

    indexnumber

    The index of the tab to select.


    Invoke the select method.

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

    unpin(): void

    Removes the pinned (fixed) state from the window, allowing the user to freely move or drag the window to a different position on the screen.


    Invoke the unpin method.

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

    updateLabel( label: string): void

    Updates the text displayed in the header label to reflect new information or changes, ensuring that the header accurately represents the current content or context of the section.

    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

    Replaces the existing content with new or modified information, ensuring that the displayed data reflects the latest updates or changes.

    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 an individual tab within a TabsWindow component and modifies its corresponding content section. This operation exclusively applies to elements of the TabsWindow type. Use this function to change tab labels, update active states, or refresh the content associated with a specific tab within the TabsWindow interface.

    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

    --smart-window-footer-heightvar()

    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