text: /**
  * This directive creates a field for tweaking component options.
  * This needs at least a property attribute specifying what property
  * of the component to bind to.
  *
  * If the property is defined in COMMON_OPTIONS above, it will automatically
  * populate its label, placeholder, input type, and tooltip. If not, you may specify
  * those via attributes (except for tooltip, which you can specify with the title attribute).
  * The generated input will also carry over any other properties you specify on this directive.
  */
  module.exports = ['COMMON_OPTIONS', function(COMMON_OPTIONS) {
    return {
      restrict: 'E',
      require: 'property',
      priority: 2,
      replace: true,
      template: function(el, attrs) {
        var property = attrs.property;
        var label = attrs.label || (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].label) || '';
        var placeholder = (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].placeholder) || null;
        var type = (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].type) || 'text';
        var tooltip = (COMMON_OPTIONS[property] && COMMON_OPTIONS[property].tooltip) || '';
  
        var input = angular.element('<input>');
        var inputAttrs = {
          id: property,
          name: property,
          type: type,
          'ng-model': 'component.' + property,
          placeholder: placeholder
        };
        // Pass through attributes from the directive to the input element
        angular.forEach(attrs.$attr, function(key) {
          inputAttrs[key] = attrs[key];
          // Allow specifying tooltip via title attr
          if (key.toLowerCase() === 'title') {
            tooltip = attrs[key];
          }
        });
  
        // Add min/max value floor values for validation.
        if (property === 'validate.minLength' || property === 'validate.maxLength') {
          inputAttrs.min = 0;
        }
  
        input.attr(inputAttrs);
  
        // Checkboxes have a slightly different layout
        if (inputAttrs.type.toLowerCase() === 'checkbox') {
          return '<div class="checkbox">' +
                  '<label for="' + property + '" form-builder-tooltip="' + tooltip + '">' +
                  input.prop('outerHTML') +
                  ' ' + label + '</label>' +
                '</div>';
        }
  
        input.addClass('form-control');
        return '<div class="form-group">' +
                  '<label for="' + property + '" form-builder-tooltip="' + tooltip + '">' + label + '</label>' +
                  input.prop('outerHTML') +
                '</div>';
      }
    };
  }];
  