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 '@schukai/component-form/source/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);

Extends

  • CustomControl

Members

defaults

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

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

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[].labelstring

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
NameTypeDescription
cannot-be-loadedstring

cannot be loaded

no-options-availablestring

no options available

select-an-optionstring

select an option

no-optionstring

no option in the list, maybe you have to change the filter

featuresObject

List with features

Properties
NameTypeDefaultDescription
clearAllBooleantrue

Display of a delete button to delete the entire selection

clearBooleantrue

Display of a delete key for deleting the specific selection

lazyLoadBooleanfalse

Load options when first opening the dropdown

closeOnSelectBooleanfalse

Close the dropdown when an option is selected (since 3.54.0)

filter.defaultValueBoolean*

Default filter value, if the filter is empty

filter.modeBooleanoptions

Filter mode, values: options, remote, disabled

templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

templateMappingstring

Mapping of the template placeholders

Properties
NameTypeDescription
selectedstring

Selected 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

See

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

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

(static) formAssociated

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

Since
  • 2.1.0

Methods

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

blur()

The Button.blur() method removes focus from the internal button element.

The Button.blur() method removes focus from the internal button element.

click()

The Button.click() method simulates a click on the internal button element.

The Button.click() method simulates a click on the internal button element.

Since
  • 3.27.0

connectedCallback() → {void}

Returns:
Type: 
void

disconnectedCallback() → {void}

Returns:
Type: 
void

fetch(url) → {Promise}

If no url is specified, the options are taken from the Component itself.

If no url is specified, the options are taken from the Component itself.

Parameters:
NameTypeDescription
urlstring | URL

URL to fetch the options

Returns:
Type: 
Promise

focus()

The Button.focus() method sets focus on the internal button element.

The Button.focus() method sets focus on the internal button element.

Since
  • 3.27.0

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

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

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string