clay-dropdown - npm Package Compare versions

Comparing version 2.3.0 to 2.3.2

lib/ClayActionsDropdown.js

@@ -28,6 +28,4 @@ 'use strict';
 
-var _items_validator = require('./items_validator');
+var _validators = require('./validators');
 
-var _items_validator2 = _interopRequireDefault(_items_validator);
-
 var _ClayActionsDropdownSoy = require('./ClayActionsDropdown.soy.js');
@@ -173,3 +171,3 @@
   */
-	items: _items_validator2.default.required(),
+	items: _validators.itemsValidator.required(),
 
@@ -180,3 +178,3 @@ /**
   * @instance
-  * @memberof ClayDropdown
+  * @memberof ClayActionsDropdown
   * @type {?(string|undefined)}
@@ -187,2 +185,11 @@ */
 	/**
+  * The preferred alignment for the dropdown content.
+  * @default BottomLeft
+  * @instance
+  * @memberof ClayActionsDropdown
+  * @type {?(string|undefined)}
+  */
+	preferredAlign: _validators.preferredAlign.value('BottomLeft'),
+
+	/**
   * The path to the SVG spritemap file containing the icons.
@@ -189,0 +196,0 @@ * @default undefined

lib/ClayActionsDropdown.soy.js

@@ -81,14 +81,16 @@ 'use strict';
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var preferredAlign = soy.asserts.assertType(opt_data.preferredAlign == null || goog.isString(opt_data.preferredAlign) || opt_data.preferredAlign instanceof goog.soy.data.SanitizedContent, 'preferredAlign', opt_data.preferredAlign, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var triggerClasses = soy.asserts.assertType(opt_data.triggerClasses == null || goog.isString(opt_data.triggerClasses) || opt_data.triggerClasses instanceof goog.soy.data.SanitizedContent, 'triggerClasses', opt_data.triggerClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var msg_1_6305962755687847469__soy1987 = '';
+    var msg_1_6305962755687847469__soy1993 = '';
     /** @desc  */
     var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-    msg_1_6305962755687847469__soy1987 += MSG_EXTERNAL_6305962755687847469;
-    var dropdownElementClasses__soy24 = '';
-    dropdownElementClasses__soy24 += 'dropdown-action';
-    dropdownElementClasses__soy24 += elementClasses ? ' ' + elementClasses : '';
-    var trigger__soy31 = function trigger__soy31() {
+    msg_1_6305962755687847469__soy1993 += MSG_EXTERNAL_6305962755687847469;
+    var dropdownElementClasses__soy25 = '';
+    dropdownElementClasses__soy25 += 'dropdown-action';
+    dropdownElementClasses__soy25 += elementClasses ? ' ' + elementClasses : '';
+    var trigger__soy32 = function trigger__soy32() {
       $templateAlias2({ spritemap: spritemap, symbol: 'ellipsis-v' }, opt_ijData);
     };
-    $templateAlias1({ button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy24, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick }, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy31, ref: 'dropdown', spritemap: spritemap, triggerClasses: triggerClasses, triggerTitle: '' + msg_1_6305962755687847469__soy1987 }, opt_ijData);
+    $templateAlias1({ button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy25, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick }, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy32, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, triggerClasses: triggerClasses, triggerTitle: '' + msg_1_6305962755687847469__soy1993 }, opt_ijData);
   };
@@ -110,2 +112,3 @@ exports.render = $render;
    *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -119,4 +122,4 @@ * }}
 
-  exports.render.params = ["items", "spritemap", "_handleButtonClick", "_handleItemClick", "button", "caption", "disabled", "elementClasses", "expanded", "helpText", "id", "itemsIconAlignment", "triggerClasses"];
-  exports.render.types = { "items": "list<?>", "spritemap": "string", "_handleButtonClick": "any", "_handleItemClick": "any", "button": "?", "caption": "string", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "helpText": "string", "id": "string", "itemsIconAlignment": "string", "triggerClasses": "string" };
+  exports.render.params = ["items", "spritemap", "_handleButtonClick", "_handleItemClick", "button", "caption", "disabled", "elementClasses", "expanded", "helpText", "id", "itemsIconAlignment", "preferredAlign", "triggerClasses"];
+  exports.render.types = { "items": "list<?>", "spritemap": "string", "_handleButtonClick": "any", "_handleItemClick": "any", "button": "?", "caption": "string", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "helpText": "string", "id": "string", "itemsIconAlignment": "string", "preferredAlign": "string", "triggerClasses": "string" };
   exports.templates = templates = exports;
@@ -123,0 +126,0 @@ return exports;

lib/ClayCreationMenuDropdown.js

@@ -28,6 +28,4 @@ 'use strict';
 
-var _items_validator = require('./items_validator');
+var _validators = require('./validators');
 
-var _items_validator2 = _interopRequireDefault(_items_validator);
-
 var _ClayCreationMenuDropdownSoy = require('./ClayCreationMenuDropdown.soy.js');
@@ -195,2 +193,11 @@
 	/**
+  * The preferred alignment for the dropdown content.
+  * @default BottomLeft
+  * @instance
+  * @memberof ClayCreationMenuDropdown
+  * @type {?(string|undefined)}
+  */
+	preferredAlign: _validators.preferredAlign.value('BottomLeft'),
+
+	/**
   * List of primary menu items.
@@ -202,3 +209,3 @@ * @default undefined
   */
-	primaryItems: _items_validator2.default.required(),
+	primaryItems: _validators.itemsValidator.required(),
 
@@ -212,3 +219,3 @@ /**
   */
-	secondaryItems: _items_validator2.default,
+	secondaryItems: _validators.itemsValidator,
 
@@ -215,0 +222,0 @@ /**

lib/ClayCreationMenuDropdown.soy.js

@@ -82,2 +82,4 @@ 'use strict';
     var maxTotalItems = soy.asserts.assertType(opt_data.maxTotalItems == null || goog.isNumber(opt_data.maxTotalItems), 'maxTotalItems', opt_data.maxTotalItems, 'null|number|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var preferredAlign = soy.asserts.assertType(opt_data.preferredAlign == null || goog.isString(opt_data.preferredAlign) || opt_data.preferredAlign instanceof goog.soy.data.SanitizedContent, 'preferredAlign', opt_data.preferredAlign, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {!Array<?>|null|undefined} */
