md-form-builder/src/controls/mdfbRadioCustom.html

AngularJS - Material Design - Form Builder

<md-input-container class="no-margin" ng-class="{ 'md-input-invalid' : form[field.name].$invalid }">

  <div class="radio-custom-row" layout="row">
    <span class="matrix-cell" flex="25" layout="column" layout-align="top left" ng-bind-html="field.title" ng-class="{fieldDisabled: field.settings.disabled}" style="margin-right: 20px;"></span>
    <div class="matrix-cell" flex="75" layout="column" layout-align="top left">

      <md-input-container ng-show="!globals.normalDisplay" ng-class="{ 'md-input-invalid' : form[field.name].$invalid && form[field.name].$touched }" style="margin-top: 0px;">
        <md-radio-group 
          name="{{field.name}}"
          ng-model="field.value"
          ng-required="field.settings.required && !form.saveAsDraft.$modelValue && field.show"
          layout="{{field.layout}}">
          <md-radio-button ng-repeat="option in field.options track by $index" ng-disabled="field.settings.disabled || globals.viewModeOnly" value="{{option.key}}" aria-label="...">
            <span ng-bind-html="option.value"></span>
          </md-radio-button>
        </md-radio-group>

        <div layout="column" ng-messages="form[field.name].$error" ng-show="form[field.name].$invalid">
          <div ng-message="required">This field is required</div>
        </div>
      </md-input-container>

      <style>
        .normalDisplay {
          margin-top: 0px;
        }
        .normalDisplay md-list-item::before, md-list-item .md-list-item-inner::before {
          min-height: 35px;
        }
        .normalDisplay md-list-item {
          min-height: 35px;
          margin-left: 16px;
        }
        
        .accordion-div-parent {
          cursor: pointer;
          outline: none;
        }
        
        .accordion-div-child {
          padding: 10px;
          background: #F6F6F6;
          border-bottom: 1px solid #ccc;
        }
        
        .data-div {
          padding: 10px;
          background: #eee;
          border-bottom: 1px solid #ccc;
          outline: none;
        }
        
        .radio-custom-row {
          border-bottom: 1px solid #ccc;
          padding-bottom: 20px;
        }
        md-radio-button .md-container {
          top: 8px;
        }
        
        .data-padding {
          padding: 5px 10px 0px 10px;
        }
        
        .read-only-button {
          min-width: 30px;
          min-height: 10px;
          line-height: 20px;
          margin: 0px;
        }
        
        .read-only-icon {
           font-size: 20px;
           float: left;
        }
        
        .accordion-icon {
          float: right;
        }
        
        .md-list-custom {
          padding: 0px;
          margin-top: -8px;
        }
        
        .no-margin {
          margin: 0px;
        }
        
        .parent-fit-content {
          width: fit-content;
        }
      </style>

      <md-input-container class="normalDisplay" ng-show="globals.normalDisplay">
        <md-list class="md-list-custom">
          <md-list-item ng-repeat="option in field.options">
            <span ng-class="{'selected-option': field.value == $index}" ng-bind-html="option.value"></span>
          </md-list-item>
        </md-list>
      </md-input-container>


      <div>
        
        <div ng-if="field.data.lists">
          <div layout="column" class="data-div">
            <div layout="row">
              <span><strong>Checklists:</strong></span>
            </div>
            <div layout="column">
              <div flex ng-repeat="(key, list) in field.data.lists">
                <div class="accordion-div-parent" ng-click="toggleList(key)" ng-disabled="globals.viewModeOnly">
                  <div layout="column" class="accordion-div-child">
                    <div layout="row">
                      <span><strong>{{ list.title }}</strong></span>
                      <span flex></span>
                      <div ng-if="!showList[key]"><i class="material-icons accordion-icon">keyboard_arrow_down</i></div>
                      <div ng-if="showList[key]"><i class="material-icons accordion-icon">keyboard_arrow_up</i></div>
                    </div>
                    <div ng-if="!showList[key]">
                      <ul class="no-margin">
                        <div ng-repeat="item in list.items">
                          <li ng-if="item.selected">{{ item.label }}</li>
                        </div>
                      </ul>
                    </div>
                    <md-input-container ng-if="showList[key]">
                      <md-checkbox
                        ng-click="$event.stopPropagation()"
                        ng-change="editSelectedDocuments(key, item.code)"
                        ng-repeat="item in list.items"
                        name="_{{ item.code }}"
                        ng-model="item.selected"
                        ng-true-value="true"
                        ng-false-value="false"
                        layout="{{field.layout}}"
                        layout-align="start start"
                        class="md-align-top-left parent-fit-content" flex>
                        <div>{{ item.label }}</div>
                      </md-checkbox>
                    </md-input-container>
                  </div>
                </div>
                <input type="hidden" name="{{ key }}" ng-model="selectedDocuments[key]"/>
              </div>
            </div>
          </div>
        </div>
        
        <div layout="column" class="data-div">
          <div layout="row">
            <span><strong>Findings:</strong></span>
            <span flex></span>
            <div ng-if="!globals.normalDisplay">
              <md-button class="md-raised md-accent read-only-button" ng-click="showPrompt($index, 'findings', field.data.findings)" ng-show="!field.data.findings"><span><i class="material-icons ng-binding read-only-icon">add</i></span> Add</md-button>
              <md-button class="md-raised md-accent read-only-button" ng-click="showPrompt($index, 'findings', field.data.findings)" ng-show="field.data.findings"><span><i class="material-icons ng-binding read-only-icon">edit</i></span> Edit</md-button>
            </div>
          </div>
          <input type="hidden" name="{{field.name}}_findings" ng-model="field.data.findings" />
          <div layout="row" ng-if="field.data.findings" ng-bind-html="field.data.findings" class="data-padding"></div>
        </div>
        <div layout="column" class="data-div">
          <div layout="row">
            <span><strong>Recommendations:</strong></span>
            <span flex></span>
            <div ng-if="!globals.normalDisplay">
              <md-button class="md-raised md-accent read-only-button" ng-click="showPrompt($index, 'recommendations', field.data.recommendations)" ng-show="!field.data.recommendations"><span><i class="material-icons ng-binding read-only-icon">add</i></span> Add</md-button>
              <md-button class="md-raised md-accent read-only-button" ng-click="showPrompt($index, 'recommendations', field.data.recommendations)" ng-show="field.data.recommendations"><span><i class="material-icons ng-binding read-only-icon">edit</i></span> Edit</md-button>
            </div>
          </div>
          <input type="hidden" name="{{field.name}}_recommendations" ng-model="field.data.recommendations" />
          <div layout="row" ng-if="field.data.recommendations" ng-bind-html="field.data.recommendations" class="data-padding"></div>
        </div>
      </div>
    </div>
  </div>
</md-input-container>