Multiple input type

Sample that shows how to integrate an basic input field for which the survey manager can chose the type and an error message from the answer properties.

class MultiTypeInputSampleWidget extends NGSWidget {
    /*  Html template that will generate before class gets created
        All id's and css classes name will be suffixed by the uniqueId
        provided during creation of the widget */
    static get template() {
        return `<input class="ngs-question__answer-field" type="{{type}}" required id="myField">
      `;
    }

    /* Does this widget support label, the label is the text a form
     admin can enter using the form design and can be injected in
     the template using the <ngs-label></ngs-label> tag
     */
    static get hasLabel() {
        return true;
    }

    /* Properties that can be set in from the form designer for each
     answer using this widget as an answer type in the answer properties */
    static get propertiesDef() {
        return [{
            id: 'required',
            label: 'Required',
            defaultValue: false,
            type: 'boolean'
        }, {
            id: 'type',
            label: 'type',
            defaultValue: 'text',
            type: 'list',
            list: [{
                    name: 'text',
                    value: 'text'
                },
                {
                    name: 'color',
                    value: 'color'
                },
                {
                    name: 'date',
                    value: 'date'
                },
                {
                    name: 'datetime-local',
                    value: 'datetime-local'
                },
                {
                    name: 'email',
                    value: 'email'
                },
                {
                    name: 'month',
                    value: 'month'
                },
                {
                    name: 'number',
                    value: 'number'
                },
                {
                    name: 'range',
                    value: 'range'
                },
                {
                    name: 'search',
                    value: 'search'
                },
                {
                    name: 'tel',
                    value: 'tel'
                },
                {
                    name: 'time',
                    value: 'time'
                },
                {
                    name: 'url',
                    value: 'url'
                },
                {
                    name: 'week',
                    value: 'week'
                },
            ]
        }, {
            id: 'invalidmessage',
            label: 'Invalid message',
            defaultValue: 'Invalid value',
            type: 'text'
        }];
    }

    init() {
        // Get the input element from the template
        this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');

        // Get the current render mode to know how we should
        // setup the state here make it disabled if the 
        // widget is in read only mode 
        this.isDisabled$(disabled => {
            this.inputField.disabled = disabled;
        });

        // Gets the current value of the wdiget
        this.getValue$(value => {
            this.inputField.value = value;
        });

        // Set the inital value when the widget gets created
        if (this.initialValue) {
            this.inputField.value = this.initialValue;
        }

        // If the user changes the text make sure to save the value
        // in the form   
        this.inputField.addEventListener('input', (event) => {
            this.textChanged(this.inputField.value, this);
        });
    }

    // Post the value to the form
    textChanged(value, widget) {
        widget.setAnswer(this.inputField.value);
    }

    // Will be called by the form
    // to see if the value is valid
    // If not valid must return '' (no error message shown) or the error message to show
    // If its valid return null 
    isValid() {
        if (!this.inputField.validity.valid) {
            return this.properties.invalidmessage;
        } else if (this.properties.required && !this.inputField.value) {
            return 'please enter a value';
        } else {
            return null;
        }
    }
}