Class: Box

componyx .UI.Box(id, properties) → {Object}

new Box(id, properties) → {Object}

Box class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`ajax.load`	componyx.UI.base.AjaxMethod	AJAX method used to load box content data on demand.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

BoxEvents

Members

alignX :componyx.UI.Box.AlignXOption|null

Gets or sets a value indicating whether the box's horizontal position is aligned to the left, center or right of the expander element or pointer.

Type:

componyx.UI.Box.AlignXOption | null

alignY :componyx.UI.Box.AlignYOption|null

Gets or sets a value indicating whether the box's vertical position is aligned to the top, center or bottom of the expander element or pointer.

Type:

componyx.UI.Box.AlignYOption | null

animation :animation

Box animation.

Type:

animation

Properties:

Name	Type	Description
`showType`	componyx.UI.Box.AnimationTypeOption	Gets or sets the animation type used when showing the box.
`showClass`	String	Gets or sets the CSS class applied when showing the box.
`showDirection`	String	Gets or sets the animation direction (down, right, up, left) used when showing the box.
`showFade`	Boolean	Gets or sets a value indicating if fading is used when showing the box.
`hideType`	componyx.UI.Box.AnimationTypeOption	Gets or sets the animation type used when hiding the box.
`hideClass`	String	Gets or sets the CSS class applied when hiding the box.
`hideDirection`	String	Gets or sets the animation direction (top, right, bottom, left) used when hiding the box.
`hideFade`	Boolean	Gets or sets a value indicating if fading is used when hiding the box.

autoFit :Boolean

Gets or sets a value indicating whether the box should try to fit when the window is too small.

Type:

Boolean

autoFocus :Boolean

Gets or sets a value indicating whether the first element of the focusable list should get focus when the box is shown.

Type:

Boolean

autoInvertAnimation :Boolean

Gets or sets a value indicating whether the animation direction should be auto inverted when the box is inverted.

Type:

Boolean

autoInvertFit :Boolean

Gets or sets a value indicating whether the box should try to fit inverted when the window is too small.

Type:

Boolean

autoPosition :componyx.UI.Box.AutoPositionOption

Gets or sets the auto position of the box.

Type:

componyx.UI.Box.AutoPositionOption

autoResizeFit :Boolean

Gets or sets a value indicating whether the box should be resized when the window is too small.

Type:

Boolean

bottom :String

Gets or sets the bottom position of the box. Overwrites the property if already defined through Style.

Type:

String

contentTag :String

Gets the tag name of the content element.

Type:

String

cssClassContent :String

Gets or sets the css class of the box content.

Type:

String

cssClassHorizontalInverted :String

Gets or sets the css class of the box when AutoInvertFit is true and the box is inverted horizontally.

Type:

String

cssClassModal :String

Gets or sets the css class of the box modal overlay.

Type:

String

cssClassVerticalInverted :String

Gets or sets the css class of the box when AutoInvertFit is true and the box is inverted vertically.

Type:

String

dragSettings :componyx.library.DraggableSettings

Type:

componyx.library.DraggableSettings

See:

componyx.library.DraggableSettings

draggable :Boolean

Gets or sets a value indicating whether the box is draggable.

Type:

Boolean

enterKeySubmitter :HTMLElement|String|null

Gets or sets the submitter element or element-id on which to fire a click event when the enter-key is pressed within a field inside the box element.

Type:

HTMLElement | String | null

events :componyx.UI.Box.BoxEvents

Box events

Type:

componyx.UI.Box.BoxEvents

expandDirection :componyx.UI.Box.ExpandDirectionOption

Gets or sets the expand direction.

Type:

componyx.UI.Box.ExpandDirectionOption

expander :HTMLElement|String|null

Gets or sets the expander element or element-id.

Type:

HTMLElement | String | null

handleFocus :Boolean

Gets or sets a value indicating whether the box should handle focus events for focusable child elements. Only applies when modal is false.

Type:

Boolean

height :String

Gets or sets the height of the box. Overwrites the property if already defined through Style.

Type:

String

hideOnOutsideClick :Boolean

Gets or sets a value indicating whether the box is hidden when the user clicks outside the box.

Type:

Boolean

left :String

Gets or sets the left position of the box. Overwrites the property if already defined through Style.

