@miso.ai/client-sdk-ui 1.11.5-beta.1 → 1.11.5-beta.2

package/dist/cjs/asset/svgs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRIANGLE_EQ = exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = exports.CHEVRON_NEGATIVE = void 0;
+exports.TRIANGLE_EQ = exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = exports.CHEVRON_NEGATIVE = exports.CHEVRON = void 0;
 exports.getIcon = getIcon;
 var _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,6 +20,7 @@ const ICON_NAME = {
   SEARCH: 'search',
   TRIANGLE: 'triangle',
   TRIANGLE_EQ: 'triangle-eq',
+  CHEVRON: 'chevron',
   CHEVRON_NEGATIVE: 'chevron-negative'
 };
 
@@ -30,8 +31,9 @@ const ICON_SEARCH = `<symbol id="${PREFIX}-${ICON_NAME.SEARCH}" viewBox="0 0 24
 // Custom SVGs
 const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
 const ICON_TRIANGLE_EQ = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE_EQ}" viewBox="-100 -100 200 200"><path d="M12.99 -77.5A15 15,0,0,0,-12.99 -77.5L-73.61 27.5A15 15,0,0,0,-60.62 50L60.62 50A15 15,0,0,0,73.61 27.5L12.99 -77.5Z"/></symbol>`;
+const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100 -100 200 200"><path d="M10.61 -43.94A15 15,0,0,0,-10.61 -43.94L-60.61 6.06A15 15,0,0,0,-39.39 27.27L0 -12.12L39.39 27.27A15 15,0,0,0,60.61 6.06L10.61 -43.94Z"/></symbol>`;
 const ICON_CHEVRON_NEGATIVE = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON_NEGATIVE}" viewBox="-100 -100 200 200"><path d="M100 100V-200H-200V200H200ZM-10.61 -43.94A15 15,0,0,1,10.61 -43.94L60.61 6.06A15 15,0,0,1,39.39 27.27L0 -12.12L-39.39 27.27A15 15,0,0,1,-60.61 6.06L-10.61 -43.94Z"/></symbol>`;
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON_NEGATIVE];
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE];
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
 function loadSvgSprites() {
@@ -53,4 +55,5 @@ const SEND = exports.SEND = _icon(ICON_NAME.SEND);
 const SEARCH = exports.SEARCH = _icon(ICON_NAME.SEARCH);
 const TRIANGLE = exports.TRIANGLE = _icon(ICON_NAME.TRIANGLE);
 const TRIANGLE_EQ = exports.TRIANGLE_EQ = _icon(ICON_NAME.TRIANGLE_EQ);
+const CHEVRON = exports.CHEVRON = _icon(ICON_NAME.CHEVRON);
 const CHEVRON_NEGATIVE = exports.CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);

package/dist/cjs/layout/affiliation/affiliation.js

@@ -9,6 +9,7 @@ var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("../list/collection.js"));
 var _templates = require("../templates.js");
 var _svgs = require("../../asset/svgs.js");
