Window — Smart UI JavaScript API

Window — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Window - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-window id="demo-window"></smart-window>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.window.js';

    const el = document.getElementById('demo-window');
    if (el) {

      el.label = 'Window 1';
      el.opened = true;
      el.modal = true;
      el.headerButtons = ['close', 'pin', 'minimize', 'maximize'];
      el.innerHTML = '
Window content
Use the header buttons to move, pin, minimize, maximize, or close this window.
';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Window   Framework: JavaScript   Selector: smart-window

API counts: 70 properties, 22 methods, 13 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: appendChild(), bringToFront(), clear(), close(), collapse(), ensureVisible()

Common events: opening, open, closing, close, collapse, dragEnd

Module hint: smart-webcomponents/source/modules/smart.window.js

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

Class

Window

Window

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

Selector

smart-window

Quick picks

closedataSourcedisabledopenvalue

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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    SselectionModeSpecifies how the user is allowed to navigate between different tabs within the interface. This property is relevant only when using the TabsWindow component.
    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.
    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.
    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.
    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.
    UunlockKeyGets or sets the unlockKey, a unique code required to activate or unlock access to the product’s full features or licensed functionality.
    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

    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.
    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.
    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.
    OopenThis event is triggered when the window becomes visible to the user—specifically, when it is opened or brought into view.
    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.
    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.
    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.
    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."
    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.
    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.
    UupdateContentReplaces the existing content with new or modified information, ensuring that the displayed data reflects the latest updates or changes.
    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.

    Properties

    addNewTabDetermines 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.boolean

    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

    Examples

    Markup and runtime examples for addNewTab:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    animationSets 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."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"

    Examples

    Markup and runtime examples for animation:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.animation = "simple";

    Read the current value:

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

    autoCapitalizeControls 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."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"

    Examples

    Markup and runtime examples for autoCapitalize:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.autoCapitalize = "characters";

    Read the current value:

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

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

    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

    Examples

    Markup and runtime examples for autoExpand:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    cancelLabelSpecifies 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.string

    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"

    Examples

    Markup and runtime examples for cancelLabel:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.cancelLabel = "Cancel";

    Read the current value:

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

    closeOnMaskClickWhen 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.boolean

    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
    Try a demo showcasing the closeOnMaskClick property.

    Examples

    Markup and runtime examples for closeOnMaskClick:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    collapsedIndicates 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.boolean

    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

    Examples

    Markup and runtime examples for collapsed:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

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

    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"

    Examples

    Markup and runtime examples for completeLabel:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.completeLabel = "Complete";

    Read the current value:

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

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

    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"

    Examples

    Markup and runtime examples for confirmLabel:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.confirmLabel = "Confirm";

    Read the current value:

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

    dataSourceSpecifies the data source to be loaded into the TabsWindow component. This property is relevant exclusively for the TabsWindow and will not affect other components.{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.

    Examples

    Markup and runtime examples for dataSource:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.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 }];

    Read the current value:

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

    disabledControls 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.boolean

    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
    Try a demo showcasing the disabled property.

    Examples

    Markup and runtime examples for disabled:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    disableEscapeBy 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.boolean

    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

    Examples

    Markup and runtime examples for disableEscape:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    disableKeyboardBy 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.boolean

    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

    Examples

    Markup and runtime examples for disableKeyboard:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    disableSnapControls 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.boolean

    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
    Try a demo showcasing the disableSnap property.

    Examples

    Markup and runtime examples for disableSnap:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    displayModeSpecifies 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."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"

    Examples

    Markup and runtime examples for displayMode:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.displayMode = "default";

    Read the current value:

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

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

    ""

    Examples

    Markup and runtime examples for dropPosition:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.dropPosition = "all";

    Read the current value:

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

    footerPositionSpecifies 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."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"

    Examples

    Markup and runtime examples for footerPosition:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.footerPosition = "bottom";

    Read the current value:

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

    footerTemplateSpecifies 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.any

    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.

    Try a demo showcasing the footerTemplate property.

    Examples

    Markup and runtime examples for footerTemplate:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.footerTemplate = "templateB";

    Read the current value:

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

    formatFunctionA 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.function | 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.

    Examples

    Markup and runtime examples for formatFunction:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-window');
