BaseElement
BaseElement extending the HTMLElement with localization, on-demand rendering, typed properties, two-way bound properties, property change notifications, lifecycle callbacks, automatic events listen and unlisten.
Selector
smart-element
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
disabledboolean
Enables or disables the accordion. Disabled elements can not be interacted with.
Default valuefalse
isRenderedboolean
Returns true when the rendering is completed. Otherwise returns false
Default valuefalse
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"accordionItemRequired": "{{elementType}}: '{{method}}' requires an item from type \"smart-accordion-item\".",
"indexOutOfBound": "{{elementType}}: Out of bound index/indexes in '{{method}}' method.",
"invalidSettings": "{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter.",
"noItems": "{{elementType}}: No child elements found.",
"overridingProperties": "{{elementType}}: Overriding properties {{property1}} and {{property2}} applied. The '{{property1}}' property is used by default."
}
onAttachedany
Callback called when the element is attached to the DOM.
onDetachedany
Callback called when the element is detached from the DOM.
onCreatedany
Callback called when the element is created.
onReadyany
Callback called when the element is attached to the DOM for first time. It can be used for property initialization.
onRenderany
Callback called when the element is rendered.
readonlyboolean
Determines if the element is readonly or not. If the element true, users cannot interact with it.
Default valuefalse
renderModeElementRenderMode
Determines whether the element is automatically rendered or is rendered after calling the render method.
Default valueauto
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
Determines whether the element can be focused or not.
Default valuefalse
onresize((ev: Event) => any) | null
This event is triggered when the element is resized.
Arguments
evEvent
onstylechanged((this: Window, ev: Event) => any) | null
This event is triggered when a style which affects the layout of the element is changed is changed.
Arguments
evEvent
ev.detailObject
ev.detail.styleProperties - Array with changed style properties.
Methods
unwatch(): void
Unwatches the element.
render(): void
Renders the element.
watch( properties: any[], propertyChangedCallback: any): void
Watch for property changes.
Arguments
propertiesany[]
Properties array to watch for changes.
propertyChangedCallbackany
function(propertyName: string, oldValue: any, newValue: any)
whenRendered( renderCallback: any): void
Notifies with a callback function, when the rendering is completed.
Arguments
renderCallbackany
Callback which is called, when the rendering is completed.