@darkobits/formation/dist/components/Select/Select.js

'use strict';

var _config = require('../../etc/config');

var _constants = require('../../etc/constants');

var _FormationControl2 = require('../../classes/FormationControl');

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // -----------------------------------------------------------------------------
// ----- Select Component ------------------------------------------------------
// -----------------------------------------------------------------------------

/**
 * This component creates a select control and a label. Use "options" rather
 * than "ng-options". Supports "multiple". The label is transcluded.
 *
 * Implements the following bindings:
 * - `config`: Configuration object.
 * - `name`: Name of the control.
 * - `placeholder`: Control placeholder, implemented as a null option.
 * - `multiple`: If this attribute is present, renders a multi-select element.
 * - `ng-disabled`: If truthy, will disable the control.
 *
 * This component needs to be a directive for two reasons:
 * 1. In order to support traditional ngOptions behavior, the component needs to
 *    inherit the parent scope.
 * 2. ngOptions needs to be set on the select element during compilation,
 *    requiring a compile function.
 *
 * @example
 *
 * <fm name="myForm">
 *   <fm-select name="myControl"
 *     config="vm.mySelectConfig"
 *     options="i.value as i.label for i in vm.myOptions">
 *     Select an item:
 *   </fm-select>
 *  </fm>
 */
var SelectControl = function (_FormationControl) {
  _inherits(SelectControl, _FormationControl);

  function SelectControl() {
    _classCallCheck(this, SelectControl);

    return _possibleConstructorReturn(this, (SelectControl.__proto__ || Object.getPrototypeOf(SelectControl)).apply(this, arguments));
  }

  return SelectControl;
}(_FormationControl2.FormationControl);

(0, _config.$registerComponent)((0, _config.$getPrefixedName)('Select'), function () {
  var _bindToController;

  return {
    restrict: 'E',
    scope: true,
    bindToController: (_bindToController = {}, _defineProperty(_bindToController, _constants.COMPONENT_CONFIGURATION, '<config'), _defineProperty(_bindToController, 'name', '@'), _defineProperty(_bindToController, 'placeholder', '@'), _defineProperty(_bindToController, 'multiple', '@'), _defineProperty(_bindToController, '$ngDisabled', '<ngDisabled'), _bindToController),
    require: _defineProperty({}, _constants.FORM_CONTROLLER, '^^' + _constants.FORM_COMPONENT_NAME),
    transclude: true,
    compile: function compile(tElement, tAttributes) {
      // We need to set ngOptions during compilation, or Angular will not use
      // them.
      tElement.find('select').attr('ng-options', tAttributes.options);
    },

    controller: SelectControl,
    controllerAs: 'Select',
    template: '\n      <label for="{{::Select.getControlId() }}"\n        ng-class="{\n          \'has-error\': Select.getErrors(),\n          \'is-pending\': Select.' + _constants.NG_MODEL_CTRL + '.$pending,\n          \'is-disabled\': Select.isDisabled()\n        }"\n        ng-transclude>\n      </label>\n      <select id="{{::Select.getControlId() }}"\n        name="{{::Select.name }}"\n        ng-model="Select.$ngModelGetterSetter"\n        ng-if="::!Select.multiple"\n        ng-disabled="Select.isDisabled()"\n        ng-class="{\n          \'has-error\': Select.getErrors(),\n          \'is-pending\': Select.' + _constants.NG_MODEL_CTRL + '.$pending,\n          \'is-disabled\': Select.isDisabled()\n        }">\n        <option value=""\n          ng-if="::Select.placeholder"\n          hidden>\n          {{::Select.placeholder }}\n        </option>\n      </select>\n      <select id="{{::Select.getControlId() }}"\n        name="{{::Select.name }}"\n        ng-model="Select.$ngModelGetterSetter"\n        ng-if="::Select.multiple"\n        ng-disabled="Select.isDisabled()"\n        ng-class="{\n          \'has-error\': Select.getErrors(),\n          \'is-pending\': Select.' + _constants.NG_MODEL_CTRL + '.$pending,\n          \'is-disabled\': Select.isDisabled()\n        }"\n        multiple>\n      </select>\n    '
  };
});