Basic Selection

Sample that shows how to integrate an simple radio selection button with label support

class BasicSelectionExampleWidget extends NGSSelectionWidget {
    /* Sample that shows how to integrate an simple radio selection button
       with label support
  */

    /*  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 `<div class="ngs-widget-basic-radio-sample">
      <div>
         <input type="radio" id="radioButton">
      </div>
      <div>
         <ngs-label></ngs-label>
       </div>
       </div>`
    }

    /* Style that will be assigned to this widget, note that all 
      elements class names will be scoped using the widget unique id */  
    static get style() {
        return '.ngs-widget-basic-radio-sample { display:flex;flex-direction:row}';
    }

    init() {
        // Get the input element from the template
        // its important to always suffix any id 
        // of the template with the uniqueid of the widget
        this.radioButton = this.getWidgetElementById('radioButton');

        // 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.radioButton.disabled = disabled;
        });

        this.isSelected$(selected => {
            this.radioButton.checked = selected;
        });

        this.radioButton.addEventListener('click', (event) => {
            this.radioChecked(this.radioButton.checked, this);
        });
    }

    // Post the value to the form
    radioChecked(value, widget) {
        widget.selectAnswer(value);
    }
  }