feat(contactChips): Add md-highlight-flags support.

Contact Chips currently allows the use of `md-highlight-text` to
match the search text. Users have requested we add
`md-highlight-flags` as well so that the highlighted text can
match the search field parameters.

Mainly, if a match is found with case-insensitive search, it
would be nice if the highlight text was also case-insensitive.

fixes #3182

src/components/chips/contact-chips.spec.js

@@ -7,6 +7,7 @@ describe('<md-contact-chips>', function() {
  md-contact-name="name"\
  md-contact-image="image"\
  md-contact-email="email"\
+ md-highlight-flags="i"\
  placeholder="To">\
  </md-contact-chips>';
 
@@ -31,29 +32,39 @@ describe('<md-contact-chips>', function() {
  }
  ];
  scope.contacts = [];
+
+ scope.highlightFlags = "i";
  }));
 
  describe('basic functionality', function () {
- it('should show the placeholder', inject(function($timeout) {
+ it('should show the placeholder', inject(function() {
  var element = buildChips(CONTACT_CHIPS_TEMPLATE);
  var ctrl = element.controller('mdContactChips');
- $timeout.flush();
+
  expect(element.find('input').length).toBe(1);
  expect(element.find('input')[0].placeholder).toBe('To');
  }));
 
+ it('binds the md-highlight-flags to the controller', function() {
+ var element = buildChips(CONTACT_CHIPS_TEMPLATE);
+ var ctrl = element.controller('mdContactChips');
+
+ expect(ctrl.highlightFlags).toEqual('i');
+ });
+
  describe('filtering selected items', function() {
- it('should filter', inject(function($timeout) {
+ it('should filter', inject(function() {
  scope.querySearch = jasmine.createSpy('querySearch').and.callFake(function(q) {
  return scope.allContacts;
  });
  scope.contacts.push(scope.allContacts[2]);
+
  var element = buildChips(CONTACT_CHIPS_TEMPLATE);
  var ctrl = element.controller('mdContactChips');
- $timeout.flush();
 
  var autocompleteElement = element.find('md-autocomplete');
  var autocompleteCtrl = autocompleteElement.controller('mdAutocomplete');
+
  element.scope().$apply(function() {
  autocompleteCtrl.scope.searchText = 'NAME';
  autocompleteCtrl.keydown({});
@@ -93,10 +104,13 @@ describe('<md-contact-chips>', function() {
 
  function buildChips (str) {
  var container;
- inject(function ($compile) {
+
+ inject(function ($compile, $timeout) {
  container = $compile(str)(scope);
  container.scope().$apply();
+ $timeout.flush();
  });
+
  return container;
  }
 

src/components/chips/demoContactChips/index.html

@@ -8,6 +8,7 @@
  md-contact-image="image"
  md-contact-email="email"
  md-require-match="true"
+ md-highlight-flags="i"
  filter-selected="ctrl.filterSelected"
  placeholder="To">
  </md-contact-chips>

src/components/chips/js/contactChipsDirective.js

@@ -67,7 +67,8 @@
  <img \
  ng-src="{{item[$mdContactChipsCtrl.contactImage]}}"\
  alt="{{item[$mdContactChipsCtrl.contactName]}}" />\
- <span class="md-contact-name" md-highlight-text="$mdContactChipsCtrl.searchText">\
+ <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>\
@@ -111,7 +112,8 @@
  contactImage: '@mdContactImage',
  contactEmail: '@mdContactEmail',
  contacts: '=ngModel',
- requireMatch: '=?mdRequireMatch'
+ requireMatch: '=?mdRequireMatch',
+ highlightFlags: '@?mdHighlightFlags'
  }
  };