@@ -91,41 +93,41 @@ var secondaryItems = soy.asserts.assertType(opt_data.secondaryItems == null || goog.isArray(opt_data.secondaryItems), 'secondaryItems', opt_data.secondaryItems, '!Array<?>|null|undefined');
     var viewMoreURL = soy.asserts.assertType(opt_data.viewMoreURL == null || goog.isString(opt_data.viewMoreURL) || opt_data.viewMoreURL instanceof goog.soy.data.SanitizedContent, 'viewMoreURL', opt_data.viewMoreURL, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var secondaryItemsFirstGroup__soy76 = secondaryItems != null ? secondaryItems[0] != null ? secondaryItems[0] : null : null;
-    var secondaryItemsSecondGroup__soy78 = secondaryItems != null ? secondaryItems[1] != null ? secondaryItems[1] : null : null;
-    var totalPrimaryItems__soy80 = primaryItems.length;
-    var totalSecondaryItemsFirstGroup__soy82 = secondaryItemsFirstGroup__soy76 != null && secondaryItemsFirstGroup__soy76.items != null ? secondaryItemsFirstGroup__soy76.items.length : 0;
-    var totalSecondaryItemsSecondGroup__soy84 = secondaryItemsSecondGroup__soy78 != null && secondaryItemsSecondGroup__soy78.items != null ? secondaryItemsSecondGroup__soy78.items.length : 0;
-    var totalSecondaryItems__soy86 = totalSecondaryItemsFirstGroup__soy82 + totalSecondaryItemsSecondGroup__soy84;
-    var totalItems__soy88 = totalPrimaryItems__soy80 + totalSecondaryItems__soy86;
-    var defaultMaxPrimaryItems__soy90 = maxPrimaryItems ? totalPrimaryItems__soy80 > maxPrimaryItems ? maxPrimaryItems : totalPrimaryItems__soy80 : totalPrimaryItems__soy80 > 8 ? 8 : totalPrimaryItems__soy80;
-    var tempDefaultMaxSecondaryItems__soy92 = maxSecondaryItems ? totalSecondaryItems__soy86 > maxSecondaryItems ? maxSecondaryItems : totalSecondaryItems__soy86 : totalSecondaryItems__soy86 > 7 ? 7 : totalSecondaryItems__soy86;
-    var defaultMaxTotalItems__soy94 = maxTotalItems != null ? maxTotalItems : 15;
-    var defaultMaxSecondaryItems__soy96 = tempDefaultMaxSecondaryItems__soy92 > defaultMaxTotalItems__soy94 - defaultMaxPrimaryItems__soy90 ? defaultMaxTotalItems__soy94 - defaultMaxPrimaryItems__soy90 : tempDefaultMaxSecondaryItems__soy92;
-    var showingItems__soy98 = totalSecondaryItems__soy86 == 0 ? totalPrimaryItems__soy80 > defaultMaxTotalItems__soy94 ? defaultMaxTotalItems__soy94 : totalPrimaryItems__soy80 : totalPrimaryItems__soy80 > defaultMaxPrimaryItems__soy90 ? totalSecondaryItems__soy86 > defaultMaxSecondaryItems__soy96 ? defaultMaxPrimaryItems__soy90 + defaultMaxSecondaryItems__soy96 : defaultMaxPrimaryItems__soy90 + totalSecondaryItems__soy86 : totalSecondaryItems__soy86 > defaultMaxSecondaryItems__soy96 ? totalPrimaryItems__soy80 + defaultMaxSecondaryItems__soy96 : totalPrimaryItems__soy80 + totalSecondaryItems__soy86;
-    var primaryDropdownItems__soy100 = { items: primaryItems, maxItems: totalSecondaryItems__soy86 > 0 ? defaultMaxPrimaryItems__soy90 : defaultMaxTotalItems__soy94, separator: totalSecondaryItems__soy86 > 0, type: 'group' };
-    var secondaryDropdownItemsSecondGroup__soy102 = secondaryItemsSecondGroup__soy78 && totalSecondaryItemsFirstGroup__soy82 < defaultMaxSecondaryItems__soy96 ? { items: secondaryItemsSecondGroup__soy78.items, label: secondaryItemsSecondGroup__soy78.label, maxItems: defaultMaxSecondaryItems__soy96 - totalSecondaryItemsFirstGroup__soy82, type: 'group' } : null;
-    var secondaryDropdownItemsFirstGroup__soy104 = secondaryItemsFirstGroup__soy76 ? { items: secondaryItemsFirstGroup__soy76.items, label: secondaryItemsFirstGroup__soy76.label, maxItems: defaultMaxSecondaryItems__soy96, separator: secondaryItemsFirstGroup__soy76.separator && secondaryDropdownItemsSecondGroup__soy102 != null, type: 'group' } : null;
-    var items__soy106 = secondaryDropdownItemsFirstGroup__soy104 && secondaryDropdownItemsSecondGroup__soy102 ? [primaryDropdownItems__soy100, secondaryDropdownItemsFirstGroup__soy104, secondaryDropdownItemsSecondGroup__soy102] : secondaryDropdownItemsFirstGroup__soy104 ? [primaryDropdownItems__soy100, secondaryDropdownItemsFirstGroup__soy104] : [primaryDropdownItems__soy100];
-    var showMoreButton__soy108 = showingItems__soy98 < totalItems__soy88 ? viewMoreURL != null ? { buttonStyle: 'secondary', href: viewMoreURL, label: 'More' } : { label: 'More', style: 'secondary' } : null;
-    var trigger__soy115 = function trigger__soy115() {
+    var secondaryItemsFirstGroup__soy79 = secondaryItems != null ? secondaryItems[0] != null ? secondaryItems[0] : null : null;
+    var secondaryItemsSecondGroup__soy81 = secondaryItems != null ? secondaryItems[1] != null ? secondaryItems[1] : null : null;
+    var totalPrimaryItems__soy83 = primaryItems.length;
+    var totalSecondaryItemsFirstGroup__soy85 = secondaryItemsFirstGroup__soy79 != null && secondaryItemsFirstGroup__soy79.items != null ? secondaryItemsFirstGroup__soy79.items.length : 0;
+    var totalSecondaryItemsSecondGroup__soy87 = secondaryItemsSecondGroup__soy81 != null && secondaryItemsSecondGroup__soy81.items != null ? secondaryItemsSecondGroup__soy81.items.length : 0;
+    var totalSecondaryItems__soy89 = totalSecondaryItemsFirstGroup__soy85 + totalSecondaryItemsSecondGroup__soy87;
+    var totalItems__soy91 = totalPrimaryItems__soy83 + totalSecondaryItems__soy89;
+    var defaultMaxPrimaryItems__soy93 = maxPrimaryItems ? totalPrimaryItems__soy83 > maxPrimaryItems ? maxPrimaryItems : totalPrimaryItems__soy83 : totalPrimaryItems__soy83 > 8 ? 8 : totalPrimaryItems__soy83;
+    var tempDefaultMaxSecondaryItems__soy95 = maxSecondaryItems ? totalSecondaryItems__soy89 > maxSecondaryItems ? maxSecondaryItems : totalSecondaryItems__soy89 : totalSecondaryItems__soy89 > 7 ? 7 : totalSecondaryItems__soy89;
+    var defaultMaxTotalItems__soy97 = maxTotalItems != null ? maxTotalItems : 15;
+    var defaultMaxSecondaryItems__soy99 = tempDefaultMaxSecondaryItems__soy95 > defaultMaxTotalItems__soy97 - defaultMaxPrimaryItems__soy93 ? defaultMaxTotalItems__soy97 - defaultMaxPrimaryItems__soy93 : tempDefaultMaxSecondaryItems__soy95;
+    var showingItems__soy101 = totalSecondaryItems__soy89 == 0 ? totalPrimaryItems__soy83 > defaultMaxTotalItems__soy97 ? defaultMaxTotalItems__soy97 : totalPrimaryItems__soy83 : totalPrimaryItems__soy83 > defaultMaxPrimaryItems__soy93 ? totalSecondaryItems__soy89 > defaultMaxSecondaryItems__soy99 ? defaultMaxPrimaryItems__soy93 + defaultMaxSecondaryItems__soy99 : defaultMaxPrimaryItems__soy93 + totalSecondaryItems__soy89 : totalSecondaryItems__soy89 > defaultMaxSecondaryItems__soy99 ? totalPrimaryItems__soy83 + defaultMaxSecondaryItems__soy99 : totalPrimaryItems__soy83 + totalSecondaryItems__soy89;
+    var primaryDropdownItems__soy103 = { items: primaryItems, maxItems: totalSecondaryItems__soy89 > 0 ? defaultMaxPrimaryItems__soy93 : defaultMaxTotalItems__soy97, separator: totalSecondaryItems__soy89 > 0, type: 'group' };
+    var secondaryDropdownItemsSecondGroup__soy105 = secondaryItemsSecondGroup__soy81 && totalSecondaryItemsFirstGroup__soy85 < defaultMaxSecondaryItems__soy99 ? { items: secondaryItemsSecondGroup__soy81.items, label: secondaryItemsSecondGroup__soy81.label, maxItems: defaultMaxSecondaryItems__soy99 - totalSecondaryItemsFirstGroup__soy85, type: 'group' } : null;
+    var secondaryDropdownItemsFirstGroup__soy107 = secondaryItemsFirstGroup__soy79 ? { items: secondaryItemsFirstGroup__soy79.items, label: secondaryItemsFirstGroup__soy79.label, maxItems: defaultMaxSecondaryItems__soy99, separator: secondaryItemsFirstGroup__soy79.separator && secondaryDropdownItemsSecondGroup__soy105 != null, type: 'group' } : null;
+    var items__soy109 = secondaryDropdownItemsFirstGroup__soy107 && secondaryDropdownItemsSecondGroup__soy105 ? [primaryDropdownItems__soy103, secondaryDropdownItemsFirstGroup__soy107, secondaryDropdownItemsSecondGroup__soy105] : secondaryDropdownItemsFirstGroup__soy107 ? [primaryDropdownItems__soy103, secondaryDropdownItemsFirstGroup__soy107] : [primaryDropdownItems__soy103];
+    var showMoreButton__soy111 = showingItems__soy101 < totalItems__soy91 ? viewMoreURL != null ? { buttonStyle: 'secondary', href: viewMoreURL, label: 'More' } : { label: 'More', style: 'secondary' } : null;
+    var trigger__soy118 = function trigger__soy118() {
       $templateAlias2({ spritemap: spritemap, symbol: 'plus' }, opt_ijData);
     };
-    var param132 = '';
-    if (showMoreButton__soy108) {
-      var msg_2_8004490453579465583__soy1989 = '';
+    var param135 = '';
+    if (showMoreButton__soy111) {
+      var msg_2_8004490453579465583__soy1995 = '';
       /** @desc Says how many items of the total are being showed */
-      var MSG_EXTERNAL_8004490453579465583 = goog.getMsg('showing-{$showingItems}-of-{$totalItems}-elements', { 'showingItems': showingItems__soy98, 'totalItems': totalItems__soy88 });
-      msg_2_8004490453579465583__soy1989 += MSG_EXTERNAL_8004490453579465583;
-      param132 += msg_2_8004490453579465583__soy1989;
+      var MSG_EXTERNAL_8004490453579465583 = goog.getMsg('showing-{$showingItems}-of-{$totalItems}-elements', { 'showingItems': showingItems__soy101, 'totalItems': totalItems__soy91 });
+      msg_2_8004490453579465583__soy1995 += MSG_EXTERNAL_8004490453579465583;
+      param135 += msg_2_8004490453579465583__soy1995;
     }
-    var param160 = '';
+    var param164 = '';
     if (triggerTitle) {
-      param160 += triggerTitle;
+      param164 += triggerTitle;
     } else {
-      var msg_3_7387635272539030076__soy1991 = '';
+      var msg_3_7387635272539030076__soy1997 = '';
       /** @desc  */
       var MSG_EXTERNAL_7387635272539030076 = goog.getMsg('new');
-      msg_3_7387635272539030076__soy1991 += MSG_EXTERNAL_7387635272539030076;
-      param160 += msg_3_7387635272539030076__soy1991;
+      msg_3_7387635272539030076__soy1997 += MSG_EXTERNAL_7387635272539030076;
+      param164 += msg_3_7387635272539030076__soy1997;
     }
-    $templateAlias1({ button: showMoreButton__soy108, caption: param132, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick }, expanded: expanded, helpText: showMoreButton__soy108 ? helpText : null, id: id, items: items__soy106, itemsIconAlignment: itemsIconAlignment, label: trigger__soy115, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerClasses: triggerClasses, triggerTitle: param160 }, opt_ijData);
+    $templateAlias1({ button: showMoreButton__soy111, caption: param135, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick }, expanded: expanded, helpText: showMoreButton__soy111 ? helpText : null, id: id, items: items__soy109, itemsIconAlignment: itemsIconAlignment, label: trigger__soy118, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerClasses: triggerClasses, triggerTitle: param164 }, opt_ijData);
   };