+var _dom = require("../../util/dom.js");
 const _excluded = ["className", "templates", "autoplay"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -18,7 +19,8 @@ function root(layout, state) {
   const {
     className,
     role,
-    templates
+    templates,
+    options
   } = layout;
   const {
     status
@@ -29,7 +31,8 @@ function root(layout, state) {
   const items = layout._getItems(state);
   const itemCount = items ? items.length : undefined;
   const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemTypeAttr}${itemCountAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -293,12 +296,8 @@ class AffiliationLayout extends _collection.default {
     if (!element) {
       return;
     }
+    (0, _dom.setOrRemoveAttribute)(element, 'data-item-count', itemCount);
     this._displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
   _syncItemIndex() {
     const index = this._itemIndex;

package/dist/cjs/layout/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "FeedbackLayout", {
     return _feedback.default;
   }
 });
+Object.defineProperty(exports, "GalleryLayout", {
+  enumerable: true,
+  get: function () {
+    return _gallery.default;
+  }
+});
 Object.defineProperty(exports, "ListLayout", {
   enumerable: true,
   get: function () {
@@ -113,6 +119,7 @@ var _collection = _interopRequireDefault(require("./list/collection.js"));
 var _list = _interopRequireDefault(require("./list/list.js"));
 var _cards = _interopRequireDefault(require("./list/cards.js"));
 var _carousel = _interopRequireDefault(require("./list/carousel.js"));
+var _gallery = _interopRequireDefault(require("./list/gallery.js"));
 var _searchBox = _interopRequireDefault(require("./input/search-box.js"));
 var _optionList = _interopRequireDefault(require("./input/option-list.js"));
 var _feedback = _interopRequireDefault(require("./radio/feedback.js"));

package/dist/cjs/layout/input/option-list.js

@@ -8,6 +8,7 @@ var _commons = require("@miso.ai/commons");
 var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../mixin/trackable.js");
+var _dom = require("../../util/dom.js");
 const _excluded = ["className", "templates"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -107,7 +108,7 @@ class OptionListLayout extends _template.default {
       return;
     }
     const optionValues = this._getItems(state) || [];
-    optionsElement.classList[optionValues.length === 0 ? 'add' : 'remove']('empty');
+    (0, _dom.addOrRemoveClass)(optionsElement, 'empty', optionValues.length === 0);
   }
   _getItems(state) {
     return state.value;

package/dist/cjs/layout/input/search-box.js

@@ -10,6 +10,7 @@ var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _templates = require("../templates.js");
 var _svgs = require("../../asset/svgs.js");
+var _dom = require("../../util/dom.js");
 const _excluded = ["className", "templates", "autocomplete"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -250,7 +251,7 @@ class SearchBoxLayout extends _template.default {
       return;
     }
     const items = context.trackItems(completions);
-    element.classList[items.length > 0 ? 'add' : 'remove']('nonempty');
+    (0, _dom.addOrRemoveClass)(element, 'nonempty', items.length > 0);
     autocompleteElement.setAttribute('data-status', status);
     autocompleteElement.innerHTML = this.templates.completions(this, items);
     writeToState({

package/dist/cjs/layout/list/carousel.js

@@ -50,8 +50,8 @@ function control(layout, state, direction) {
   } = layout;
   return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
 }
-function controlIcon(layout, state, direction) {
-  return _svgs.CHEVRON_NEGATIVE;
+function controlIcon(layout) {
+  return layout.options.itemType === 'image' ? _svgs.CHEVRON_NEGATIVE : _svgs.CHEVRON;
 }
 function indexIndicator(layout, state, values) {
   const {

package/dist/cjs/layout/list/collection.js

@@ -16,13 +16,15 @@ function root(layout, state) {
   const {
     className,
     role,
-    templates
+    templates,
+    options
   } = layout;
   const {
     status
   } = state;
-  const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -48,8 +50,9 @@ function list(layout, state, values) {
     options
   } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : ''; // backward compatible
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list"${itemTypeAttr}>${templates.items(layout, state, values)}</${listTag}>`;
 }
 function items(layout, state, values) {
   let {

package/dist/cjs/layout/list/gallery.js

@@ -0,0 +1,273 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _collection = _interopRequireDefault(require("./collection.js"));
+var _dom = require("../../util/dom.js");
+const _excluded = ["className", "templates"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function calculateItemSizes(itemCount, columnCount) {
+  const totalSpaces = columnCount * 2;
+  let remainingSpaces = Math.max(totalSpaces - itemCount, 0);
+  let small = itemCount;
+  // turning a small block into a large block takes 3 extra spaces
+  const large = Math.min(Math.floor(remainingSpaces / 3), small);
+  small -= large;
+  remainingSpaces -= large * 3;
+  // turning a small block into a medium block takes 1 extra space
+  const medium = Math.min(remainingSpaces, small);
+  small -= medium;
+  remainingSpaces -= medium;
+  return [large, medium, small];
+}
+function item(layout, state, value, index) {
+  const {
+    className,
+    templates,
+    options
+  } = layout;
+  const {
+    itemType
+  } = options;
+  const body = templates[itemType](layout, state, value, {
+    index
+  });
+  const sizeClass = value._size ? ` ${className}__item-${value._size}` : '';
+  return `<li class="${className}__item${sizeClass}">${body}</li>`;
+}
+const DEFAULT_HEIGHT = '16rem';
+const DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, {
+  item
+}));
+const TYPE = 'gallery';
+const DEFAULT_CLASSNAME = 'miso-gallery';
+class GalleryLayout extends _collection.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor() {
+    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+    this._galleryContext = {
+      itemAspectRatio: undefined,
+      itemCount: undefined,
+      columnCount: undefined
+    };
+  }
+  syncSize() {
+    const {
+      element
+    } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._syncItemSizes(listElement);
+  }
+  _preprocess(_ref2) {
+    let {
+      state,
+      rendered
+    } = _ref2;
+    const incremental = this._shallRenderIncrementally(state, rendered);
+    const bodyHtml = incremental ? undefined : this._bodyHtml(state);
+    const itemsHtml = this._itemsHtml(state, rendered);
+    return Object.assign({}, state, (0, _commons.trimObj)({
+      incremental,
+      bodyHtml,
+      itemsHtml
+    }));
+  }
+  _bodyHtml(state) {
+    return this.templates.root(this, Object.assign({}, state, {
+      value: []
+    }));
+  }
+  _itemsHtml(state, rendered) {
+    const offset = rendered && rendered.value && rendered.value.length || 0;
+    const values = (this._getItems(state) || []).slice(offset);
+    return values.length > 0 ? this.templates.items(this, state, values, {
+      offset
+    }) : '';
+  }
+  _render(element, states, controls) {
+    this._syncItemCount(states);
+    this._syncCssVariables();
+    const listElement = this._renderListElement(element, states, controls);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._renderItems(listElement, states, controls);
+  }
+  _renderListElement(element, _ref3) {
+    let {
+      state
+    } = _ref3;
+    const {
+      incremental,
+      bodyHtml
+    } = state;
+    if (!incremental) {
+      element.innerHTML = bodyHtml;
+    }
+    return this._getListElement(element);
+  }
+  _renderItems(listElement, states) {
+    if (states.state.incremental) {
+      this._appendItems(listElement, states);
+    } else {
+      this._updateItems(listElement, states);
+    }
+  }
+  _updateItems(listElement, _ref4) {
+    let {
+      state
+    } = _ref4;
+    const {
+      itemSizes
+    } = this._galleryContext;
+    const values = this._writeItemSizes(this._getItems(state), itemSizes);
+    listElement.innerHTML = this.templates.items(this, state, values);
+  }
+  _appendItems(listElement, _ref5) {
+    let {
+      state
+    } = _ref5;
+    const {
+      itemSizes
+    } = this._galleryContext;
+    // update existing items
+    this._syncItemSizes(listElement);
+    // append new items
+    const offset = listElement.children.length;
+    const values = this._writeItemSizes(this._getItems(state).slice(offset), itemSizes, offset);
+    listElement.insertAdjacentHTML('beforeend', this.templates.items(this, state, values, {
+      offset
+    }));
+  }
+  _writeItemSizes() {
+    let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let [large = 0, medium = 0] = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    let offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let omitted = 0;
+    if (offset > 0) {
+      omitted = Math.min(offset, large);
+      offset -= omitted;
+      large -= omitted;
+    }
+    if (offset > 0) {
+      omitted = Math.min(offset, medium);
+      offset -= omitted;
+      medium -= omitted;
+    }
+    const results = [];
+    for (const value of values) {
+      let _size = 'small';
+      if (large > 0) {
+        _size = 'large';
+        large--;
+      } else if (medium > 0) {
+        _size = 'medium';
+        medium--;
+      }
+      results.push(Object.assign({}, value, {
+        _size
+      }));
+    }
+    return results;
+  }
+  _syncCssVariables() {
+    const context = this._galleryContext;
+    let {
+      itemAspectRatio = 1,
+      height = DEFAULT_HEIGHT
+    } = this.options;
+    itemAspectRatio = context.itemAspectRatio = (0, _dom.cssAspectRatio)(itemAspectRatio);
+    const {
+      element
+    } = this._view;
+    if (!element) {
+      return;
+    }
+    // TODO: skip if equal to default values
+    element.style.setProperty('--miso-gallery-height', `${height}`);
+    element.style.setProperty('--miso-gallery-item-1x1-aspect-ratio', `${itemAspectRatio}`);
+    element.style.setProperty('--miso-gallery-item-1x2-aspect-ratio', `${itemAspectRatio.scaleBy([1, 2])}`);
+  }
+  _syncListAspectRatio(listElement) {
+    const context = this._galleryContext;
+    const {
+      itemCount,
+      itemAspectRatio
+    } = context;
+    const {
+      height = DEFAULT_HEIGHT
+    } = this.options;
+    const resolvedHeight = (0, _dom.resolveCssLength)(height);
+    const width = listElement.clientWidth;
+    if (width === 0) {
+      context.columnCount = undefined;
+      context.itemSizes = undefined;
+      return; // probably not visible yet
+    }
+    const columnCount = context.columnCount = Math.round(width * itemAspectRatio.width * 2 / (resolvedHeight * itemAspectRatio.height));
+    context.itemSizes = calculateItemSizes(itemCount, columnCount);
+
+    // update DOM
+    listElement.style.aspectRatio = `${columnCount} / 2`;
+    listElement.style.height = 'auto';
+  }
+  _syncItemCount() {
+    let {
+      state
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const items = this._getItems(state);
+    this._galleryContext.itemCount = items ? items.length : undefined;
+  }
+  _syncItemSizes(listElement) {
+    const {
+      itemSizes = []
+    } = this._galleryContext;
+    let [large = 0, medium = 0] = itemSizes;
+    const {
+      className
+    } = this;
+
+    // update DOM
+    for (const itemElement of listElement.children) {
+      let lg = false,
+        md = false;
+      if (large > 0) {
+        lg = true;
+        large--;
+      } else if (medium > 0) {
+        md = true;
+        medium--;
+      }
+      (0, _dom.addOrRemoveClass)(itemElement, `${className}__item-large`, lg);
+      (0, _dom.addOrRemoveClass)(itemElement, `${className}__item-medium`, md);
+      (0, _dom.addOrRemoveClass)(itemElement, `${className}__item-small`, !lg && !md);
+    }
+  }
+}
+exports.default = GalleryLayout;

package/dist/cjs/layout/mixin/swipeable.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SwipeableMixin = void 0;
 exports.makeSwipeable = makeSwipeable;
 var _commons = require("@miso.ai/commons");
+var _dom = require("../../util/dom.js");
 function makeSwipeable(prototype) {
   (0, _commons.mixin)(prototype, SwipeableMixin.prototype);
 }
@@ -36,7 +37,7 @@ class SwipeableMixin {
       index = 0;
     }
     context.itemIndex = index;
-    (0, _commons.requestAnimationFrame)(() => this._syncSwipeableItemIndex());
+    (0, _commons.requestAnimationFrame)(() => this._syncDisplayedSwipeableItemIndex());
   }
   next() {
     if (this._swipeableContext.itemCount === undefined) {
@@ -52,7 +53,8 @@ class SwipeableMixin {
   }
   _renderSwipeable(element, states, controls) {
     this._syncSwipeableItemCount(states);
-    this._syncSwipeableItemIndex();
+    this._syncDisplayedSwipeableItemCount();
+    this._syncDisplayedSwipeableItemIndex();
   }
   _afterRenderSwipeable() {
     this._emitSwipeableDisplayEvent();
@@ -74,7 +76,6 @@ class SwipeableMixin {
     } else if (oldItemCount === undefined) {
       context.itemIndex = 0;
     }
-    this._syncDisplayedSwipeableItemCount();
   }
   _syncDisplayedSwipeableItemCount() {
     const context = this._swipeableContext;
@@ -91,22 +92,20 @@ class SwipeableMixin {
     if (!element) {
       return;
     }
+    (0, _dom.setOrRemoveAttribute)(element, 'data-item-count', itemCount);
     context.displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
-  _syncSwipeableItemIndex() {
+  _syncDisplayedSwipeableItemIndex() {
     const context = this._swipeableContext;
-    const index = context.itemIndex;
-    if (index === context.displayedIndex) {
+    const {
+      itemIndex
+    } = context;
+    if (itemIndex === context.displayedIndex) {
       return;
     }
-    context.displayedIndex = index;
-    this._syncSwipeableListIndex(index);
-    this._syncSwipeableIndicatorIndex(index);
+    context.displayedIndex = itemIndex;
+    this._syncSwipeableListIndex(itemIndex);
+    this._syncSwipeableIndicatorIndex(itemIndex);
   }
   _syncSwipeableListIndex(index) {
     const {
@@ -128,7 +127,7 @@ class SwipeableMixin {
     }
     let i = 0;
     for (const item of indicatorElement.children) {
-      item.classList[i === index ? 'add' : 'remove']('active');
+      (0, _dom.addOrRemoveClass)(item, 'active', i === index);
       i++;
     }
   }

package/dist/cjs/layout/raf.js

@@ -115,6 +115,8 @@ class RafLayout {
     state = Object.freeze(Object.assign({}, state, stateExtra.value));
     this._rendered.set(this._element, state);
     notifyUpdate && notifyUpdate(...argsForNotifyUpdate.value);
+
+    // TODO: should the signature be aligned with _render?
     this._afterRender(this._element, state);
   }
   _render() {

package/dist/cjs/util/dom.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addOrRemoveClass = addOrRemoveClass;
+exports.cssAspectRatio = cssAspectRatio;
+exports.resolveCssLength = resolveCssLength;
+exports.setOrRemoveAttribute = setOrRemoveAttribute;
+function setOrRemoveAttribute(element, name, value) {
+  if (value === undefined) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, value);
+  }
+}
+function addOrRemoveClass(element, name, add) {
+  if (add) {
+    element.classList.add(name);
+  } else {
+    element.classList.remove(name);
+  }
+}
+function resolveCssLength(str) {
+  if (typeof str === 'number') {
+    return str;
+  }
+  const [value, unit] = parseLength(str);
+  switch (unit) {
+    case '':
+    case 'px':
+      return value;
+    case 'rem':
+      return remToPx(value);
+    default:
+      throw new Error(`Unsupported unit: ${unit}`);
+  }
+}
+function parseLength(str) {
+  const match = str.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*)$/);
+  if (!match) {
+    throw new Error(`Invalid length: ${str}`);
+  }
+  const value = parseFloat(match[1]);
+  const unit = match[2] || '';
+  return [value, unit];
+}
+function remToPx() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+function cssAspectRatio(value) {
+  return value === undefined || value instanceof CssAspectRatio ? value : new CssAspectRatio(value);
+}
+class CssAspectRatio {
+  constructor(value) {
+    this._width = NaN;
+    this._height = NaN;
+    switch (typeof value) {
+      case 'number':
+        this._width = value;
+        this._height = 1;
+        break;
+      case 'object':
+        if (Array.isArray(value)) {
+          this._width = parseFloat(value[0]);
+          this._height = parseFloat(value[1]);
+        }
+        break;
+      case 'string':
+        const i = value.indexOf('/');
+        if (i < 0) {
+          this._width = parseFloat(value);
+          this._height = 1;
+        } else {
+          this._width = parseFloat(value.slice(0, i).trim());
+          this._height = parseFloat(value.slice(i + 1).trim());
+        }
+        break;
+    }
+    if (this._width === NaN || this._height === NaN) {
+      throw new Error(`Invalid aspect ratio value: ${value}`);
+    }
+  }
+  get width() {
+    return this._width;
+  }
+  get height() {
+    return this._height;
+  }
+  get floatValue() {
+    return this._width / this._height;
+  }
+  scaleBy(factor) {
+    factor = cssAspectRatio(factor);
+    return cssAspectRatio([factor._width * this._width, factor._height * this._height]);
+  }
+  toString() {
+    return this._height === 1 ? `${this._width}` : `${this._width} / ${this._height}`;
+  }
+}

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.11.5-beta.1';
+var _default = exports.default = '1.11.5-beta.2';

package/dist/cjs/workflow/answer-based.js

@@ -43,7 +43,7 @@ const DEFAULT_LAYOUTS = Object.freeze(Object.assign({}, _base.default.DEFAULT_LA
   }],
   [_constants.ROLE.ANSWER]: _index2.TypewriterLayout.type,
   [_constants.ROLE.FEEDBACK]: _index2.FeedbackLayout.type,
-  [_constants.ROLE.IMAGES]: [_index2.CarouselLayout.type, {
+  [_constants.ROLE.IMAGES]: [_index2.GalleryLayout.type, {
     incremental: true,
     itemType: 'image'
   }],

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.11.5-beta.1"
+    "@miso.ai/commons": "1.11.5-beta.2"
   },
-  "version": "1.11.5-beta.1"
+  "version": "1.11.5-beta.2"
 }

package/src/asset/svgs.js

@@ -15,6 +15,7 @@ const ICON_NAME = {
   SEARCH: 'search',
   TRIANGLE: 'triangle',
   TRIANGLE_EQ: 'triangle-eq',
+  CHEVRON: 'chevron',
   CHEVRON_NEGATIVE: 'chevron-negative',
 };
 
@@ -27,9 +28,11 @@ const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5
 
 const ICON_TRIANGLE_EQ = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE_EQ}" viewBox="-100 -100 200 200"><path d="M12.99 -77.5A15 15,0,0,0,-12.99 -77.5L-73.61 27.5A15 15,0,0,0,-60.62 50L60.62 50A15 15,0,0,0,73.61 27.5L12.99 -77.5Z"/></symbol>`;
 
+const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100 -100 200 200"><path d="M10.61 -43.94A15 15,0,0,0,-10.61 -43.94L-60.61 6.06A15 15,0,0,0,-39.39 27.27L0 -12.12L39.39 27.27A15 15,0,0,0,60.61 6.06L10.61 -43.94Z"/></symbol>`;
+
 const ICON_CHEVRON_NEGATIVE = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON_NEGATIVE}" viewBox="-100 -100 200 200"><path d="M100 100V-200H-200V200H200ZM-10.61 -43.94A15 15,0,0,1,10.61 -43.94L60.61 6.06A15 15,0,0,1,39.39 27.27L0 -12.12L-39.39 27.27A15 15,0,0,1,-60.61 6.06L-10.61 -43.94Z"/></symbol>`;
 
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON_NEGATIVE];
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE];
 
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 
@@ -59,4 +62,5 @@ export const SEND = _icon(ICON_NAME.SEND);
 export const SEARCH = _icon(ICON_NAME.SEARCH);
 export const TRIANGLE = _icon(ICON_NAME.TRIANGLE);
 export const TRIANGLE_EQ = _icon(ICON_NAME.TRIANGLE_EQ);
+export const CHEVRON = _icon(ICON_NAME.CHEVRON);
 export const CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);

package/src/layout/affiliation/affiliation.js

@@ -3,12 +3,13 @@ import { STATUS } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
 import { affiliation, helpers } from '../templates.js';
 import { TRIANGLE } from '../../asset/svgs.js';
+import { setOrRemoveAttribute } from '../../util/dom.js';
 
 const TYPE = 'affiliation';
 const DEFAULT_CLASSNAME = 'miso-affiliation';
 
 function root(layout, state) {
-  const { className, role, templates } = layout;
+  const { className, role, templates, options } = layout;
   const { status } = state;
   const roleAttr = role ? ` data-role="${role}"` : '';
   const data = state.value || {};
@@ -16,7 +17,8 @@ function root(layout, state) {
   const items = layout._getItems(state);
   const itemCount = items ? items.length : undefined;
   const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemTypeAttr}${itemCountAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 
 function ready(layout, state) {
@@ -256,12 +258,8 @@ export default class AffiliationLayout extends CollectionLayout {
     if (!element) {
       return;
     }
+    setOrRemoveAttribute(element, 'data-item-count', itemCount);
     this._displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
 
   _syncItemIndex() {

package/src/layout/index.js

@@ -6,6 +6,7 @@ export { default as CollectionLayout } from './list/collection.js';
 export { default as ListLayout } from './list/list.js';
 export { default as CardsLayout } from './list/cards.js';
 export { default as CarouselLayout } from './list/carousel.js';
+export { default as GalleryLayout } from './list/gallery.js';
 export { default as SearchBoxLayout } from './input/search-box.js';
 export { default as OptionListLayout } from './input/option-list.js';
 export { default as FeedbackLayout } from './radio/feedback.js';

package/src/layout/input/option-list.js

@@ -2,6 +2,7 @@ import { escapeHtml } from '@miso.ai/commons';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../mixin/trackable.js';
+import { addOrRemoveClass } from '../../util/dom.js';
 
 const TYPE = 'option-list';
 const DEFAULT_CLASSNAME = 'miso-option-list';
@@ -96,7 +97,7 @@ export default class OptionListLayout extends TemplateBasedLayout {
       return;
     }
     const optionValues = this._getItems(state) || [];
-    optionsElement.classList[optionValues.length === 0 ? 'add' : 'remove']('empty');
+    addOrRemoveClass(optionsElement, 'empty', optionValues.length === 0);
   }
 
   _getItems(state) {

package/src/layout/input/search-box.js

@@ -4,6 +4,7 @@ import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { imageBlock, productInfoBlock } from '../templates.js';
 import { getIcon } from '../../asset/svgs.js';
+import { addOrRemoveClass } from '../../util/dom.js';
 
 const TYPE = 'search-box';
 const DEFAULT_CLASSNAME = 'miso-search-box';
@@ -215,7 +216,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
 
     const items = context.trackItems(completions);
 
-    element.classList[items.length > 0 ? 'add' : 'remove']('nonempty');
+    addOrRemoveClass(element, 'nonempty', items.length > 0);
     autocompleteElement.setAttribute('data-status', status);
     autocompleteElement.innerHTML = this.templates.completions(this, items);
 

package/src/layout/list/carousel.js

@@ -1,6 +1,6 @@
 import CollectionLayout from './collection.js';
 import { makeSwipeable } from '../mixin/swipeable.js';
-import { CHEVRON_NEGATIVE } from '../../asset/svgs.js';
+import { CHEVRON, CHEVRON_NEGATIVE } from '../../asset/svgs.js';
 
 const TYPE = 'carousel';
 const DEFAULT_CLASSNAME = 'miso-carousel';
@@ -41,8 +41,8 @@ function control(layout, state, direction) {
   return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
 }
 
-function controlIcon(layout, state, direction) {
-  return CHEVRON_NEGATIVE;
+function controlIcon(layout) {
+  return layout.options.itemType === 'image' ? CHEVRON_NEGATIVE : CHEVRON;
 }
 
 function indexIndicator(layout, state, values) {

package/src/layout/list/collection.js

@@ -5,10 +5,11 @@ import { makeTriggerable } from '../mixin/triggerable.js';
 import { product, article, image, question, productInfoBlock, articleInfoBlock, imageInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
-  const { className, role, templates } = layout;
+  const { className, role, templates, options } = layout;
   const { status } = state;
-  const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 
 function ready(layout, state) {
@@ -30,8 +31,9 @@ function body(layout, state, values) {
 function list(layout, state, values) {
   const { className, templates, options } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : ''; // backward compatible
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list"${itemTypeAttr}>${templates.items(layout, state, values)}</${listTag}>`;
 }
 
 function items(layout, state, values, { offset = 0 } = {}) {

package/src/layout/list/gallery.js

@@ -0,0 +1,230 @@
+import { trimObj } from '@miso.ai/commons';
+import CollectionLayout from './collection.js';
+import { addOrRemoveClass, resolveCssLength, cssAspectRatio } from '../../util/dom.js';
+
+function calculateItemSizes(itemCount, columnCount) {
+  const totalSpaces = columnCount * 2;
+  let remainingSpaces = Math.max(totalSpaces - itemCount, 0);
+
+  let small = itemCount;
+  // turning a small block into a large block takes 3 extra spaces
+  const large = Math.min(Math.floor(remainingSpaces / 3), small);
+  small -= large;
+  remainingSpaces -= large * 3;
+  // turning a small block into a medium block takes 1 extra space
+  const medium = Math.min(remainingSpaces, small);
+  small -= medium;
+  remainingSpaces -= medium;
+
+  return [large, medium, small];
+}
+
+function item(layout, state, value, index) {
+  const { className, templates, options } = layout;
+  const { itemType } = options;
+  const body = templates[itemType](layout, state, value, { index });
+  const sizeClass = value._size ? ` ${className}__item-${value._size}` : '';
+  return `<li class="${className}__item${sizeClass}">${body}</li>`;
+}
+
+const DEFAULT_HEIGHT = '16rem';
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  ...CollectionLayout.defaultTemplates,
+  item,
+});
+
+const TYPE = 'gallery';
+const DEFAULT_CLASSNAME = 'miso-gallery';
+
+export default class GalleryLayout extends CollectionLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+    this._galleryContext = {
+      itemAspectRatio: undefined,
+      itemCount: undefined,
+      columnCount: undefined,
+    };
+  }
+
+  syncSize() {
+    const { element } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._syncItemSizes(listElement);
+  }
+
+  _preprocess({ state, rendered }) {
+    const incremental = this._shallRenderIncrementally(state, rendered);
+    const bodyHtml = incremental ? undefined : this._bodyHtml(state);
+    const itemsHtml = this._itemsHtml(state, rendered);
+    return {
+      ...state,
+      ...trimObj({
+        incremental,
+        bodyHtml,
+        itemsHtml,
+      }),
+    };
+  }
+
+  _bodyHtml(state) {
+    return this.templates.root(this, { ...state, value: [] });
+  }
+
+  _itemsHtml(state, rendered) {
+    const offset = (rendered && rendered.value && rendered.value.length) || 0;
+    const values = (this._getItems(state) || []).slice(offset);
+    return values.length > 0 ? this.templates.items(this, state, values, { offset }) : '';
+  }
+
+  _render(element, states, controls) {
+    this._syncItemCount(states);
+    this._syncCssVariables();
+    const listElement = this._renderListElement(element, states, controls);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._renderItems(listElement, states, controls);
+  }
+
+  _renderListElement(element, { state }) {
+    const { incremental, bodyHtml } = state;
+    if (!incremental) {
+      element.innerHTML = bodyHtml;
+    }
+    return this._getListElement(element);
+  }
+
+  _renderItems(listElement, states) {
+    if (states.state.incremental) {
+      this._appendItems(listElement, states);
+    } else {
+      this._updateItems(listElement, states);
+    }
+  }
+
+  _updateItems(listElement, { state }) {
+    const { itemSizes } = this._galleryContext;
+    const values = this._writeItemSizes(this._getItems(state), itemSizes);
+    listElement.innerHTML = this.templates.items(this, state, values);
+  }
+
+  _appendItems(listElement, { state }) {
+    const { itemSizes } = this._galleryContext;
+    // update existing items
+    this._syncItemSizes(listElement);
+    // append new items
+    const offset = listElement.children.length;
+    const values = this._writeItemSizes(this._getItems(state).slice(offset), itemSizes, offset);
+    listElement.insertAdjacentHTML('beforeend', this.templates.items(this, state, values, { offset }));
+  }
+
+  _writeItemSizes(values = [], [large = 0, medium = 0] = [], offset = 0) {
+    let omitted = 0;
+    if (offset > 0) {
+      omitted = Math.min(offset, large);
+      offset -= omitted;
+      large -= omitted;
+    }
+    if (offset > 0) {
+      omitted = Math.min(offset, medium);
+      offset -= omitted;
+      medium -= omitted;
+    }
+    const results = [];
+    for (const value of values) {
+      let _size = 'small';
+      if (large > 0) {
+        _size = 'large';
+        large--;
+      } else if (medium > 0) {
+        _size = 'medium';
+        medium--;
+      }
+      results.push({ ...value, _size });
+    }
+    return results;
+  }
+
+  _syncCssVariables() {
+    const context = this._galleryContext;
+    let { itemAspectRatio = 1, height = DEFAULT_HEIGHT } = this.options;
+    itemAspectRatio = context.itemAspectRatio = cssAspectRatio(itemAspectRatio);
+    const { element } = this._view;
+    if (!element) {
+      return;
+    }
+    // TODO: skip if equal to default values
+    element.style.setProperty('--miso-gallery-height', `${height}`);
+    element.style.setProperty('--miso-gallery-item-1x1-aspect-ratio', `${itemAspectRatio}`);
+    element.style.setProperty('--miso-gallery-item-1x2-aspect-ratio', `${itemAspectRatio.scaleBy([1, 2])}`);
+  }
+
+  _syncListAspectRatio(listElement) {
+    const context = this._galleryContext;
+    const { itemCount, itemAspectRatio } = context;
+    const { height = DEFAULT_HEIGHT } = this.options;
+    const resolvedHeight = resolveCssLength(height);
+    const width = listElement.clientWidth;
+    if (width === 0) {
+      context.columnCount = undefined;
+      context.itemSizes = undefined;
+      return; // probably not visible yet
+    }
+    const columnCount = context.columnCount = Math.round((width * itemAspectRatio.width * 2) / (resolvedHeight * itemAspectRatio.height));
+    context.itemSizes = calculateItemSizes(itemCount, columnCount);
+
+    // update DOM
+    listElement.style.aspectRatio = `${columnCount} / 2`;
+    listElement.style.height = 'auto';
+  }
+
+  _syncItemCount({ state } = {}) {
+    const items = this._getItems(state);
+    this._galleryContext.itemCount = items ? items.length : undefined;
+  }
+
+  _syncItemSizes(listElement) {
+    const { itemSizes = [] } = this._galleryContext;
+    let [large = 0, medium = 0] = itemSizes;
+    const { className } = this;
+
+    // update DOM
+    for (const itemElement of listElement.children) {
+      let lg = false, md = false;
+      if (large > 0) {
+        lg = true;
+        large--;
+      } else if (medium > 0) {
+        md = true;
+        medium--;
+      }
+      addOrRemoveClass(itemElement, `${className}__item-large`, lg);
+      addOrRemoveClass(itemElement, `${className}__item-medium`, md);
+      addOrRemoveClass(itemElement, `${className}__item-small`, !lg && !md);
+    }
+  }
+
+}

package/src/layout/mixin/swipeable.js

@@ -1,4 +1,5 @@
 import { mixin, requestAnimationFrame as raf } from '@miso.ai/commons';
+import { setOrRemoveAttribute, addOrRemoveClass } from '../../util/dom.js';
 
 export function makeSwipeable(prototype) {
   mixin(prototype, SwipeableMixin.prototype);
@@ -33,7 +34,7 @@ export class SwipeableMixin {
       index = 0;
     }
     context.itemIndex = index;
-    raf(() => this._syncSwipeableItemIndex());
+    raf(() => this._syncDisplayedSwipeableItemIndex());
   }
 
   next() {
@@ -52,7 +53,8 @@ export class SwipeableMixin {
 
   _renderSwipeable(element, states, controls) {
     this._syncSwipeableItemCount(states);
-    this._syncSwipeableItemIndex();
+    this._syncDisplayedSwipeableItemCount();
+    this._syncDisplayedSwipeableItemIndex();
   }
 
   _afterRenderSwipeable() {
@@ -74,8 +76,6 @@ export class SwipeableMixin {
     } else if (oldItemCount === undefined) {
       context.itemIndex = 0;
     }
-
-    this._syncDisplayedSwipeableItemCount();
   }
 
   _syncDisplayedSwipeableItemCount() {
@@ -89,24 +89,20 @@ export class SwipeableMixin {
     if (!element) {
       return;
     }
+    setOrRemoveAttribute(element, 'data-item-count', itemCount);
     context.displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
 
-  _syncSwipeableItemIndex() {
+  _syncDisplayedSwipeableItemIndex() {
     const context = this._swipeableContext;
-    const index = context.itemIndex;
-    if (index === context.displayedIndex) {
+    const { itemIndex } = context;
+    if (itemIndex === context.displayedIndex) {
       return;
     }
-    context.displayedIndex = index;
+    context.displayedIndex = itemIndex;
 
-    this._syncSwipeableListIndex(index);
-    this._syncSwipeableIndicatorIndex(index);
+    this._syncSwipeableListIndex(itemIndex);
+    this._syncSwipeableIndicatorIndex(itemIndex);
   }
 
   _syncSwipeableListIndex(index) {
@@ -126,7 +122,7 @@ export class SwipeableMixin {
     }
     let i = 0;
     for (const item of indicatorElement.children) {
-      item.classList[ i === index ? 'add' : 'remove' ]('active');
+      addOrRemoveClass(item, 'active', i === index);
       i++;
     }
   }

package/src/layout/raf.js

@@ -89,6 +89,7 @@ export default class RafLayout {
 
     notifyUpdate && notifyUpdate(...argsForNotifyUpdate.value);
 
+    // TODO: should the signature be aligned with _render?
     this._afterRender(this._element, state);
   }
 

package/src/util/dom.js

@@ -0,0 +1,103 @@
+export function setOrRemoveAttribute(element, name, value) {
+  if (value === undefined) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, value);
+  }
+}
+
+export function addOrRemoveClass(element, name, add) {
+  if (add) {
+    element.classList.add(name);
+  } else {
+    element.classList.remove(name);
+  }
+}
+
+export function resolveCssLength(str) {
+  if (typeof str === 'number') {
+    return str;
+  }
+  const [value, unit] = parseLength(str);
+  switch (unit) {
+    case '':
+    case 'px':
+      return value;
+    case 'rem':
+      return remToPx(value);
+    default:
+      throw new Error(`Unsupported unit: ${unit}`);
+  }
+}
+
+function parseLength(str) {
+  const match = str.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*)$/);
+  if (!match) {
+    throw new Error(`Invalid length: ${str}`);
+  }
+  const value = parseFloat(match[1]);
+  const unit = match[2] || '';
+  return [value, unit];
+}
+
+function remToPx(value = 1) {
+  return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+
+export function cssAspectRatio(value) {
+  return (value === undefined || value instanceof CssAspectRatio) ? value : new CssAspectRatio(value);
+}
+
+class CssAspectRatio {
+
+  constructor(value) {
+    this._width = NaN;
+    this._height = NaN;
+    switch (typeof value) {
+      case 'number':
+        this._width = value;
+        this._height = 1;
+        break;
+      case 'object':
+        if (Array.isArray(value)) {
+          this._width = parseFloat(value[0]);
+          this._height = parseFloat(value[1]);
+        }
+        break;
+      case 'string':
+        const i = value.indexOf('/');
+        if (i < 0) {
+          this._width = parseFloat(value);
+          this._height = 1;
+        } else {
+          this._width = parseFloat(value.slice(0, i).trim());
+          this._height = parseFloat(value.slice(i + 1).trim());
+        }
+        break;
+    }
+    if (this._width === NaN || this._height === NaN) {
+      throw new Error(`Invalid aspect ratio value: ${value}`);
+    }
+  }
+
+  get width() {
+    return this._width;
+  }
+
+  get height() {
+    return this._height;
+  }
+
+  get floatValue() {
+    return this._width / this._height;
+  }
+
+  scaleBy(factor) {
+    factor = cssAspectRatio(factor);
+    return cssAspectRatio([factor._width * this._width, factor._height * this._height]);
+  }
+
+  toString() {
+    return this._height === 1 ? `${this._width}` : `${this._width} / ${this._height}`;
+  }
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.11.5-beta.1';
+export default '1.11.5-beta.2';

package/src/workflow/answer-based.js

@@ -2,7 +2,7 @@ import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { fields, FeedbackActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { SearchBoxLayout, TextLayout, ListLayout, CarouselLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
+import { SearchBoxLayout, TextLayout, ListLayout, CarouselLayout, GalleryLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
@@ -35,7 +35,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
   [ROLE.ANSWER]: TypewriterLayout.type,
   [ROLE.FEEDBACK]: FeedbackLayout.type,
-  [ROLE.IMAGES]: [CarouselLayout.type, { incremental: true, itemType: 'image' }],
+  [ROLE.IMAGES]: [GalleryLayout.type, { incremental: true, itemType: 'image' }],
   [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
   [ROLE.AFFILIATION]: [AffiliationLayout.type, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });