Elsci Essential Components

Text Input

Select Input

TypeaheadInput

EditText

SnackBar

Text Input

TextInput - let user enter and edit text. It inherits most of the properties from the native input element.
So, you can use most of the native input element attributes to control the text field behavior or change constraints.

Here we create a text field for entering a temperature value. Let's fill in the attributes:

"name" - used to identify the field in the form, so later we can access the value with querySelector 'text-input[name="Temperature"]'.
"label" - used to display a label for the field.
"type" - as we are entering a temperature value, we want to use a number type.
"min" - we want to limit the minimum value to -273 degrees Celsius.
"max" - we want to limit the maximum value to 999999 degrees Celsius.
"required" - we want to make the field required, so the user can't submit the form without entering a value.


<text-input name="Temperature" label="Temperature, C°" type="number" min="-273" max="999999" required></text-input>

Set the default value.


const temperature = document.querySelector('text-input[name="Temperature"]');
temperature.value = '20'

Select Input

SelectInput - let user select an option from a list of predefined options.

Here we create a select field for selecting a temperature unit. Let's fill in the attributes:

"name" - used to identify the field in the form, so later we can access the value with querySelector 'select-input[name="Unit"]'.
"label" - used to display a label for the field.


<select-input name="Unit" label="Unit" required></select-input>

But we also need to add options to the select field. And set the default value.


const selectInput = document.querySelector('select-input[name="Unit"]');

const selectInputOptions = [
    {displayName: "C"},
    {displayName: "K"},
    {displayName: "F"},
];

selectInput.options = selectInputOptions;
selectInput.value = selectInputOptions[0];

Typeahead Input

TypeaheadInput - let user select an option from a list of predefined options. In this input user can search (filter) options, by starting to enter the symbols

Here we create a typeahead field for selecting a chemical substance. Let's fill in the attributes:

"name" - used to identify the field in the form, so later we can access the value with querySelector 'typeahead-input[name="Substance"]'.
"label" - used to display a label for the field.


<typeahead-input name="Substance" label="Substance" required></typeahead-input>

But we also need to add options to the typeahead field. And set the default value.


const typeAheadInput = document.querySelector("typeahead-input[name="Substance"]");

const typeAheadInputOptions = [
     {displayName: "Product"},
     {displayName: "Core"},
     {displayName: "Mono"},
     {displayName: "BOC"},
];

typeAheadInput.options = typeAheadInputOptions;
typeAheadInput.value = typeAheadInputOptions[0];

EditText

Displayed as regular text(underlined) but allows editing it's value

                    
<edit-text name="Precision" required type="number" min="1" max="100"></edit-text>

SnackBar

This component shows small element in the bottom of the page.

- msgText - main text (e.g. Smth was deleted)
- btnText - OK button text (e.g. Undo)
- btnCb - function to be called when OK btn pressed
- ttl - aka TimeToLive in milliseconds

You can have multiple snackBars in one page if create components with different ids

                    
const snackBar = new SnackBar('id');
snackBar.show({msgText:'SnackBar text', btnText:'Action', btnCb: ()=> window.alert("Hello world!"), ttl: 15 * 1000})