Type:

String

Gets or sets a value indicating whether the box is displayed as modal popup.

Type:

Boolean

resizeToMaxHeight :Boolean

Gets or sets a value indicating whether the box is either resized to the window height or available (inverted) space when auto resized.

Type:

Boolean

resizeToMaxWidth :Boolean

Gets or sets a value indicating whether the box is either resized to the window width or available (inverted) space when auto resized.

Type:

Boolean

right :String

Gets or sets the right position of the box. Overwrites the property if already defined through Style.

Type:

String

stretchToContent :Boolean

Gets or sets a value indicating if the box element must stretch to the size of the content element. This setting is useful when the box is positioned absolute/fixed and the content element is a flex-box (display:flex).

Type:

Boolean

stretchToExpander :Boolean

Gets or sets a value indicating if the box element must stretch to the size of the expander element. The content width has priority over the expander width when stretchToContent is enabled and the content exceeds the expander width.

Type:

Boolean

tabIndexFocus :Boolean

Gets or sets a value indicating whether the focusable list is ordered by tabindex (requires all elements to have a tabindex set).

Type:

Boolean

top :String

Gets or sets the top position of the box. Overwrites the property if already defined through Style.

Type:

String

trackPointer :Boolean

Gets or sets a value indicating whether the box position tracks the pointer when AutoPosition is set to Pointer.

Type:

Boolean

width :String

Gets or sets the width of the box. Overwrites the property if already defined through Style.

Type:

String

(static, readonly) AlignXOption :number

AlignXOption

Type:

number

Properties:

Name	Type	Description
`LEFT`	number
`CENTER`	number
`RIGHT`	number
`getName`	number

(static, readonly) AlignYOption :number

AlignYOption

Type:

number

Properties:

Name	Type	Description
`TOP`	number
`CENTER`	number
`BOTTOM`	number
`getName`	number

(static, readonly) AnimationTypeOption :number

AnimationTypeOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`SLIDE`	number
`REVEAL`	number
`CSS`	number

(static, readonly) AutoPositionOption :number

AutoPositionOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`TOPLEFT`	number
`TOPCENTER`	number
`TOPRIGHT`	number
`LEFT`	number
`CENTER`	number
`RIGHT`	number
`BOTTOMLEFT`	number
`BOTTOMCENTER`	number
`BOTTOMRIGHT`	number
`POINTER`	number
`EXPAND`	number

(static, readonly) ExpandDirectionOption :number

ExpandDirectionOption

Type:

number

Properties:

Name	Type	Description
`DOWN`	number
`RIGHT`	number
`UP`	number
`LEFT`	number
`getName`	number

Methods

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

hide(instantopt)

Hides the component.

Parameters:

Name	Type	Attributes	Description
`instant`	Boolean	<optional>	A value indicating if the box should be hidden instantly without animation.

render()

Renders the component.

setContentTemplate(content)

Adds the content template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content template.

show(instantopt, pointerCoordinatesopt)

Shows the component.

Parameters:

Name	Type	Attributes	Description
`instant`	boolean	<optional>	A value indicating if the box should be shown instantly without animation.
`pointerCoordinates`	Object	<optional>	Optional pointer coordinates for POINTER auto-positioning. Pass these when the show is deferred (e.g. via setTimeout), as the original pointer event may no longer be available by then.

stopAnimation()

Stops the animation.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

toggle()

Shows or hides the component.

update(contentopt, showopt)

Updates the box view to stretch and position with the updated content.

Parameters:

Name	Type	Attributes	Default	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	<optional>		A new content template.
`show`	Boolean	<optional>	true	A value indicating if the box should be displayed when hidden.

Type Definitions

AutoFitEventArgs

Box auto fit event arguments.

Type:

Object

Properties:

Name	Type	Description
`fitX`	Boolean	A value indicating if the box was fitted horizontally.
`fitY`	Boolean	A value indicating if the box was fitted vertically.
`invertedX`	Boolean	A value indicating if the box position was inverted horizontally.
`invertedY`	Boolean	A value indicating if the box position was inverted vertically.
`resizedX`	Boolean	A value indicating if the box was resized horizontally.
`resizedY`	Boolean	A value indicating if the box was resized vertically.