@eform/ng-formio-builder/src/templates/builder.html

The Angular.js form builder component.

<div class="row formbuilder">
  <div class="col-xs-4 col-sm-3 col-md-2 formcomponents" ng-if="form && form.display">
    <uib-accordion close-others="true" ng-if="form.display !== 'pdf'">
      <div uib-accordion-group ng-repeat="(groupName, group) in formComponentGroups" heading="{{ group.title | formioTranslate }}" is-open="$first" class="panel panel-default form-builder-panel {{ group.panelClass }}">
        <uib-accordion close-others="true" ng-if="group.subgroups">
          <div uib-accordion-group ng-repeat="(subgroupName, subgroup) in group.subgroups" heading="{{ subgroup.title | formioTranslate }}" is-open="$first" class="panel panel-default form-builder-panel subgroup-accordion">
            <div ng-repeat="component in formComponentsByGroup[groupName][subgroupName]" ng-if="component.title"
                dnd-draggable="component.settings"
                dnd-dragstart="dndDragIframeWorkaround.isDragging = true"
                dnd-dragend="dndDragIframeWorkaround.isDragging = false"
                dnd-effect-allowed="copy"
                class="formcomponentcontainer">
              <span class="btn btn-primary btn-xs btn-block formcomponent" title="{{ component.title | formioTranslate }}" style="overflow: hidden; text-overflow: ellipsis;">
                <i ng-if="component.icon" class="{{ component.icon }}"></i> {{ component.title | formioTranslate }}
              </span>
            </div>
          </div>
        </uib-accordion>
        <div ng-repeat="component in formComponentsByGroup[groupName]" ng-if="!group.subgroup && component.title"
            dnd-draggable="component.settings"
            dnd-dragstart="dndDragIframeWorkaround.isDragging = true"
            dnd-dragend="dndDragIframeWorkaround.isDragging = false"
            dnd-effect-allowed="copy"
            class="formcomponentcontainer">
          <span class="btn btn-primary btn-xs btn-block formcomponent" title="{{ component.title | formioTranslate }}" style="overflow: hidden; text-overflow: ellipsis;">
            <i ng-if="component.icon" class="{{ component.icon }}"></i> {{ component.title | formioTranslate }}
          </span>
        </div>
      </div>
    </uib-accordion>
    <uib-accordion close-others="true" ng-if="form.display === 'pdf'">
      <div uib-accordion-group heading="{{ 'PDF Fields' | formioTranslate }}" is-open="true" class="panel panel-default form-builder-panel">
        <div class="formcomponentcontainer" ng-repeat="pdftype in pdftypes">
          <span class="btn btn-primary btn-xs btn-block formcomponent" title="{{ pdftype.title | formioTranslate }}" style="overflow: hidden; text-overflow: ellipsis;" form-builder-draggable="pdftype">
            <i ng-if="pdftype.icon" class="{{ pdftype.icon }}"></i> {{ pdftype.title | formioTranslate }}
          </span>
        </div>
      </div>
    </uib-accordion>
  </div>
  <div class="col-xs-8 col-sm-9 col-md-10 formarea" ng-if="form && form.display">
    <ol class="breadcrumb" ng-if="form.display === 'wizard'">
      <li ng-repeat="title in pages() track by $index"><a class="label" style="font-size:1em;" ng-class="{'label-info': ($index === getPage()), 'label-primary': ($index !== getPage())}" ng-click="showPage($index)">{{ title }}</a></li>
      <li><a class="label label-success" style="font-size:1em;" ng-click="newPage()" data-toggle="tooltip" title="Create Page"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> page</a></li>
    </ol>
    <div class="dropzone">
      <div ng-if="form.display === 'pdf'" ng-controller="formBuilderDnd" style="position:relative">
        <div class="formio-drop-zone" id="fb-drop-zone"></div>
        <formio form="form" options="{building: true}" id="fb-pdf-builder"></formio>
      </div>
      <form-builder-list
        ng-if="form.display !== 'pdf'"
        component="form"
        form="form"
        formio="::formio"
        hide-dnd-box-count="hideCount"
        root-list="true"
        class="rootlist"
        options="options"
        dnd-disable-if="form.display === 'wizard'"
      ></form-builder-list>
    </div>
  </div>
</div>