@@ -148,2 +150,3 @@ exports.render = $render;
    *  maxTotalItems: (null|number|undefined),
+   *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  secondaryItems: (!Array<?>|null|undefined),
@@ -160,4 +163,4 @@ *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-  exports.render.params = ["primaryItems", "spritemap", "_handleButtonClick", "_handleItemClick", "disabled", "elementClasses", "expanded", "helpText", "id", "itemsIconAlignment", "maxPrimaryItems", "maxSecondaryItems", "maxTotalItems", "secondaryItems", "triggerClasses", "triggerTitle", "viewMoreURL"];
-  exports.render.types = { "primaryItems": "list<?>", "spritemap": "string", "_handleButtonClick": "any", "_handleItemClick": "any", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "helpText": "string", "id": "string", "itemsIconAlignment": "string", "maxPrimaryItems": "int", "maxSecondaryItems": "int", "maxTotalItems": "int", "secondaryItems": "list<?>", "triggerClasses": "string", "triggerTitle": "string", "viewMoreURL": "string" };
+  exports.render.params = ["primaryItems", "spritemap", "_handleButtonClick", "_handleItemClick", "disabled", "elementClasses", "expanded", "helpText", "id", "itemsIconAlignment", "maxPrimaryItems", "maxSecondaryItems", "maxTotalItems", "preferredAlign", "secondaryItems", "triggerClasses", "triggerTitle", "viewMoreURL"];
+  exports.render.types = { "primaryItems": "list<?>", "spritemap": "string", "_handleButtonClick": "any", "_handleItemClick": "any", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "helpText": "string", "id": "string", "itemsIconAlignment": "string", "maxPrimaryItems": "int", "maxSecondaryItems": "int", "maxTotalItems": "int", "preferredAlign": "string", "secondaryItems": "list<?>", "triggerClasses": "string", "triggerTitle": "string", "viewMoreURL": "string" };
   exports.templates = templates = exports;
@@ -164,0 +167,0 @@ return exports;

lib/ClayDropdown.js

@@ -28,6 +28,4 @@ 'use strict';
 
-var _items_validator = require('./items_validator');
+var _validators = require('./validators');
 
