Monster.Components.Form. Select

This CustomControl creates a select element with a variety of options. It supports filtering, local and remote, multiple selection and has a template system for displaying the options.

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

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

<monster-select></monster-select>

Or you can create this CustomControl directly in Javascript:

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

Events

The event monster-change is sent as soon as someone has clicked on a input control. monster-changed is sent as soon as the control has processed this input. The monster-changed event is sent when setting a selection. If the options have been set, the monster-options-set event is sent.

The CustomEvent has the property detail.

node.addEventListener('monster-change',(e)=>console.log(e.detail))
node.addEventListener('monster-changed',(e)=>console.log(e.detail))
node.addEventListener('monster-selected',(e)=>console.log(e.detail))
node.addEventListener('monster-options-set',(e)=>console.log(e.detail))

Constructor

new Select()

A highly configurable select control

Since
  • 1.0.0
Example
import {Select} from '@schukai/component-form/source/select.js';

const select = document.createElement('monster-select');
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')
select.importOptions([
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]);

document.body.appendChild(select);

Members

defaults

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

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 dropdown

delegatesFocusbooleanfalse

lorem see mozilla.org

optionsArray.<Object>

Selection of key identifier pairs available for selection and displayed in the dropdown.

options[].namestring

Label

options[].valuestring

Value

options[].visibilitystring

hidden or visible

selectionArray

Selected options

showMaxOptionsinteger10

Maximum number of visible options before a scroll bar should be displayed.

typestringradio

Multiple (checkbox) or single selection (radio)

namestring(random

id) Name of the form field

urlstring

Load options from server per url

fetchObject

Fetch see Using Fetch mozilla.org

Properties
NameTypeDefaultDescription
redirectStringerror
methodStringGET
modeStringsame-origin
credentialsStringsame-origin
headersObject{"accept":"application/json"}}
labelsObject
Properties
NameTypeDefaultDescription
cannot-be-loadedstringcannot

be loaded

featuresObject

List with features

Properties
NameTypeDefaultDescription
filterBooleantrue

Show option filter

remoteFilterBooleanfalse

Filtering causes the specified URL to be reloaded and the options to be displayed.

clearAllBooleantrue

Display of a delete button to delete the entire selection

clearBooleantrue

Display of a delete key for deleting the specific selection

templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

popperObject

PopperJS Options

Properties
NameTypeDefaultDescription
placementstringbottom

PopperJS placement

modifiersArray.<Object>{name:offset}

PopperJS placement

mappingObject
Properties
NameTypeDefaultDescription
selectorString*

Path to select the appropriate entries

labelTemplateString""

template with the label placeholders in the form ${name}, where name is the key (**)

valueTemplateString""

template with the value placeholders in the form ${name}, where name is the key

filterMonster.Components.Form~exampleFilterCallback | undefined

Filtering of values via a function

formatterObject
Properties
NameTypeDescription
selectionMonster.Components.Form~formatterSelectionCallback | undefined

format selection label

value

The current selection of the Select

e = document.querySelector('monster-select');
console.log(e.value)
// ↦ 1
// ↦ ['1','2']
.

The current selection of the Select

e = document.querySelector('monster-select');
console.log(e.value)
// ↦ 1
// ↦ ['1','2']
Properties
TypeDescription
string | array

value

Set selection

e = document.querySelector('monster-select');
e.value=1
.

Set selection

e = document.querySelector('monster-select');
e.value=1
Properties
NameTypeDescription
valuestring | array
Since
  • 1.2.0

Methods

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

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string

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

connectedCallback() → {void}

Returns:
Type: 
void

disconnectedCallback() → {void}

Returns:
Type: 
void

fetch() → {Promise}

Returns:
Type: 
Promise

importOptions(data) → {Select}

Import Select Options from dataset Not to be confused with the control defaults/options

.

Import Select Options from dataset Not to be confused with the control defaults/options

Parameters:
NameTypeDescription
dataarray | object | Map | Set
Since
  • 0.16.0
Throws:
  • map is not iterable

    Type
    Error
  • missing label configuration

    Type
    Error
Returns:
Type: 
Select

initMethodSymbol()