Monster.Components.Form. ConfirmButton

This CustomControl creates a confirm button element with a variety of options.

Dependencies: the system uses functions of the monsterjs library as well as pooperjs.

You can create this control either by specifying the HTML tagdirectly in the HTML or using Javascript via thedocument.createElement('monster-confirm-button');` method.

<monster-confirm-button></monster-confirm-button>

Or you can create this CustomControl directly in Javascript:

import {ConfirmButton} from 'https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/confirm-button.js';
document.createElement('monster-confirm-button');

Constructor

new ConfirmButton()

A confirm button

Since
  • 1.5.0

Members

defaults

The defaults can be set either directly in the object or via an attribute in the HTML tag.

The defaults can be set either directly in the object or via an attribute in the HTML tag. This method is called internal and should not be called directly.

To set the options via the html tag the attribute data-monster-options must be set. As value a JSON object with the desired values must be defined.

The JSON can be specified as a DataURI.

new Monster.Types.DataUrl(btoa(JSON.stringify({
       shadowMode: 'open',
       delegatesFocus: true,
       templates: {
           main: undefined
       }
   })),'application/json',true).toString()

The attribute data-monster-options-selector can be used to access a script tag that contains additional configuration.

As value a selector must be specified, which belongs to a script tag and contains the configuration as json.

<script id="id-for-this-config" type="application/json">
   {
       "config-key": "config-value"
   }
</script>

The individual configuration values can be found in the table.

Properties
NameTypeDefaultDescription
toggleEventTypeObjectclick,touch

List of event types to be observed for opening the confirm message

templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

labels.buttonstring'<slot

name="button">' Button label

labels.messagestring'<slot>Should

I Stay or Should I Go?' Message

labels.confirmstring'<slot

name="confirm">Confirm' Confirm button label

labels.cancelstring'<slot

name="cancel">Cancel' Cancel button label

actions.confirmMonster.Components.Form~exampleActionCallback
actions.cancelMonster.Components.Form~exampleActionCallback

List of event types to be observed for opening the dropdown

popperObject

PopperJS Options

Properties
NameTypeDefaultDescription
placementstringtop

PopperJS placement

Methods

(static) getCSSStyleSheet() → {CSSStyleSheet}

Returns:
Type: 
CSSStyleSheet

(static) getTag() → {string}

Returns:
Type: 
string

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

connectedCallback() → {void}

Returns:
Type: 
void

disconnectedCallback() → {void}

Returns:
Type: 
void

hideDialog() → {Monster.Components.Form.ConfirmButton}

showDialog() → {Monster.Components.Form.ConfirmButton}

tiggleDialog() → {Monster.Components.Form.ConfirmButton}