Class: Template

Monster .Components .Form. Template

This CustomElement monster-template reloads a content and adds it to the ShadowRoot. The content is set to not visible,

You can create this control either by specifying the HTML tag <monster-template /> directly in the HTML or using Javascript via the document.createElement('monster-template'); method.

<monster-template></monster-template>

Or you can create this CustomControl directly in Javascript:

import {Template} from '@schukai/component-form/source/template.js';
document.createElement('monster-template');

The content will not be loaded until this element is visible. If the element is invisible again and becomes visible again, the content is reloaded as well. you can disable this behavior by setting reload=onshow. *

Constructor

new Template()

A template control

Since: 1.11.0
Copyright: schukai GmbH

Fires:

Monster.Components.event:monster-fetched

Members

defaults

To set the options via the html tag the attribute data-monster-options must be used.

Properties

Name Type Description

templates

Object

Template definitions

Properties

Name	Type	Description
`main`	string	Main template

url string

reload

string

currently the only value defined is onshow. Currently the only value defined is onshow. this removes the IntersectionObserver. this means that the content is only loaded once. reloading of the content does not occur.

processors Array.<Monster.Components.Form.Processor>

fetch

Object

Fetch see Using Fetch mozilla.org

Properties

Name	Type	Default
`redirect`	String	error
`method`	String	GET
`mode`	String	same-origin
`credentials`	String	same-origin
`headers`	Object	{"accept":"text/html"}}

See: https://monsterjs.org/en/doc/#configurate-a-monster-control The individual configuration values can be found in the table.

(static) instanceSymbol

This method is called by the instanceof operator.

Since: 2.1.0

(static) observedAttributes

This method determines which attributes are to be monitored by attributeChangedCallback().

Methods

assembleMethodSymbol() → {Monster.Components.Form.Form}

This method is called internal and should not be called directly.

Fires:

Monster.Components.event:monster-fetched

Throws:

missing default slot
Type
Error
no shadow-root is defined
Type
Error
missing url
Type
Error
we won't be able to read the data
Type
Error
request failed
Type
Error
not found
Type
Error
undefined status or type
Type
Error

Returns:

Type:: Monster.Components.Form.Form

fetch(url)

load content from url

It is important to know that with this function the loading is executed directly.

load content from url

It is important to know that with this function the loading is executed directly. it is loaded as well when the element is not visible.

Parameters:

Name	Type	Description
`url`	string \| undefined

initMethodSymbol()

(static) getCSSStyleSheet() → {Array.<CSSStyleSheet>}

This method is called internal and should not be called directly.

Returns:

Type:: Array.<CSSStyleSheet>

(static) getTag() → {string}

This method is called internal and should not be called directly.

Returns:

Type:: string