-var _items_validator2 = _interopRequireDefault(_items_validator);
-
 var _ClayDropdownSoy = require('./ClayDropdown.soy.js');
@@ -164,3 +162,3 @@
   */
-	items: _items_validator2.default.required(),
+	items: _validators.itemsValidator.required(),
 
@@ -186,2 +184,11 @@ /**
 	/**
+  * The preferred alignment for the dropdown content.
+  * @default BottomLeft
+  * @instance
+  * @memberof ClayDropdown
+  * @type {?(string|undefined)}
+  */
+	preferredAlign: _validators.preferredAlign.value('BottomLeft'),
+
+	/**
   * Flag to indicate if menu has a search field and search through elements
@@ -188,0 +195,0 @@ * is possible.

lib/ClayDropdown.soy.js

@@ -80,2 +80,4 @@ 'use strict';
     var label = soy.asserts.assertType(opt_data.label == null || goog.isFunction(opt_data.label) || goog.isString(opt_data.label) || opt_data.label instanceof goog.soy.data.SanitizedContent, 'label', opt_data.label, '!goog.soy.data.SanitizedContent|function()|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var preferredAlign = soy.asserts.assertType(opt_data.preferredAlign == null || goog.isString(opt_data.preferredAlign) || opt_data.preferredAlign instanceof goog.soy.data.SanitizedContent, 'preferredAlign', opt_data.preferredAlign, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {boolean|null|undefined} */
@@ -91,3 +93,3 @@ var searchable = soy.asserts.assertType(opt_data.searchable == null || goog.isBoolean(opt_data.searchable) || opt_data.searchable === 1 || opt_data.searchable === 0, 'searchable', opt_data.searchable, 'boolean|null|undefined');
     var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent, 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var trigger__soy210 = function trigger__soy210() {
+    var trigger__soy215 = function trigger__soy215() {
       if (icon) {
@@ -103,3 +105,3 @@ $templateAlias2({ elementClasses: label ? 'inline-item inline-item-before' : '', spritemap: spritemap, symbol: icon }, opt_ijData);
     };
-    $templateAlias1({ button: button, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick }, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy210, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle }, opt_ijData);
+    $templateAlias1({ button: button, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick }, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy215, preferredAlign: preferredAlign, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle }, opt_ijData);
   };
@@ -121,2 +123,3 @@ exports.render = $render;
    *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+   *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  searchable: (boolean|null|undefined),
@@ -134,4 +137,4 @@ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-  exports.render.params = ["items", "spritemap", "_handleButtonClick", "_handleItemClick", "button", "disabled", "elementClasses", "expanded", "icon", "id", "itemsIconAlignment", "label", "searchable", "style", "triggerClasses", "triggerSize", "triggerTitle"];
-  exports.render.types = { "items": "list<?>", "spritemap": "string", "_handleButtonClick": "any", "_handleItemClick": "any", "button": "?", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "icon": "string", "id": "string", "itemsIconAlignment": "string", "label": "html|string", "searchable": "bool", "style": "string", "triggerClasses": "string", "triggerSize": "string", "triggerTitle": "string" };
+  exports.render.params = ["items", "spritemap", "_handleButtonClick", "_handleItemClick", "button", "disabled", "elementClasses", "expanded", "icon", "id", "itemsIconAlignment", "label", "preferredAlign", "searchable", "style", "triggerClasses", "triggerSize", "triggerTitle"];
+  exports.render.types = { "items": "list<?>", "spritemap": "string", "_handleButtonClick": "any", "_handleItemClick": "any", "button": "?", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "icon": "string", "id": "string", "itemsIconAlignment": "string", "label": "html|string", "preferredAlign": "string", "searchable": "bool", "style": "string", "triggerClasses": "string", "triggerSize": "string", "triggerTitle": "string" };
   exports.templates = templates = exports;
@@ -138,0 +141,0 @@ return exports;

lib/ClayDropdownBase.js

@@ -40,6 +40,4 @@ 'use strict';
 
-var _items_validator = require('./items_validator');
+var _validators = require('./validators');
 
-var _items_validator2 = _interopRequireDefault(_items_validator);
-
 var _ClayDropdownBaseSoy = require('./ClayDropdownBase.soy.js');
@@ -222,3 +220,3 @@
 
-					this._alignedPosition = _metalPosition.Align.align(bodyElement, alignElement, _metalPosition.Align.BottomLeft);
+					this._alignedPosition = _metalPosition.Align.align(bodyElement, alignElement, this.preferredAlign);
 				}
