/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.0.6
*/
goog.provide('ng.material.components.chips');
goog.require('ng.material.components.autocomplete');
goog.require('ng.material.core');
/**
* @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')
.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 $mdInkRipple
* ngInject
*/
function MdChip($mdTheming, $mdUtil) {
var hintTemplate = $mdUtil.processTemplate(DELETE_HINT_TEMPLATE);
return {
restrict: 'E',
require: '^?mdChips',
compile: compile
};
function compile(element, attr) {
// Append the delete template
element.append($mdUtil.processTemplate(hintTemplate));
return function postLink(scope, element, attr, ctrl) {
element.addClass('md-chip');
$mdTheming(element);
if (ctrl) angular.element(element[0].querySelector('.md-chip-content'))
.on('blur', function () {
ctrl.selectedChip = -1;
});
};
}
}
MdChip.$inject = ["$mdTheming", "$mdUtil"];
angular
.module('material.components.chips')
.directive('mdChipRemove', MdChipRemove);
/**
* @ngdoc directive
* @name mdChipRemove
* @module material.components.chips
*
* @description
* `<md-chip-remove>`
* Designates an element to be used as the delete button for a chip. This
* element is passed as a child of the `md-chips` element.
*
* @usage
* <hljs lang="html">
* <md-chips><button md-chip-remove>DEL</button></md-chips>
* </hljs>
*/
/**
* MdChipRemove Directive Definition.
*
* @param $compile
* @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
* @constructor
*/
function MdChipsCtrl ($scope, $mdConstant, $log, $element, $timeout) {
/** @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;
/**
* 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 onAppend expression to transform the chip buffer
* before appending it to the list.
* @type {boolean}
*
*
* @deprecated Will remove in 1.0.
*/
this.useOnAppend = false;
/**
* 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}
*/
this.useOnSelect = false;
}
MdChipsCtrl.$inject = ["$scope", "$mdConstant", "$log", "$element", "$timeout"];
/**
* 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) {
if (chipBuffer) 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();
this.appendChip(chipBuffer);
this.resetChipBuffer();
}
};
/**
* 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;
switch (event.keyCode) {
case this.$mdConstant.KEY_CODE.BACKSPACE:
case this.$mdConstant.KEY_CODE.DELETE:
if (this.selectedChip < 0) return;
event.preventDefault();
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.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);
// 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-on-append expression. This expression is
* bound to scope and controller in {@code MdChipsDirective} as
* {@code onAppend}. Due to the nature of directive scope bindings, the
* controller cannot know on its own/from the scope whether an expression was
* actually provided.
*
* @deprecated
*
* TODO: Remove deprecated md-on-append functionality in 1.0
*/
MdChipsCtrl.prototype.useOnAppendExpression = function() {
this.$log.warn("md-on-append is deprecated; please use md-transform-chip or md-on-add instead");
if (!this.useTransformChip || !this.transformChip) {
this.useTransformChip = true;
this.transformChip = this.onAppend;
}
};
/**
* 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 = '';
}
};
/**
* Removes the chip at the given index.
* @param index
*/
MdChipsCtrl.prototype.removeChip = function(index) {
var removed = this.items.splice(index, 1);
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) {
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>
*
* @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 {boolean=} readonly Disables list manipulation (deleting or adding list items), hiding
* the input and delete buttons
* @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>
*
*/
var MD_CHIPS_TEMPLATE = '\
<md-chips-wrap\
ng-if="!$mdChipsCtrl.readonly || $mdChipsCtrl.items.length > 0"\
ng-keydown="$mdChipsCtrl.chipKeydown($event)"\
ng-class="{ \'md-focused\': $mdChipsCtrl.hasFocus(), \'md-readonly\': !$mdChipsCtrl.ngModelCtrl }"\
class="md-chips">\
<md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
index="{{$index}}"\
ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index, \'md-readonly\': $mdChipsCtrl.readonly}">\
<div class="md-chip-content"\
tabindex="-1"\
aria-hidden="true"\
ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
<div ng-if="!$mdChipsCtrl.readonly"\
class="md-chip-remove-container"\
md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
</md-chip>\
<div ng-if="!$mdChipsCtrl.readonly && $mdChipsCtrl.ngModelCtrl"\
class="md-chip-input-container"\
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.readonly"\
ng-click="$mdChipsCtrl.removeChipAndFocusInput($$replacedScope.$index)"\
type="button"\
aria-hidden="true"\
tabindex="-1">\
<md-icon md-svg-icon="md-close"></md-icon>\
<span class="md-visually-hidden">\
{{$mdChipsCtrl.deleteButtonLabel}}\
</span>\
</button>';
/**
* MDChips Directive Definition
*/
function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout) {
// 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',
placeholder: '@',
secondaryPlaceholder: '@',
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;
// 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('md-chips>*[md-chip-remove]') || templates.remove,
chipContentsTemplate = getTemplateByQuery('md-chips>md-chip-template') || 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];
mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;
mdChipsCtrl.chipRemoveTemplate = chipRemoveTemplate;
mdChipsCtrl.chipInputTemplate = chipInputTemplate;
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"];
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"];
ng.material.components.chips = angular.module("material.components.chips");