clay-card - npm Package Compare versions

Comparing version 2.15.1 to 2.16.0

lib/ClayCardBase.js

@@ -121,2 +121,11 @@ 'use strict';
 	/**
+  * CSS classes for the aspect ratio images
+  * @default aspect-ratio-item-center-middle aspect-ratio-item-fluid
+  * @instance
+  * @memberof ClayCardBase
+  * @type {?(string|undefined)}
+  */
+	aspectRatioClasses: _metalState.Config.string().value('aspect-ratio-item-center-middle aspect-ratio-item-fluid'),
+
+	/**
   * Content Renderer name of card.
@@ -123,0 +132,0 @@ * @default image

lib/ClayCardBase.soy.js

@@ -64,2 +64,3 @@ 'use strict';
    *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -108,2 +109,4 @@ *  disabled: (boolean|null|undefined),
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent, 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     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');
@@ -154,3 +157,3 @@ /** @type {boolean|null|undefined} */
     var subtitle = soy.asserts.assertType(opt_data.subtitle == null || goog.isString(opt_data.subtitle) || opt_data.subtitle instanceof goog.soy.data.SanitizedContent, 'subtitle', opt_data.subtitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var attributes__soy32 = function attributes__soy32() {
+    var attributes__soy33 = function attributes__soy33() {
       incrementalDom.attr('class', 'card-type-asset' + (selectable ? ' form-check form-check-card form-check-top-left' : ' card') + (elementClasses ? ' ' + elementClasses : ''));
@@ -161,11 +164,11 @@ if (id) {
     };
-    var variant__soy53 = ($$temp = contentRenderer) == null ? '' : $$temp;
-    var descriptiveArea__soy55 = function descriptiveArea__soy55() {
-      soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), variant__soy53, false)(opt_data, null, opt_ijData);
+    var variant__soy54 = ($$temp = contentRenderer) == null ? '' : $$temp;
+    var descriptiveArea__soy56 = function descriptiveArea__soy56() {
+      soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), variant__soy54, false)(opt_data, null, opt_ijData);
     };
-    var visualArea__soy69 = function visualArea__soy69() {
-      soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), variant__soy53, false)(opt_data, null, opt_ijData);
+    var visualArea__soy70 = function visualArea__soy70() {
+      soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), variant__soy54, false)(opt_data, null, opt_ijData);
     };
     incrementalDom.elementOpenStart('div');
-    attributes__soy32();
+    attributes__soy33();
     incrementalDom.elementOpenEnd();