@@ -285,2 +283,34 @@ }
 		/**
+   * Set preferred alignment with Align API.
+   * @private
+   * @param {!string} value
+   * @return {number}
+   */
+
+	}, {
+		key: '_setPreferredAlign',
+		value: function _setPreferredAlign(value) {
+			switch (value) {
+				case 'TopCenter':
+					return _metalPosition.Align.TopCenter;
+				case 'RightCenter':
+					return _metalPosition.Align.RightCenter;
+				case 'BottomCenter':
+					return _metalPosition.Align.BottomCenter;
+				case 'LeftCenter':
+					return _metalPosition.Align.LeftCenter;
+				case 'TopRight':
+					return _metalPosition.Align.TopRight;
+				case 'BottomRight':
+					return _metalPosition.Align.BottomRight;
+				case 'BottomLeft':
+					return _metalPosition.Align.BottomLeft;
+				case 'TopLeft':
+					return _metalPosition.Align.TopLeft;
+				default:
+					return _metalPosition.Align.BottomLeft;
+			}
+		}
+
+		/**
    * @inheritDoc
@@ -425,3 +455,3 @@ */
   */
-	items: _items_validator2.default.required(),
+	items: _validators.itemsValidator.required(),
 
@@ -456,2 +486,11 @@ /**
 	/**
+  * The preferred alignment for the dropdown content.
+  * @default BottomLeft
+  * @instance
+  * @memberof ClayDropdownBase
+  * @type {?(string|undefined)}
+  */
+	preferredAlign: _validators.preferredAlign.setter('_setPreferredAlign').value('BottomLeft'),
+
+	/**
   * Flag to indicate if menu has a search field and search through elements
@@ -458,0 +497,0 @@ * is possible.

package.json

 {
   "name": "clay-dropdown",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Clay Dropdown Component",
@@ -31,9 +31,9 @@ "license": "BSD",
   "dependencies": {
-    "clay-button": "^2.3.0",
-    "clay-checkbox": "^2.3.0",
-    "clay-component": "^2.3.0",
-    "clay-icon": "^2.3.0",
-    "clay-link": "^2.3.0",
-    "clay-portal": "^2.3.0",
-    "clay-radio": "^2.3.0",
+    "clay-button": "^2.3.2",
+    "clay-checkbox": "^2.3.2",
+    "clay-component": "^2.3.2",
+    "clay-icon": "^2.3.2",
+    "clay-link": "^2.3.2",
+    "clay-portal": "^2.3.2",
+    "clay-radio": "^2.3.2",
     "metal": "^2.16.0",
@@ -54,8 +54,8 @@ "metal-component": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay": "^2.3.0",
-    "clay-css": "^2.3.0",
+    "browserslist-config-clay": "^2.3.2",
+    "clay-css": "^2.3.2",
     "metal-dom": "^2.13.2",
     "metal-tools-soy": "^6.0.0",
     "webpack": "^3.0.0",
-    "webpack-config-clay": "^2.3.0"
+    "webpack-config-clay": "^2.3.2"
   },
@@ -62,0 +62,0 @@ "browserslist": [

src/__tests__/ClayDropdownBase.js

@@ -0,1 +1,2 @@
+import {Align} from 'metal-position';
 import ClayDropdownBase from '../ClayDropdownBase';
@@ -742,2 +743,38 @@
 	});
+
+	it('should render a dropdown with preferred align and set a number with base in Align API', () => {
+		clayDropdownBase = new ClayDropdownBase({
+			items: [
+				{
+					href: 'item1url',
+					label: 'Item 1',
+				},
+			],
+			label: 'Trigger',
+			preferredAlign: 'BottomCenter',
+		});
+
+		expect(clayDropdownBase.preferredAlign).toBe(Align.BottomCenter);
+
+		clayDropdownBase.preferredAlign = 'BottomLeft';
+		expect(clayDropdownBase.preferredAlign).toBe(Align.BottomLeft);
+
+		clayDropdownBase.preferredAlign = 'BottomRight';
+		expect(clayDropdownBase.preferredAlign).toBe(Align.BottomRight);
+
+		clayDropdownBase.preferredAlign = 'LeftCenter';
+		expect(clayDropdownBase.preferredAlign).toBe(Align.LeftCenter);
+
+		clayDropdownBase.preferredAlign = 'RightCenter';
+		expect(clayDropdownBase.preferredAlign).toBe(Align.RightCenter);
+
+		clayDropdownBase.preferredAlign = 'TopCenter';
+		expect(clayDropdownBase.preferredAlign).toBe(Align.TopCenter);
+
+		clayDropdownBase.preferredAlign = 'TopLeft';
+		expect(clayDropdownBase.preferredAlign).toBe(Align.TopLeft);
+
+		clayDropdownBase.preferredAlign = 'TopRight';
+		expect(clayDropdownBase.preferredAlign).toBe(Align.TopRight);
+	});
 });

src/ClayActionsDropdown.js

@@ -8,3 +8,3 @@ import 'clay-icon';
 
-import itemsValidator from './items_validator';
+import {itemsValidator, preferredAlign} from './validators';
 import templates from './ClayActionsDropdown.soy.js';
@@ -127,3 +127,3 @@
 	 * @instance
-	 * @memberof ClayDropdown
+	 * @memberof ClayActionsDropdown
 	 * @type {?(string|undefined)}
@@ -134,2 +134,11 @@ */
 	/**
+	 * The preferred alignment for the dropdown content.
+	 * @default BottomLeft
+	 * @instance
+	 * @memberof ClayActionsDropdown
+	 * @type {?(string|undefined)}
+	 */
+	preferredAlign: preferredAlign.value('BottomLeft'),
+
+	/**
 	 * The path to the SVG spritemap file containing the icons.
@@ -136,0 +145,0 @@ * @default undefined

src/ClayActionsDropdown.soy.js

@@ -62,14 +62,16 @@ /* jshint ignore:start */
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var preferredAlign = soy.asserts.assertType(opt_data.preferredAlign == null || (goog.isString(opt_data.preferredAlign) || opt_data.preferredAlign instanceof goog.soy.data.SanitizedContent), 'preferredAlign', opt_data.preferredAlign, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var triggerClasses = soy.asserts.assertType(opt_data.triggerClasses == null || (goog.isString(opt_data.triggerClasses) || opt_data.triggerClasses instanceof goog.soy.data.SanitizedContent), 'triggerClasses', opt_data.triggerClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var msg_1_6305962755687847469__soy1987 = '';
+  var msg_1_6305962755687847469__soy1993 = '';
   /** @desc  */
   var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-  msg_1_6305962755687847469__soy1987 += MSG_EXTERNAL_6305962755687847469;
-  var dropdownElementClasses__soy24 = '';
-  dropdownElementClasses__soy24 += 'dropdown-action';
-  dropdownElementClasses__soy24 += elementClasses ? ' ' + elementClasses : '';
-  var trigger__soy31 = function() {
+  msg_1_6305962755687847469__soy1993 += MSG_EXTERNAL_6305962755687847469;
+  var dropdownElementClasses__soy25 = '';
+  dropdownElementClasses__soy25 += 'dropdown-action';
+  dropdownElementClasses__soy25 += elementClasses ? ' ' + elementClasses : '';
+  var trigger__soy32 = function() {
     $templateAlias2({spritemap: spritemap, symbol: 'ellipsis-v'}, opt_ijData);
   };
-  $templateAlias1({button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy24, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick}, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy31, ref: 'dropdown', spritemap: spritemap, triggerClasses: triggerClasses, triggerTitle: '' + msg_1_6305962755687847469__soy1987}, opt_ijData);
+  $templateAlias1({button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy25, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick}, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy32, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, triggerClasses: triggerClasses, triggerTitle: '' + msg_1_6305962755687847469__soy1993}, opt_ijData);
 };
@@ -91,2 +93,3 @@ exports.render = $render;
  *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -100,4 +103,4 @@ * }}
 
-exports.render.params = ["items","spritemap","_handleButtonClick","_handleItemClick","button","caption","disabled","elementClasses","expanded","helpText","id","itemsIconAlignment","triggerClasses"];
-exports.render.types = {"items":"list<?>","spritemap":"string","_handleButtonClick":"any","_handleItemClick":"any","button":"?","caption":"string","disabled":"bool","elementClasses":"string","expanded":"bool","helpText":"string","id":"string","itemsIconAlignment":"string","triggerClasses":"string"};
+exports.render.params = ["items","spritemap","_handleButtonClick","_handleItemClick","button","caption","disabled","elementClasses","expanded","helpText","id","itemsIconAlignment","preferredAlign","triggerClasses"];
+exports.render.types = {"items":"list<?>","spritemap":"string","_handleButtonClick":"any","_handleItemClick":"any","button":"?","caption":"string","disabled":"bool","elementClasses":"string","expanded":"bool","helpText":"string","id":"string","itemsIconAlignment":"string","preferredAlign":"string","triggerClasses":"string"};
 templates = exports;
@@ -104,0 +107,0 @@ return exports;

src/ClayCreationMenuDropdown.js

@@ -8,3 +8,3 @@ import 'clay-icon';
 
-import itemsValidator from './items_validator';
+import {itemsValidator, preferredAlign} from './validators';
 import templates from './ClayCreationMenuDropdown.soy.js';