el.formatFunction = "function(value) { return \"$\" + value }";

    Read the current value:

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

    headerButtonsSpecifies 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:
      string[]

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

      Try a demo showcasing the headerButtons property.

      Examples

      Markup and runtime examples for headerButtons:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.headerButtons = ["collapse", "close"];

      Read the current value:

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

      headerPositionSpecifies 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."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"
      Try a demo showcasing the headerPosition property.

      Examples

      Markup and runtime examples for headerPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.headerPosition = "bottom";

      Read the current value:

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

      headerTemplateSpecifies 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.any

      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.

      Try a demo showcasing the headerTemplate property.

      Examples

      Markup and runtime examples for headerTemplate:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.headerTemplate = "templateB";

      Read the current value:

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

      hintDisplays 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.any

      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.

      Examples

      Markup and runtime examples for hint:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.hint = "Hint";

      Read the current value:

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

      indeterminateSets 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.boolean

      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

      Examples

      Markup and runtime examples for indeterminate:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      invertedSpecifies 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.boolean

      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

      Examples

      Markup and runtime examples for inverted:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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

      ""
      Try a demo showcasing the label property.

      Examples

      Markup and runtime examples for label:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.label = "New Window";

      Read the current value:

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

      layoutNote: 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.any

      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.

      Examples

      Markup and runtime examples for layout:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.layout = "dockingLayoutId2";

      Read the current value:

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

      liveResizeWhen 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.boolean

      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
      Try a demo showcasing the liveResize property.

      Examples

      Markup and runtime examples for liveResize:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      localeSpecifies 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.string

      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"

      Examples

      Markup and runtime examples for locale:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.locale = "fr";

      Read the current value:

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

      localizeFormatFunctionCallback 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.function | 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.

      Examples

      Markup and runtime examples for localizeFormatFunction:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.localizeFormatFunction = "function(){return '...'}";

      Read the current value:

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

      lockedNote: 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.boolean

      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

      Examples

      Markup and runtime examples for locked:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      maxFor 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.string | 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

      ""

      Examples

      Markup and runtime examples for max:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      maximizedIndicates 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.boolean

      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

      Examples

      Markup and runtime examples for maximized:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      maxLengthSpecifies 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.number

      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.

      Examples

      Markup and runtime examples for maxLength:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      messagesDefines 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.object

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

      }

      Examples

      Markup and runtime examples for messages:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.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."}};

      Read the current value:

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

      minApplicable 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.string | 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

      ""

      Examples

      Markup and runtime examples for min:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      minimizedIndicates 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.boolean

      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

      Examples

      Markup and runtime examples for minimized:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      minLengthDefines 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.number

      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

      Examples

      Markup and runtime examples for minLength:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      modalSpecifies 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.boolean

      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
      Try a demo showcasing the modal property.

      Examples

      Markup and runtime examples for modal:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      openedIndicates 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.boolean

      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
      Try a demo showcasing the opened property.

      Examples

      Markup and runtime examples for opened:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      pinnedIndicates 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.boolean

      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

      Examples

      Markup and runtime examples for pinned:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      placeholderSpecifies 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.string

      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.

      Examples

      Markup and runtime examples for placeholder:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.placeholder = "Submit";

      Read the current value:

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

      promptLabelSpecifies 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.string

      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

      ""

      Examples

      Markup and runtime examples for promptLabel:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      readonlyIf 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.boolean

      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

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      requiredIndicates 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.boolean

      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

      Examples

      Markup and runtime examples for required:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      requiredMessageDefines 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.string

      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

      ""

      Examples

      Markup and runtime examples for requiredMessage:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.requiredMessage = "Mandatory";

      Read the current value:

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

      resizeIndicatorWhen 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.boolean

      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
      Try a demo showcasing the resizeIndicator property.

      Examples

      Markup and runtime examples for resizeIndicator:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      resizeModeSpecifies 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."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"
      Try a demo showcasing the resizeMode property.

      Examples

      Markup and runtime examples for resizeMode:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.resizeMode = "horizontal";

      Read the current value:

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

      rightToLeftGets 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.boolean

      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.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      selectAllOnFocusSpecifies 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.boolean

      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

      Examples

      Markup and runtime examples for selectAllOnFocus:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      selectedIndexSpecifies or retrieves the currently selected tab within the component. This property applies exclusively to the TabsWindow component.number | null

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

      Examples

      Markup and runtime examples for selectedIndex:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      selectionEndSpecifies 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.number

      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

      Examples

      Markup and runtime examples for selectionEnd:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      selectionModeSpecifies how the user is allowed to navigate between different tabs within the interface. This property is relevant only when using the TabsWindow component."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"

      Examples

      Markup and runtime examples for selectionMode:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.selectionMode = "mouseenter";

      Read the current value:

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

      selectionStartSpecifies 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.number

      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

      Examples

      Markup and runtime examples for selectionStart:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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

      Examples

      Markup and runtime examples for showProgressValue:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      siblingsA 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. object[]

      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.

      sizeRelevant 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.string

      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

      ""

      Examples

      Markup and runtime examples for size:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.size = "25%";

      Read the current value:

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

      spellCheckIndicates 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.boolean

      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

      Examples

      Markup and runtime examples for spellCheck:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      Examples

      Markup and runtime examples for tabCloseButtonMode:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.tabCloseButtonMode = "bottom";

      Read the current value:

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

      tabCloseButtonsDetermines 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.boolean

      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

      Examples

      Markup and runtime examples for tabCloseButtons:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      tabOverflowSpecifies 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."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"

      Examples

      Markup and runtime examples for tabOverflow:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.tabOverflow = "scroll";

      Read the current value:

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

      tabPositionDetermines the position of the Tab Strip within the TabsWindow. Note: This property applies exclusively to the TabsWindow component."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"

      Examples

      Markup and runtime examples for tabPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.tabPosition = "left";

      Read the current value:

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

      tabScrollButtonsPositionDefines 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)."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"

      Examples

      Markup and runtime examples for tabScrollButtonsPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.tabScrollButtonsPosition = "far";

      Read the current value:

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

      tabTextOrientationDefines 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."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"

      Examples

      Markup and runtime examples for tabTextOrientation:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.tabTextOrientation = "horizontal";

      Read the current value:

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

      themeSpecifies 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.string

      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

      ""

      Examples

      Markup and runtime examples for theme:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.theme = "red";

      Read the current value:

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

      unfocusableIf 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.boolean

      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

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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

      ""

      Examples

      Markup and runtime examples for unlockKey:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      valueSpecifies 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.string? | 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

      ""
      Try a demo showcasing the value property.

      Examples

      Markup and runtime examples for value:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.value = "Value";

      Read the current value:

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

      windowParentSpecifies 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.any

      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.

      Examples

      Markup and runtime examples for windowParent:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.windowParent = "'body'";

      Read the current value:

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

      wrapSpecifies the text-wrapping behavior for the input field. Note: This property is only relevant when used with the MultilinePromptWindow component."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"

      Examples

      Markup and runtime examples for wrap:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-window');
