text: /*!
   * Angular Material Design
   * https://github.com/angular/material
   * @license MIT
   * v1.1.0-rc.5-master-2ddeb91
   */
  (function( window, angular, undefined ){
  "use strict";
  
  /**
   * @ngdoc module
   * @name material.components.chips
   */
  /*
   * @see js folder for chips implementation
   */
  angular.module('material.components.chips', [
    'material.core',
    'material.components.autocomplete'
  ]);
  
  angular
    .module('material.components.chips')
    .controller('MdChipCtrl', MdChipCtrl);
  
  /**
   * Controller for the MdChip component. Responsible for handling keyboard
   * events and editting the chip if needed.
   *
   * @param $scope
   * @param $element
   * @param $mdConstant
   * @param $timeout
   * @param $mdUtil
   * @constructor
   */
  function MdChipCtrl ($scope, $element, $mdConstant, $timeout, $mdUtil) {
    /**
     * @type {$scope}
     */
    this.$scope = $scope;
  
    /**
     * @type {$element}
     */
    this.$element = $element;
  
    /**
     * @type {$mdConstant}
     */
    this.$mdConstant = $mdConstant;
  
    /**
     * @type {$timeout}
     */
    this.$timeout = $timeout;
  
    /**
     * @type {$mdUtil}
     */
    this.$mdUtil = $mdUtil;
  
    /**
     * @type {boolean}
     */
    this.isEditting = false;
  
    /**
     * @type {MdChipsCtrl}
     */
    this.parentController = undefined;
  
    /**
     * @type {boolean}
     */
    this.enableChipEdit = false;
  }
  MdChipCtrl.$inject = ["$scope", "$element", "$mdConstant", "$timeout", "$mdUtil"];
  
  
  /**
   * @param {MdChipsCtrl} controller
   */
  MdChipCtrl.prototype.init = function(controller) {
    this.parentController = controller;
    this.enableChipEdit = this.parentController.enableChipEdit;
  
    if (this.enableChipEdit) {
      this.$element.on('keydown', this.chipKeyDown.bind(this));
      this.$element.on('mousedown', this.chipMouseDown.bind(this));
      this.getChipContent().addClass('_md-chip-content-edit-is-enabled');
    }
  };
  
  
  /**
   * @return {Object}
   */
  MdChipCtrl.prototype.getChipContent = function() {
    var chipContents = this.$element[0].getElementsByClassName('md-chip-content');
    return angular.element(chipContents[0]);
  };
  
  
  /**
   * @return {Object}
   */
  MdChipCtrl.prototype.getContentElement = function() {
    return angular.element(this.getChipContent().children()[0]);
  };
  
  
  /**
   * @return {number}
   */
  MdChipCtrl.prototype.getChipIndex = function() {
    return parseInt(this.$element.attr('index'));
  };
  
  
  /**
   * Presents an input element to edit the contents of the chip.
   */
  MdChipCtrl.prototype.goOutOfEditMode = function() {
    if (!this.isEditting) return;
  
    this.isEditting = false;
    this.$element.removeClass('_md-chip-editing');
    this.getChipContent()[0].contentEditable = 'false';
    var chipIndex = this.getChipIndex();
  
    var content = this.getContentElement().text();
    if (content) {
      this.parentController.updateChipContents(
          chipIndex,
          this.getContentElement().text()
      );
  
      this.$mdUtil.nextTick(function() {
        if (this.parentController.selectedChip === chipIndex) {
          this.parentController.focusChip(chipIndex);
        }
      }.bind(this));
    } else {
      this.parentController.removeChipAndFocusInput(chipIndex);
    }
  };
  
  
  /**
   * Given an HTML element. Selects contents of it.
   * @param node
   */
  MdChipCtrl.prototype.selectNodeContents = function(node) {
    var range, selection;
    if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(node);
      range.select();
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = document.createRange();
      range.selectNodeContents(node);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  };
  
  
  /**
   * Presents an input element to edit the contents of the chip.
   */
  MdChipCtrl.prototype.goInEditMode = function() {
    this.isEditting = true;
    this.$element.addClass('_md-chip-editing');
    this.getChipContent()[0].contentEditable = 'true';
    this.getChipContent().on('blur', function() {
      this.goOutOfEditMode();
    }.bind(this));
  
    this.selectNodeContents(this.getChipContent()[0]);
  };
  
  
  /**
   * Handles the keydown event on the chip element. If enable-chip-edit attribute is
   * set to true, space or enter keys can trigger going into edit mode. Enter can also
   * trigger submitting if the chip is already being edited.
   * @param event
   */
  MdChipCtrl.prototype.chipKeyDown = function(event) {
    if (!this.isEditting &&
      (event.keyCode === this.$mdConstant.KEY_CODE.ENTER ||
      event.keyCode === this.$mdConstant.KEY_CODE.SPACE)) {
      event.preventDefault();
      this.goInEditMode();
    } else if (this.isEditting &&
      event.keyCode === this.$mdConstant.KEY_CODE.ENTER) {
      event.preventDefault();
      this.goOutOfEditMode();
    }
  };
  
  
  /**
   * Handles the double click event
   */
  MdChipCtrl.prototype.chipMouseDown = function() {
    if(this.getChipIndex() == this.parentController.selectedChip &&
      this.enableChipEdit &&
      !this.isEditting) {
      this.goInEditMode();
    }
  };
  
  angular
      .module('material.components.chips')
      .directive('mdChip', MdChip);
  
  /**
   * @ngdoc directive
   * @name mdChip
   * @module material.components.chips
   *
   * @description
   * `<md-chip>` is a component used within `<md-chips>` and is responsible for rendering individual
   * chips.
   *
   *
   * @usage
   * <hljs lang="html">
   *   <md-chip>{{$chip}}</md-chip>
   * </hljs>
   *
   */
  
  // This hint text is hidden within a chip but used by screen readers to
  // inform the user how they can interact with a chip.
  var DELETE_HINT_TEMPLATE = '\
      <span ng-if="!$mdChipsCtrl.readonly" class="md-visually-hidden">\
        {{$mdChipsCtrl.deleteHint}}\
      </span>';
  
  /**
   * MDChip Directive Definition
   *
   * @param $mdTheming
   * @param $mdUtil
   * ngInject
   */
  function MdChip($mdTheming, $mdUtil) {
    var hintTemplate = $mdUtil.processTemplate(DELETE_HINT_TEMPLATE);
  
    return {
      restrict: 'E',
      require: ['^?mdChips', 'mdChip'],
      compile:  compile,
      controller: 'MdChipCtrl'
    };
  
    function compile(element, attr) {
      // Append the delete template
      element.append($mdUtil.processTemplate(hintTemplate));
  
      return function postLink(scope, element, attr, ctrls) {
        var chipsController = ctrls.shift();
        var chipController  = ctrls.shift();
        $mdTheming(element);
  
        if (chipsController) {
          chipController.init(chipsController);
  
          angular
            .element(element[0]
            .querySelector('.md-chip-content'))
            .on('blur', function () {
              chipsController.resetSelectedChip();
              chipsController.$scope.$applyAsync();
            });
        }
      };
    }
  }
  MdChip.$inject = ["$mdTheming", "$mdUtil"];
  
  angular
      .module('material.components.chips')
      .directive('mdChipRemove', MdChipRemove);
  
  /**
   * @ngdoc directive
   * @name mdChipRemove
   * @restrict A
   * @module material.components.chips
   *
   * @description
   * Designates an element to be used as the delete button for a chip. <br/>
   * This element is passed as a child of the `md-chips` element.
   *
   * The designated button will be just appended to the chip and removes the given chip on click.<br/>
   * By default the button is not being styled by the `md-chips` component.
   *
   * @usage
   * <hljs lang="html">
   *   <md-chips>
   *     <button md-chip-remove="">
   *       <md-icon md-svg-icon="md-close"></md-icon>
   *     </button>
   *   </md-chips>
   * </hljs>
   */
  
  
  /**
   * MdChipRemove Directive Definition.
   * 
   * @param $timeout
   * @returns {{restrict: string, require: string[], link: Function, scope: boolean}}
   * @constructor
   */
  function MdChipRemove ($timeout) {
    return {
      restrict: 'A',
      require: '^mdChips',
      scope: false,
      link: postLink
    };
  
    function postLink(scope, element, attr, ctrl) {
      element.on('click', function(event) {
        scope.$apply(function() {
          ctrl.removeChip(scope.$$replacedScope.$index);
        });
      });
  
      // Child elements aren't available until after a $timeout tick as they are hidden by an
      // `ng-if`. see http://goo.gl/zIWfuw
      $timeout(function() {
        element.attr({ tabindex: -1, 'aria-hidden': true });
        element.find('button').attr('tabindex', '-1');
      });
    }
  }
  MdChipRemove.$inject = ["$timeout"];
  
  angular
      .module('material.components.chips')
      .directive('mdChipTransclude', MdChipTransclude);
  
  function MdChipTransclude ($compile) {
    return {
      restrict: 'EA',
      terminal: true,
      link: link,
      scope: false
    };
    function link (scope, element, attr) {
      var ctrl = scope.$parent.$mdChipsCtrl,
          newScope = ctrl.parent.$new(false, ctrl.parent);
      newScope.$$replacedScope = scope;
      newScope.$chip = scope.$chip;
      newScope.$index = scope.$index;
      newScope.$mdChipsCtrl = ctrl;
  
      var newHtml = ctrl.$scope.$eval(attr.mdChipTransclude);
  
      element.html(newHtml);
      $compile(element.contents())(newScope);
    }
  }
  MdChipTransclude.$inject = ["$compile"];
  
  angular
      .module('material.components.chips')
      .controller('MdChipsCtrl', MdChipsCtrl);
  
  /**
   * Controller for the MdChips component. Responsible for adding to and
   * removing from the list of chips, marking chips as selected, and binding to
   * the models of various input components.
   *
   * @param $scope
   * @param $mdConstant
   * @param $log
   * @param $element
   * @param $mdUtil
   * @constructor
   */
  function MdChipsCtrl ($scope, $mdConstant, $log, $element, $timeout, $mdUtil) {
    /** @type {$timeout} **/
    this.$timeout = $timeout;
  
    /** @type {Object} */
    this.$mdConstant = $mdConstant;
  
    /** @type {angular.$scope} */
    this.$scope = $scope;
  
    /** @type {angular.$scope} */
    this.parent = $scope.$parent;
  
    /** @type {$log} */
    this.$log = $log;
  
    /** @type {$element} */
    this.$element = $element;
  
    /** @type {angular.NgModelController} */
    this.ngModelCtrl = null;
  
    /** @type {angular.NgModelController} */
    this.userInputNgModelCtrl = null;
  
    /** @type {Element} */
    this.userInputElement = null;
  
    /** @type {Array.<Object>} */
    this.items = [];
  
    /** @type {number} */
    this.selectedChip = -1;
  
    /** @type {boolean} */
    this.hasAutocomplete = false;
  
    /** @type {string} */
    this.enableChipEdit = $mdUtil.parseAttributeBoolean(this.mdEnableChipEdit);
  
    /**
     * Hidden hint text for how to delete a chip. Used to give context to screen readers.
     * @type {string}
     */
    this.deleteHint = 'Press delete to remove this chip.';
  
    /**
     * Hidden label for the delete button. Used to give context to screen readers.
     * @type {string}
     */
    this.deleteButtonLabel = 'Remove';
  
    /**
     * Model used by the input element.
     * @type {string}
     */
    this.chipBuffer = '';
  
    /**
     * Whether to use the transformChip expression to transform the chip buffer
     * before appending it to the list.
     * @type {boolean}
     */
    this.useTransformChip = false;
  
    /**
     * Whether to use the onAdd expression to notify of chip additions.
     * @type {boolean}
     */
    this.useOnAdd = false;
  
    /**
     * Whether to use the onRemove expression to notify of chip removals.
     * @type {boolean}
     */
    this.useOnRemove = false;
  
    /**
     * Whether to use the onSelect expression to notify the component's user
     * after selecting a chip from the list.
     * @type {boolean}
     */
  }
  MdChipsCtrl.$inject = ["$scope", "$mdConstant", "$log", "$element", "$timeout", "$mdUtil"];
  
  /**
   * Handles the keydown event on the input element: by default <enter> appends
   * the buffer to the chip list, while backspace removes the last chip in the
   * list if the current buffer is empty.
   * @param event
   */
  MdChipsCtrl.prototype.inputKeydown = function(event) {
    var chipBuffer = this.getChipBuffer();
  
    // If we have an autocomplete, and it handled the event, we have nothing to do
    if (this.hasAutocomplete && event.isDefaultPrevented && event.isDefaultPrevented()) {
      return;
    }
  
    if (event.keyCode === this.$mdConstant.KEY_CODE.BACKSPACE) {
      // Only select and focus the previous chip, if the current caret position of the
      // input element is at the beginning.
      if (this.getCursorPosition(event.target) !== 0) {
        return;
      }
  
      event.preventDefault();
      event.stopPropagation();
  
      if (this.items.length) {
        this.selectAndFocusChipSafe(this.items.length - 1);
      }
  
      return;
    }
  
    // By default <enter> appends the buffer to the chip list.
    if (!this.separatorKeys || this.separatorKeys.length < 1) {
      this.separatorKeys = [this.$mdConstant.KEY_CODE.ENTER];
    }
  
    // Support additional separator key codes in an array of `md-separator-keys`.
    if (this.separatorKeys.indexOf(event.keyCode) !== -1) {
      if ((this.hasAutocomplete && this.requireMatch) || !chipBuffer) return;
      event.preventDefault();
  
      // Only append the chip and reset the chip buffer if the max chips limit isn't reached.
      if (this.hasMaxChipsReached()) return;
  
      this.appendChip(chipBuffer.trim());
      this.resetChipBuffer();
    }
  };
  
  /**
   * Returns the cursor position of the specified input element.
   * @param element HTMLInputElement
   * @returns {Number} Cursor Position of the input.
   */
  MdChipsCtrl.prototype.getCursorPosition = function(element) {
    /*
     * Figure out whether the current input for the chips buffer is valid for using
     * the selectionStart / end property to retrieve the cursor position.
     * Some browsers do not allow the use of those attributes, on different input types.
     */
    try {
      if (element.selectionStart === element.selectionEnd) {
        return element.selectionStart;
      }
    } catch (e) {
      if (!element.value) {
        return 0;
      }
    }
  };
  
  
  /**
   * Updates the content of the chip at given index
   * @param chipIndex
   * @param chipContents
   */
  MdChipsCtrl.prototype.updateChipContents = function(chipIndex, chipContents){
    if(chipIndex >= 0 && chipIndex < this.items.length) {
      this.items[chipIndex] = chipContents;
      this.ngModelCtrl.$setDirty();
    }
  };
  
  
  /**
   * Returns true if a chip is currently being edited. False otherwise.
   * @return {boolean}
   */
  MdChipsCtrl.prototype.isEditingChip = function() {
    return !!this.$element[0].getElementsByClassName('_md-chip-editing').length;
  };
  
  
  MdChipsCtrl.prototype.isRemovable = function() {
    // Return false if we have static chips
    if (!this.ngModelCtrl) {
      return false;
    }
  
    return this.readonly ? this.removable :
           angular.isDefined(this.removable) ? this.removable : true;
  };
  
  /**
   * Handles the keydown event on the chip elements: backspace removes the selected chip, arrow
   * keys switch which chips is active
   * @param event
   */
  MdChipsCtrl.prototype.chipKeydown = function (event) {
    if (this.getChipBuffer()) return;
    if (this.isEditingChip()) return;
    
    switch (event.keyCode) {
      case this.$mdConstant.KEY_CODE.BACKSPACE:
      case this.$mdConstant.KEY_CODE.DELETE:
        if (this.selectedChip < 0) return;
        event.preventDefault();
        // Cancel the delete action only after the event cancel. Otherwise the page will go back.
        if (!this.isRemovable()) return;
        this.removeAndSelectAdjacentChip(this.selectedChip);
        break;
      case this.$mdConstant.KEY_CODE.LEFT_ARROW:
        event.preventDefault();
        if (this.selectedChip < 0) this.selectedChip = this.items.length;
        if (this.items.length) this.selectAndFocusChipSafe(this.selectedChip - 1);
        break;
      case this.$mdConstant.KEY_CODE.RIGHT_ARROW:
        event.preventDefault();
        this.selectAndFocusChipSafe(this.selectedChip + 1);
        break;
      case this.$mdConstant.KEY_CODE.ESCAPE:
      case this.$mdConstant.KEY_CODE.TAB:
        if (this.selectedChip < 0) return;
        event.preventDefault();
        this.onFocus();
        break;
    }
  };
  
  /**
   * Get the input's placeholder - uses `placeholder` when list is empty and `secondary-placeholder`
   * when the list is non-empty. If `secondary-placeholder` is not provided, `placeholder` is used
   * always.
   */
  MdChipsCtrl.prototype.getPlaceholder = function() {
    // Allow `secondary-placeholder` to be blank.
    var useSecondary = (this.items && this.items.length &&
        (this.secondaryPlaceholder == '' || this.secondaryPlaceholder));
    return useSecondary ? this.secondaryPlaceholder : this.placeholder;
  };
  
  /**
   * Removes chip at {@code index} and selects the adjacent chip.
   * @param index
   */
  MdChipsCtrl.prototype.removeAndSelectAdjacentChip = function(index) {
    var selIndex = this.getAdjacentChipIndex(index);
    this.removeChip(index);
    this.$timeout(angular.bind(this, function () {
        this.selectAndFocusChipSafe(selIndex);
    }));
  };
  
  /**
   * Sets the selected chip index to -1.
   */
  MdChipsCtrl.prototype.resetSelectedChip = function() {
    this.selectedChip = -1;
  };
  
  /**
   * Gets the index of an adjacent chip to select after deletion. Adjacency is
   * determined as the next chip in the list, unless the target chip is the
   * last in the list, then it is the chip immediately preceding the target. If
   * there is only one item in the list, -1 is returned (select none).
   * The number returned is the index to select AFTER the target has been
   * removed.
   * If the current chip is not selected, then -1 is returned to select none.
   */
  MdChipsCtrl.prototype.getAdjacentChipIndex = function(index) {
    var len = this.items.length - 1;
    return (len == 0) ? -1 :
        (index == len) ? index -1 : index;
  };
  
  /**
   * Append the contents of the buffer to the chip list. This method will first
   * call out to the md-transform-chip method, if provided.
   *
   * @param newChip
   */
  MdChipsCtrl.prototype.appendChip = function(newChip) {
    if (this.useTransformChip && this.transformChip) {
      var transformedChip = this.transformChip({'$chip': newChip});
  
      // Check to make sure the chip is defined before assigning it, otherwise, we'll just assume
      // they want the string version.
      if (angular.isDefined(transformedChip)) {
        newChip = transformedChip;
      }
    }
  
    // If items contains an identical object to newChip, do not append
    if (angular.isObject(newChip)){
      var identical = this.items.some(function(item){
        return angular.equals(newChip, item);
      });
      if (identical) return;
    }
  
    // Check for a null (but not undefined), or existing chip and cancel appending
    if (newChip == null || this.items.indexOf(newChip) + 1) return;
  
    // Append the new chip onto our list
    var index = this.items.push(newChip);
  
    // Update model validation
    this.ngModelCtrl.$setDirty();
    this.validateModel();
  
    // If they provide the md-on-add attribute, notify them of the chip addition
    if (this.useOnAdd && this.onAdd) {
      this.onAdd({ '$chip': newChip, '$index': index });
    }
  };
  
  /**
   * Sets whether to use the md-transform-chip expression. This expression is
   * bound to scope and controller in {@code MdChipsDirective} as
   * {@code transformChip}. Due to the nature of directive scope bindings, the
   * controller cannot know on its own/from the scope whether an expression was
   * actually provided.
   */
  MdChipsCtrl.prototype.useTransformChipExpression = function() {
    this.useTransformChip = true;
  };
  
  /**
   * Sets whether to use the md-on-add expression. This expression is
   * bound to scope and controller in {@code MdChipsDirective} as
   * {@code onAdd}. Due to the nature of directive scope bindings, the
   * controller cannot know on its own/from the scope whether an expression was
   * actually provided.
   */
  MdChipsCtrl.prototype.useOnAddExpression = function() {
    this.useOnAdd = true;
  };
  
  /**
   * Sets whether to use the md-on-remove expression. This expression is
   * bound to scope and controller in {@code MdChipsDirective} as
   * {@code onRemove}. Due to the nature of directive scope bindings, the
   * controller cannot know on its own/from the scope whether an expression was
   * actually provided.
   */
  MdChipsCtrl.prototype.useOnRemoveExpression = function() {
    this.useOnRemove = true;
  };
  
  /*
   * Sets whether to use the md-on-select expression. This expression is
   * bound to scope and controller in {@code MdChipsDirective} as
   * {@code onSelect}. Due to the nature of directive scope bindings, the
   * controller cannot know on its own/from the scope whether an expression was
   * actually provided.
   */
  MdChipsCtrl.prototype.useOnSelectExpression = function() {
    this.useOnSelect = true;
  };
  
  /**
   * Gets the input buffer. The input buffer can be the model bound to the
   * default input item {@code this.chipBuffer}, the {@code selectedItem}
   * model of an {@code md-autocomplete}, or, through some magic, the model
   * bound to any inpput or text area element found within a
   * {@code md-input-container} element.
   * @return {Object|string}
   */
  MdChipsCtrl.prototype.getChipBuffer = function() {
    return !this.userInputElement ? this.chipBuffer :
        this.userInputNgModelCtrl ? this.userInputNgModelCtrl.$viewValue :
            this.userInputElement[0].value;
  };
  
  /**
   * Resets the input buffer for either the internal input or user provided input element.
   */
  MdChipsCtrl.prototype.resetChipBuffer = function() {
    if (this.userInputElement) {
      if (this.userInputNgModelCtrl) {
        this.userInputNgModelCtrl.$setViewValue('');
        this.userInputNgModelCtrl.$render();
      } else {
        this.userInputElement[0].value = '';
      }
    } else {
      this.chipBuffer = '';
    }
  };
  
  MdChipsCtrl.prototype.hasMaxChipsReached = function() {
    if (angular.isString(this.maxChips)) this.maxChips = parseInt(this.maxChips, 10) || 0;
  
    return this.maxChips > 0 && this.items.length >= this.maxChips;
  };
  
  /**
   * Updates the validity properties for the ngModel.
   */
  MdChipsCtrl.prototype.validateModel = function() {
    this.ngModelCtrl.$setValidity('md-max-chips', !this.hasMaxChipsReached());
  };
  
  /**
   * Removes the chip at the given index.
   * @param index
   */
  MdChipsCtrl.prototype.removeChip = function(index) {
    var removed = this.items.splice(index, 1);
  
    // Update model validation
    this.ngModelCtrl.$setDirty();
    this.validateModel();
  
    if (removed && removed.length && this.useOnRemove && this.onRemove) {
      this.onRemove({ '$chip': removed[0], '$index': index });
    }
  };
  
  MdChipsCtrl.prototype.removeChipAndFocusInput = function (index) {
    this.removeChip(index);
    this.onFocus();
  };
  /**
   * Selects the chip at `index`,
   * @param index
   */
  MdChipsCtrl.prototype.selectAndFocusChipSafe = function(index) {
    if (!this.items.length) {
      this.selectChip(-1);
      this.onFocus();
      return;
    }
    if (index === this.items.length) return this.onFocus();
    index = Math.max(index, 0);
    index = Math.min(index, this.items.length - 1);
    this.selectChip(index);
    this.focusChip(index);
  };
  
  /**
   * Marks the chip at the given index as selected.
   * @param index
   */
  MdChipsCtrl.prototype.selectChip = function(index) {
    if (index >= -1 && index <= this.items.length) {
      this.selectedChip = index;
  
      // Fire the onSelect if provided
      if (this.useOnSelect && this.onSelect) {
        this.onSelect({'$chip': this.items[this.selectedChip] });
      }
    } else {
      this.$log.warn('Selected Chip index out of bounds; ignoring.');
    }
  };
  
  /**
   * Selects the chip at `index` and gives it focus.
   * @param index
   */
  MdChipsCtrl.prototype.selectAndFocusChip = function(index) {
    this.selectChip(index);
    if (index != -1) {
      this.focusChip(index);
    }
  };
  
  /**
   * Call `focus()` on the chip at `index`
   */
  MdChipsCtrl.prototype.focusChip = function(index) {
    this.$element[0].querySelector('md-chip[index="' + index + '"] .md-chip-content').focus();
  };
  
  /**
   * Configures the required interactions with the ngModel Controller.
   * Specifically, set {@code this.items} to the {@code NgModelCtrl#$viewVale}.
   * @param ngModelCtrl
   */
  MdChipsCtrl.prototype.configureNgModel = function(ngModelCtrl) {
    this.ngModelCtrl = ngModelCtrl;
  
    var self = this;
    ngModelCtrl.$render = function() {
      // model is updated. do something.
      self.items = self.ngModelCtrl.$viewValue;
    };
  };
  
  MdChipsCtrl.prototype.onFocus = function () {
    var input = this.$element[0].querySelector('input');
    input && input.focus();
    this.resetSelectedChip();
  };
  
  MdChipsCtrl.prototype.onInputFocus = function () {
    this.inputHasFocus = true;
    this.resetSelectedChip();
  };
  
  MdChipsCtrl.prototype.onInputBlur = function () {
    this.inputHasFocus = false;
  };
  
  /**
   * Configure event bindings on a user-provided input element.
   * @param inputElement
   */
  MdChipsCtrl.prototype.configureUserInput = function(inputElement) {
    this.userInputElement = inputElement;
  
    // Find the NgModelCtrl for the input element
    var ngModelCtrl = inputElement.controller('ngModel');
    // `.controller` will look in the parent as well.
    if (ngModelCtrl != this.ngModelCtrl) {
      this.userInputNgModelCtrl = ngModelCtrl;
    }
  
    var scope = this.$scope;
    var ctrl = this;
  
    // Run all of the events using evalAsync because a focus may fire a blur in the same digest loop
    var scopeApplyFn = function(event, fn) {
      scope.$evalAsync(angular.bind(ctrl, fn, event));
    };
  
    // Bind to keydown and focus events of input
    inputElement
        .attr({ tabindex: 0 })
        .on('keydown', function(event) { scopeApplyFn(event, ctrl.inputKeydown) })
        .on('focus', function(event) { scopeApplyFn(event, ctrl.onInputFocus) })
        .on('blur', function(event) { scopeApplyFn(event, ctrl.onInputBlur) })
  };
  
  MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {
    if ( ctrl ) {
      this.hasAutocomplete = true;
  
      ctrl.registerSelectedItemWatcher(angular.bind(this, function (item) {
        if (item) {
          // Only append the chip and reset the chip buffer if the max chips limit isn't reached.
          if (this.hasMaxChipsReached()) return;
  
          this.appendChip(item);
          this.resetChipBuffer();
        }
      }));
  
      this.$element.find('input')
          .on('focus',angular.bind(this, this.onInputFocus) )
          .on('blur', angular.bind(this, this.onInputBlur) );
    }
  };
  
  MdChipsCtrl.prototype.hasFocus = function () {
    return this.inputHasFocus || this.selectedChip >= 0;
  };
  
    angular
        .module('material.components.chips')
        .directive('mdChips', MdChips);
  
    /**
     * @ngdoc directive
     * @name mdChips
     * @module material.components.chips
     *
     * @description
     * `<md-chips>` is an input component for building lists of strings or objects. The list items are
     * displayed as 'chips'. This component can make use of an `<input>` element or an 
     * `<md-autocomplete>` element.
     *
     * ### Custom templates
     * A custom template may be provided to render the content of each chip. This is achieved by
     * specifying an `<md-chip-template>` element containing the custom content as a child of
     * `<md-chips>`.
     *
     * Note: Any attributes on
     * `<md-chip-template>` will be dropped as only the innerHTML is used for the chip template. The
     * variables `$chip` and `$index` are available in the scope of `<md-chip-template>`, representing
     * the chip object and its index in the list of chips, respectively.
     * To override the chip delete control, include an element (ideally a button) with the attribute
     * `md-chip-remove`. A click listener to remove the chip will be added automatically. The element
     * is also placed as a sibling to the chip content (on which there are also click listeners) to
     * avoid a nested ng-click situation.
     *
     * <h3> Pending Features </h3>
     * <ul style="padding-left:20px;">
     *
     *   <ul>Style
     *     <li>Colours for hover, press states (ripple?).</li>
     *   </ul>
     *
     *   <ul>Validation
     *     <li>allow a validation callback</li>
     *     <li>hilighting style for invalid chips</li>
     *   </ul>
     *
     *   <ul>Item mutation
     *     <li>Support `
     *       <md-chip-edit>` template, show/hide the edit element on tap/click? double tap/double
     *       click?
     *     </li>
     *   </ul>
     *
     *   <ul>Truncation and Disambiguation (?)
     *     <li>Truncate chip text where possible, but do not truncate entries such that two are
     *     indistinguishable.</li>
     *   </ul>
     *
     *   <ul>Drag and Drop
     *     <li>Drag and drop chips between related `<md-chips>` elements.
     *     </li>
     *   </ul>
     * </ul>
     *
     * <span style="font-size:.8em;text-align:center">
     *   Warning: This component is a WORK IN PROGRESS. If you use it now,
     *   it will probably break on you in the future.
     * </span>
     *
     * Sometimes developers want to limit the amount of possible chips.<br/>
     * You can specify the maximum amount of chips by using the following markup.
     *
     * <hljs lang="html">
     *   <md-chips
     *       ng-model="myItems"
     *       placeholder="Add an item"
     *       md-max-chips="5">
     *   </md-chips>
     * </hljs>
     *
     * In some cases, you have an autocomplete inside of the `md-chips`.<br/>
     * When the maximum amount of chips has been reached, you can also disable the autocomplete selection.<br/>
     * Here is an example markup.
     *
     * <hljs lang="html">
     *   <md-chips ng-model="myItems" md-max-chips="5">
     *     <md-autocomplete ng-hide="myItems.length > 5" ...></md-autocomplete>
     *   </md-chips>
     * </hljs>
     *
     * @param {string=|object=} ng-model A model to bind the list of items to
     * @param {string=} placeholder Placeholder text that will be forwarded to the input.
     * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,
     *    displayed when there is at least one item in the list
     * @param {boolean=} md-removable Enables or disables the deletion of chips through the
     *    removal icon or the Delete/Backspace key. Defaults to true.
     * @param {boolean=} readonly Disables list manipulation (deleting or adding list items), hiding
     *    the input and delete buttons. If no `ng-model` is provided, the chips will automatically be
     *    marked as readonly.<br/><br/>
     *    When `md-removable` is not defined, the `md-remove` behavior will be overwritten and disabled.
     * @param {string=} md-enable-chip-edit Set this to "true" to enable editing of chip contents. The user can 
     *    go into edit mode with pressing "space", "enter", or double clicking on the chip. Chip edit is only
     *    supported for chips with basic template.
     * @param {number=} md-max-chips The maximum number of chips allowed to add through user input.
     *    <br/><br/>The validation property `md-max-chips` can be used when the max chips
     *    amount is reached.
     * @param {expression} md-transform-chip An expression of form `myFunction($chip)` that when called
     *    expects one of the following return values:
     *    - an object representing the `$chip` input string
     *    - `undefined` to simply add the `$chip` input string, or
     *    - `null` to prevent the chip from being appended
     * @param {expression=} md-on-add An expression which will be called when a chip has been
     *    added.
     * @param {expression=} md-on-remove An expression which will be called when a chip has been
     *    removed.
     * @param {expression=} md-on-select An expression which will be called when a chip is selected.
     * @param {boolean} md-require-match If true, and the chips template contains an autocomplete,
     *    only allow selection of pre-defined chips (i.e. you cannot add new ones).
     * @param {string=} delete-hint A string read by screen readers instructing users that pressing
     *    the delete key will remove the chip.
     * @param {string=} delete-button-label A label for the delete button. Also hidden and read by
     *    screen readers.
     * @param {expression=} md-separator-keys An array of key codes used to separate chips.
     *
     * @usage
     * <hljs lang="html">
     *   <md-chips
     *       ng-model="myItems"
     *       placeholder="Add an item"
     *       readonly="isReadOnly">
     *   </md-chips>
     * </hljs>
     *
     * <h3>Validation</h3>
     * When using [ngMessages](https://docs.angularjs.org/api/ngMessages), you can show errors based
     * on our custom validators.
     * <hljs lang="html">
     *   <form name="userForm">
     *     <md-chips
     *       name="fruits"
     *       ng-model="myItems"
     *       placeholder="Add an item"
     *       md-max-chips="5">
     *     </md-chips>
     *     <div ng-messages="userForm.fruits.$error" ng-if="userForm.$dirty">
     *       <div ng-message="md-max-chips">You reached the maximum amount of chips</div>
     *    </div>
     *   </form>
     * </hljs>
     *
     */
  
  
    var MD_CHIPS_TEMPLATE = '\
        <md-chips-wrap\
            ng-keydown="$mdChipsCtrl.chipKeydown($event)"\
            ng-class="{ \'md-focused\': $mdChipsCtrl.hasFocus(), \
                        \'md-readonly\': !$mdChipsCtrl.ngModelCtrl || $mdChipsCtrl.readonly,\
                        \'md-removable\': $mdChipsCtrl.isRemovable() }"\
            class="md-chips">\
          <md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
              index="{{$index}}"\
              ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index, \'md-readonly\': !$mdChipsCtrl.ngModelCtrl || $mdChipsCtrl.readonly}">\
            <div class="md-chip-content"\
                tabindex="-1"\
                aria-hidden="true"\
                ng-click="!$mdChipsCtrl.readonly && $mdChipsCtrl.focusChip($index)"\
                ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
                md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
            <div ng-if="$mdChipsCtrl.isRemovable()"\
                 class="md-chip-remove-container"\
                 md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
          </md-chip>\
          <div class="md-chip-input-container" ng-if="!$mdChipsCtrl.readonly && $mdChipsCtrl.ngModelCtrl">\
            <div md-chip-transclude="$mdChipsCtrl.chipInputTemplate"></div>\
          </div>\
        </md-chips-wrap>';
  
    var CHIP_INPUT_TEMPLATE = '\
          <input\
              class="md-input"\
              tabindex="0"\
              placeholder="{{$mdChipsCtrl.getPlaceholder()}}"\
              aria-label="{{$mdChipsCtrl.getPlaceholder()}}"\
              ng-model="$mdChipsCtrl.chipBuffer"\
              ng-focus="$mdChipsCtrl.onInputFocus()"\
              ng-blur="$mdChipsCtrl.onInputBlur()"\
              ng-keydown="$mdChipsCtrl.inputKeydown($event)">';
  
    var CHIP_DEFAULT_TEMPLATE = '\
        <span>{{$chip}}</span>';
  
    var CHIP_REMOVE_TEMPLATE = '\
        <button\
            class="md-chip-remove"\
            ng-if="$mdChipsCtrl.isRemovable()"\
            ng-click="$mdChipsCtrl.removeChipAndFocusInput($$replacedScope.$index)"\
            type="button"\
            aria-hidden="true"\
            tabindex="-1">\
          <md-icon md-svg-src="{{ $mdChipsCtrl.mdCloseIcon }}"></md-icon>\
          <span class="md-visually-hidden">\
            {{$mdChipsCtrl.deleteButtonLabel}}\
          </span>\
        </button>';
  
    /**
     * MDChips Directive Definition
     */
    function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout, $$mdSvgRegistry) {
      // Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols
      var templates = getTemplates();
  
      return {
        template: function(element, attrs) {
          // Clone the element into an attribute. By prepending the attribute
          // name with '$', Angular won't write it into the DOM. The cloned
          // element propagates to the link function via the attrs argument,
          // where various contained-elements can be consumed.
          attrs['$mdUserTemplate'] = element.clone();
          return templates.chips;
        },
        require: ['mdChips'],
        restrict: 'E',
        controller: 'MdChipsCtrl',
        controllerAs: '$mdChipsCtrl',
        bindToController: true,
        compile: compile,
        scope: {
          readonly: '=readonly',
          removable: '=mdRemovable',
          placeholder: '@',
          mdEnableChipEdit: '@',
          secondaryPlaceholder: '@',
          maxChips: '@mdMaxChips',
          transformChip: '&mdTransformChip',
          onAppend: '&mdOnAppend',
          onAdd: '&mdOnAdd',
          onRemove: '&mdOnRemove',
          onSelect: '&mdOnSelect',
          deleteHint: '@',
          deleteButtonLabel: '@',
          separatorKeys: '=?mdSeparatorKeys',
          requireMatch: '=?mdRequireMatch'
        }
      };
  
      /**
       * Builds the final template for `md-chips` and returns the postLink function.
       *
       * Building the template involves 3 key components:
       * static chips
       * chip template
       * input control
       *
       * If no `ng-model` is provided, only the static chip work needs to be done.
       *
       * If no user-passed `md-chip-template` exists, the default template is used. This resulting
       * template is appended to the chip content element.
       *
       * The remove button may be overridden by passing an element with an md-chip-remove attribute.
       *
       * If an `input` or `md-autocomplete` element is provided by the caller, it is set aside for
       * transclusion later. The transclusion happens in `postLink` as the parent scope is required.
       * If no user input is provided, a default one is appended to the input container node in the
       * template.
       *
       * Static Chips (i.e. `md-chip` elements passed from the caller) are gathered and set aside for
       * transclusion in the `postLink` function.
       *
       *
       * @param element
       * @param attr
       * @returns {Function}
       */
      function compile(element, attr) {
        // Grab the user template from attr and reset the attribute to null.
        var userTemplate = attr['$mdUserTemplate'];
        attr['$mdUserTemplate'] = null;
  
        var chipTemplate = getTemplateByQuery('md-chips>md-chip-template');
  
        var chipRemoveSelector = $mdUtil
          .prefixer()
          .buildList('md-chip-remove')
          .map(function(attr) {
            return 'md-chips>*[' + attr + ']';
          })
          .join(',');
  
        // Set the chip remove, chip contents and chip input templates. The link function will put
        // them on the scope for transclusion later.
        var chipRemoveTemplate   = getTemplateByQuery(chipRemoveSelector) || templates.remove,
            chipContentsTemplate = chipTemplate || templates.default,
            chipInputTemplate    = getTemplateByQuery('md-chips>md-autocomplete')
                || getTemplateByQuery('md-chips>input')
                || templates.input,
            staticChips = userTemplate.find('md-chip');
  
        // Warn of malformed template. See #2545
        if (userTemplate[0].querySelector('md-chip-template>*[md-chip-remove]')) {
          $log.warn('invalid placement of md-chip-remove within md-chip-template.');
        }
  
        function getTemplateByQuery (query) {
          if (!attr.ngModel) return;
          var element = userTemplate[0].querySelector(query);
          return element && element.outerHTML;
        }
  
        /**
         * Configures controller and transcludes.
         */
        return function postLink(scope, element, attrs, controllers) {
          $mdUtil.initOptionalProperties(scope, attr);
  
          $mdTheming(element);
          var mdChipsCtrl = controllers[0];
          if(chipTemplate) {
            // Chip editing functionality assumes we are using the default chip template.
            mdChipsCtrl.enableChipEdit = false;
          }
  
          mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;
          mdChipsCtrl.chipRemoveTemplate   = chipRemoveTemplate;
          mdChipsCtrl.chipInputTemplate    = chipInputTemplate;
  
          mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;
  
          element
              .attr({ 'aria-hidden': true, tabindex: -1 })
              .on('focus', function () { mdChipsCtrl.onFocus(); });
  
          if (attr.ngModel) {
            mdChipsCtrl.configureNgModel(element.controller('ngModel'));
  
            // If an `md-transform-chip` attribute was set, tell the controller to use the expression
            // before appending chips.
            if (attrs.mdTransformChip) mdChipsCtrl.useTransformChipExpression();
  
            // If an `md-on-append` attribute was set, tell the controller to use the expression
            // when appending chips.
            //
            // DEPRECATED: Will remove in official 1.0 release
            if (attrs.mdOnAppend) mdChipsCtrl.useOnAppendExpression();
  
            // If an `md-on-add` attribute was set, tell the controller to use the expression
            // when adding chips.
            if (attrs.mdOnAdd) mdChipsCtrl.useOnAddExpression();
  
            // If an `md-on-remove` attribute was set, tell the controller to use the expression
            // when removing chips.
            if (attrs.mdOnRemove) mdChipsCtrl.useOnRemoveExpression();
  
            // If an `md-on-select` attribute was set, tell the controller to use the expression
            // when selecting chips.
            if (attrs.mdOnSelect) mdChipsCtrl.useOnSelectExpression();
  
            // The md-autocomplete and input elements won't be compiled until after this directive
            // is complete (due to their nested nature). Wait a tick before looking for them to
            // configure the controller.
            if (chipInputTemplate != templates.input) {
              // The autocomplete will not appear until the readonly attribute is not true (i.e.
              // false or undefined), so we have to watch the readonly and then on the next tick
              // after the chip transclusion has run, we can configure the autocomplete and user
              // input.
              scope.$watch('$mdChipsCtrl.readonly', function(readonly) {
                if (!readonly) {
                  $mdUtil.nextTick(function(){
                    if (chipInputTemplate.indexOf('<md-autocomplete') === 0)
                      mdChipsCtrl
                          .configureAutocomplete(element.find('md-autocomplete')
                              .controller('mdAutocomplete'));
                    mdChipsCtrl.configureUserInput(element.find('input'));
                  });
                }
              });
            }
  
            // At the next tick, if we find an input, make sure it has the md-input class
            $mdUtil.nextTick(function() {
              var input = element.find('input');
  
              input && input.toggleClass('md-input', true);
            });
          }
  
          // Compile with the parent's scope and prepend any static chips to the wrapper.
          if (staticChips.length > 0) {
            var compiledStaticChips = $compile(staticChips.clone())(scope.$parent);
            $timeout(function() { element.find('md-chips-wrap').prepend(compiledStaticChips); });
          }
        };
      }
  
      function getTemplates() {
        return {
          chips: $mdUtil.processTemplate(MD_CHIPS_TEMPLATE),
          input: $mdUtil.processTemplate(CHIP_INPUT_TEMPLATE),
          default: $mdUtil.processTemplate(CHIP_DEFAULT_TEMPLATE),
          remove: $mdUtil.processTemplate(CHIP_REMOVE_TEMPLATE)
        };
      }
    }
    MdChips.$inject = ["$mdTheming", "$mdUtil", "$compile", "$log", "$timeout", "$$mdSvgRegistry"];
  
  angular
      .module('material.components.chips')
      .controller('MdContactChipsCtrl', MdContactChipsCtrl);
  
  
  
  /**
   * Controller for the MdContactChips component
   * @constructor
   */
  function MdContactChipsCtrl () {
    /** @type {Object} */
    this.selectedItem = null;
  
    /** @type {string} */
    this.searchText = '';
  }
  
  
  MdContactChipsCtrl.prototype.queryContact = function(searchText) {
    var results = this.contactQuery({'$query': searchText});
    return this.filterSelected ?
        results.filter(angular.bind(this, this.filterSelectedContacts)) : results;
  };
  
  
  MdContactChipsCtrl.prototype.itemName = function(item) {
    return item[this.contactName];
  };
  
  
  MdContactChipsCtrl.prototype.filterSelectedContacts = function(contact) {
    return this.contacts.indexOf(contact) == -1;
  };
  
  angular
    .module('material.components.chips')
    .directive('mdContactChips', MdContactChips);
  
  /**
   * @ngdoc directive
   * @name mdContactChips
   * @module material.components.chips
   *
   * @description
   * `<md-contact-chips>` is an input component based on `md-chips` and makes use of an
   * `md-autocomplete` element. The component allows the caller to supply a query expression which
   * returns  a list of possible contacts. The user can select one of these and add it to the list of
   * chips.
   *
   * You may also use the `md-highlight-text` directive along with its parameters to control the
   * appearance of the matched text inside of the contacts' autocomplete popup.
   *
   * @param {string=|object=} ng-model A model to bind the list of items to
   * @param {string=} placeholder Placeholder text that will be forwarded to the input.
   * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,
   *    displayed when there is at least on item in the list
   * @param {expression} md-contacts An expression expected to return contacts matching the search
   *    test, `$query`. If this expression involves a promise, a loading bar is displayed while
   *    waiting for it to resolve.
   * @param {string} md-contact-name The field name of the contact object representing the
   *    contact's name.
   * @param {string} md-contact-email The field name of the contact object representing the
   *    contact's email address.
   * @param {string} md-contact-image The field name of the contact object representing the
   *    contact's image.
   *
   *
   * @param {expression=} filter-selected Whether to filter selected contacts from the list of
   *    suggestions shown in the autocomplete. This attribute has been removed but may come back.
   *
   *
   *
   * @usage
   * <hljs lang="html">
   *   <md-contact-chips
   *       ng-model="ctrl.contacts"
   *       md-contacts="ctrl.querySearch($query)"
   *       md-contact-name="name"
   *       md-contact-image="image"
   *       md-contact-email="email"
   *       placeholder="To">
   *   </md-contact-chips>
   * </hljs>
   *
   */
  
  
  var MD_CONTACT_CHIPS_TEMPLATE = '\
        <md-chips class="md-contact-chips"\
            ng-model="$mdContactChipsCtrl.contacts"\
            md-require-match="$mdContactChipsCtrl.requireMatch"\
            md-autocomplete-snap>\
            <md-autocomplete\
                md-menu-class="md-contact-chips-suggestions"\
                md-selected-item="$mdContactChipsCtrl.selectedItem"\
                md-search-text="$mdContactChipsCtrl.searchText"\
                md-items="item in $mdContactChipsCtrl.queryContact($mdContactChipsCtrl.searchText)"\
                md-item-text="$mdContactChipsCtrl.itemName(item)"\
                md-no-cache="true"\
                md-autoselect\
                placeholder="{{$mdContactChipsCtrl.contacts.length == 0 ?\
                    $mdContactChipsCtrl.placeholder : $mdContactChipsCtrl.secondaryPlaceholder}}">\
              <div class="md-contact-suggestion">\
                <img \
                    ng-src="{{item[$mdContactChipsCtrl.contactImage]}}"\
                    alt="{{item[$mdContactChipsCtrl.contactName]}}"\
                    ng-if="item[$mdContactChipsCtrl.contactImage]" />\
                <span class="md-contact-name" md-highlight-text="$mdContactChipsCtrl.searchText"\
                      md-highlight-flags="{{$mdContactChipsCtrl.highlightFlags}}">\
                  {{item[$mdContactChipsCtrl.contactName]}}\
                </span>\
                <span class="md-contact-email" >{{item[$mdContactChipsCtrl.contactEmail]}}</span>\
              </div>\
            </md-autocomplete>\
            <md-chip-template>\
              <div class="md-contact-avatar">\
                <img \
                    ng-src="{{$chip[$mdContactChipsCtrl.contactImage]}}"\
                    alt="{{$chip[$mdContactChipsCtrl.contactName]}}"\
                    ng-if="$chip[$mdContactChipsCtrl.contactImage]" />\
              </div>\
              <div class="md-contact-name">\
                {{$chip[$mdContactChipsCtrl.contactName]}}\
              </div>\
            </md-chip-template>\
        </md-chips>';
  
  
  /**
   * MDContactChips Directive Definition
   *
   * @param $mdTheming
   * @returns {*}
   * ngInject
   */
  function MdContactChips($mdTheming, $mdUtil) {
    return {
      template: function(element, attrs) {
        return MD_CONTACT_CHIPS_TEMPLATE;
      },
      restrict: 'E',
      controller: 'MdContactChipsCtrl',
      controllerAs: '$mdContactChipsCtrl',
      bindToController: true,
      compile: compile,
      scope: {
        contactQuery: '&mdContacts',
        placeholder: '@',
        secondaryPlaceholder: '@',
        contactName: '@mdContactName',
        contactImage: '@mdContactImage',
        contactEmail: '@mdContactEmail',
        contacts: '=ngModel',
        requireMatch: '=?mdRequireMatch',
        highlightFlags: '@?mdHighlightFlags'
      }
    };
  
    function compile(element, attr) {
      return function postLink(scope, element, attrs, controllers) {
  
        $mdUtil.initOptionalProperties(scope, attr);
        $mdTheming(element);
  
        element.attr('tabindex', '-1');
      };
    }
  }
  MdContactChips.$inject = ["$mdTheming", "$mdUtil"];
  
  })(window, window.angular);