clay-autocomplete - npm Package Compare versions

Comparing version 2.14.2 to 2.15.0

lib/ClayAutocomplete.js

@@ -12,2 +12,4 @@ 'use strict';
 
+require('clay-loading-indicator');
+
 require('clay-portal');
@@ -68,2 +70,3 @@
 			this.addListener('dataChange', this._defaultDataChange, true);
+			this.addListener('dataLoading', this._defaultDataLoading, true);
 			this.addListener('inputChange', this._defaultInputChange, true);
@@ -127,2 +130,4 @@ this.refs.dataProvider.refs.portal.on('rendered', this._handleRenderedPortal.bind(this));
 		value: function _defaultDataChange() {
+			this._isFetching = false;
+
 			if (this._query) {
@@ -136,2 +141,12 @@ this.filteredItems = this._getUpdatedFilteredItems();
 		/**
+   * @private
+   */
+
+	}, {
+		key: '_defaultDataLoading',
+		value: function _defaultDataLoading() {
+			this._isFetching = true;
+		}
+
+		/**
    * Filters the items according to received input
@@ -228,2 +243,36 @@ * @param {!Event} event
 		/**
+   * Continues the propagation of the data error event
+   * @param {!Event} event
+   * @protected
+   * @return {Boolean} If the event has been prevented or not.
+   */
+
+	}, {
+		key: '_handleDataError',
+		value: function _handleDataError(event) {
+			return !this.emit({
+				data: event.data,
+				name: 'dataError',
+				originalEvent: event
+			});
+		}
+
+		/**
+   * Continues the propagation of the data loading event
+   * @param {!Event} event
+   * @protected
+   * @return {Boolean} If the event has been prevented or not.
+   */
+
+	}, {
+		key: '_handleDataLoading',
+		value: function _handleDataLoading(event) {
+			return !this.emit({
+				data: event.data,
+				name: 'dataLoading',
+				originalEvent: event
+			});
+		}
+
+		/**
    * Continues the propagation of the item clicked event
@@ -461,2 +510,11 @@ * @param {!Event} event
 	/**
+  * @default false
+  * @instance
+  * @memberof ClayAutocomplete
+  * @private
+  * @type {?bool}
+  */
+	_isFetching: _metalState.Config.bool().value(false).internal(),
+
+	/**
   * Flag to indicate the characters allowed in the
@@ -733,3 +791,13 @@ * input element (e.g /[a-zA-Z0-9_]/g).
   */
-	valueLocator: _metalState.Config.oneOfType([_metalState.Config.func(), _metalState.Config.string()]).value('value')
+	valueLocator: _metalState.Config.oneOfType([_metalState.Config.func(), _metalState.Config.string()]).value('value'),
+
+	/**
+  * Flag to indicate whether to wrap input with the
+  * `.autofit` utility classes. See the MultiSelect use case.
+  * @default false
+  * @instance
+  * @memberof ClayAutocomplete
+  * @type {?bool}
+  */
+	wrapInput: _metalState.Config.bool().value(false)
 };
@@ -736,0 +804,0 @@

lib/ClayAutocomplete.soy.js

@@ -44,2 +44,3 @@ 'use strict';
   goog.require('goog.soy.data.SanitizedContent');
+  goog.require('goog.string');
   var incrementalDom = goog.require('incrementaldom');
@@ -50,6 +51,8 @@ goog.require('soy');
 
-  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayDataProvider.incrementaldom', 'render');
+  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayDataProvider.incrementaldom', 'render');
 
-  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayPortal.incrementaldom', 'render');
+  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayLoadingIndicator.incrementaldom', 'render');
 
+  var $templateAlias3 = _metalSoy2.default.getTemplate('ClayPortal.incrementaldom', 'render');
+
   /**
@@ -60,2 +63,4 @@ * @param {{
    *  _handleDataChange: (*|null|undefined),
+   *  _handleDataError: (*|null|undefined),
+   *  _handleDataLoading: (*|null|undefined),
    *  _handleDropdownItemClick: (*|null|undefined),
@@ -66,2 +71,3 @@ *  _handleOnBlur: (*|null|undefined),
    *  _handleOnKeydown: (*|null|undefined),
+   *  _isFetching: (boolean|null|undefined),
    *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -83,3 +89,4 @@ *  dataProviderInitialData: (!Array<?>|!Object|null|undefined),
    *  unstable_content: (function()|null|undefined),
-   *  useDefaultClasses: (boolean|null|undefined)
+   *  useDefaultClasses: (boolean|null|undefined),
+   *  wrapInput: (boolean|null|undefined)
    * }} opt_data
@@ -93,2 +100,3 @@ * @param {Object<string, *>=} opt_ijData
     opt_ijData = opt_ijData_deprecated || opt_ijData;
+    var $$temp;
     /** @type {!Array<?>|!Object|!goog.soy.data.SanitizedContent|*|string} */
@@ -101,2 +109,6 @@ var dataSource = opt_data.dataSource;
     /** @type {*|null|undefined} */
+    var _handleDataError = opt_data._handleDataError;
+    /** @type {*|null|undefined} */
+    var _handleDataLoading = opt_data._handleDataLoading;
+    /** @type {*|null|undefined} */
     var _handleDropdownItemClick = opt_data._handleDropdownItemClick;
@@ -111,2 +123,4 @@ /** @type {*|null|undefined} */
     var _handleOnKeydown = opt_data._handleOnKeydown;
+    /** @type {boolean|null|undefined} */
+    var _isFetching = soy.asserts.assertType(opt_data._isFetching == null || goog.isBoolean(opt_data._isFetching) || opt_data._isFetching === 1 || opt_data._isFetching === 0, '_isFetching', opt_data._isFetching, 'boolean|null|undefined');
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -146,4 +160,6 @@ var contentRenderer = soy.asserts.assertType(opt_data.contentRenderer == null || goog.isString(opt_data.contentRenderer) || opt_data.contentRenderer instanceof goog.soy.data.SanitizedContent, 'contentRenderer', opt_data.contentRenderer, '!goog.soy.data.SanitizedContent|null|string|undefined');
     var useDefaultClasses = soy.asserts.assertType(opt_data.useDefaultClasses == null || goog.isBoolean(opt_data.useDefaultClasses) || opt_data.useDefaultClasses === 1 || opt_data.useDefaultClasses === 0, 'useDefaultClasses', opt_data.useDefaultClasses, 'boolean|null|undefined');
-    var attributes__soy29 = function attributes__soy29() {
-      incrementalDom.attr('class', (elementClasses ? ' ' + elementClasses : '') + (useDefaultClasses != false ? ' dropdown-full form-group' : ''));
+    /** @type {boolean|null|undefined} */
+    var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0, 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
+    var attributes__soy33 = function attributes__soy33() {
+      incrementalDom.attr('class', (elementClasses ? ' ' + elementClasses : '') + (useDefaultClasses != false ? ' input-group' : ''));
       if (id) {
@@ -153,8 +169,19 @@ incrementalDom.attr('id', id);
     };
+    var content__soy52 = function content__soy52() {
+      soyIdom.print(unstable_content);
+      $input({ _handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, _isFetching: _isFetching, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue, placeholder: placeholder, wrapInput: ($$temp = wrapInput) == null ? false : $$temp }, null, opt_ijData);
+      $dropdown(opt_data, null, opt_ijData);
+    };
     incrementalDom.elementOpenStart('div');
-    attributes__soy29();
+    attributes__soy33();
     incrementalDom.elementOpenEnd();
-    soyIdom.print(unstable_content);
-    $input(opt_data, null, opt_ijData);
-    $dropdown(opt_data, null, opt_ijData);
+    if (useDefaultClasses != false) {
+      incrementalDom.elementOpenStart('div');
+      incrementalDom.attr('class', 'input-group-item');
+      incrementalDom.elementOpenEnd();
+      content__soy52();
+      incrementalDom.elementClose('div');
+    } else {
+      content__soy52();
+    }
     incrementalDom.elementClose('div');
@@ -168,2 +195,4 @@ }
    *  _handleDataChange: (*|null|undefined),
+   *  _handleDataError: (*|null|undefined),
+   *  _handleDataLoading: (*|null|undefined),
    *  _handleDropdownItemClick: (*|null|undefined),
@@ -174,2 +203,3 @@ *  _handleOnBlur: (*|null|undefined),
    *  _handleOnKeydown: (*|null|undefined),
+   *  _isFetching: (boolean|null|undefined),
    *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -191,3 +221,4 @@ *  dataProviderInitialData: (!Array<?>|!Object|null|undefined),
    *  unstable_content: (function()|null|undefined),
-   *  useDefaultClasses: (boolean|null|undefined)
+   *  useDefaultClasses: (boolean|null|undefined),
+   *  wrapInput: (boolean|null|undefined)
    * }}