@@ -143,2 +143,11 @@
 	/**
+	 * The preferred alignment for the dropdown content.
+	 * @default BottomLeft
+	 * @instance
+	 * @memberof ClayCreationMenuDropdown
+	 * @type {?(string|undefined)}
+	 */
+	preferredAlign: preferredAlign.value('BottomLeft'),
+
+	/**
 	 * List of primary menu items.
@@ -145,0 +154,0 @@ * @default undefined

src/ClayCreationMenuDropdown.soy.js

@@ -63,2 +63,4 @@ /* jshint ignore:start */
   var maxTotalItems = soy.asserts.assertType(opt_data.maxTotalItems == null || goog.isNumber(opt_data.maxTotalItems), 'maxTotalItems', opt_data.maxTotalItems, 'null|number|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var preferredAlign = soy.asserts.assertType(opt_data.preferredAlign == null || (goog.isString(opt_data.preferredAlign) || opt_data.preferredAlign instanceof goog.soy.data.SanitizedContent), 'preferredAlign', opt_data.preferredAlign, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {!Array<?>|null|undefined} */
@@ -72,41 +74,41 @@ var secondaryItems = soy.asserts.assertType(opt_data.secondaryItems == null || goog.isArray(opt_data.secondaryItems), 'secondaryItems', opt_data.secondaryItems, '!Array<?>|null|undefined');
   var viewMoreURL = soy.asserts.assertType(opt_data.viewMoreURL == null || (goog.isString(opt_data.viewMoreURL) || opt_data.viewMoreURL instanceof goog.soy.data.SanitizedContent), 'viewMoreURL', opt_data.viewMoreURL, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var secondaryItemsFirstGroup__soy76 = (secondaryItems != null) ? ((secondaryItems[0] != null) ? secondaryItems[0] : null) : null;
-  var secondaryItemsSecondGroup__soy78 = (secondaryItems != null) ? ((secondaryItems[1] != null) ? secondaryItems[1] : null) : null;
-  var totalPrimaryItems__soy80 = (primaryItems.length);
-  var totalSecondaryItemsFirstGroup__soy82 = (secondaryItemsFirstGroup__soy76 != null) && (secondaryItemsFirstGroup__soy76.items != null) ? (secondaryItemsFirstGroup__soy76.items.length) : 0;
-  var totalSecondaryItemsSecondGroup__soy84 = (secondaryItemsSecondGroup__soy78 != null) && (secondaryItemsSecondGroup__soy78.items != null) ? (secondaryItemsSecondGroup__soy78.items.length) : 0;
-  var totalSecondaryItems__soy86 = totalSecondaryItemsFirstGroup__soy82 + totalSecondaryItemsSecondGroup__soy84;
-  var totalItems__soy88 = totalPrimaryItems__soy80 + totalSecondaryItems__soy86;
-  var defaultMaxPrimaryItems__soy90 = maxPrimaryItems ? (totalPrimaryItems__soy80 > maxPrimaryItems ? maxPrimaryItems : totalPrimaryItems__soy80) : totalPrimaryItems__soy80 > 8 ? 8 : totalPrimaryItems__soy80;
-  var tempDefaultMaxSecondaryItems__soy92 = maxSecondaryItems ? (totalSecondaryItems__soy86 > maxSecondaryItems ? maxSecondaryItems : totalSecondaryItems__soy86) : totalSecondaryItems__soy86 > 7 ? 7 : totalSecondaryItems__soy86;
-  var defaultMaxTotalItems__soy94 = maxTotalItems != null ? maxTotalItems : 15;
-  var defaultMaxSecondaryItems__soy96 = tempDefaultMaxSecondaryItems__soy92 > defaultMaxTotalItems__soy94 - defaultMaxPrimaryItems__soy90 ? defaultMaxTotalItems__soy94 - defaultMaxPrimaryItems__soy90 : tempDefaultMaxSecondaryItems__soy92;
-  var showingItems__soy98 = totalSecondaryItems__soy86 == 0 ? (totalPrimaryItems__soy80 > defaultMaxTotalItems__soy94 ? defaultMaxTotalItems__soy94 : totalPrimaryItems__soy80) : totalPrimaryItems__soy80 > defaultMaxPrimaryItems__soy90 ? (totalSecondaryItems__soy86 > defaultMaxSecondaryItems__soy96 ? defaultMaxPrimaryItems__soy90 + defaultMaxSecondaryItems__soy96 : defaultMaxPrimaryItems__soy90 + totalSecondaryItems__soy86) : totalSecondaryItems__soy86 > defaultMaxSecondaryItems__soy96 ? totalPrimaryItems__soy80 + defaultMaxSecondaryItems__soy96 : totalPrimaryItems__soy80 + totalSecondaryItems__soy86;
-  var primaryDropdownItems__soy100 = {items: primaryItems, maxItems: totalSecondaryItems__soy86 > 0 ? defaultMaxPrimaryItems__soy90 : defaultMaxTotalItems__soy94, separator: totalSecondaryItems__soy86 > 0, type: 'group'};
-  var secondaryDropdownItemsSecondGroup__soy102 = secondaryItemsSecondGroup__soy78 && totalSecondaryItemsFirstGroup__soy82 < defaultMaxSecondaryItems__soy96 ? {items: secondaryItemsSecondGroup__soy78.items, label: secondaryItemsSecondGroup__soy78.label, maxItems: defaultMaxSecondaryItems__soy96 - totalSecondaryItemsFirstGroup__soy82, type: 'group'} : null;
-  var secondaryDropdownItemsFirstGroup__soy104 = secondaryItemsFirstGroup__soy76 ? {items: secondaryItemsFirstGroup__soy76.items, label: secondaryItemsFirstGroup__soy76.label, maxItems: defaultMaxSecondaryItems__soy96, separator: secondaryItemsFirstGroup__soy76.separator && (secondaryDropdownItemsSecondGroup__soy102 != null), type: 'group'} : null;
-  var items__soy106 = secondaryDropdownItemsFirstGroup__soy104 && secondaryDropdownItemsSecondGroup__soy102 ? [primaryDropdownItems__soy100, secondaryDropdownItemsFirstGroup__soy104, secondaryDropdownItemsSecondGroup__soy102] : secondaryDropdownItemsFirstGroup__soy104 ? [primaryDropdownItems__soy100, secondaryDropdownItemsFirstGroup__soy104] : [primaryDropdownItems__soy100];
-  var showMoreButton__soy108 = showingItems__soy98 < totalItems__soy88 ? ((viewMoreURL != null) ? {buttonStyle: 'secondary', href: viewMoreURL, label: 'More'} : {label: 'More', style: 'secondary'}) : null;
-  var trigger__soy115 = function() {
+  var secondaryItemsFirstGroup__soy79 = (secondaryItems != null) ? ((secondaryItems[0] != null) ? secondaryItems[0] : null) : null;
+  var secondaryItemsSecondGroup__soy81 = (secondaryItems != null) ? ((secondaryItems[1] != null) ? secondaryItems[1] : null) : null;
+  var totalPrimaryItems__soy83 = (primaryItems.length);
+  var totalSecondaryItemsFirstGroup__soy85 = (secondaryItemsFirstGroup__soy79 != null) && (secondaryItemsFirstGroup__soy79.items != null) ? (secondaryItemsFirstGroup__soy79.items.length) : 0;
+  var totalSecondaryItemsSecondGroup__soy87 = (secondaryItemsSecondGroup__soy81 != null) && (secondaryItemsSecondGroup__soy81.items != null) ? (secondaryItemsSecondGroup__soy81.items.length) : 0;
+  var totalSecondaryItems__soy89 = totalSecondaryItemsFirstGroup__soy85 + totalSecondaryItemsSecondGroup__soy87;
+  var totalItems__soy91 = totalPrimaryItems__soy83 + totalSecondaryItems__soy89;
+  var defaultMaxPrimaryItems__soy93 = maxPrimaryItems ? (totalPrimaryItems__soy83 > maxPrimaryItems ? maxPrimaryItems : totalPrimaryItems__soy83) : totalPrimaryItems__soy83 > 8 ? 8 : totalPrimaryItems__soy83;
+  var tempDefaultMaxSecondaryItems__soy95 = maxSecondaryItems ? (totalSecondaryItems__soy89 > maxSecondaryItems ? maxSecondaryItems : totalSecondaryItems__soy89) : totalSecondaryItems__soy89 > 7 ? 7 : totalSecondaryItems__soy89;
+  var defaultMaxTotalItems__soy97 = maxTotalItems != null ? maxTotalItems : 15;
+  var defaultMaxSecondaryItems__soy99 = tempDefaultMaxSecondaryItems__soy95 > defaultMaxTotalItems__soy97 - defaultMaxPrimaryItems__soy93 ? defaultMaxTotalItems__soy97 - defaultMaxPrimaryItems__soy93 : tempDefaultMaxSecondaryItems__soy95;
+  var showingItems__soy101 = totalSecondaryItems__soy89 == 0 ? (totalPrimaryItems__soy83 > defaultMaxTotalItems__soy97 ? defaultMaxTotalItems__soy97 : totalPrimaryItems__soy83) : totalPrimaryItems__soy83 > defaultMaxPrimaryItems__soy93 ? (totalSecondaryItems__soy89 > defaultMaxSecondaryItems__soy99 ? defaultMaxPrimaryItems__soy93 + defaultMaxSecondaryItems__soy99 : defaultMaxPrimaryItems__soy93 + totalSecondaryItems__soy89) : totalSecondaryItems__soy89 > defaultMaxSecondaryItems__soy99 ? totalPrimaryItems__soy83 + defaultMaxSecondaryItems__soy99 : totalPrimaryItems__soy83 + totalSecondaryItems__soy89;
+  var primaryDropdownItems__soy103 = {items: primaryItems, maxItems: totalSecondaryItems__soy89 > 0 ? defaultMaxPrimaryItems__soy93 : defaultMaxTotalItems__soy97, separator: totalSecondaryItems__soy89 > 0, type: 'group'};
+  var secondaryDropdownItemsSecondGroup__soy105 = secondaryItemsSecondGroup__soy81 && totalSecondaryItemsFirstGroup__soy85 < defaultMaxSecondaryItems__soy99 ? {items: secondaryItemsSecondGroup__soy81.items, label: secondaryItemsSecondGroup__soy81.label, maxItems: defaultMaxSecondaryItems__soy99 - totalSecondaryItemsFirstGroup__soy85, type: 'group'} : null;
+  var secondaryDropdownItemsFirstGroup__soy107 = secondaryItemsFirstGroup__soy79 ? {items: secondaryItemsFirstGroup__soy79.items, label: secondaryItemsFirstGroup__soy79.label, maxItems: defaultMaxSecondaryItems__soy99, separator: secondaryItemsFirstGroup__soy79.separator && (secondaryDropdownItemsSecondGroup__soy105 != null), type: 'group'} : null;
+  var items__soy109 = secondaryDropdownItemsFirstGroup__soy107 && secondaryDropdownItemsSecondGroup__soy105 ? [primaryDropdownItems__soy103, secondaryDropdownItemsFirstGroup__soy107, secondaryDropdownItemsSecondGroup__soy105] : secondaryDropdownItemsFirstGroup__soy107 ? [primaryDropdownItems__soy103, secondaryDropdownItemsFirstGroup__soy107] : [primaryDropdownItems__soy103];
+  var showMoreButton__soy111 = showingItems__soy101 < totalItems__soy91 ? ((viewMoreURL != null) ? {buttonStyle: 'secondary', href: viewMoreURL, label: 'More'} : {label: 'More', style: 'secondary'}) : null;
+  var trigger__soy118 = function() {
     $templateAlias2({spritemap: spritemap, symbol: 'plus'}, opt_ijData);
   };
-  var param132 = '';
-  if (showMoreButton__soy108) {
-    var msg_2_8004490453579465583__soy1989 = '';
+  var param135 = '';
+  if (showMoreButton__soy111) {
+    var msg_2_8004490453579465583__soy1995 = '';
     /** @desc Says how many items of the total are being showed */
-    var MSG_EXTERNAL_8004490453579465583 = goog.getMsg('showing-{$showingItems}-of-{$totalItems}-elements', {'showingItems': showingItems__soy98, 'totalItems': totalItems__soy88});
-    msg_2_8004490453579465583__soy1989 += MSG_EXTERNAL_8004490453579465583;
-    param132 += msg_2_8004490453579465583__soy1989;
+    var MSG_EXTERNAL_8004490453579465583 = goog.getMsg('showing-{$showingItems}-of-{$totalItems}-elements', {'showingItems': showingItems__soy101, 'totalItems': totalItems__soy91});
+    msg_2_8004490453579465583__soy1995 += MSG_EXTERNAL_8004490453579465583;
+    param135 += msg_2_8004490453579465583__soy1995;
   }
-  var param160 = '';
+  var param164 = '';
   if (triggerTitle) {
-    param160 += triggerTitle;
+    param164 += triggerTitle;
   } else {
-    var msg_3_7387635272539030076__soy1991 = '';
+    var msg_3_7387635272539030076__soy1997 = '';
     /** @desc  */
     var MSG_EXTERNAL_7387635272539030076 = goog.getMsg('new');
-    msg_3_7387635272539030076__soy1991 += MSG_EXTERNAL_7387635272539030076;
-    param160 += msg_3_7387635272539030076__soy1991;
+    msg_3_7387635272539030076__soy1997 += MSG_EXTERNAL_7387635272539030076;
+    param164 += msg_3_7387635272539030076__soy1997;
   }
-  $templateAlias1({button: showMoreButton__soy108, caption: param132, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick}, expanded: expanded, helpText: showMoreButton__soy108 ? helpText : null, id: id, items: items__soy106, itemsIconAlignment: itemsIconAlignment, label: trigger__soy115, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerClasses: triggerClasses, triggerTitle: param160}, opt_ijData);
+  $templateAlias1({button: showMoreButton__soy111, caption: param135, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick}, expanded: expanded, helpText: showMoreButton__soy111 ? helpText : null, id: id, items: items__soy109, itemsIconAlignment: itemsIconAlignment, label: trigger__soy118, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerClasses: triggerClasses, triggerTitle: param164}, opt_ijData);
 };
@@ -129,2 +131,3 @@ exports.render = $render;
  *  maxTotalItems: (null|number|undefined),
+ *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  secondaryItems: (!Array<?>|null|undefined),
@@ -141,4 +144,4 @@ *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-exports.render.params = ["primaryItems","spritemap","_handleButtonClick","_handleItemClick","disabled","elementClasses","expanded","helpText","id","itemsIconAlignment","maxPrimaryItems","maxSecondaryItems","maxTotalItems","secondaryItems","triggerClasses","triggerTitle","viewMoreURL"];
-exports.render.types = {"primaryItems":"list<?>","spritemap":"string","_handleButtonClick":"any","_handleItemClick":"any","disabled":"bool","elementClasses":"string","expanded":"bool","helpText":"string","id":"string","itemsIconAlignment":"string","maxPrimaryItems":"int","maxSecondaryItems":"int","maxTotalItems":"int","secondaryItems":"list<?>","triggerClasses":"string","triggerTitle":"string","viewMoreURL":"string"};
+exports.render.params = ["primaryItems","spritemap","_handleButtonClick","_handleItemClick","disabled","elementClasses","expanded","helpText","id","itemsIconAlignment","maxPrimaryItems","maxSecondaryItems","maxTotalItems","preferredAlign","secondaryItems","triggerClasses","triggerTitle","viewMoreURL"];
+exports.render.types = {"primaryItems":"list<?>","spritemap":"string","_handleButtonClick":"any","_handleItemClick":"any","disabled":"bool","elementClasses":"string","expanded":"bool","helpText":"string","id":"string","itemsIconAlignment":"string","maxPrimaryItems":"int","maxSecondaryItems":"int","maxTotalItems":"int","preferredAlign":"string","secondaryItems":"list<?>","triggerClasses":"string","triggerTitle":"string","viewMoreURL":"string"};
 templates = exports;
@@ -145,0 +148,0 @@ return exports;

src/ClayDropdown.js

@@ -8,3 +8,3 @@ import 'clay-icon';
 
-import itemsValidator from './items_validator';
+import {itemsValidator, preferredAlign} from './validators';
 import templates from './ClayDropdown.soy.js';
@@ -133,2 +133,11 @@
 	/**
+	 * The preferred alignment for the dropdown content.
+	 * @default BottomLeft
+	 * @instance
+	 * @memberof ClayDropdown
+	 * @type {?(string|undefined)}
+	 */
+	preferredAlign: preferredAlign.value('BottomLeft'),
+
+	/**
 	 * Flag to indicate if menu has a search field and search through elements
@@ -135,0 +144,0 @@ * is possible.

src/ClayDropdown.soy.js

@@ -61,2 +61,4 @@ /* jshint ignore:start */
   var label = soy.asserts.assertType(opt_data.label == null || goog.isFunction(opt_data.label) || (goog.isString(opt_data.label) || opt_data.label instanceof goog.soy.data.SanitizedContent), 'label', opt_data.label, '!goog.soy.data.SanitizedContent|function()|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var preferredAlign = soy.asserts.assertType(opt_data.preferredAlign == null || (goog.isString(opt_data.preferredAlign) || opt_data.preferredAlign instanceof goog.soy.data.SanitizedContent), 'preferredAlign', opt_data.preferredAlign, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {boolean|null|undefined} */
@@ -72,3 +74,3 @@ var searchable = soy.asserts.assertType(opt_data.searchable == null || (goog.isBoolean(opt_data.searchable) || opt_data.searchable === 1 || opt_data.searchable === 0), 'searchable', opt_data.searchable, 'boolean|null|undefined');
   var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || (goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent), 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var trigger__soy210 = function() {
+  var trigger__soy215 = function() {
     if (icon) {
@@ -84,3 +86,3 @@ $templateAlias2({elementClasses: label ? 'inline-item inline-item-before' : '', spritemap: spritemap, symbol: icon}, opt_ijData);
   };
-  $templateAlias1({button: button, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick}, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy210, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle}, opt_ijData);
+  $templateAlias1({button: button, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick}, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy215, preferredAlign: preferredAlign, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle}, opt_ijData);
 };
@@ -102,2 +104,3 @@ exports.render = $render;
  *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+ *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  searchable: (boolean|null|undefined),
@@ -115,4 +118,4 @@ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-exports.render.params = ["items","spritemap","_handleButtonClick","_handleItemClick","button","disabled","elementClasses","expanded","icon","id","itemsIconAlignment","label","searchable","style","triggerClasses","triggerSize","triggerTitle"];
-exports.render.types = {"items":"list<?>","spritemap":"string","_handleButtonClick":"any","_handleItemClick":"any","button":"?","disabled":"bool","elementClasses":"string","expanded":"bool","icon":"string","id":"string","itemsIconAlignment":"string","label":"html|string","searchable":"bool","style":"string","triggerClasses":"string","triggerSize":"string","triggerTitle":"string"};
+exports.render.params = ["items","spritemap","_handleButtonClick","_handleItemClick","button","disabled","elementClasses","expanded","icon","id","itemsIconAlignment","label","preferredAlign","searchable","style","triggerClasses","triggerSize","triggerTitle"];
+exports.render.types = {"items":"list<?>","spritemap":"string","_handleButtonClick":"any","_handleItemClick":"any","button":"?","disabled":"bool","elementClasses":"string","expanded":"bool","icon":"string","id":"string","itemsIconAlignment":"string","label":"html|string","preferredAlign":"string","searchable":"bool","style":"string","triggerClasses":"string","triggerSize":"string","triggerTitle":"string"};
 templates = exports;
@@ -119,0 +122,0 @@ return exports;

src/ClayDropdownBase.js

@@ -14,3 +14,3 @@ import 'clay-button';
 
-import itemsValidator from './items_validator';
+import {itemsValidator, preferredAlign} from './validators';
 import templates from './ClayDropdownBase.soy.js';
@@ -153,3 +153,3 @@
 					alignElement,
-					Align.BottomLeft
+					this.preferredAlign
 				);