@@ -179,8 +182,8 @@ if (selectable) {
       incrementalDom.elementOpenEnd();
-      var param94 = function param94() {
-        visualArea__soy69();
+      var param96 = function param96() {
+        visualArea__soy70();
       };
-      $templateAlias1({ checked: selected, disabled: disabled, events: { change: _handleItemCheckboxClick }, labelContent: param94, name: inputName, value: inputValue }, null, opt_ijData);
+      $templateAlias1({ checked: selected, disabled: disabled, events: { change: _handleItemCheckboxClick }, labelContent: param96, name: inputName, value: inputValue }, null, opt_ijData);
       incrementalDom.elementClose('div');
-      descriptiveArea__soy55();
+      descriptiveArea__soy56();
       incrementalDom.elementClose('div');
@@ -191,5 +194,5 @@ } else {
       incrementalDom.elementOpenEnd();
-      visualArea__soy69();
+      visualArea__soy70();
       incrementalDom.elementClose('div');
-      descriptiveArea__soy55();
+      descriptiveArea__soy56();
     }
@@ -206,2 +209,3 @@ incrementalDom.elementClose('div');
    *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -254,3 +258,3 @@ *  disabled: (boolean|null|undefined),
    */
-  function __deltemplate_s110_04cead22(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s112_04cead22(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -305,12 +309,12 @@ var $$temp;
       incrementalDom.elementOpenEnd();
-      var label163List = labels;
-      var label163ListLen = label163List.length;
-      for (var label163Index = 0; label163Index < label163ListLen; label163Index++) {
-        var label163Data = label163List[label163Index];
-        if (label163Data.label) {
-          $templateAlias3({ label: label163Data.label, style: label163Data.style }, null, opt_ijData);
+      var label165List = labels;
+      var label165ListLen = label165List.length;
+      for (var label165Index = 0; label165Index < label165ListLen; label165Index++) {
+        var label165Data = label165List[label165Index];
+        if (label165Data.label) {
+          $templateAlias3({ label: label165Data.label, style: label165Data.style }, null, opt_ijData);
         } else {
-          $templateAlias3({ label: label163Data, style: labelStylesMap ? ($$temp = labelStylesMap[label163Data]) == null ? labelStylesMap['*'] : $$temp : null }, null, opt_ijData);
+          $templateAlias3({ label: label165Data, style: labelStylesMap ? ($$temp = labelStylesMap[label165Data]) == null ? labelStylesMap['*'] : $$temp : null }, null, opt_ijData);
         }
-        if (!(label163Index == label163ListLen - 1)) {
+        if (!(label165Index == label165ListLen - 1)) {
           incrementalDom.text(' ');
@@ -323,10 +327,10 @@ }
     if (actionItems && spritemap) {
-      var msg_3803__soy3804 = '';
+      var msg_3817__soy3818 = '';
       /** @desc  */
       var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-      msg_3803__soy3804 += MSG_EXTERNAL_6305962755687847469;
+      msg_3817__soy3818 += MSG_EXTERNAL_6305962755687847469;
       incrementalDom.elementOpenStart('div');
       incrementalDom.attr('class', 'autofit-col');
       incrementalDom.elementOpenEnd();
-      $templateAlias4({ events: { itemClicked: _handleActionItemClicked }, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3803__soy3804 }, null, opt_ijData);
+      $templateAlias4({ events: { itemClicked: _handleActionItemClicked }, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3817__soy3818 }, null, opt_ijData);
       incrementalDom.elementClose('div');
@@ -337,3 +341,3 @@ }
   }
-  exports.__deltemplate_s110_04cead22 = __deltemplate_s110_04cead22;
+  exports.__deltemplate_s112_04cead22 = __deltemplate_s112_04cead22;
   /**
@@ -352,10 +356,11 @@ * @typedef {{
    */
-  __deltemplate_s110_04cead22.Params;
+  __deltemplate_s112_04cead22.Params;
   if (goog.DEBUG) {
-    __deltemplate_s110_04cead22.soyTemplateName = 'ClayCardBase.__deltemplate_s110_04cead22';
+    __deltemplate_s112_04cead22.soyTemplateName = 'ClayCardBase.__deltemplate_s112_04cead22';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), '', 0, __deltemplate_s110_04cead22);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), '', 0, __deltemplate_s112_04cead22);
 
   /**
    * @param {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -378,6 +383,8 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  function __deltemplate_s186_acd6bb5f(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s188_acd6bb5f(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
     opt_data = opt_data || {};
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent, 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var icon = soy.asserts.assertType(opt_data.icon == null || goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent, 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -405,5 +412,6 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   }
-  exports.__deltemplate_s186_acd6bb5f = __deltemplate_s186_acd6bb5f;
+  exports.__deltemplate_s188_acd6bb5f = __deltemplate_s188_acd6bb5f;
   /**
    * @typedef {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -422,10 +430,10 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  __deltemplate_s186_acd6bb5f.Params;
+  __deltemplate_s188_acd6bb5f.Params;
   if (goog.DEBUG) {
-    __deltemplate_s186_acd6bb5f.soyTemplateName = 'ClayCardBase.__deltemplate_s186_acd6bb5f';
+    __deltemplate_s188_acd6bb5f.soyTemplateName = 'ClayCardBase.__deltemplate_s188_acd6bb5f';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), '', 0, __deltemplate_s186_acd6bb5f);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), '', 0, __deltemplate_s188_acd6bb5f);
 
-  exports.render.params = ["title", "_handleActionItemClicked", "_handleItemCheckboxClick", "actionAriaLabel", "actionItems", "contentRenderer", "disabled", "elementClasses", "href", "icon", "id", "imageAlt", "imageSrc", "inputName", "inputValue", "labels", "labelStylesMap", "selectable", "selected", "spritemap", "stickerClasses", "stickerIcon", "stickerImageAlt", "stickerImageSrc", "stickerLabel", "stickerShape", "stickerStyle", "subtitle"];
-  exports.render.types = { "title": "string", "_handleActionItemClicked": "any", "_handleItemCheckboxClick": "any", "actionAriaLabel": "string", "actionItems": "list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>", "contentRenderer": "string", "disabled": "bool", "elementClasses": "string", "href": "string", "icon": "string", "id": "string", "imageAlt": "string", "imageSrc": "string", "inputName": "string", "inputValue": "string", "labels": "list<?>", "labelStylesMap": "?", "selectable": "bool", "selected": "bool", "spritemap": "string", "stickerClasses": "string", "stickerIcon": "string", "stickerImageAlt": "string", "stickerImageSrc": "string", "stickerLabel": "string", "stickerShape": "string", "stickerStyle": "string", "subtitle": "string" };
+  exports.render.params = ["title", "_handleActionItemClicked", "_handleItemCheckboxClick", "actionAriaLabel", "actionItems", "aspectRatioClasses", "contentRenderer", "disabled", "elementClasses", "href", "icon", "id", "imageAlt", "imageSrc", "inputName", "inputValue", "labels", "labelStylesMap", "selectable", "selected", "spritemap", "stickerClasses", "stickerIcon", "stickerImageAlt", "stickerImageSrc", "stickerLabel", "stickerShape", "stickerStyle", "subtitle"];
+  exports.render.types = { "title": "string", "_handleActionItemClicked": "any", "_handleItemCheckboxClick": "any", "actionAriaLabel": "string", "actionItems": "list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>", "aspectRatioClasses": "string", "contentRenderer": "string", "disabled": "bool", "elementClasses": "string", "href": "string", "icon": "string", "id": "string", "imageAlt": "string", "imageSrc": "string", "inputName": "string", "inputValue": "string", "labels": "list<?>", "labelStylesMap": "?", "selectable": "bool", "selected": "bool", "spritemap": "string", "stickerClasses": "string", "stickerIcon": "string", "stickerImageAlt": "string", "stickerImageSrc": "string", "stickerLabel": "string", "stickerShape": "string", "stickerStyle": "string", "subtitle": "string" };
   exports.templates = templates = exports;
@@ -432,0 +440,0 @@ return exports;

lib/ClayFileCard.soy.js

@@ -138,6 +138,6 @@ 'use strict';
     var subtitle = soy.asserts.assertType(opt_data.subtitle == null || goog.isString(opt_data.subtitle) || opt_data.subtitle instanceof goog.soy.data.SanitizedContent, 'subtitle', opt_data.subtitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var classes__soy323 = '';
-    classes__soy323 += 'file-card';
-    classes__soy323 += elementClasses ? ' ' + elementClasses : '';
-    $templateAlias1({ actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'file', disabled: disabled, elementClasses: classes__soy323, events: { itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled }, href: href, icon: ($$temp = icon) == null ? 'documents-and-media' : $$temp, id: id, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title }, null, opt_ijData);
+    var classes__soy326 = '';
+    classes__soy326 += 'file-card';
+    classes__soy326 += elementClasses ? ' ' + elementClasses : '';
+    $templateAlias1({ actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'file', disabled: disabled, elementClasses: classes__soy326, events: { itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled }, href: href, icon: ($$temp = icon) == null ? 'documents-and-media' : $$temp, id: id, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title }, null, opt_ijData);
   }
@@ -181,2 +181,3 @@ exports.render = $render;
    * @param {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -199,3 +200,3 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  function __deltemplate_s360_a0f52d4d(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s363_a0f52d4d(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -205,2 +206,4 @@ var $$temp;
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent, 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var icon = soy.asserts.assertType(opt_data.icon == null || goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent, 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -238,5 +241,6 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   }
-  exports.__deltemplate_s360_a0f52d4d = __deltemplate_s360_a0f52d4d;
+  exports.__deltemplate_s363_a0f52d4d = __deltemplate_s363_a0f52d4d;
   /**
    * @typedef {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -255,7 +259,7 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  __deltemplate_s360_a0f52d4d.Params;
+  __deltemplate_s363_a0f52d4d.Params;
   if (goog.DEBUG) {
-    __deltemplate_s360_a0f52d4d.soyTemplateName = 'ClayFileCard.__deltemplate_s360_a0f52d4d';
+    __deltemplate_s363_a0f52d4d.soyTemplateName = 'ClayFileCard.__deltemplate_s363_a0f52d4d';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'file', 0, __deltemplate_s360_a0f52d4d);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'file', 0, __deltemplate_s363_a0f52d4d);
 
@@ -262,0 +266,0 @@ exports.render.params = ["spritemap", "title", "_handleActionItemClicked", "_handleItemToggled", "actionAriaLabel", "actionItems", "disabled", "elementClasses", "href", "icon", "id", "inputName", "inputValue", "labels", "labelStylesMap", "selectable", "selected", "stickerClasses", "stickerIcon", "stickerImageAlt", "stickerImageSrc", "stickerLabel", "stickerShape", "stickerStyle", "subtitle"];

lib/ClayHorizontalCard.soy.js

@@ -107,3 +107,3 @@ 'use strict';
     var selected = soy.asserts.assertType(opt_data.selected == null || goog.isBoolean(opt_data.selected) || opt_data.selected === 1 || opt_data.selected === 0, 'selected', opt_data.selected, 'boolean|null|undefined');
-    var attributes__soy422 = function attributes__soy422() {
+    var attributes__soy426 = function attributes__soy426() {
       incrementalDom.attr('class', 'card-type-directory' + (selectable ? ' form-check form-check-card form-check-middle-left' : ' card card-horizontal') + (elementClasses ? ' ' + elementClasses : ''));
@@ -114,19 +114,19 @@ if (id) {
     };
-    var descriptiveArea__soy443 = function descriptiveArea__soy443() {
+    var descriptiveArea__soy447 = function descriptiveArea__soy447() {
       $descriptiveArea(opt_data, null, opt_ijData);
     };
     incrementalDom.elementOpenStart('div');
-    attributes__soy422();
+    attributes__soy426();
     incrementalDom.elementOpenEnd();
     if (selectable) {
-      var param464 = function param464() {
+      var param468 = function param468() {
         incrementalDom.elementOpenStart('div');
         incrementalDom.attr('class', 'card card-horizontal');
         incrementalDom.elementOpenEnd();
-        descriptiveArea__soy443();
+        descriptiveArea__soy447();
         incrementalDom.elementClose('div');
       };
-      $templateAlias1({ checked: selected, disabled: disabled, events: { change: _handleItemCheckboxClick }, labelContent: param464, name: inputName, value: inputValue }, null, opt_ijData);
+      $templateAlias1({ checked: selected, disabled: disabled, events: { change: _handleItemCheckboxClick }, labelContent: param468, name: inputName, value: inputValue }, null, opt_ijData);
     } else {
-      descriptiveArea__soy443();
+      descriptiveArea__soy447();
     }
@@ -217,10 +217,10 @@ incrementalDom.elementClose('div');
     if (actionItems) {
-      var msg_3806__soy3807 = '';
+      var msg_3820__soy3821 = '';
       /** @desc  */
       var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-      msg_3806__soy3807 += MSG_EXTERNAL_6305962755687847469;
+      msg_3820__soy3821 += MSG_EXTERNAL_6305962755687847469;
       incrementalDom.elementOpenStart('div');
       incrementalDom.attr('class', 'autofit-col');
       incrementalDom.elementOpenEnd();
-      $templateAlias4({ events: { itemClicked: _handleActionItemClicked }, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3806__soy3807 }, null, opt_ijData);
+      $templateAlias4({ events: { itemClicked: _handleActionItemClicked }, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3820__soy3821 }, null, opt_ijData);
       incrementalDom.elementClose('div');
@@ -227,0 +227,0 @@ }

lib/ClayImageCard.js

@@ -116,2 +116,11 @@ 'use strict';
 	/**
+  * CSS classes for the aspect ratio images
+  * @default aspect-ratio-item-center-middle aspect-ratio-item-fluid
+  * @instance
+  * @memberof ClayImageCard
+  * @type {?(string|undefined)}
+  */
+	aspectRatioClasses: _metalState.Config.string().value('aspect-ratio-item-center-middle aspect-ratio-item-fluid'),
+
+	/**
   * Data to add to the element.
@@ -118,0 +127,0 @@ * @default undefined

lib/ClayImageCard.soy.js

@@ -59,2 +59,3 @@ 'use strict';
    *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  disabled: (boolean|null|undefined),
@@ -100,2 +101,4 @@ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
     var actionItems = soy.asserts.assertType(opt_data.actionItems == null || goog.isArray(opt_data.actionItems), 'actionItems', opt_data.actionItems, '!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent, 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {boolean|null|undefined} */
@@ -145,6 +148,6 @@ var disabled = soy.asserts.assertType(opt_data.disabled == null || goog.isBoolean(opt_data.disabled) || opt_data.disabled === 1 || opt_data.disabled === 0, 'disabled', opt_data.disabled, 'boolean|null|undefined');
     var subtitle = soy.asserts.assertType(opt_data.subtitle == null || goog.isString(opt_data.subtitle) || opt_data.subtitle instanceof goog.soy.data.SanitizedContent, 'subtitle', opt_data.subtitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var classes__soy624 = '';
-    classes__soy624 += 'image-card';
-    classes__soy624 += elementClasses ? ' ' + elementClasses : '';
-    $templateAlias1({ actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'image', disabled: disabled, elementClasses: classes__soy624, events: { itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled }, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title }, null, opt_ijData);
+    var classes__soy629 = '';
+    classes__soy629 += 'image-card';
+    classes__soy629 += elementClasses ? ' ' + elementClasses : '';
+    $templateAlias1({ actionAriaLabel: actionAriaLabel, actionItems: actionItems, aspectRatioClasses: aspectRatioClasses, contentRenderer: 'image', disabled: disabled, elementClasses: classes__soy629, events: { itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled }, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title }, null, opt_ijData);
   }
@@ -159,2 +162,3 @@ exports.render = $render;
    *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  disabled: (boolean|null|undefined),
@@ -191,2 +195,3 @@ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    * @param {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -209,3 +214,3 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  function __deltemplate_s663_970abbf1(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s669_970abbf1(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -215,2 +220,4 @@ var $$temp;
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent, 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var icon = soy.asserts.assertType(opt_data.icon == null || goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent, 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -237,18 +244,19 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var stickerStyle = soy.asserts.assertType(opt_data.stickerStyle == null || goog.isString(opt_data.stickerStyle) || opt_data.stickerStyle instanceof goog.soy.data.SanitizedContent, 'stickerStyle', opt_data.stickerStyle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var aspectRatioClasses__soy676 = '';
-    aspectRatioClasses__soy676 += 'aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid';
-    aspectRatioClasses__soy676 += !imageSrc && icon && spritemap ? ' card-type-asset-icon' : '';
+    var defaultAspectRatioClasses__soy683 = ($$temp = aspectRatioClasses) == null ? 'aspect-ratio-item-center-middle aspect-ratio-item-fluid' : $$temp;
     if (imageSrc) {
-      var imageAttributes__soy686 = function imageAttributes__soy686() {
+      var imageAttributes__soy688 = function imageAttributes__soy688() {
         incrementalDom.attr('alt', imageAlt ? imageAlt : '');
-        incrementalDom.attr('class', aspectRatioClasses__soy676);
+        incrementalDom.attr('class', 'aspect-ratio-item ' + defaultAspectRatioClasses__soy683);
         incrementalDom.attr('src', imageSrc);
       };
       incrementalDom.elementOpenStart('img');
-      imageAttributes__soy686();
+      imageAttributes__soy688();
       incrementalDom.elementOpenEnd();
       incrementalDom.elementClose('img');
     } else if (icon && spritemap) {
+      var iconAspectRatioClasses__soy705 = '';
+      iconAspectRatioClasses__soy705 += defaultAspectRatioClasses__soy683;
+      iconAspectRatioClasses__soy705 += !imageSrc && icon && spritemap ? ' card-type-asset-icon' : '';
       incrementalDom.elementOpenStart('div');
-      incrementalDom.attr('class', aspectRatioClasses__soy676);
+      incrementalDom.attr('class', iconAspectRatioClasses__soy705);
       incrementalDom.elementOpenEnd();
@@ -262,5 +270,6 @@ $templateAlias2({ spritemap: spritemap, symbol: icon }, null, opt_ijData);
   }
-  exports.__deltemplate_s663_970abbf1 = __deltemplate_s663_970abbf1;
+  exports.__deltemplate_s669_970abbf1 = __deltemplate_s669_970abbf1;
   /**
    * @typedef {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -279,10 +288,10 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  __deltemplate_s663_970abbf1.Params;
+  __deltemplate_s669_970abbf1.Params;
   if (goog.DEBUG) {
-    __deltemplate_s663_970abbf1.soyTemplateName = 'ClayImageCard.__deltemplate_s663_970abbf1';
+    __deltemplate_s669_970abbf1.soyTemplateName = 'ClayImageCard.__deltemplate_s669_970abbf1';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'image', 0, __deltemplate_s663_970abbf1);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'image', 0, __deltemplate_s669_970abbf1);
 
-  exports.render.params = ["title", "_handleActionItemClicked", "_handleItemToggled", "actionAriaLabel", "actionItems", "disabled", "elementClasses", "href", "icon", "id", "imageAlt", "imageSrc", "inputName", "inputValue", "labels", "labelStylesMap", "selectable", "selected", "spritemap", "stickerClasses", "stickerIcon", "stickerImageAlt", "stickerImageSrc", "stickerLabel", "stickerShape", "stickerStyle", "subtitle"];
-  exports.render.types = { "title": "string", "_handleActionItemClicked": "any", "_handleItemToggled": "any", "actionAriaLabel": "string", "actionItems": "list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>", "disabled": "bool", "elementClasses": "string", "href": "string", "icon": "string", "id": "string", "imageAlt": "string", "imageSrc": "string", "inputName": "string", "inputValue": "string", "labels": "list<?>", "labelStylesMap": "?", "selectable": "bool", "selected": "bool", "spritemap": "string", "stickerClasses": "string", "stickerIcon": "string", "stickerImageAlt": "string", "stickerImageSrc": "string", "stickerLabel": "string", "stickerShape": "string", "stickerStyle": "string", "subtitle": "string" };
+  exports.render.params = ["title", "_handleActionItemClicked", "_handleItemToggled", "actionAriaLabel", "actionItems", "aspectRatioClasses", "disabled", "elementClasses", "href", "icon", "id", "imageAlt", "imageSrc", "inputName", "inputValue", "labels", "labelStylesMap", "selectable", "selected", "spritemap", "stickerClasses", "stickerIcon", "stickerImageAlt", "stickerImageSrc", "stickerLabel", "stickerShape", "stickerStyle", "subtitle"];
+  exports.render.types = { "title": "string", "_handleActionItemClicked": "any", "_handleItemToggled": "any", "actionAriaLabel": "string", "actionItems": "list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>", "aspectRatioClasses": "string", "disabled": "bool", "elementClasses": "string", "href": "string", "icon": "string", "id": "string", "imageAlt": "string", "imageSrc": "string", "inputName": "string", "inputValue": "string", "labels": "list<?>", "labelStylesMap": "?", "selectable": "bool", "selected": "bool", "spritemap": "string", "stickerClasses": "string", "stickerIcon": "string", "stickerImageAlt": "string", "stickerImageSrc": "string", "stickerLabel": "string", "stickerShape": "string", "stickerStyle": "string", "subtitle": "string" };
   exports.templates = templates = exports;
@@ -289,0 +298,0 @@ return exports;

lib/ClayUserCard.soy.js

@@ -122,6 +122,6 @@ 'use strict';
     var userColorClass = soy.asserts.assertType(opt_data.userColorClass == null || goog.isString(opt_data.userColorClass) || opt_data.userColorClass instanceof goog.soy.data.SanitizedContent, 'userColorClass', opt_data.userColorClass, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var classes__soy766 = '';
-    classes__soy766 += 'user-card';
-    classes__soy766 += elementClasses ? ' ' + elementClasses : '';
-    $templateAlias1({ actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'user', disabled: disabled, elementClasses: classes__soy766, events: { itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled }, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerStyle: userColorClass, subtitle: subtitle, title: name }, null, opt_ijData);
+    var classes__soy778 = '';
+    classes__soy778 += 'user-card';
+    classes__soy778 += elementClasses ? ' ' + elementClasses : '';
+    $templateAlias1({ actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'user', disabled: disabled, elementClasses: classes__soy778, events: { itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled }, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerStyle: userColorClass, subtitle: subtitle, title: name }, null, opt_ijData);
   }
@@ -174,3 +174,3 @@ exports.render = $render;
    */
-  function __deltemplate_s797_488cf0c1(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s809_488cf0c1(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -222,10 +222,10 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
     if (actionItems && spritemap) {
-      var msg_3809__soy3810 = '';
+      var msg_3823__soy3824 = '';
       /** @desc  */
       var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-      msg_3809__soy3810 += MSG_EXTERNAL_6305962755687847469;
+      msg_3823__soy3824 += MSG_EXTERNAL_6305962755687847469;
       incrementalDom.elementOpenStart('div');
       incrementalDom.attr('class', 'autofit-col');
       incrementalDom.elementOpenEnd();
-      $templateAlias3({ events: { itemClicked: _handleActionItemClicked }, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3809__soy3810 }, null, opt_ijData);
+      $templateAlias3({ events: { itemClicked: _handleActionItemClicked }, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3823__soy3824 }, null, opt_ijData);
       incrementalDom.elementClose('div');
@@ -236,3 +236,3 @@ }
   }
-  exports.__deltemplate_s797_488cf0c1 = __deltemplate_s797_488cf0c1;
+  exports.__deltemplate_s809_488cf0c1 = __deltemplate_s809_488cf0c1;
   /**
@@ -251,10 +251,11 @@ * @typedef {{
    */
-  __deltemplate_s797_488cf0c1.Params;
+  __deltemplate_s809_488cf0c1.Params;
   if (goog.DEBUG) {
-    __deltemplate_s797_488cf0c1.soyTemplateName = 'ClayUserCard.__deltemplate_s797_488cf0c1';
+    __deltemplate_s809_488cf0c1.soyTemplateName = 'ClayUserCard.__deltemplate_s809_488cf0c1';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), 'user', 0, __deltemplate_s797_488cf0c1);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), 'user', 0, __deltemplate_s809_488cf0c1);
 
   /**
    * @param {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -277,3 +278,3 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  function __deltemplate_s847_d12b8598(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s859_d12b8598(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -283,2 +284,4 @@ var $$temp;
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent, 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var icon = soy.asserts.assertType(opt_data.icon == null || goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent, 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -311,5 +314,6 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   }
-  exports.__deltemplate_s847_d12b8598 = __deltemplate_s847_d12b8598;
+  exports.__deltemplate_s859_d12b8598 = __deltemplate_s859_d12b8598;
   /**
    * @typedef {{
+   *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -328,7 +332,7 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
    */
-  __deltemplate_s847_d12b8598.Params;
+  __deltemplate_s859_d12b8598.Params;
   if (goog.DEBUG) {
-    __deltemplate_s847_d12b8598.soyTemplateName = 'ClayUserCard.__deltemplate_s847_d12b8598';
+    __deltemplate_s859_d12b8598.soyTemplateName = 'ClayUserCard.__deltemplate_s859_d12b8598';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'user', 0, __deltemplate_s847_d12b8598);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'user', 0, __deltemplate_s859_d12b8598);
 
@@ -335,0 +339,0 @@ exports.render.params = ["name", "_handleActionItemClicked", "_handleItemToggled", "actionAriaLabel", "actionItems", "disabled", "elementClasses", "href", "icon", "id", "imageAlt", "imageSrc", "inputName", "inputValue", "selectable", "selected", "spritemap", "subtitle", "userColorClass"];

package.json

 {
   "name": "clay-card",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "description": "Metal ClayCard component",
@@ -31,9 +31,9 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "clay-checkbox": "^2.15.1",
-    "clay-component": "^2.15.1",
-    "clay-dropdown": "^2.15.1",
-    "clay-icon": "^2.15.1",
-    "clay-label": "^2.15.1",
-    "clay-link": "^2.15.1",
-    "clay-sticker": "^2.15.1",
+    "clay-checkbox": "^2.16.0",
+    "clay-component": "^2.16.0",
+    "clay-dropdown": "^2.16.0",
+    "clay-icon": "^2.16.0",
+    "clay-label": "^2.16.0",
+    "clay-link": "^2.16.0",
+    "clay-sticker": "^2.16.0",
     "metal": "^2.16.0",
@@ -51,8 +51,8 @@ "metal-component": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay": "^2.15.1",
-    "clay-css": "^2.15.1",
+    "browserslist-config-clay": "^2.16.0",
+    "clay-css": "^2.16.0",
     "metal-dom": "^2.13.2",
     "metal-tools-soy": "^4.3.2",
     "webpack": "^3.0.0",
-    "webpack-config-clay": "^2.15.1"
+    "webpack-config-clay": "^2.16.0"
   },
@@ -62,3 +62,3 @@ "browserslist": [
   ],
-  "gitHead": "5d142f143cf0e04930a8e71dc65c039848505a05"
+  "gitHead": "224fc50ddb378c264b1df6f685f23473b8d3174a"
 }

src/__tests__/ClayImageCard.js

@@ -460,2 +460,14 @@ import ClayImageCard from '../ClayImageCard';
 
+	it('should render a ClayImageCard with aspect ratio classes', () => {
+		component = new ClayImageCard({
+			aspectRatioClasses:
+				'aspect-ratio-item-center-middle aspect-ratio-item-flush',
+			imageSrc: 'thumbnail_coffee.jpg',
+			spritemap: spritemap,
+			title: 'My Title',
+		});
+
+		expect(component).toMatchSnapshot();
+	});
+
 	it('should render a ClayImageCard with href', () => {
@@ -462,0 +474,0 @@ component = new ClayImageCard({

src/ClayCardBase.js

@@ -65,2 +65,13 @@ import 'clay-checkbox';
 	/**
+	 * CSS classes for the aspect ratio images
+	 * @default aspect-ratio-item-center-middle aspect-ratio-item-fluid
+	 * @instance
+	 * @memberof ClayCardBase
+	 * @type {?(string|undefined)}
+	 */
+	aspectRatioClasses: Config.string().value(
+		'aspect-ratio-item-center-middle aspect-ratio-item-fluid'
+	),
+
+	/**
 	 * Content Renderer name of card.
@@ -67,0 +78,0 @@ * @default image

src/ClayCardBase.soy.js

@@ -45,2 +45,3 @@ /* jshint ignore:start */
  *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -89,2 +90,4 @@ *  disabled: (boolean|null|undefined),
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || (goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent), 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   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');
@@ -135,3 +138,3 @@ /** @type {boolean|null|undefined} */
   var subtitle = soy.asserts.assertType(opt_data.subtitle == null || (goog.isString(opt_data.subtitle) || opt_data.subtitle instanceof goog.soy.data.SanitizedContent), 'subtitle', opt_data.subtitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var attributes__soy32 = function() {
+  var attributes__soy33 = function() {
     incrementalDom.attr('class', 'card-type-asset' + (selectable ? ' form-check form-check-card form-check-top-left' : ' card') + (elementClasses ? ' ' + elementClasses : ''));
@@ -142,11 +145,11 @@ if (id) {
   };
-  var variant__soy53 = ($$temp = contentRenderer) == null ? '' : $$temp;
-  var descriptiveArea__soy55 = function() {
-    soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), variant__soy53, false)(opt_data, null, opt_ijData);
+  var variant__soy54 = ($$temp = contentRenderer) == null ? '' : $$temp;
+  var descriptiveArea__soy56 = function() {
+    soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), variant__soy54, false)(opt_data, null, opt_ijData);
   };
-  var visualArea__soy69 = function() {
-    soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), variant__soy53, false)(opt_data, null, opt_ijData);
+  var visualArea__soy70 = function() {
+    soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), variant__soy54, false)(opt_data, null, opt_ijData);
   };
   incrementalDom.elementOpenStart('div');
-      attributes__soy32();
+      attributes__soy33();
   incrementalDom.elementOpenEnd();
@@ -160,8 +163,8 @@ if (selectable) {
         incrementalDom.elementOpenEnd();
-          var param94 = function() {
-            visualArea__soy69();
+          var param96 = function() {
+            visualArea__soy70();
           };
-          $templateAlias1({checked: selected, disabled: disabled, events: {change: _handleItemCheckboxClick}, labelContent: param94, name: inputName, value: inputValue}, null, opt_ijData);
+          $templateAlias1({checked: selected, disabled: disabled, events: {change: _handleItemCheckboxClick}, labelContent: param96, name: inputName, value: inputValue}, null, opt_ijData);
         incrementalDom.elementClose('div');
-        descriptiveArea__soy55();
+        descriptiveArea__soy56();
       incrementalDom.elementClose('div');
@@ -172,5 +175,5 @@ } else {
       incrementalDom.elementOpenEnd();
-        visualArea__soy69();
+        visualArea__soy70();
       incrementalDom.elementClose('div');
-      descriptiveArea__soy55();
+      descriptiveArea__soy56();
     }
@@ -187,2 +190,3 @@ incrementalDom.elementClose('div');
  *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -236,3 +240,3 @@ *  disabled: (boolean|null|undefined),
  */
-function __deltemplate_s110_04cead22(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s112_04cead22(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -287,12 +291,12 @@ var $$temp;
           incrementalDom.elementOpenEnd();
-            var label163List = labels;
-            var label163ListLen = label163List.length;
-            for (var label163Index = 0; label163Index < label163ListLen; label163Index++) {
-                var label163Data = label163List[label163Index];
-                if (label163Data.label) {
-                  $templateAlias3({label: label163Data.label, style: label163Data.style}, null, opt_ijData);
+            var label165List = labels;
+            var label165ListLen = label165List.length;
+            for (var label165Index = 0; label165Index < label165ListLen; label165Index++) {
+                var label165Data = label165List[label165Index];
+                if (label165Data.label) {
+                  $templateAlias3({label: label165Data.label, style: label165Data.style}, null, opt_ijData);
                 } else {
-                  $templateAlias3({label: label163Data, style: labelStylesMap ? (($$temp = labelStylesMap[label163Data]) == null ? labelStylesMap['*'] : $$temp) : null}, null, opt_ijData);
+                  $templateAlias3({label: label165Data, style: labelStylesMap ? (($$temp = labelStylesMap[label165Data]) == null ? labelStylesMap['*'] : $$temp) : null}, null, opt_ijData);
                 }
-                if (!(label163Index == label163ListLen - 1)) {
+                if (!(label165Index == label165ListLen - 1)) {
                   incrementalDom.text(' ');
@@ -305,10 +309,10 @@ }
       if (actionItems && spritemap) {
-        var msg_3803__soy3804 = '';
+        var msg_3817__soy3818 = '';
         /** @desc  */
         var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-        msg_3803__soy3804 += MSG_EXTERNAL_6305962755687847469;
+        msg_3817__soy3818 += MSG_EXTERNAL_6305962755687847469;
         incrementalDom.elementOpenStart('div');
             incrementalDom.attr('class', 'autofit-col');
         incrementalDom.elementOpenEnd();
-          $templateAlias4({events: {itemClicked: _handleActionItemClicked}, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3803__soy3804}, null, opt_ijData);
+          $templateAlias4({events: {itemClicked: _handleActionItemClicked}, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3817__soy3818}, null, opt_ijData);
         incrementalDom.elementClose('div');
@@ -319,3 +323,3 @@ }
 }
-exports.__deltemplate_s110_04cead22 = __deltemplate_s110_04cead22;
+exports.__deltemplate_s112_04cead22 = __deltemplate_s112_04cead22;
 /**
@@ -334,7 +338,7 @@ * @typedef {{
  */
-__deltemplate_s110_04cead22.Params;
+__deltemplate_s112_04cead22.Params;
 if (goog.DEBUG) {
-  __deltemplate_s110_04cead22.soyTemplateName = 'ClayCardBase.__deltemplate_s110_04cead22';
+  __deltemplate_s112_04cead22.soyTemplateName = 'ClayCardBase.__deltemplate_s112_04cead22';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), '', 0, __deltemplate_s110_04cead22);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), '', 0, __deltemplate_s112_04cead22);
 
@@ -344,2 +348,3 @@
  * @param {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -362,6 +367,8 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-function __deltemplate_s186_acd6bb5f(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s188_acd6bb5f(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
   opt_data = opt_data || {};
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || (goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent), 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -389,5 +396,6 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
 }
-exports.__deltemplate_s186_acd6bb5f = __deltemplate_s186_acd6bb5f;
+exports.__deltemplate_s188_acd6bb5f = __deltemplate_s188_acd6bb5f;
 /**
  * @typedef {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -406,10 +414,10 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-__deltemplate_s186_acd6bb5f.Params;
+__deltemplate_s188_acd6bb5f.Params;
 if (goog.DEBUG) {
-  __deltemplate_s186_acd6bb5f.soyTemplateName = 'ClayCardBase.__deltemplate_s186_acd6bb5f';
+  __deltemplate_s188_acd6bb5f.soyTemplateName = 'ClayCardBase.__deltemplate_s188_acd6bb5f';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), '', 0, __deltemplate_s186_acd6bb5f);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), '', 0, __deltemplate_s188_acd6bb5f);
 
-exports.render.params = ["title","_handleActionItemClicked","_handleItemCheckboxClick","actionAriaLabel","actionItems","contentRenderer","disabled","elementClasses","href","icon","id","imageAlt","imageSrc","inputName","inputValue","labels","labelStylesMap","selectable","selected","spritemap","stickerClasses","stickerIcon","stickerImageAlt","stickerImageSrc","stickerLabel","stickerShape","stickerStyle","subtitle"];
-exports.render.types = {"title":"string","_handleActionItemClicked":"any","_handleItemCheckboxClick":"any","actionAriaLabel":"string","actionItems":"list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>","contentRenderer":"string","disabled":"bool","elementClasses":"string","href":"string","icon":"string","id":"string","imageAlt":"string","imageSrc":"string","inputName":"string","inputValue":"string","labels":"list<?>","labelStylesMap":"?","selectable":"bool","selected":"bool","spritemap":"string","stickerClasses":"string","stickerIcon":"string","stickerImageAlt":"string","stickerImageSrc":"string","stickerLabel":"string","stickerShape":"string","stickerStyle":"string","subtitle":"string"};
+exports.render.params = ["title","_handleActionItemClicked","_handleItemCheckboxClick","actionAriaLabel","actionItems","aspectRatioClasses","contentRenderer","disabled","elementClasses","href","icon","id","imageAlt","imageSrc","inputName","inputValue","labels","labelStylesMap","selectable","selected","spritemap","stickerClasses","stickerIcon","stickerImageAlt","stickerImageSrc","stickerLabel","stickerShape","stickerStyle","subtitle"];
+exports.render.types = {"title":"string","_handleActionItemClicked":"any","_handleItemCheckboxClick":"any","actionAriaLabel":"string","actionItems":"list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>","aspectRatioClasses":"string","contentRenderer":"string","disabled":"bool","elementClasses":"string","href":"string","icon":"string","id":"string","imageAlt":"string","imageSrc":"string","inputName":"string","inputValue":"string","labels":"list<?>","labelStylesMap":"?","selectable":"bool","selected":"bool","spritemap":"string","stickerClasses":"string","stickerIcon":"string","stickerImageAlt":"string","stickerImageSrc":"string","stickerLabel":"string","stickerShape":"string","stickerStyle":"string","subtitle":"string"};
 templates = exports;
@@ -416,0 +424,0 @@ return exports;

src/ClayFileCard.soy.js

@@ -119,6 +119,6 @@ /* jshint ignore:start */
   var subtitle = soy.asserts.assertType(opt_data.subtitle == null || (goog.isString(opt_data.subtitle) || opt_data.subtitle instanceof goog.soy.data.SanitizedContent), 'subtitle', opt_data.subtitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var classes__soy323 = '';
-  classes__soy323 += 'file-card';
-  classes__soy323 += elementClasses ? ' ' + elementClasses : '';
-  $templateAlias1({actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'file', disabled: disabled, elementClasses: classes__soy323, events: {itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled}, href: href, icon: ($$temp = icon) == null ? 'documents-and-media' : $$temp, id: id, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title}, null, opt_ijData);
+  var classes__soy326 = '';
+  classes__soy326 += 'file-card';
+  classes__soy326 += elementClasses ? ' ' + elementClasses : '';
+  $templateAlias1({actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'file', disabled: disabled, elementClasses: classes__soy326, events: {itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled}, href: href, icon: ($$temp = icon) == null ? 'documents-and-media' : $$temp, id: id, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title}, null, opt_ijData);
 }
@@ -163,2 +163,3 @@ exports.render = $render;
  * @param {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -181,3 +182,3 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-function __deltemplate_s360_a0f52d4d(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s363_a0f52d4d(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -187,2 +188,4 @@ var $$temp;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || (goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent), 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -220,5 +223,6 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
 }
-exports.__deltemplate_s360_a0f52d4d = __deltemplate_s360_a0f52d4d;
+exports.__deltemplate_s363_a0f52d4d = __deltemplate_s363_a0f52d4d;
 /**
  * @typedef {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -237,7 +241,7 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-__deltemplate_s360_a0f52d4d.Params;
+__deltemplate_s363_a0f52d4d.Params;
 if (goog.DEBUG) {
-  __deltemplate_s360_a0f52d4d.soyTemplateName = 'ClayFileCard.__deltemplate_s360_a0f52d4d';
+  __deltemplate_s363_a0f52d4d.soyTemplateName = 'ClayFileCard.__deltemplate_s363_a0f52d4d';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'file', 0, __deltemplate_s360_a0f52d4d);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'file', 0, __deltemplate_s363_a0f52d4d);
 
@@ -244,0 +248,0 @@ exports.render.params = ["spritemap","title","_handleActionItemClicked","_handleItemToggled","actionAriaLabel","actionItems","disabled","elementClasses","href","icon","id","inputName","inputValue","labels","labelStylesMap","selectable","selected","stickerClasses","stickerIcon","stickerImageAlt","stickerImageSrc","stickerLabel","stickerShape","stickerStyle","subtitle"];

src/ClayHorizontalCard.soy.js

@@ -88,3 +88,3 @@ /* jshint ignore:start */
   var selected = soy.asserts.assertType(opt_data.selected == null || (goog.isBoolean(opt_data.selected) || opt_data.selected === 1 || opt_data.selected === 0), 'selected', opt_data.selected, 'boolean|null|undefined');
-  var attributes__soy422 = function() {
+  var attributes__soy426 = function() {
     incrementalDom.attr('class', 'card-type-directory' + (selectable ? ' form-check form-check-card form-check-middle-left' : ' card card-horizontal') + (elementClasses ? ' ' + elementClasses : ''));
@@ -95,19 +95,19 @@ if (id) {
   };
-  var descriptiveArea__soy443 = function() {
+  var descriptiveArea__soy447 = function() {
     $descriptiveArea(opt_data, null, opt_ijData);
   };
   incrementalDom.elementOpenStart('div');
-      attributes__soy422();
+      attributes__soy426();
   incrementalDom.elementOpenEnd();
     if (selectable) {
-      var param464 = function() {
+      var param468 = function() {
         incrementalDom.elementOpenStart('div');
             incrementalDom.attr('class', 'card card-horizontal');
         incrementalDom.elementOpenEnd();
-          descriptiveArea__soy443();
+          descriptiveArea__soy447();
         incrementalDom.elementClose('div');
       };
-      $templateAlias1({checked: selected, disabled: disabled, events: {change: _handleItemCheckboxClick}, labelContent: param464, name: inputName, value: inputValue}, null, opt_ijData);
+      $templateAlias1({checked: selected, disabled: disabled, events: {change: _handleItemCheckboxClick}, labelContent: param468, name: inputName, value: inputValue}, null, opt_ijData);
     } else {
-      descriptiveArea__soy443();
+      descriptiveArea__soy447();
     }
@@ -199,10 +199,10 @@ incrementalDom.elementClose('div');
       if (actionItems) {
-        var msg_3806__soy3807 = '';
+        var msg_3820__soy3821 = '';
         /** @desc  */
         var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-        msg_3806__soy3807 += MSG_EXTERNAL_6305962755687847469;
+        msg_3820__soy3821 += MSG_EXTERNAL_6305962755687847469;
         incrementalDom.elementOpenStart('div');
             incrementalDom.attr('class', 'autofit-col');
         incrementalDom.elementOpenEnd();
-          $templateAlias4({events: {itemClicked: _handleActionItemClicked}, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3806__soy3807}, null, opt_ijData);
+          $templateAlias4({events: {itemClicked: _handleActionItemClicked}, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3820__soy3821}, null, opt_ijData);
         incrementalDom.elementClose('div');
@@ -209,0 +209,0 @@ }

src/ClayImageCard.js

@@ -63,2 +63,13 @@ import 'clay-icon';
 	/**
+	 * CSS classes for the aspect ratio images
+	 * @default aspect-ratio-item-center-middle aspect-ratio-item-fluid
+	 * @instance
+	 * @memberof ClayImageCard
+	 * @type {?(string|undefined)}
+	 */
+	aspectRatioClasses: Config.string().value(
+		'aspect-ratio-item-center-middle aspect-ratio-item-fluid'
+	),
+
+	/**
 	 * Data to add to the element.
@@ -65,0 +76,0 @@ * @default undefined

src/ClayImageCard.soy.js

@@ -40,2 +40,3 @@ /* jshint ignore:start */
  *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  disabled: (boolean|null|undefined),
@@ -81,2 +82,4 @@ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
   var actionItems = soy.asserts.assertType(opt_data.actionItems == null || goog.isArray(opt_data.actionItems), 'actionItems', opt_data.actionItems, '!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || (goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent), 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {boolean|null|undefined} */
@@ -126,6 +129,6 @@ var disabled = soy.asserts.assertType(opt_data.disabled == null || (goog.isBoolean(opt_data.disabled) || opt_data.disabled === 1 || opt_data.disabled === 0), 'disabled', opt_data.disabled, 'boolean|null|undefined');
   var subtitle = soy.asserts.assertType(opt_data.subtitle == null || (goog.isString(opt_data.subtitle) || opt_data.subtitle instanceof goog.soy.data.SanitizedContent), 'subtitle', opt_data.subtitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var classes__soy624 = '';
-  classes__soy624 += 'image-card';
-  classes__soy624 += elementClasses ? ' ' + elementClasses : '';
-  $templateAlias1({actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'image', disabled: disabled, elementClasses: classes__soy624, events: {itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled}, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title}, null, opt_ijData);
+  var classes__soy629 = '';
+  classes__soy629 += 'image-card';
+  classes__soy629 += elementClasses ? ' ' + elementClasses : '';
+  $templateAlias1({actionAriaLabel: actionAriaLabel, actionItems: actionItems, aspectRatioClasses: aspectRatioClasses, contentRenderer: 'image', disabled: disabled, elementClasses: classes__soy629, events: {itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled}, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, labels: labels, labelStylesMap: labelStylesMap, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerClasses: stickerClasses, stickerIcon: stickerIcon, stickerImageAlt: stickerImageAlt, stickerImageSrc: stickerImageSrc, stickerLabel: stickerLabel, stickerShape: stickerShape, stickerStyle: stickerStyle, subtitle: subtitle, title: title}, null, opt_ijData);
 }
@@ -140,2 +143,3 @@ exports.render = $render;
  *  actionItems: (!Array<{href: (!goog.soy.data.SanitizedContent|string), label: (!goog.soy.data.SanitizedContent|string), separator: boolean}>|null|undefined),
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  disabled: (boolean|null|undefined),
@@ -173,2 +177,3 @@ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  * @param {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -191,3 +196,3 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-function __deltemplate_s663_970abbf1(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s669_970abbf1(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -197,2 +202,4 @@ var $$temp;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || (goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent), 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -219,18 +226,19 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var stickerStyle = soy.asserts.assertType(opt_data.stickerStyle == null || (goog.isString(opt_data.stickerStyle) || opt_data.stickerStyle instanceof goog.soy.data.SanitizedContent), 'stickerStyle', opt_data.stickerStyle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var aspectRatioClasses__soy676 = '';
-  aspectRatioClasses__soy676 += 'aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid';
-  aspectRatioClasses__soy676 += !imageSrc && icon && spritemap ? ' card-type-asset-icon' : '';
+  var defaultAspectRatioClasses__soy683 = ($$temp = aspectRatioClasses) == null ? 'aspect-ratio-item-center-middle aspect-ratio-item-fluid' : $$temp;
   if (imageSrc) {
-    var imageAttributes__soy686 = function() {
+    var imageAttributes__soy688 = function() {
       incrementalDom.attr('alt', imageAlt ? imageAlt : '');
-      incrementalDom.attr('class', aspectRatioClasses__soy676);
+      incrementalDom.attr('class', 'aspect-ratio-item ' + defaultAspectRatioClasses__soy683);
       incrementalDom.attr('src', imageSrc);
     };
     incrementalDom.elementOpenStart('img');
-        imageAttributes__soy686();
+        imageAttributes__soy688();
     incrementalDom.elementOpenEnd();
     incrementalDom.elementClose('img');
   } else if (icon && spritemap) {
+    var iconAspectRatioClasses__soy705 = '';
+    iconAspectRatioClasses__soy705 += defaultAspectRatioClasses__soy683;
+    iconAspectRatioClasses__soy705 += !imageSrc && icon && spritemap ? ' card-type-asset-icon' : '';
     incrementalDom.elementOpenStart('div');
-        incrementalDom.attr('class', aspectRatioClasses__soy676);
+        incrementalDom.attr('class', iconAspectRatioClasses__soy705);
     incrementalDom.elementOpenEnd();
@@ -244,5 +252,6 @@ $templateAlias2({spritemap: spritemap, symbol: icon}, null, opt_ijData);
 }
-exports.__deltemplate_s663_970abbf1 = __deltemplate_s663_970abbf1;
+exports.__deltemplate_s669_970abbf1 = __deltemplate_s669_970abbf1;
 /**
  * @typedef {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -261,10 +270,10 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-__deltemplate_s663_970abbf1.Params;
+__deltemplate_s669_970abbf1.Params;
 if (goog.DEBUG) {
-  __deltemplate_s663_970abbf1.soyTemplateName = 'ClayImageCard.__deltemplate_s663_970abbf1';
+  __deltemplate_s669_970abbf1.soyTemplateName = 'ClayImageCard.__deltemplate_s669_970abbf1';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'image', 0, __deltemplate_s663_970abbf1);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'image', 0, __deltemplate_s669_970abbf1);
 
-exports.render.params = ["title","_handleActionItemClicked","_handleItemToggled","actionAriaLabel","actionItems","disabled","elementClasses","href","icon","id","imageAlt","imageSrc","inputName","inputValue","labels","labelStylesMap","selectable","selected","spritemap","stickerClasses","stickerIcon","stickerImageAlt","stickerImageSrc","stickerLabel","stickerShape","stickerStyle","subtitle"];
-exports.render.types = {"title":"string","_handleActionItemClicked":"any","_handleItemToggled":"any","actionAriaLabel":"string","actionItems":"list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>","disabled":"bool","elementClasses":"string","href":"string","icon":"string","id":"string","imageAlt":"string","imageSrc":"string","inputName":"string","inputValue":"string","labels":"list<?>","labelStylesMap":"?","selectable":"bool","selected":"bool","spritemap":"string","stickerClasses":"string","stickerIcon":"string","stickerImageAlt":"string","stickerImageSrc":"string","stickerLabel":"string","stickerShape":"string","stickerStyle":"string","subtitle":"string"};
+exports.render.params = ["title","_handleActionItemClicked","_handleItemToggled","actionAriaLabel","actionItems","aspectRatioClasses","disabled","elementClasses","href","icon","id","imageAlt","imageSrc","inputName","inputValue","labels","labelStylesMap","selectable","selected","spritemap","stickerClasses","stickerIcon","stickerImageAlt","stickerImageSrc","stickerLabel","stickerShape","stickerStyle","subtitle"];
+exports.render.types = {"title":"string","_handleActionItemClicked":"any","_handleItemToggled":"any","actionAriaLabel":"string","actionItems":"list<[\n\t\thref: string,\n\t\tlabel: string,\n\t\tseparator: bool\n\t]>","aspectRatioClasses":"string","disabled":"bool","elementClasses":"string","href":"string","icon":"string","id":"string","imageAlt":"string","imageSrc":"string","inputName":"string","inputValue":"string","labels":"list<?>","labelStylesMap":"?","selectable":"bool","selected":"bool","spritemap":"string","stickerClasses":"string","stickerIcon":"string","stickerImageAlt":"string","stickerImageSrc":"string","stickerLabel":"string","stickerShape":"string","stickerStyle":"string","subtitle":"string"};
 templates = exports;
@@ -271,0 +280,0 @@ return exports;

src/ClayUserCard.soy.js

@@ -103,6 +103,6 @@ /* jshint ignore:start */
   var userColorClass = soy.asserts.assertType(opt_data.userColorClass == null || (goog.isString(opt_data.userColorClass) || opt_data.userColorClass instanceof goog.soy.data.SanitizedContent), 'userColorClass', opt_data.userColorClass, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var classes__soy766 = '';
-  classes__soy766 += 'user-card';
-  classes__soy766 += elementClasses ? ' ' + elementClasses : '';
-  $templateAlias1({actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'user', disabled: disabled, elementClasses: classes__soy766, events: {itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled}, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerStyle: userColorClass, subtitle: subtitle, title: name}, null, opt_ijData);
+  var classes__soy778 = '';
+  classes__soy778 += 'user-card';
+  classes__soy778 += elementClasses ? ' ' + elementClasses : '';
+  $templateAlias1({actionAriaLabel: actionAriaLabel, actionItems: actionItems, contentRenderer: 'user', disabled: disabled, elementClasses: classes__soy778, events: {itemClicked: _handleActionItemClicked, itemToggled: _handleItemToggled}, href: href, icon: icon, id: id, imageAlt: imageAlt, imageSrc: imageSrc, inputName: inputName, inputValue: inputValue, ref: 'card', selectable: selectable, selected: selected, spritemap: spritemap, stickerStyle: userColorClass, subtitle: subtitle, title: name}, null, opt_ijData);
 }
@@ -156,3 +156,3 @@ exports.render = $render;
  */
-function __deltemplate_s797_488cf0c1(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s809_488cf0c1(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -204,10 +204,10 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
       if (actionItems && spritemap) {
-        var msg_3809__soy3810 = '';
+        var msg_3823__soy3824 = '';
         /** @desc  */
         var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-        msg_3809__soy3810 += MSG_EXTERNAL_6305962755687847469;
+        msg_3823__soy3824 += MSG_EXTERNAL_6305962755687847469;
         incrementalDom.elementOpenStart('div');
             incrementalDom.attr('class', 'autofit-col');
         incrementalDom.elementOpenEnd();
-          $templateAlias3({events: {itemClicked: _handleActionItemClicked}, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3809__soy3810}, null, opt_ijData);
+          $templateAlias3({events: {itemClicked: _handleActionItemClicked}, items: actionItems, spritemap: spritemap, triggerAriaLabel: actionAriaLabel, triggerClasses: 'component-action', triggerTitle: title + ' ' + msg_3823__soy3824}, null, opt_ijData);
         incrementalDom.elementClose('div');
@@ -218,3 +218,3 @@ }
 }
-exports.__deltemplate_s797_488cf0c1 = __deltemplate_s797_488cf0c1;
+exports.__deltemplate_s809_488cf0c1 = __deltemplate_s809_488cf0c1;
 /**
@@ -233,7 +233,7 @@ * @typedef {{
  */
-__deltemplate_s797_488cf0c1.Params;
+__deltemplate_s809_488cf0c1.Params;
 if (goog.DEBUG) {
-  __deltemplate_s797_488cf0c1.soyTemplateName = 'ClayUserCard.__deltemplate_s797_488cf0c1';
+  __deltemplate_s809_488cf0c1.soyTemplateName = 'ClayUserCard.__deltemplate_s809_488cf0c1';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), 'user', 0, __deltemplate_s797_488cf0c1);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.DescriptiveArea.idom'), 'user', 0, __deltemplate_s809_488cf0c1);
 
@@ -243,2 +243,3 @@
  * @param {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -261,3 +262,3 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-function __deltemplate_s847_d12b8598(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s859_d12b8598(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -267,2 +268,4 @@ var $$temp;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var aspectRatioClasses = soy.asserts.assertType(opt_data.aspectRatioClasses == null || (goog.isString(opt_data.aspectRatioClasses) || opt_data.aspectRatioClasses instanceof goog.soy.data.SanitizedContent), 'aspectRatioClasses', opt_data.aspectRatioClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
@@ -295,5 +298,6 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
 }
-exports.__deltemplate_s847_d12b8598 = __deltemplate_s847_d12b8598;
+exports.__deltemplate_s859_d12b8598 = __deltemplate_s859_d12b8598;
 /**
  * @typedef {{
+ *  aspectRatioClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -312,7 +316,7 @@ *  imageAlt: (!goog.soy.data.SanitizedContent|null|string|undefined),
  */
-__deltemplate_s847_d12b8598.Params;
+__deltemplate_s859_d12b8598.Params;
 if (goog.DEBUG) {
-  __deltemplate_s847_d12b8598.soyTemplateName = 'ClayUserCard.__deltemplate_s847_d12b8598';
+  __deltemplate_s859_d12b8598.soyTemplateName = 'ClayUserCard.__deltemplate_s859_d12b8598';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'user', 0, __deltemplate_s847_d12b8598);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayCardBase.VisualArea.idom'), 'user', 0, __deltemplate_s859_d12b8598);
 
@@ -319,0 +323,0 @@ exports.render.params = ["name","_handleActionItemClicked","_handleItemToggled","actionAriaLabel","actionItems","disabled","elementClasses","href","icon","id","imageAlt","imageSrc","inputName","inputValue","selectable","selected","spritemap","subtitle","userColorClass"];

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

695273

increased by2.35%

Lines of code

6939

increased by1.58%

Dependency changes

• Updatedclay-checkbox@^2.16.0

• Updatedclay-component@^2.16.0

• Updatedclay-dropdown@^2.16.0

• Updatedclay-icon@^2.16.0

• Updatedclay-label@^2.16.0

• Updatedclay-link@^2.16.0

• Updatedclay-sticker@^2.16.0