clay-autocomplete - npm Package Compare versions

Comparing version 2.8.3 to 2.9.0

lib/ClayAutocomplete.js

@@ -83,3 +83,5 @@ 'use strict';
 		value: function syncFilteredItems() {
-			this._dropdownItemFocused = null;
+			if (!this.filteredItems.length) {
+				this._dropdownItemFocused = null;
+			}
 		}
@@ -218,7 +220,13 @@
 
-			var char = event.data || value.substr(-1);
+			var newValue = this.allowedCharacters ? this._getCharactersAllowed(value) : value;
+			var char = newValue.substr(-1);
 
+			// Updates the value of the input with the value
+			// entered by the user in case the validation is false
+			// the above components can update the state of the input value.
+			this.inputValue = value;
+
 			return !this.emit({
 				data: {
-					value: value,
+					value: newValue,
 					char: char
@@ -249,5 +257,7 @@ },
 				case 'ArrowUp':
+					event.preventDefault();
 					this._setFocusItem(true);
 					break;
 				case 'ArrowDown':
+					event.preventDefault();
 					event.stopPropagation();
@@ -293,2 +303,19 @@ this._setFocusItem(false);
 		}
+
+		/**
+   * Gets the accepted characters of the input
+   * element values
+   * @param {!string} value
+   * @protected
+   * @return {string}
+   */
+
+	}, {
+		key: '_getCharactersAllowed',
+		value: function _getCharactersAllowed(value) {
+			var regexp = new RegExp(this.allowedCharacters);
+			var match = value.match(regexp);
+
+			return Array.isArray(match) ? match.join('') : '';
+		}
 	}]);
@@ -308,2 +335,12 @@
 	/**
+  * Flag to indicate the characters allowed in the
+  * input element (e.g /[a-zA-Z0-9_]/g).
+  * @default undefined
+  * @instance
+  * @memberof ClayAutocomplete
+  * @type {?RegExp}
+  */
+	allowedCharacters: _metalState.Config.instanceOf(RegExp),
+
+	/**
   * Variation name to render different deltemplates.
@@ -446,2 +483,11 @@ * @default undefined
 	/**
+  * Input placeholder.
+  * @default undefined
+  * @instance
+  * @memberof ClayAutocomplete
+  * @type {?(string|undefined)}
+  */
+	placeholder: _metalState.Config.string(),
+
+	/**
   * Flag to define how often to refetch data (ms)
@@ -448,0 +494,0 @@ * @instance

lib/ClayAutocomplete.soy.js

@@ -88,2 +88,4 @@ 'use strict';
     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 {!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');
     /** @type {null|number|undefined} */
@@ -101,3 +103,3 @@ var pollingInterval = soy.asserts.assertType(opt_data.pollingInterval == null || goog.isNumber(opt_data.pollingInterval), 'pollingInterval', opt_data.pollingInterval, 'null|number|undefined');
     var unstable_content = soy.asserts.assertType(opt_data.unstable_content == null || goog.isFunction(opt_data.unstable_content), 'unstable_content', opt_data.unstable_content, 'function()|null|undefined');