@@ -206,6 +237,8 @@ */
    *  _handleOnKeydown: (*|null|undefined),
+   *  _isFetching: (boolean|null|undefined),
    *  inputElementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  wrapInput: (boolean|null|undefined)
    * }} opt_data
@@ -228,2 +261,4 @@ * @param {Object<string, *>=} opt_ijData
     var _handleOnKeydown = opt_data._handleOnKeydown;
+    /** @type {boolean|null|undefined} */
+    var _isFetching = soy.asserts.assertType(opt_data._isFetching == null || goog.isBoolean(opt_data._isFetching) || opt_data._isFetching === 1 || opt_data._isFetching === 0, '_isFetching', opt_data._isFetching, 'boolean|null|undefined');
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -237,4 +272,6 @@ var inputElementClasses = soy.asserts.assertType(opt_data.inputElementClasses == null || goog.isString(opt_data.inputElementClasses) || opt_data.inputElementClasses instanceof goog.soy.data.SanitizedContent, 'inputElementClasses', opt_data.inputElementClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
     var placeholder = soy.asserts.assertType(opt_data.placeholder == null || goog.isString(opt_data.placeholder) || opt_data.placeholder instanceof goog.soy.data.SanitizedContent, 'placeholder', opt_data.placeholder, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var attributes__soy88 = function attributes__soy88() {
-      incrementalDom.attr('class', inputElementClasses ? inputElementClasses : 'form-control');
+    /** @type {boolean|null|undefined} */
+    var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0, 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
+    var attributes__soy112 = function attributes__soy112() {
+      incrementalDom.attr('class', (inputElementClasses ? inputElementClasses : 'form-control') + (_isFetching && !wrapInput ? ' input-group-inset input-group-inset-after' : ''));
       if (inputName) {
@@ -259,6 +296,43 @@ incrementalDom.attr('id', inputName);
     };
-    incrementalDom.elementOpenStart('input');
-    attributes__soy88();
-    incrementalDom.elementOpenEnd();
-    incrementalDom.elementClose('input');
+    if (wrapInput) {
+      incrementalDom.elementOpenStart('span');
+      incrementalDom.attr('class', 'autofit-row');
+      incrementalDom.elementOpenEnd();
+      incrementalDom.elementOpenStart('span');
+      incrementalDom.attr('class', 'autofit-col autofit-col-expand');
+      incrementalDom.elementOpenEnd();
+      incrementalDom.elementOpenStart('input');
+      attributes__soy112();
+      incrementalDom.elementOpenEnd();
+      incrementalDom.elementClose('input');
+      incrementalDom.elementClose('span');
+      if (_isFetching) {
+        incrementalDom.elementOpenStart('span');
+        incrementalDom.attr('class', 'autofit-col');
+        incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpenStart('span');
+        incrementalDom.attr('class', 'inline-item');
+        incrementalDom.elementOpenEnd();
+        $templateAlias1({ small: true }, null, opt_ijData);
+        incrementalDom.elementClose('span');
+        incrementalDom.elementClose('span');
+      }
+      incrementalDom.elementClose('span');
+    } else {
+      incrementalDom.elementOpenStart('input');
+      attributes__soy112();
+      incrementalDom.elementOpenEnd();
+      incrementalDom.elementClose('input');
+      if (_isFetching) {
+        incrementalDom.elementOpenStart('div');
+        incrementalDom.attr('class', 'input-group-inset-item input-group-inset-item-after');
+        incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpenStart('span');
+        incrementalDom.attr('class', 'inline-item inline-item-middle');
+        incrementalDom.elementOpenEnd();
+        $templateAlias1({ small: true }, null, opt_ijData);
+        incrementalDom.elementClose('span');
+        incrementalDom.elementClose('div');
+      }
+    }
   }
@@ -272,6 +346,8 @@ exports.input = $input;
    *  _handleOnKeydown: (*|null|undefined),
+   *  _isFetching: (boolean|null|undefined),
    *  inputElementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  wrapInput: (boolean|null|undefined)
    * }}
@@ -289,2 +365,4 @@ */
    *  _handleDataChange: (*|null|undefined),
+   *  _handleDataError: (*|null|undefined),
+   *  _handleDataLoading: (*|null|undefined),
    *  _handleDropdownItemClick: (*|null|undefined),
@@ -296,2 +374,3 @@ *  _handleOnKeydown: (*|null|undefined),
    *  filteredItems: (!Array<?>|null|undefined),
+   *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  pollingInterval: (null|number|undefined),
@@ -318,2 +397,6 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
     /** @type {*|null|undefined} */
+    var _handleDataError = opt_data._handleDataError;
+    /** @type {*|null|undefined} */
+    var _handleDataLoading = opt_data._handleDataLoading;
+    /** @type {*|null|undefined} */
     var _handleDropdownItemClick = opt_data._handleDropdownItemClick;
@@ -330,2 +413,4 @@ /** @type {*|null|undefined} */
     var filteredItems = soy.asserts.assertType(opt_data.filteredItems == null || goog.isArray(opt_data.filteredItems), 'filteredItems', opt_data.filteredItems, '!Array<?>|null|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var inputValue = soy.asserts.assertType(opt_data.inputValue == null || goog.isString(opt_data.inputValue) || opt_data.inputValue instanceof goog.soy.data.SanitizedContent, 'inputValue', opt_data.inputValue, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {null|number|undefined} */
@@ -341,21 +426,33 @@ var pollingInterval = soy.asserts.assertType(opt_data.pollingInterval == null || goog.isNumber(opt_data.pollingInterval), 'pollingInterval', opt_data.pollingInterval, 'null|number|undefined');
     var requestTimeout = soy.asserts.assertType(opt_data.requestTimeout == null || goog.isNumber(opt_data.requestTimeout), 'requestTimeout', opt_data.requestTimeout, 'null|number|undefined');
-    var isVisible__soy147 = filteredItems && filteredItems.length > 0 ? true : false;
-    var dropdownContent__soy149 = function dropdownContent__soy149() {
-      var attributes__soy151 = function attributes__soy151() {
-        incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (isVisible__soy147 ? ' show' : ''));
-        incrementalDom.attr('data-onkeydown', _handleOnKeydown);
-        if (_dropdownWidth) {
-          incrementalDom.attr('style', 'width: ' + _dropdownWidth + 'px; max-width: none;');
-        }
-        incrementalDom.attr('ref', 'dropdown');
-      };
+    var isVisible__soy200 = filteredItems && filteredItems.length > 0 || inputValue ? true : false;
+    var attributes__soy202 = function attributes__soy202() {
+      incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (isVisible__soy200 ? ' show' : ''));
+      incrementalDom.attr('data-onkeydown', _handleOnKeydown);
+      if (_dropdownWidth) {
+        incrementalDom.attr('style', 'width: ' + _dropdownWidth + 'px; max-width: none;');
+      }
+      incrementalDom.attr('ref', 'dropdown');
+    };
+    var dropdownContent__soy217 = function dropdownContent__soy217() {
       incrementalDom.elementOpenStart('ul');
-      attributes__soy151();
+      attributes__soy202();
       incrementalDom.elementOpenEnd();
       if (filteredItems) {
-        var item178List = filteredItems;
-        var item178ListLen = item178List.length;
-        for (var item178Index = 0; item178Index < item178ListLen; item178Index++) {
-          var item178Data = item178List[item178Index];
-          soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({ _handleDropdownItemClick: _handleDropdownItemClick, contentRenderer: contentRenderer, data: item178Data, index: item178Index }, null, opt_ijData);
+        var item237List = filteredItems;
+        var item237ListLen = item237List.length;
+        if (item237ListLen > 0) {
+          for (var item237Index = 0; item237Index < item237ListLen; item237Index++) {
+            var item237Data = item237List[item237Index];
+            soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({ _handleDropdownItemClick: _handleDropdownItemClick, contentRenderer: contentRenderer, data: item237Data, index: item237Index }, null, opt_ijData);
+          }
+        } else {
+          incrementalDom.elementOpen('li');
+          incrementalDom.elementOpenStart('span');
+          incrementalDom.attr('class', 'disabled dropdown-item');
+          incrementalDom.elementOpenEnd();
+          /** @desc It says no results were found */
+          var MSG_EXTERNAL_5330764265959205023 = goog.getMsg('no-results-found');
+          incrementalDom.text(goog.string.unescapeEntities(MSG_EXTERNAL_5330764265959205023));
+          incrementalDom.elementClose('span');
+          incrementalDom.elementClose('li');
         }
@@ -365,6 +462,43 @@ }
     };
-    var param184 = function param184() {
-      $templateAlias2({ content: dropdownContent__soy149, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal' }, null, opt_ijData);
+    var param244 = function param244() {
+      $templateAlias3({ content: dropdownContent__soy217, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal' }, null, opt_ijData);
     };
-    $templateAlias1({ content: param184, dataSource: dataSource, events: { dataChange: _handleDataChange }, initialData: dataProviderInitialData, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout }, null, opt_ijData);
+    var param253 = function param253() {
+      var param256 = function param256() {
+        incrementalDom.elementOpenStart('ul');
+        attributes__soy202();
+        incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpen('li');
+        incrementalDom.elementOpenStart('span');
+        incrementalDom.attr('class', 'disabled dropdown-item');
+        incrementalDom.elementOpenEnd();
+        /** @desc It says no results were found */
+        var MSG_EXTERNAL_5330764265959205023$$1 = goog.getMsg('no-results-found');
+        incrementalDom.text(goog.string.unescapeEntities(MSG_EXTERNAL_5330764265959205023$$1));
+        incrementalDom.elementClose('span');
+        incrementalDom.elementClose('li');
+        incrementalDom.elementClose('ul');
+      };
+      $templateAlias3({ content: param256, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal' }, null, opt_ijData);
+    };
+    var param270 = function param270() {
+      var param273 = function param273() {
+        incrementalDom.elementOpenStart('ul');
+        attributes__soy202();
+        incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpen('li');
+        incrementalDom.elementOpenStart('span');
+        incrementalDom.attr('class', 'disabled dropdown-item');
+        incrementalDom.elementOpenEnd();
+        /** @desc Loading data */
+        var MSG_EXTERNAL_3411835502741534903 = goog.getMsg('loading');
+        incrementalDom.text(goog.string.unescapeEntities(MSG_EXTERNAL_3411835502741534903));
+        incrementalDom.text('...');
+        incrementalDom.elementClose('span');
+        incrementalDom.elementClose('li');
+        incrementalDom.elementClose('ul');
+      };
+      $templateAlias3({ content: param273, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal' }, null, opt_ijData);
+    };
+    $templateAlias2({ content: param244, dataSource: dataSource, delayLoading: filteredItems && filteredItems.length > 0, errorContent: param253, events: { dataChange: _handleDataChange, dataError: _handleDataError, dataLoading: _handleDataLoading }, initialData: dataProviderInitialData, loadingContent: param270, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout }, null, opt_ijData);
   }
@@ -377,2 +511,4 @@ exports.dropdown = $dropdown;
    *  _handleDataChange: (*|null|undefined),
+   *  _handleDataError: (*|null|undefined),
+   *  _handleDataLoading: (*|null|undefined),
    *  _handleDropdownItemClick: (*|null|undefined),
@@ -384,2 +520,3 @@ *  _handleOnKeydown: (*|null|undefined),
    *  filteredItems: (!Array<?>|null|undefined),
+   *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  pollingInterval: (null|number|undefined),
@@ -409,3 +546,3 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  function __deltemplate_s201_4a91529a(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s292_4a91529a(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -432,3 +569,3 @@ /** @type {?} */
   }
-  exports.__deltemplate_s201_4a91529a = __deltemplate_s201_4a91529a;
+  exports.__deltemplate_s292_4a91529a = __deltemplate_s292_4a91529a;
   /**
@@ -442,7 +579,7 @@ * @typedef {{
    */
-  __deltemplate_s201_4a91529a.Params;
+  __deltemplate_s292_4a91529a.Params;
   if (goog.DEBUG) {
-    __deltemplate_s201_4a91529a.soyTemplateName = 'ClayAutocomplete.__deltemplate_s201_4a91529a';
+    __deltemplate_s292_4a91529a.soyTemplateName = 'ClayAutocomplete.__deltemplate_s292_4a91529a';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), '', 0, __deltemplate_s201_4a91529a);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), '', 0, __deltemplate_s292_4a91529a);
 
@@ -458,3 +595,3 @@ /**
    */
-  function __deltemplate_s215_40e63d57(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s306_40e63d57(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -464,12 +601,12 @@ /** @type {?} */
     if (data.matches && data.matches.length > 0) {
-      var char232List = data.matches;
-      var char232ListLen = char232List.length;
-      for (var char232Index = 0; char232Index < char232ListLen; char232Index++) {
-        var char232Data = char232List[char232Index];
-        if (char232Data.match) {
+      var char323List = data.matches;
+      var char323ListLen = char323List.length;
+      for (var char323Index = 0; char323Index < char323ListLen; char323Index++) {
+        var char323Data = char323List[char323Index];
+        if (char323Data.match) {
           incrementalDom.elementOpen('strong');
-          soyIdom.print(char232Data.value);
+          soyIdom.print(char323Data.value);
           incrementalDom.elementClose('strong');
         } else {
-          soyIdom.print(char232Data.value);
+          soyIdom.print(char323Data.value);
         }
@@ -479,3 +616,3 @@ }
   }
-  exports.__deltemplate_s215_40e63d57 = __deltemplate_s215_40e63d57;
+  exports.__deltemplate_s306_40e63d57 = __deltemplate_s306_40e63d57;
   /**
@@ -486,14 +623,14 @@ * @typedef {{
    */
-  __deltemplate_s215_40e63d57.Params;
+  __deltemplate_s306_40e63d57.Params;
   if (goog.DEBUG) {
-    __deltemplate_s215_40e63d57.soyTemplateName = 'ClayAutocomplete.__deltemplate_s215_40e63d57';
+    __deltemplate_s306_40e63d57.soyTemplateName = 'ClayAutocomplete.__deltemplate_s306_40e63d57';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.ItemContent.idom'), '', 0, __deltemplate_s215_40e63d57);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.ItemContent.idom'), '', 0, __deltemplate_s306_40e63d57);
 
-  exports.render.params = ["dataSource", "_dropdownWidth", "_handleDataChange", "_handleDropdownItemClick", "_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "elementClasses", "filteredItems", "id", "inputElementClasses", "inputName", "inputValue", "placeholder", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout", "unstable_content", "useDefaultClasses"];
-  exports.render.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_handleDataChange": "any", "_handleDropdownItemClick": "any", "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "elementClasses": "string", "filteredItems": "list<?>", "id": "string", "inputElementClasses": "string", "inputName": "string", "inputValue": "string", "placeholder": "string", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number", "unstable_content": "html", "useDefaultClasses": "bool" };
-  exports.input.params = ["_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "inputElementClasses", "inputName", "inputValue", "placeholder"];
-  exports.input.types = { "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "inputElementClasses": "string", "inputName": "string", "inputValue": "string", "placeholder": "string" };
-  exports.dropdown.params = ["dataSource", "_dropdownWidth", "_handleDataChange", "_handleDropdownItemClick", "_handleOnKeydown", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "filteredItems", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout"];
-  exports.dropdown.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_handleDataChange": "any", "_handleDropdownItemClick": "any", "_handleOnKeydown": "any", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "filteredItems": "list<?>", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number" };
+  exports.render.params = ["dataSource", "_dropdownWidth", "_handleDataChange", "_handleDataError", "_handleDataLoading", "_handleDropdownItemClick", "_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "_isFetching", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "elementClasses", "filteredItems", "id", "inputElementClasses", "inputName", "inputValue", "placeholder", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout", "unstable_content", "useDefaultClasses", "wrapInput"];
+  exports.render.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_handleDataChange": "any", "_handleDataError": "any", "_handleDataLoading": "any", "_handleDropdownItemClick": "any", "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "_isFetching": "bool", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "elementClasses": "string", "filteredItems": "list<?>", "id": "string", "inputElementClasses": "string", "inputName": "string", "inputValue": "string", "placeholder": "string", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number", "unstable_content": "html", "useDefaultClasses": "bool", "wrapInput": "bool" };
+  exports.input.params = ["_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "_isFetching", "inputElementClasses", "inputName", "inputValue", "placeholder", "wrapInput"];
+  exports.input.types = { "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "_isFetching": "bool", "inputElementClasses": "string", "inputName": "string", "inputValue": "string", "placeholder": "string", "wrapInput": "bool" };
+  exports.dropdown.params = ["dataSource", "_dropdownWidth", "_handleDataChange", "_handleDataError", "_handleDataLoading", "_handleDropdownItemClick", "_handleOnKeydown", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "filteredItems", "inputValue", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout"];
+  exports.dropdown.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_handleDataChange": "any", "_handleDataError": "any", "_handleDataLoading": "any", "_handleDropdownItemClick": "any", "_handleOnKeydown": "any", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "filteredItems": "list<?>", "inputValue": "string", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number" };
   exports.templates = templates = exports;
@@ -500,0 +637,0 @@ return exports;

package.json

 {
   "name": "clay-autocomplete",
-  "version": "2.14.2",
+  "version": "2.15.0",
   "description": "Metal ClayAutocomplete component",
@@ -24,3 +24,3 @@ "license": "BSD-3-Clause",
     "prepublish": "npm run soy && npm run compile",
-    "soy": "metalsoy --soyDeps '../../node_modules/clay-+(data-provider|portal)/src/**/*.soy'"
+    "soy": "metalsoy --soyDeps '../../node_modules/clay-+(data-provider|portal|loading-indicator)/src/**/*.soy'"
   },
@@ -32,4 +32,5 @@ "keywords": [
   "dependencies": {
-    "clay-data-provider": "^2.14.2",
-    "clay-portal": "^2.14.2",
+    "clay-data-provider": "^2.15.0",
+    "clay-loading-indicator": "^2.15.0",
+    "clay-portal": "^2.15.0",
     "metal": "^2.16.0",
@@ -48,8 +49,8 @@ "metal-component": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay": "^2.14.2",
-    "clay-css": "^2.14.2",
+    "browserslist-config-clay": "^2.15.0",
+    "clay-css": "^2.15.0",
     "metal-dom": "^2.13.2",
     "metal-tools-soy": "^4.3.2",
     "webpack": "^3.0.0",
-    "webpack-config-clay": "^2.14.2"
+    "webpack-config-clay": "^2.15.0"
   },
@@ -59,3 +60,3 @@ "browserslist": [
   ],
-  "gitHead": "d52066086b2469d8c4e4976c7019dbe9cfcbc7ea"
+  "gitHead": "7b44c118457a1c0e354e88aa9f8a2eee2ea38722"
 }

src/ClayAutocomplete.js

 import 'clay-data-provider';
+import 'clay-loading-indicator';
 import 'clay-portal';
@@ -24,2 +25,3 @@ import {Align} from 'metal-position';
 		this.addListener('dataChange', this._defaultDataChange, true);
+		this.addListener('dataLoading', this._defaultDataLoading, true);
 		this.addListener('inputChange', this._defaultInputChange, true);
@@ -71,2 +73,4 @@ this.refs.dataProvider.refs.portal.on(
 	_defaultDataChange() {
+		this._isFetching = false;
+
 		if (this._query) {
@@ -80,2 +84,9 @@ this.filteredItems = this._getUpdatedFilteredItems();
 	/**
+	 * @private
+	 */
+	_defaultDataLoading() {
+		this._isFetching = true;
+	}
+
+	/**
 	 * Filters the items according to received input
@@ -167,2 +178,30 @@ * @param {!Event} event
 	/**
+	 * Continues the propagation of the data error event
+	 * @param {!Event} event
+	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handleDataError(event) {
+		return !this.emit({
+			data: event.data,
+			name: 'dataError',
+			originalEvent: event,
+		});
+	}
+
+	/**
+	 * Continues the propagation of the data loading event
+	 * @param {!Event} event
+	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handleDataLoading(event) {
+		return !this.emit({
+			data: event.data,
+			name: 'dataLoading',
+			originalEvent: event,
+		});
+	}
+
+	/**
 	 * Continues the propagation of the item clicked event
@@ -399,2 +438,13 @@ * @param {!Event} event
 	/**
+	 * @default false
+	 * @instance
+	 * @memberof ClayAutocomplete
+	 * @private
+	 * @type {?bool}
+	 */
+	_isFetching: Config.bool()
+		.value(false)
+		.internal(),
+
+	/**
 	 * Flag to indicate the characters allowed in the
@@ -688,2 +738,12 @@ * input element (e.g /[a-zA-Z0-9_]/g).
 	),
+
+	/**
+	 * Flag to indicate whether to wrap input with the
+	 * `.autofit` utility classes. See the MultiSelect use case.
+	 * @default false
+	 * @instance
+	 * @memberof ClayAutocomplete
+	 * @type {?bool}
+	 */
+	wrapInput: Config.bool().value(false),
 };
@@ -690,0 +750,0 @@

src/ClayAutocomplete.soy.js

@@ -24,2 +24,3 @@ /* jshint ignore:start */
 goog.require('goog.soy.data.SanitizedContent');
+goog.require('goog.string');
 var incrementalDom = goog.require('incrementaldom');
@@ -30,7 +31,9 @@ goog.require('soy');
 
-var $templateAlias1 = Soy.getTemplate('ClayDataProvider.incrementaldom', 'render');
+var $templateAlias2 = Soy.getTemplate('ClayDataProvider.incrementaldom', 'render');
 
-var $templateAlias2 = Soy.getTemplate('ClayPortal.incrementaldom', 'render');
+var $templateAlias1 = Soy.getTemplate('ClayLoadingIndicator.incrementaldom', 'render');
 
+var $templateAlias3 = Soy.getTemplate('ClayPortal.incrementaldom', 'render');
 
+
 /**
@@ -41,2 +44,4 @@ * @param {{
  *  _handleDataChange: (*|null|undefined),
+ *  _handleDataError: (*|null|undefined),
+ *  _handleDataLoading: (*|null|undefined),
  *  _handleDropdownItemClick: (*|null|undefined),
@@ -47,2 +52,3 @@ *  _handleOnBlur: (*|null|undefined),
  *  _handleOnKeydown: (*|null|undefined),
+ *  _isFetching: (boolean|null|undefined),
  *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -64,3 +70,4 @@ *  dataProviderInitialData: (!Array<?>|!Object|null|undefined),
  *  unstable_content: (function()|null|undefined),
- *  useDefaultClasses: (boolean|null|undefined)
+ *  useDefaultClasses: (boolean|null|undefined),
+ *  wrapInput: (boolean|null|undefined)
  * }} opt_data
@@ -74,2 +81,3 @@ * @param {Object<string, *>=} opt_ijData
   opt_ijData = opt_ijData_deprecated || opt_ijData;
+  var $$temp;
   /** @type {!Array<?>|!Object|!goog.soy.data.SanitizedContent|*|string} */
@@ -82,2 +90,6 @@ var dataSource = opt_data.dataSource;
   /** @type {*|null|undefined} */
+  var _handleDataError = opt_data._handleDataError;
+  /** @type {*|null|undefined} */
+  var _handleDataLoading = opt_data._handleDataLoading;
+  /** @type {*|null|undefined} */
   var _handleDropdownItemClick = opt_data._handleDropdownItemClick;
@@ -92,2 +104,4 @@ /** @type {*|null|undefined} */
   var _handleOnKeydown = opt_data._handleOnKeydown;
+  /** @type {boolean|null|undefined} */
+  var _isFetching = soy.asserts.assertType(opt_data._isFetching == null || (goog.isBoolean(opt_data._isFetching) || opt_data._isFetching === 1 || opt_data._isFetching === 0), '_isFetching', opt_data._isFetching, 'boolean|null|undefined');
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -127,4 +141,6 @@ var contentRenderer = soy.asserts.assertType(opt_data.contentRenderer == null || (goog.isString(opt_data.contentRenderer) || opt_data.contentRenderer instanceof goog.soy.data.SanitizedContent), 'contentRenderer', opt_data.contentRenderer, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var useDefaultClasses = soy.asserts.assertType(opt_data.useDefaultClasses == null || (goog.isBoolean(opt_data.useDefaultClasses) || opt_data.useDefaultClasses === 1 || opt_data.useDefaultClasses === 0), 'useDefaultClasses', opt_data.useDefaultClasses, 'boolean|null|undefined');
-  var attributes__soy29 = function() {
-    incrementalDom.attr('class', (elementClasses ? ' ' + elementClasses : '') + (useDefaultClasses != false ? ' dropdown-full form-group' : ''));
+  /** @type {boolean|null|undefined} */
+  var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || (goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0), 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
+  var attributes__soy33 = function() {
+    incrementalDom.attr('class', (elementClasses ? ' ' + elementClasses : '') + (useDefaultClasses != false ? ' input-group' : ''));
     if (id) {
@@ -134,8 +150,19 @@ incrementalDom.attr('id', id);
   };
+  var content__soy52 = function() {
+    soyIdom.print(unstable_content);
+    $input({_handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, _isFetching: _isFetching, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue, placeholder: placeholder, wrapInput: ($$temp = wrapInput) == null ? false : $$temp}, null, opt_ijData);
+    $dropdown(opt_data, null, opt_ijData);
+  };
   incrementalDom.elementOpenStart('div');
-      attributes__soy29();
+      attributes__soy33();
   incrementalDom.elementOpenEnd();
-    soyIdom.print(unstable_content);
-    $input(opt_data, null, opt_ijData);
-    $dropdown(opt_data, null, opt_ijData);
+    if (useDefaultClasses != false) {
+      incrementalDom.elementOpenStart('div');
+          incrementalDom.attr('class', 'input-group-item');
+      incrementalDom.elementOpenEnd();
+        content__soy52();
+      incrementalDom.elementClose('div');
+    } else {
+      content__soy52();
+    }
   incrementalDom.elementClose('div');
@@ -149,2 +176,4 @@ }
  *  _handleDataChange: (*|null|undefined),
+ *  _handleDataError: (*|null|undefined),
+ *  _handleDataLoading: (*|null|undefined),
  *  _handleDropdownItemClick: (*|null|undefined),
@@ -155,2 +184,3 @@ *  _handleOnBlur: (*|null|undefined),
  *  _handleOnKeydown: (*|null|undefined),
+ *  _isFetching: (boolean|null|undefined),
  *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -172,3 +202,4 @@ *  dataProviderInitialData: (!Array<?>|!Object|null|undefined),
  *  unstable_content: (function()|null|undefined),
- *  useDefaultClasses: (boolean|null|undefined)
+ *  useDefaultClasses: (boolean|null|undefined),
+ *  wrapInput: (boolean|null|undefined)
  * }}
@@ -188,6 +219,8 @@ */
  *  _handleOnKeydown: (*|null|undefined),
+ *  _isFetching: (boolean|null|undefined),
  *  inputElementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  wrapInput: (boolean|null|undefined)
  * }} opt_data
@@ -210,2 +243,4 @@ * @param {Object<string, *>=} opt_ijData
   var _handleOnKeydown = opt_data._handleOnKeydown;
+  /** @type {boolean|null|undefined} */
+  var _isFetching = soy.asserts.assertType(opt_data._isFetching == null || (goog.isBoolean(opt_data._isFetching) || opt_data._isFetching === 1 || opt_data._isFetching === 0), '_isFetching', opt_data._isFetching, 'boolean|null|undefined');
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -219,4 +254,6 @@ var inputElementClasses = soy.asserts.assertType(opt_data.inputElementClasses == null || (goog.isString(opt_data.inputElementClasses) || opt_data.inputElementClasses instanceof goog.soy.data.SanitizedContent), 'inputElementClasses', opt_data.inputElementClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var placeholder = soy.asserts.assertType(opt_data.placeholder == null || (goog.isString(opt_data.placeholder) || opt_data.placeholder instanceof goog.soy.data.SanitizedContent), 'placeholder', opt_data.placeholder, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var attributes__soy88 = function() {
-    incrementalDom.attr('class', inputElementClasses ? inputElementClasses : 'form-control');
+  /** @type {boolean|null|undefined} */
+  var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || (goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0), 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
+  var attributes__soy112 = function() {
+    incrementalDom.attr('class', (inputElementClasses ? inputElementClasses : 'form-control') + (_isFetching && !wrapInput ? ' input-group-inset input-group-inset-after' : ''));
     if (inputName) {
@@ -241,6 +278,43 @@ incrementalDom.attr('id', inputName);
   };
-  incrementalDom.elementOpenStart('input');
-      attributes__soy88();
-  incrementalDom.elementOpenEnd();
-  incrementalDom.elementClose('input');
+  if (wrapInput) {
+    incrementalDom.elementOpenStart('span');
+        incrementalDom.attr('class', 'autofit-row');
+    incrementalDom.elementOpenEnd();
+      incrementalDom.elementOpenStart('span');
+          incrementalDom.attr('class', 'autofit-col autofit-col-expand');
+      incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpenStart('input');
+            attributes__soy112();
+        incrementalDom.elementOpenEnd();
+        incrementalDom.elementClose('input');
+      incrementalDom.elementClose('span');
+      if (_isFetching) {
+        incrementalDom.elementOpenStart('span');
+            incrementalDom.attr('class', 'autofit-col');
+        incrementalDom.elementOpenEnd();
+          incrementalDom.elementOpenStart('span');
+              incrementalDom.attr('class', 'inline-item');
+          incrementalDom.elementOpenEnd();
+            $templateAlias1({small: true}, null, opt_ijData);
+          incrementalDom.elementClose('span');
+        incrementalDom.elementClose('span');
+      }
+    incrementalDom.elementClose('span');
+  } else {
+    incrementalDom.elementOpenStart('input');
+        attributes__soy112();
+    incrementalDom.elementOpenEnd();
+    incrementalDom.elementClose('input');
+    if (_isFetching) {
+      incrementalDom.elementOpenStart('div');
+          incrementalDom.attr('class', 'input-group-inset-item input-group-inset-item-after');
+      incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpenStart('span');
+            incrementalDom.attr('class', 'inline-item inline-item-middle');
+        incrementalDom.elementOpenEnd();
+          $templateAlias1({small: true}, null, opt_ijData);
+        incrementalDom.elementClose('span');
+      incrementalDom.elementClose('div');
+    }
+  }
 }
@@ -254,6 +328,8 @@ exports.input = $input;
  *  _handleOnKeydown: (*|null|undefined),
+ *  _isFetching: (boolean|null|undefined),
  *  inputElementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  wrapInput: (boolean|null|undefined)
  * }}
@@ -272,2 +348,4 @@ */
  *  _handleDataChange: (*|null|undefined),
+ *  _handleDataError: (*|null|undefined),
+ *  _handleDataLoading: (*|null|undefined),
  *  _handleDropdownItemClick: (*|null|undefined),
@@ -279,2 +357,3 @@ *  _handleOnKeydown: (*|null|undefined),
  *  filteredItems: (!Array<?>|null|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  pollingInterval: (null|number|undefined),
@@ -301,2 +380,6 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
   /** @type {*|null|undefined} */
+  var _handleDataError = opt_data._handleDataError;
+  /** @type {*|null|undefined} */
+  var _handleDataLoading = opt_data._handleDataLoading;
+  /** @type {*|null|undefined} */
   var _handleDropdownItemClick = opt_data._handleDropdownItemClick;
@@ -313,2 +396,4 @@ /** @type {*|null|undefined} */
   var filteredItems = soy.asserts.assertType(opt_data.filteredItems == null || goog.isArray(opt_data.filteredItems), 'filteredItems', opt_data.filteredItems, '!Array<?>|null|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var inputValue = soy.asserts.assertType(opt_data.inputValue == null || (goog.isString(opt_data.inputValue) || opt_data.inputValue instanceof goog.soy.data.SanitizedContent), 'inputValue', opt_data.inputValue, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {null|number|undefined} */
@@ -324,29 +409,78 @@ var pollingInterval = soy.asserts.assertType(opt_data.pollingInterval == null || goog.isNumber(opt_data.pollingInterval), 'pollingInterval', opt_data.pollingInterval, 'null|number|undefined');
   var requestTimeout = soy.asserts.assertType(opt_data.requestTimeout == null || goog.isNumber(opt_data.requestTimeout), 'requestTimeout', opt_data.requestTimeout, 'null|number|undefined');
-  var isVisible__soy147 = filteredItems && (filteredItems.length) > 0 ? true : false;
-  var dropdownContent__soy149 = function() {
-    var attributes__soy151 = function() {
-      incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (isVisible__soy147 ? ' show' : ''));
-      incrementalDom.attr('data-onkeydown', _handleOnKeydown);
-      if (_dropdownWidth) {
-        incrementalDom.attr('style', 'width: ' + _dropdownWidth + 'px; max-width: none;');
-      }
-      incrementalDom.attr('ref', 'dropdown');
-    };
+  var isVisible__soy200 = filteredItems && (filteredItems.length) > 0 || inputValue ? true : false;
+  var attributes__soy202 = function() {
+    incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (isVisible__soy200 ? ' show' : ''));
+    incrementalDom.attr('data-onkeydown', _handleOnKeydown);
+    if (_dropdownWidth) {
+      incrementalDom.attr('style', 'width: ' + _dropdownWidth + 'px; max-width: none;');
+    }
+    incrementalDom.attr('ref', 'dropdown');
+  };
+  var dropdownContent__soy217 = function() {
     incrementalDom.elementOpenStart('ul');
-        attributes__soy151();
+        attributes__soy202();
     incrementalDom.elementOpenEnd();
       if (filteredItems) {
-        var item178List = filteredItems;
-        var item178ListLen = item178List.length;
-        for (var item178Index = 0; item178Index < item178ListLen; item178Index++) {
-            var item178Data = item178List[item178Index];
-            soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({_handleDropdownItemClick: _handleDropdownItemClick, contentRenderer: contentRenderer, data: item178Data, index: item178Index}, null, opt_ijData);
+        var item237List = filteredItems;
+        var item237ListLen = item237List.length;
+        if (item237ListLen > 0) {
+          for (var item237Index = 0; item237Index < item237ListLen; item237Index++) {
+            var item237Data = item237List[item237Index];
+            soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({_handleDropdownItemClick: _handleDropdownItemClick, contentRenderer: contentRenderer, data: item237Data, index: item237Index}, null, opt_ijData);
           }
+        } else {
+          incrementalDom.elementOpen('li');
+            incrementalDom.elementOpenStart('span');
+                incrementalDom.attr('class', 'disabled dropdown-item');
+            incrementalDom.elementOpenEnd();
+              /** @desc It says no results were found */
+              var MSG_EXTERNAL_5330764265959205023 = goog.getMsg('no-results-found');
+              incrementalDom.text(goog.string.unescapeEntities(MSG_EXTERNAL_5330764265959205023));
+            incrementalDom.elementClose('span');
+          incrementalDom.elementClose('li');
+        }
       }
     incrementalDom.elementClose('ul');
   };
-  var param184 = function() {
-    $templateAlias2({content: dropdownContent__soy149, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal'}, null, opt_ijData);
+  var param244 = function() {
+    $templateAlias3({content: dropdownContent__soy217, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal'}, null, opt_ijData);
   };
-  $templateAlias1({content: param184, dataSource: dataSource, events: {dataChange: _handleDataChange}, initialData: dataProviderInitialData, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout}, null, opt_ijData);
+  var param253 = function() {
+    var param256 = function() {
+      incrementalDom.elementOpenStart('ul');
+          attributes__soy202();
+      incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpen('li');
+          incrementalDom.elementOpenStart('span');
+              incrementalDom.attr('class', 'disabled dropdown-item');
+          incrementalDom.elementOpenEnd();
+            /** @desc It says no results were found */
+            var MSG_EXTERNAL_5330764265959205023$$1 = goog.getMsg('no-results-found');
+            incrementalDom.text(goog.string.unescapeEntities(MSG_EXTERNAL_5330764265959205023$$1));
+          incrementalDom.elementClose('span');
+        incrementalDom.elementClose('li');
+      incrementalDom.elementClose('ul');
+    };
+    $templateAlias3({content: param256, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal'}, null, opt_ijData);
+  };
+  var param270 = function() {
+    var param273 = function() {
+      incrementalDom.elementOpenStart('ul');
+          attributes__soy202();
+      incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpen('li');
+          incrementalDom.elementOpenStart('span');
+              incrementalDom.attr('class', 'disabled dropdown-item');
+          incrementalDom.elementOpenEnd();
+            /** @desc Loading data */
+            var MSG_EXTERNAL_3411835502741534903 = goog.getMsg('loading');
+            incrementalDom.text(goog.string.unescapeEntities(MSG_EXTERNAL_3411835502741534903));
+            incrementalDom.text('...');
+          incrementalDom.elementClose('span');
+        incrementalDom.elementClose('li');
+      incrementalDom.elementClose('ul');
+    };
+    $templateAlias3({content: param273, portalElement: ($$temp = dropdownPortalElement) == null ? '#clay_dropdown_portal' : $$temp, ref: 'portal'}, null, opt_ijData);
+  };
+  $templateAlias2({content: param244, dataSource: dataSource, delayLoading: filteredItems && (filteredItems.length) > 0, errorContent: param253, events: {dataChange: _handleDataChange, dataError: _handleDataError, dataLoading: _handleDataLoading}, initialData: dataProviderInitialData, loadingContent: param270, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout}, null, opt_ijData);
 }
@@ -359,2 +493,4 @@ exports.dropdown = $dropdown;
  *  _handleDataChange: (*|null|undefined),
+ *  _handleDataError: (*|null|undefined),
+ *  _handleDataLoading: (*|null|undefined),
  *  _handleDropdownItemClick: (*|null|undefined),
@@ -366,2 +502,3 @@ *  _handleOnKeydown: (*|null|undefined),
  *  filteredItems: (!Array<?>|null|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  pollingInterval: (null|number|undefined),
@@ -392,3 +529,3 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-function __deltemplate_s201_4a91529a(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s292_4a91529a(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -415,3 +552,3 @@ /** @type {?} */
 }
-exports.__deltemplate_s201_4a91529a = __deltemplate_s201_4a91529a;
+exports.__deltemplate_s292_4a91529a = __deltemplate_s292_4a91529a;
 /**
@@ -425,7 +562,7 @@ * @typedef {{
  */
-__deltemplate_s201_4a91529a.Params;
+__deltemplate_s292_4a91529a.Params;
 if (goog.DEBUG) {
-  __deltemplate_s201_4a91529a.soyTemplateName = 'ClayAutocomplete.__deltemplate_s201_4a91529a';
+  __deltemplate_s292_4a91529a.soyTemplateName = 'ClayAutocomplete.__deltemplate_s292_4a91529a';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), '', 0, __deltemplate_s201_4a91529a);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), '', 0, __deltemplate_s292_4a91529a);
 
@@ -442,3 +579,3 @@
  */
-function __deltemplate_s215_40e63d57(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s306_40e63d57(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -448,12 +585,12 @@ /** @type {?} */
   if (data.matches && (data.matches.length) > 0) {
-    var char232List = data.matches;
-    var char232ListLen = char232List.length;
-    for (var char232Index = 0; char232Index < char232ListLen; char232Index++) {
-        var char232Data = char232List[char232Index];
-        if (char232Data.match) {
+    var char323List = data.matches;
+    var char323ListLen = char323List.length;
+    for (var char323Index = 0; char323Index < char323ListLen; char323Index++) {
+        var char323Data = char323List[char323Index];
+        if (char323Data.match) {
           incrementalDom.elementOpen('strong');
-            soyIdom.print(char232Data.value);
+            soyIdom.print(char323Data.value);
           incrementalDom.elementClose('strong');
         } else {
-          soyIdom.print(char232Data.value);
+          soyIdom.print(char323Data.value);
         }
@@ -463,3 +600,3 @@ }
 }
-exports.__deltemplate_s215_40e63d57 = __deltemplate_s215_40e63d57;
+exports.__deltemplate_s306_40e63d57 = __deltemplate_s306_40e63d57;
 /**
@@ -470,14 +607,14 @@ * @typedef {{
  */
-__deltemplate_s215_40e63d57.Params;
+__deltemplate_s306_40e63d57.Params;
 if (goog.DEBUG) {
-  __deltemplate_s215_40e63d57.soyTemplateName = 'ClayAutocomplete.__deltemplate_s215_40e63d57';
+  __deltemplate_s306_40e63d57.soyTemplateName = 'ClayAutocomplete.__deltemplate_s306_40e63d57';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.ItemContent.idom'), '', 0, __deltemplate_s215_40e63d57);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.ItemContent.idom'), '', 0, __deltemplate_s306_40e63d57);
 
-exports.render.params = ["dataSource","_dropdownWidth","_handleDataChange","_handleDropdownItemClick","_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","contentRenderer","dataProviderInitialData","dropdownPortalElement","elementClasses","filteredItems","id","inputElementClasses","inputName","inputValue","placeholder","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout","unstable_content","useDefaultClasses"];
-exports.render.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_handleDataChange":"any","_handleDropdownItemClick":"any","_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","elementClasses":"string","filteredItems":"list<?>","id":"string","inputElementClasses":"string","inputName":"string","inputValue":"string","placeholder":"string","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number","unstable_content":"html","useDefaultClasses":"bool"};
-exports.input.params = ["_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","inputElementClasses","inputName","inputValue","placeholder"];
-exports.input.types = {"_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","inputElementClasses":"string","inputName":"string","inputValue":"string","placeholder":"string"};
-exports.dropdown.params = ["dataSource","_dropdownWidth","_handleDataChange","_handleDropdownItemClick","_handleOnKeydown","contentRenderer","dataProviderInitialData","dropdownPortalElement","filteredItems","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout"];
-exports.dropdown.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_handleDataChange":"any","_handleDropdownItemClick":"any","_handleOnKeydown":"any","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","filteredItems":"list<?>","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number"};
+exports.render.params = ["dataSource","_dropdownWidth","_handleDataChange","_handleDataError","_handleDataLoading","_handleDropdownItemClick","_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","_isFetching","contentRenderer","dataProviderInitialData","dropdownPortalElement","elementClasses","filteredItems","id","inputElementClasses","inputName","inputValue","placeholder","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout","unstable_content","useDefaultClasses","wrapInput"];
+exports.render.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_handleDataChange":"any","_handleDataError":"any","_handleDataLoading":"any","_handleDropdownItemClick":"any","_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","_isFetching":"bool","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","elementClasses":"string","filteredItems":"list<?>","id":"string","inputElementClasses":"string","inputName":"string","inputValue":"string","placeholder":"string","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number","unstable_content":"html","useDefaultClasses":"bool","wrapInput":"bool"};
+exports.input.params = ["_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","_isFetching","inputElementClasses","inputName","inputValue","placeholder","wrapInput"];
+exports.input.types = {"_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","_isFetching":"bool","inputElementClasses":"string","inputName":"string","inputValue":"string","placeholder":"string","wrapInput":"bool"};
+exports.dropdown.params = ["dataSource","_dropdownWidth","_handleDataChange","_handleDataError","_handleDataLoading","_handleDropdownItemClick","_handleOnKeydown","contentRenderer","dataProviderInitialData","dropdownPortalElement","filteredItems","inputValue","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout"];
+exports.dropdown.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_handleDataChange":"any","_handleDataError":"any","_handleDataLoading":"any","_handleDropdownItemClick":"any","_handleOnKeydown":"any","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","filteredItems":"list<?>","inputValue":"string","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number"};
 templates = exports;
@@ -484,0 +621,0 @@ return exports;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

241412

increased by19.07%

Lines of code

2999

increased by14.86%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedclay-loading-indicator@^2.15.0

• + Addedclay-loading-indicator@2.24.1(transitive)

• Updatedclay-data-provider@^2.15.0

• Updatedclay-portal@^2.15.0