Class: Select

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
Copyright: schukai GmbH

Fires:

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.

Properties

Name Type Default Description

toggleEventType

Object

click,touch

List of event types to be observed for opening the dropdown

delegatesFocus

boolean

false

lorem see mozilla.org

options

Array.<Object>

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

options[].label string

options[].value string

options[].visibility

string

hidden or visible

selection

Array

Selected options

showMaxOptions

Integer

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

type

string

radio

Multiple (checkbox) or single selection (radio)

name

string

(random

id) Name of the form field

url

string

Load options from server per url

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":"application/json"}}

labels

Object

Properties

Name	Type	Description
`cannot-be-loaded`	string	cannot be loaded
`no-options-available`	string	no options available
`select-an-option`	string	select an option
`no-option`	string	no option in the list, maybe you have to change the filter

features

Object

List with features

Properties

Name	Type	Default	Description
`clearAll`	Boolean	true	Display of a delete button to delete the entire selection
`clear`	Boolean	true	Display of a delete key for deleting the specific selection
`lazyLoad`	Boolean	false	Load options when first opening the dropdown
`closeOnSelect`	Boolean	false	Close the dropdown when an option is selected (since 3.54.0)
`emptyValueIfNoOptions`	Boolean	false	If no options are available, the selection is set to an empty array

filter.defaultValue

Boolean

Default filter value, if the filter is empty

filter.mode

Boolean

options

Filter mode, values: options, remote, disabled

templates

Object

Template definitions

Properties

Name	Type	Description
`main`	string	Main template

templateMapping

string

Mapping of the template placeholders

Properties

Name	Type	Description
`selected`	string	Selected Template

popper

Object

PopperJS Options

Properties

Name	Type	Default	Description
`placement`	string	bottom	PopperJS placement

modifiers

Array.<Object>

{name:offset}

PopperJS placement

mapping

Object

Properties

Name	Type	Default	Description
`selector`	String	*	Path to select the appropriate entries
`labelTemplate`	String	""	template with the label placeholders in the form ${name}, where name is the key (**)
`valueTemplate`	String	""	template with the value placeholders in the form ${name}, where name is the key
`filter`	Monster.Components.Form~exampleFilterCallback \| undefined		Filtering of values via a function

formatter

Object

Properties

Name	Type	Description
`selection`	Monster.Components.Form~formatterSelectionCallback \| undefined	format selection label

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

value

Set selection

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

Set selection

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

Properties

Name	Type	Description
`value`	string \| 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

Type	Description
string \| array

(static) formAssociated

See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals

(static) instanceSymbol

This method is called by the instanceof operator.

Since: 2.1.0

Methods

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

Returns:

Type:: Monster.Components.Form.Select

blur()

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

click()

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

Since: 3.27.0
See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

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.

Parameters:

Name	Type	Description
`url`	string \| URL	URL to fetch the options

Returns:

Type:: Promise

focus()

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

Since: 3.27.0
See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

importOptions(data) → {Select}

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

Parameters:

Name	Type	Description
`data`	array \| 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