el.wrap = "soft";

      Read the current value:

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

      Events

      closeThis 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.CustomEvent

      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.

      Try a demo showcasing the close event.

      Examples

      Listen for close using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      closingThis 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.CustomEvent

      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.

      Try a demo showcasing the closing event.

      Examples

      Listen for closing using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      collapseThis 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.CustomEvent

      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.

      Try a demo showcasing the collapse event.

      Examples

      Listen for collapse using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      dragEndThis 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.CustomEvent

      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.

      Try a demo showcasing the dragEnd event.

      Examples

      Listen for dragEnd using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      dragStartThis 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.CustomEvent

      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.

      Try a demo showcasing the dragStart event.

      Examples

      Listen for dragStart using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      expandThis 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.CustomEvent

      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.

      Try a demo showcasing the expand event.

      Examples

      Listen for expand using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      maximizeThis 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.CustomEvent

      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.

      Try a demo showcasing the maximize event.

      Examples

      Listen for maximize using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      minimizeThis 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.CustomEvent

      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.

      Try a demo showcasing the minimize event.

      Examples

      Listen for minimize using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      openThis event is triggered when the window becomes visible to the user—specifically, when it is opened or brought into view.CustomEvent

      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.

      Try a demo showcasing the open event.

      Examples

      Listen for open using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      openingThis 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.CustomEvent

      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.

      Try a demo showcasing the opening event.

      Examples

      Listen for opening using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      resizeEndThis 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.CustomEvent

      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.

      Try a demo showcasing the resizeEnd event.

      Examples

      Listen for resizeEnd using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      resizeStartThis 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.CustomEvent

      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.

      Try a demo showcasing the resizeStart event.

      Examples

      Listen for resizeStart using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      restoreThis 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.CustomEvent

      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.

      Try a demo showcasing the restore event.

      Examples

      Listen for restore using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      Methods

      appendChild( node: Node): TAppends a new tab item to the end of the existing list of tab items within the specified parent element. This operation updates the parent element's tab item collection, ensuring the new tab appears as the last item in the tab navigation.

      Arguments

      nodeNode

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

      ReturnsNode

      bringToFront(): voidSets 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.bringToFront();

      clear(): voidRemoves 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.clear();

      close(): voidCloses 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.close();

      Try a demo showcasing the close method.

      collapse(): HTMLElementMinimizes the window, reducing it to a smaller icon or hidden state, without closing the application.

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

      ReturnsHTMLElement

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

      Try a demo showcasing the collapse method.

      ensureVisible( index: number): voidEnsures the specified tab item is brought into view by automatically scrolling the tab bar as needed. This functionality is exclusive to the TabsWindow component.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-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.

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

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

      Try a demo showcasing the expand method.

      insert( index: number, details: any): voidInserts 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.

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

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

      insertBefore( newNode: Node, referenceNode?: Node | null): TInserts the specified "smart-tab-item" node directly before the reference "smart-tab-item" node within the tab collection. This operation is only applicable when manipulating tab items inside a TabsWindow component.

      Arguments

      newNodeNode

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

      referenceNode?Node | null

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

      ReturnsNode

      maximize(): voidExpands the window to occupy the entire available viewing area, ensuring it fills all usable screen space without overlapping system taskbars or menus.

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

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.maximize();

      Try a demo showcasing the maximize method.

      minimize(): voidReduces the window to the taskbar or dock, temporarily hiding it from view without closing the application.

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

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.minimize();

      Try a demo showcasing the minimize method.

      move( left: string | number, top: string | number): voidRevised 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."

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

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

      open(): voidOpens 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.open();

      Try a demo showcasing the open method.

      pin(): voidPrevents the window from being moved by locking its position. Disables the ability to drag or reposition the window, ensuring it remains fixed in place.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.pin();

      Try a demo showcasing the pin method.

      removeAt( index: number): voidRemoves a tab along with its corresponding content section from the interface. This function is designed to work exclusively within the TabsWindow component.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

      removeChild( node: Node): TRemoves a child node with the "smart-tab-item" tag from the parent container. Note: This operation is only supported within the TabsWindow component; attempting to use it elsewhere will have no effect.

      Arguments

      nodeNode

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

      ReturnsNode

      restore(): voidRestores 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.restore();

      Try a demo showcasing the restore method.

      select( index: number): voidSelects the specified tab within the interface. This action applies exclusively to elements of type TabsWindow.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

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

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.unpin();

      Try a demo showcasing the unpin method.

      update( index: number, label: string, content: string | HTMLElement): voidUpdates 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

      updateContent( content: string | HTMLElement): voidReplaces the existing content with new or modified information, ensuring that the displayed data reflects the latest updates or changes.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

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

      updateLabel( label: string): voidUpdates 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-window, if you host multiple widgets):

      document.querySelector('smart-window')?.updateLabel("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