@@ -224,2 +224,31 @@ }
 	/**
+	 * Set preferred alignment with Align API.
+	 * @private
+	 * @param {!string} value
+	 * @return {number}
+	 */
+	_setPreferredAlign(value) {
+		switch (value) {
+		case 'TopCenter':
+			return Align.TopCenter;
+		case 'RightCenter':
+			return Align.RightCenter;
+		case 'BottomCenter':
+			return Align.BottomCenter;
+		case 'LeftCenter':
+			return Align.LeftCenter;
+		case 'TopRight':
+			return Align.TopRight;
+		case 'BottomRight':
+			return Align.BottomRight;
+		case 'BottomLeft':
+			return Align.BottomLeft;
+		case 'TopLeft':
+			return Align.TopLeft;
+		default:
+			return Align.BottomLeft;
+		}
+	}
+
+	/**
 	 * @inheritDoc
@@ -402,2 +431,13 @@ */
 	/**
+	 * The preferred alignment for the dropdown content.
+	 * @default BottomLeft
+	 * @instance
+	 * @memberof ClayDropdownBase
+	 * @type {?(string|undefined)}
+	 */
+	preferredAlign: preferredAlign
+		.setter('_setPreferredAlign')
+		.value('BottomLeft'),
+
+	/**
 	 * Flag to indicate if menu has a search field and search through elements
@@ -404,0 +444,0 @@ * is possible.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

695472

increased by1.95%

Lines of code

6478

increased by2.92%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedclay-button@^2.3.2

• Updatedclay-checkbox@^2.3.2

• Updatedclay-component@^2.3.2

• Updatedclay-icon@^2.3.2

• Updatedclay-link@^2.3.2

• Updatedclay-portal@^2.3.2

• Updatedclay-radio@^2.3.2