-    var attributes__soy42 = function attributes__soy42() {
+    var attributes__soy43 = function attributes__soy43() {
       incrementalDom.attr('class', 'dropdown-full' + (elementClasses ? ' ' + elementClasses : ' form-group'));
@@ -110,6 +112,6 @@ incrementalDom.attr('data-onkeydown', _handleOnKeydown);
     incrementalDom.elementOpenStart('div');
-    attributes__soy42();
+    attributes__soy43();
     incrementalDom.elementOpenEnd();
     soyIdom.print(unstable_content);
-    $input({ _handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue }, opt_ijData);
+    $input({ _handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue, placeholder: placeholder }, opt_ijData);
     $dropdown({ _handleDataChange: _handleDataChange, _handleDropdownItemClick: _handleDropdownItemClick, contentRenderer: contentRenderer, dataSource: dataSource, filteredItems: filteredItems, initialData: initialData, pollingInterval: pollingInterval, requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout }, opt_ijData);
@@ -136,2 +138,3 @@ incrementalDom.elementClose('div');
    *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  pollingInterval: (null|number|undefined),
@@ -174,3 +177,5 @@ *  requestInputMode: (!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');
-    var attributes__soy112 = function attributes__soy112() {
+    /** @type {!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__soy121 = function attributes__soy121() {
       incrementalDom.attr('class', inputElementClasses ? inputElementClasses : 'form-control');
@@ -187,2 +192,5 @@ if (inputName) {
       incrementalDom.attr('type', 'text');
+      if (placeholder) {
+        incrementalDom.attr('placeholder', placeholder);
+      }
       if (inputValue) {
@@ -195,3 +203,3 @@ incrementalDom.attr('value', inputValue);
     incrementalDom.elementOpenStart('input');
-    attributes__soy112();
+    attributes__soy121();
     incrementalDom.elementOpenEnd();
@@ -210,2 +218,3 @@ incrementalDom.elementClose('input');
    *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
    * }}
@@ -249,17 +258,17 @@ */
     var requestTimeout = soy.asserts.assertType(opt_data.requestTimeout == null || goog.isNumber(opt_data.requestTimeout), 'requestTimeout', opt_data.requestTimeout, 'null|number|undefined');
-    var isVisible__soy129 = filteredItems && filteredItems.length > 0 ? true : false;
-    var classes__soy136 = '';
-    classes__soy136 += 'dropdown-menu';
-    classes__soy136 += isVisible__soy129 ? ' show' : '';
-    var param154 = function param154() {
+    var isVisible__soy138 = filteredItems && filteredItems.length > 0 ? true : false;
+    var classes__soy145 = '';
+    classes__soy145 += 'dropdown-menu';
+    classes__soy145 += isVisible__soy138 ? ' show' : '';
+    var param163 = function param163() {
       incrementalDom.elementOpenStart('ul');
-      incrementalDom.attr('class', classes__soy136);
+      incrementalDom.attr('class', classes__soy145);
       incrementalDom.attr('ref', 'dropdown');
       incrementalDom.elementOpenEnd();
       if (filteredItems) {
-        var item144List = filteredItems;
-        var item144ListLen = item144List.length;
-        for (var item144Index = 0; item144Index < item144ListLen; item144Index++) {
-          var item144Data = item144List[item144Index];
-          soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({ _handleDropdownItemClick: _handleDropdownItemClick, data: item144Data, index: item144Index }, opt_ijData);
+        var item153List = filteredItems;
+        var item153ListLen = item153List.length;
+        for (var item153Index = 0; item153Index < item153ListLen; item153Index++) {
+          var item153Data = item153List[item153Index];
+          soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({ _handleDropdownItemClick: _handleDropdownItemClick, data: item153Data, index: item153Index }, opt_ijData);
         }
@@ -269,3 +278,3 @@ }
     };
-    $templateAlias1({ content: param154, dataSource: dataSource, events: { dataChange: _handleDataChange }, initialData: initialData, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout }, opt_ijData);
+    $templateAlias1({ content: param163, dataSource: dataSource, events: { dataChange: _handleDataChange }, initialData: initialData, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout }, opt_ijData);
   };
@@ -317,12 +326,12 @@ exports.dropdown = $dropdown;
     if (data.matches && data.matches.length > 0) {
-      var char179List = data.matches;
-      var char179ListLen = char179List.length;
-      for (var char179Index = 0; char179Index < char179ListLen; char179Index++) {
-        var char179Data = char179List[char179Index];
-        if (char179Data.match) {
+      var char188List = data.matches;
+      var char188ListLen = char188List.length;
+      for (var char188Index = 0; char188Index < char188ListLen; char188Index++) {
+        var char188Data = char188List[char188Index];
+        if (char188Data.match) {
           incrementalDom.elementOpen('strong');
-          soyIdom.print(char179Data.value);
+          soyIdom.print(char188Data.value);
           incrementalDom.elementClose('strong');
         } else {
-          soyIdom.print(char179Data.value);
+          soyIdom.print(char188Data.value);
         }
@@ -348,6 +357,6 @@ }
 
-  exports.render.params = ["dataSource", "_handleDataChange", "_handleDropdownItemClick", "_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "contentRenderer", "elementClasses", "filteredItems", "id", "initialData", "inputElementClasses", "inputName", "inputValue", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout", "unstable_content"];
-  exports.render.types = { "dataSource": "string|[]|list<?>|any", "_handleDataChange": "any", "_handleDropdownItemClick": "any", "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "contentRenderer": "string", "elementClasses": "string", "filteredItems": "list<?>", "id": "string", "initialData": "[]|list<?>", "inputElementClasses": "string", "inputName": "string", "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", "unstable_content": "html" };
-  exports.input.params = ["_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "inputElementClasses", "inputName", "inputValue"];
-  exports.input.types = { "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "inputElementClasses": "string", "inputName": "string", "inputValue": "string" };
+  exports.render.params = ["dataSource", "_handleDataChange", "_handleDropdownItemClick", "_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "contentRenderer", "elementClasses", "filteredItems", "id", "initialData", "inputElementClasses", "inputName", "inputValue", "placeholder", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout", "unstable_content"];
+  exports.render.types = { "dataSource": "string|[]|list<?>|any", "_handleDataChange": "any", "_handleDropdownItemClick": "any", "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "contentRenderer": "string", "elementClasses": "string", "filteredItems": "list<?>", "id": "string", "initialData": "[]|list<?>", "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" };
+  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", "_handleDataChange", "_handleDropdownItemClick", "contentRenderer", "filteredItems", "initialData", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout"];
@@ -354,0 +363,0 @@ exports.dropdown.types = { "dataSource": "string|[]|list<?>|any", "_handleDataChange": "any", "_handleDropdownItemClick": "any", "contentRenderer": "string", "filteredItems": "list<?>", "initialData": "[]|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" };

package.json

 {
   "name": "clay-autocomplete",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "Metal ClayAutocomplete component",
@@ -30,3 +30,3 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "clay-data-provider": "^2.8.3",
+    "clay-data-provider": "^2.9.0",
     "metal": "^2.16.0",
@@ -44,8 +44,8 @@ "metal-component": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay": "^2.8.3",
-    "clay-css": "^2.8.3",
+    "browserslist-config-clay": "^2.9.0",
+    "clay-css": "^2.9.0",
     "metal-dom": "^2.13.2",
     "metal-tools-soy": "^6.0.0",
     "webpack": "^3.0.0",
-    "webpack-config-clay": "^2.8.3"
+    "webpack-config-clay": "^2.9.0"
   },
@@ -55,3 +55,3 @@ "browserslist": [
   ],
-  "gitHead": "837b819ca3b70653d247a7b28ca1e12cf8d20bb6"
+  "gitHead": "f3a3f475987cf60da77fe9185f479c4ed5a4c272"
 }

src/__tests__/ClayAutocomplete.js

@@ -91,2 +91,11 @@ import {triggerEvent} from 'metal-dom';
 
+	it('should render a ClayAutocomplete with placeholder', () => {
+		component = new ClayAutocomplete({
+			dataSource,
+			placeholder: 'Placeholder',
+		});
+
+		expect(component).toMatchSnapshot();
+	});
+
 	it('should render a ClayAutocomplete with unstable_content', () => {
@@ -189,2 +198,27 @@ component = new ClayAutocomplete({
 
+	it('should render a ClayAutocomplete with allowed characters and emit an event on query change', () => {
+		component = new ClayAutocomplete({
+			allowedCharacters: /[a-zA-Z0-9_]/g,
+			dataSource,
+		});
+
+		const spy = jest.spyOn(component, 'emit');
+		const {input} = component.refs;
+
+		input.value = 'b!ar#$';
+		triggerEvent(input, 'input', {});
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith(
+			expect.objectContaining({
+				data: {
+					value: 'bar',
+					char: 'r',
+				},
+				name: 'inputChange',
+				originalEvent: expect.any(Object),
+			})
+		);
+	});
+
 	it('should render a ClayAutocomplete and emit an event on item selected', () => {
@@ -191,0 +225,0 @@ component = new ClayAutocomplete({

src/ClayAutocomplete.js

@@ -36,3 +36,5 @@ import 'clay-data-provider';
 	syncFilteredItems() {
-		this._dropdownItemFocused = null;
+		if (!this.filteredItems.length) {
+			this._dropdownItemFocused = null;
+		}
 	}
@@ -152,7 +154,15 @@
 		const {value} = event.target;
-		const char = event.data || value.substr(-1);
+		const newValue = this.allowedCharacters
+			? this._getCharactersAllowed(value)
+			: value;
+		const char = newValue.substr(-1);
 
+		// Updates the value of the input with the value
+		// entered by the user in case the validation is false
+		// the above components can update the state of the input value.
+		this.inputValue = value;
+
 		return !this.emit({
 			data: {
-				value,
+				value: newValue,
 				char,
@@ -183,5 +193,7 @@ },
 		case 'ArrowUp':
+			event.preventDefault();
 			this._setFocusItem(true);
 			break;
 		case 'ArrowDown':
+			event.preventDefault();
 			event.stopPropagation();
@@ -235,2 +247,16 @@ this._setFocusItem(false);
 	}
+
+	/**
+	 * Gets the accepted characters of the input
+	 * element values
+	 * @param {!string} value
+	 * @protected
+	 * @return {string}
+	 */
+	_getCharactersAllowed(value) {
+		const regexp = new RegExp(this.allowedCharacters);
+		const match = value.match(regexp);
+
+		return Array.isArray(match) ? match.join('') : '';
+	}
 }
@@ -245,2 +271,12 @@
 	/**
+	 * Flag to indicate the characters allowed in the
+	 * input element (e.g /[a-zA-Z0-9_]/g).
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAutocomplete
+	 * @type {?RegExp}
+	 */
+	allowedCharacters: Config.instanceOf(RegExp),
+
+	/**
 	 * Variation name to render different deltemplates.
@@ -390,2 +426,11 @@ * @default undefined
 	/**
+	 * Input placeholder.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAutocomplete
+	 * @type {?(string|undefined)}
+	 */
+	placeholder: Config.string(),
+
+	/**
 	 * Flag to define how often to refetch data (ms)
@@ -392,0 +437,0 @@ * @instance

src/ClayAutocomplete.soy.js

@@ -69,2 +69,4 @@ /* jshint ignore:start */
   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 {!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');
   /** @type {null|number|undefined} */
@@ -82,3 +84,3 @@ var pollingInterval = soy.asserts.assertType(opt_data.pollingInterval == null || goog.isNumber(opt_data.pollingInterval), 'pollingInterval', opt_data.pollingInterval, 'null|number|undefined');
   var unstable_content = soy.asserts.assertType(opt_data.unstable_content == null || goog.isFunction(opt_data.unstable_content), 'unstable_content', opt_data.unstable_content, 'function()|null|undefined');
-  var attributes__soy42 = function() {
+  var attributes__soy43 = function() {
     incrementalDom.attr('class', 'dropdown-full' + (elementClasses ? ' ' + elementClasses : ' form-group'));
@@ -91,6 +93,6 @@ incrementalDom.attr('data-onkeydown', _handleOnKeydown);
   incrementalDom.elementOpenStart('div');
-      attributes__soy42();
+      attributes__soy43();
   incrementalDom.elementOpenEnd();
   soyIdom.print(unstable_content);
-  $input({_handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue}, opt_ijData);
+  $input({_handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue, placeholder: placeholder}, opt_ijData);
   $dropdown({_handleDataChange: _handleDataChange, _handleDropdownItemClick: _handleDropdownItemClick, contentRenderer: contentRenderer, dataSource: dataSource, filteredItems: filteredItems, initialData: initialData, pollingInterval: pollingInterval, requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout}, opt_ijData);
@@ -117,2 +119,3 @@ incrementalDom.elementClose('div');
  *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  pollingInterval: (null|number|undefined),
@@ -156,3 +159,5 @@ *  requestInputMode: (!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');
-  var attributes__soy112 = function() {
+  /** @type {!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__soy121 = function() {
     incrementalDom.attr('class', inputElementClasses ? inputElementClasses : 'form-control');
@@ -169,2 +174,5 @@ if (inputName) {
     incrementalDom.attr('type', 'text');
+    if (placeholder) {
+      incrementalDom.attr('placeholder', placeholder);
+    }
     if (inputValue) {
@@ -177,3 +185,3 @@ incrementalDom.attr('value', inputValue);
   incrementalDom.elementOpenStart('input');
-      attributes__soy112();
+      attributes__soy121();
   incrementalDom.elementOpenEnd();
@@ -192,2 +200,3 @@ incrementalDom.elementClose('input');
  *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  placeholder: (!goog.soy.data.SanitizedContent|null|string|undefined),
  * }}
@@ -232,17 +241,17 @@ */
   var requestTimeout = soy.asserts.assertType(opt_data.requestTimeout == null || goog.isNumber(opt_data.requestTimeout), 'requestTimeout', opt_data.requestTimeout, 'null|number|undefined');
-  var isVisible__soy129 = filteredItems && (filteredItems.length) > 0 ? true : false;
-  var classes__soy136 = '';
-  classes__soy136 += 'dropdown-menu';
-  classes__soy136 += isVisible__soy129 ? ' show' : '';
-  var param154 = function() {
+  var isVisible__soy138 = filteredItems && (filteredItems.length) > 0 ? true : false;
+  var classes__soy145 = '';
+  classes__soy145 += 'dropdown-menu';
+  classes__soy145 += isVisible__soy138 ? ' show' : '';
+  var param163 = function() {
     incrementalDom.elementOpenStart('ul');
-        incrementalDom.attr('class', classes__soy136);
+        incrementalDom.attr('class', classes__soy145);
         incrementalDom.attr('ref', 'dropdown');
     incrementalDom.elementOpenEnd();
     if (filteredItems) {
-      var item144List = filteredItems;
-      var item144ListLen = item144List.length;
-      for (var item144Index = 0; item144Index < item144ListLen; item144Index++) {
-        var item144Data = item144List[item144Index];
-        soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({_handleDropdownItemClick: _handleDropdownItemClick, data: item144Data, index: item144Index}, opt_ijData);
+      var item153List = filteredItems;
+      var item153ListLen = item153List.length;
+      for (var item153Index = 0; item153Index < item153ListLen; item153Index++) {
+        var item153Data = item153List[item153Index];
+        soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayAutocomplete.Item.idom'), contentRenderer, true)({_handleDropdownItemClick: _handleDropdownItemClick, data: item153Data, index: item153Index}, opt_ijData);
       }
@@ -252,3 +261,3 @@ }
   };
-  $templateAlias1({content: param154, dataSource: dataSource, events: {dataChange: _handleDataChange}, initialData: initialData, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout}, opt_ijData);
+  $templateAlias1({content: param163, dataSource: dataSource, events: {dataChange: _handleDataChange}, initialData: initialData, pollingInterval: pollingInterval, ref: 'dataProvider', requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout}, opt_ijData);
 };
@@ -301,12 +310,12 @@ exports.dropdown = $dropdown;
   if (data.matches && (data.matches.length) > 0) {
-    var char179List = data.matches;
-    var char179ListLen = char179List.length;
-    for (var char179Index = 0; char179Index < char179ListLen; char179Index++) {
-      var char179Data = char179List[char179Index];
-      if (char179Data.match) {
+    var char188List = data.matches;
+    var char188ListLen = char188List.length;
+    for (var char188Index = 0; char188Index < char188ListLen; char188Index++) {
+      var char188Data = char188List[char188Index];
+      if (char188Data.match) {
         incrementalDom.elementOpen('strong');
-        soyIdom.print(char179Data.value);
+        soyIdom.print(char188Data.value);
         incrementalDom.elementClose('strong');
       } else {
-        soyIdom.print(char179Data.value);
+        soyIdom.print(char188Data.value);
       }
@@ -332,6 +341,6 @@ }
 
-exports.render.params = ["dataSource","_handleDataChange","_handleDropdownItemClick","_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","contentRenderer","elementClasses","filteredItems","id","initialData","inputElementClasses","inputName","inputValue","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout","unstable_content"];
-exports.render.types = {"dataSource":"string|[]|list<?>|any","_handleDataChange":"any","_handleDropdownItemClick":"any","_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","contentRenderer":"string","elementClasses":"string","filteredItems":"list<?>","id":"string","initialData":"[]|list<?>","inputElementClasses":"string","inputName":"string","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","unstable_content":"html"};
-exports.input.params = ["_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","inputElementClasses","inputName","inputValue"];
-exports.input.types = {"_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","inputElementClasses":"string","inputName":"string","inputValue":"string"};
+exports.render.params = ["dataSource","_handleDataChange","_handleDropdownItemClick","_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","contentRenderer","elementClasses","filteredItems","id","initialData","inputElementClasses","inputName","inputValue","placeholder","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout","unstable_content"];
+exports.render.types = {"dataSource":"string|[]|list<?>|any","_handleDataChange":"any","_handleDropdownItemClick":"any","_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","contentRenderer":"string","elementClasses":"string","filteredItems":"list<?>","id":"string","initialData":"[]|list<?>","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"};
+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","_handleDataChange","_handleDropdownItemClick","contentRenderer","filteredItems","initialData","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout"];
@@ -338,0 +347,0 @@ exports.dropdown.types = {"dataSource":"string|[]|list<?>|any","_handleDataChange":"any","_handleDropdownItemClick":"any","contentRenderer":"string","filteredItems":"list<?>","initialData":"[]|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"};

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

161660

increased by6.01%

Lines of code

2059

increased by6.63%

Dependency changes

• Updatedclay-data-provider@^2.9.0