@miso.ai/client-sdk-ui 1.11.4 → 1.11.5-beta.0

package/dist/cjs/actor/views.js

@@ -216,6 +216,7 @@ class ViewsActor {
   }
   _getTrackerOptions(role) {
     const allTrackerOptions = this._options.resolved.trackers;
+    // TODO: don't need this anymore
     return (0, _trackers.normalizeTrackerOptions)(allTrackerOptions && allTrackerOptions[role] || false);
   }
   _getContainerTracker() {

package/dist/cjs/asset/svgs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = void 0;
+exports.TRIANGLE_EQ = exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = exports.CHEVRON_NEGATIVE = void 0;
 exports.getIcon = getIcon;
 var _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,7 +18,9 @@ const ID = `${PREFIX}-svg-${_version.default.replaceAll('.', '_')}`;
 const ICON_NAME = {
   SEND: 'send',
   SEARCH: 'search',
-  TRIANGLE: 'triangle'
+  TRIANGLE: 'triangle',
+  TRIANGLE_EQ: 'triangle-eq',
+  CHEVRON_NEGATIVE: 'chevron-negative'
 };
 
 // CC0 SVGs
@@ -27,7 +29,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 ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE];
+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_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 SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
 function loadSvgSprites() {
@@ -47,4 +51,6 @@ function getIcon(name) {
 }
 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 = exports.TRIANGLE = _icon(ICON_NAME.TRIANGLE);
+const TRIANGLE_EQ = exports.TRIANGLE_EQ = _icon(ICON_NAME.TRIANGLE_EQ);
+const CHEVRON_NEGATIVE = exports.CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);

package/dist/cjs/constants.js

@@ -25,6 +25,7 @@ const ROLE = exports.ROLE = Object.freeze({
   ITEMS: 'items',
   QUESTION: 'question',
   ANSWER: 'answer',
+  IMAGES: 'images',
   SOURCES: 'sources',
   RELATED_RESOURCES: 'related_resources',
   QUERY_SUGGESTIONS: 'query_suggestions',
@@ -37,11 +38,11 @@ const ROLE = exports.ROLE = Object.freeze({
   SORT: 'sort',
   ERROR: 'error'
 });
-const DATA_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.CATEGORIES, ROLE.ATTRIBUTES, ROLE.RESULTS, ROLE.ITEMS, ROLE.QUESTION, ROLE.ANSWER, ROLE.SOURCES, ROLE.RELATED_RESOURCES, ROLE.QUERY_SUGGESTIONS, ROLE.RELATED_QUESTIONS, ROLE.AFFILIATION, ROLE.FACETS, ROLE.TOTAL]);
+const DATA_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.CATEGORIES, ROLE.ATTRIBUTES, ROLE.RESULTS, ROLE.ITEMS, ROLE.QUESTION, ROLE.ANSWER, ROLE.IMAGES, ROLE.SOURCES, ROLE.RELATED_RESOURCES, ROLE.QUERY_SUGGESTIONS, ROLE.RELATED_QUESTIONS, ROLE.AFFILIATION, ROLE.FACETS, ROLE.TOTAL]);
 function isDataRole(role) {
   return DATA_ROLE_SET.has(role);
 }
-const PRODUCT_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.SOURCES, ROLE.RELATED_RESOURCES]);
+const PRODUCT_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.IMAGES, ROLE.SOURCES, ROLE.RELATED_RESOURCES]);
 function isProductRole(role) {
   return PRODUCT_ROLE_SET.has(role);
 }

package/dist/cjs/element/role/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "MisoFeedbackElement", {
     return _misoFeedback.default;
   }
 });
+Object.defineProperty(exports, "MisoImagesElement", {
+  enumerable: true,
+  get: function () {
+    return _misoImages.default;
+  }
+});
 Object.defineProperty(exports, "MisoKeywordsElement", {
   enumerable: true,
   get: function () {
@@ -120,6 +126,7 @@ var _misoProducts = _interopRequireDefault(require("./miso-products.js"));
 var _misoQuestion = _interopRequireDefault(require("./miso-question.js"));
 var _misoAnswer = _interopRequireDefault(require("./miso-answer.js"));
 var _misoSources = _interopRequireDefault(require("./miso-sources.js"));
+var _misoImages = _interopRequireDefault(require("./miso-images.js"));
 var _misoRelatedResources = _interopRequireDefault(require("./miso-related-resources.js"));
 var _misoRelatedQuestions = _interopRequireDefault(require("./miso-related-questions.js"));
 var _misoAffiliation = _interopRequireDefault(require("./miso-affiliation.js"));

package/dist/cjs/element/role/miso-images.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
+var _constants = require("../../constants.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoImagesElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.IMAGES
+    });
+  }
+  static get tagName() {
+    return 'miso-images';
+  }
+}
+exports.default = MisoImagesElement;

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
-var _trackable = require("../trackable.js");
+var _trackable = require("../mixin/trackable.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; }

package/dist/cjs/layout/input/select.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _template = _interopRequireDefault(require("../template.js"));
-var _trackable = require("../trackable.js");
+var _trackable = require("../mixin/trackable.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; }

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

@@ -5,39 +5,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _collection = _interopRequireDefault(require("./collection.js"));
+var _swipeable = require("../mixin/swipeable.js");
+var _svgs = require("../../asset/svgs.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; }
 const TYPE = 'carousel';
 const DEFAULT_CLASSNAME = 'miso-carousel';
 const DEFAULT_TEMPLATES = Object.freeze({
-  ready,
-  carousel,
-  previous: chevron,
-  next: chevron
+  body,
+  controls,
+  controlContainer,
+  control,
+  controlIcon,
+  indexIndicator,
+  indexIndicatorItem: () => ``,
+  trigger: () => `` // no trigger element
 });
 const INHERITED_DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, DEFAULT_TEMPLATES));
-function ready(layout, state) {
+function body(layout, state, values) {
   const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__viewport"><div class="${className}__viewport-inner">${templates.list(layout, state, values)}</div></div>${templates.controls(layout, state, values)}`;
+}
+function controls(layout, state, values) {
+  const {
+    templates
+  } = layout;
+  return `${templates.controlContainer(layout, state, 'previous')}${templates.controlContainer(layout, state, 'next')}${templates.indexIndicator(layout, state, values)}`;
+}
+function controlContainer(layout, state, direction) {
+  const {
+    className,
     templates
   } = layout;
-  const items = layout._getItems(state);
-  const nonEmpty = items && items.length > 0;
-  const html = Object.getPrototypeOf(layout.constructor).defaultTemplates.ready(layout, state);
-  return nonEmpty ? templates.carousel(layout, state, html) : html;
+  return `<div class="${className}__control-container-${direction}">${templates.control(layout, state, direction)}</div>`;
 }
-function carousel(layout, state, content) {
+function control(layout, state, direction) {
   const {
     className,
     templates
   } = layout;
-  return `<div class="${className}__control-previous" data-role="previous">${templates.previous(layout, state)}</div><div class="${className}__viewport">${content}</div><div class="${className}__control-next" data-role="next">${templates.next(layout, state)}</div>`;
+  return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
 }
-function chevron(layout) {
+function controlIcon(layout, state, direction) {
+  return _svgs.CHEVRON_NEGATIVE;
+}
+function indexIndicator(layout, state, values) {
   const {
-    className
+    className,
+    templates
   } = layout;
-  return `<svg class="${className}__control-button" shape-rendering="geometricPrecision" stroke="currentColor" stroke-width="24" fill="#fff" viewBox="-30 -30 358 572"><path d="M285.77 441c16.24 16.17 16.32 42.46.15 58.7-16.16 16.24-42.45 16.32-58.69.16l-215-214.47c-16.24-16.16-16.32-42.45-.15-58.69L227.23 12.08c16.24-16.17 42.53-16.09 58.69.15 16.17 16.24 16.09 42.54-.15 58.7l-185.5 185.04L285.77 441z"/></svg>`;
+  return `<ul class="${className}__index-indicator" data-role="index-indicator">${values.map(value => `<li class="${className}__index-indicator-item">${templates.indexIndicatorItem(layout, state, value)}</li>`).join('')}</ul>`;
 }
 class CarouselLayout extends _collection.default {
   static get type() {
@@ -60,82 +81,20 @@ class CarouselLayout extends _collection.default {
       className,
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
     }, options));
-    window.addEventListener('resize', this.syncSize = this.syncSize.bind(this));
-    this._page = 0;
-    this._unsubscribes = [];
+    this._initSwipeable();
   }
   _render(element, states, controls) {
     super._render(element, states, controls);
-    const {
-      state
-    } = states;
-    const items = this._getItems(state);
-    this._itemCount = items ? items.length : undefined;
-    this.syncSize();
-  }
-  get page() {
-    return this._page;
-  }
-  get pageSize() {
-    return this._pageSize;
+    this._renderSwipeable(element, states, controls);
   }
-  next() {
-    this._setPage(this._page + 1);
-  }
-  previous() {
-    this._setPage(this._page - 1);
-  }
-  syncSize() {
-    if (this._itemCount === undefined) {
-      return; // data not ready yet
-    }
-    const grid = this._findGridElement();
-    if (!grid) {
-      return;
-    }
-    // update page size, page count and new page index
-    const firstShownItemIndex = this._pageSize === undefined ? 0 : this._page * this._pageSize;
-    const pageSize = this._pageSize = window.getComputedStyle(grid).getPropertyValue('grid-template-columns').split(' ').length;
-    this._pageCount = Math.ceil(this._itemCount / this._pageSize);
-    this._setPage(Math.floor(firstShownItemIndex / pageSize));
-  }
-  _setPage(page) {
-    if (page < 0) {
-      page = this._pageCount - 1;
-    } else if (page >= this._pageCount) {
-      page = 0;
-    }
-    if (page === this._page) {
-      return;
-    }
-    this._page = page;
-    const grid = this._findGridElement();
-    if (grid) {
-      const offset = page === 0 ? '' : `repeat(${page}, 0)`;
-      grid.style.setProperty('grid-template-rows', `${offset} 1fr repeat(10, 0)`);
-    }
-  }
-  _findGridElement() {
-    const {
-      element
-    } = this._view;
-    return element && element.querySelector(`.${this.className}__list`);
+  _afterRender(element, state) {
+    super._afterRender(element, state);
+    this._afterRenderSwipeable(element, state);
   }
   _onClick(event) {
+    this._onClickSwipeable(event);
     super._onClick(event);
-    const element = event.target;
-    if (element.closest(`[data-role="previous"]`)) {
-      this.previous();
-      return;
-    }
-    if (element.closest(`[data-role="next"]`)) {
-      this.next();
-      return;
-    }
-  }
-  destroy() {
-    window.removeEventListener('resize', this.syncSize);
-    super.destroy();
   }
 }
-exports.default = CarouselLayout;
+exports.default = CarouselLayout;
+(0, _swipeable.makeSwipeable)(CarouselLayout.prototype);

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
-var _trackable = require("../trackable.js");
-var _triggerable = require("../triggerable.js");
+var _trackable = require("../mixin/trackable.js");
+var _triggerable = require("../mixin/triggerable.js");
 var _templates = require("../templates.js");
 const _excluded = ["templates", "itemType"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,16 +28,19 @@ function ready(layout, state) {
   const {
     templates
   } = layout;
-  const values = layout._getItems(state);
+  const values = layout._getItems(state) || [];
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
-  if (values && values.length > 0 || state.ongoing) {
+  if (values.length > 0 || state.ongoing) {
     // TODO: ad-hoc ongoing?
-    return templates.list(layout, state, values);
+    return templates.body(layout, state, values);
   } else {
     return templates.empty(layout, state);
   }
 }
+function body(layout, state, values) {
+  return layout.templates.list(layout, state, values);
+}
 function list(layout, state, values) {
   const {
     className,
@@ -87,16 +90,19 @@ function loading() {
 const DEFAULT_TEMPLATES = Object.freeze({
   product: _templates.product,
   article: _templates.article,
+  image: _templates.image,
   question: _templates.question,
   root,
   [_constants.STATUS.READY]: ready,
   empty: () => ``,
+  body,
   list,
   ordered: false,
   items,
   item,
   productInfoBlock: _templates.productInfoBlock,
   articleInfoBlock: _templates.articleInfoBlock,
+  imageInfoBlock: _templates.imageInfoBlock,
   brandBlock: _templates.brandBlock,
   titleBlock: _templates.titleBlock,
   descriptionBlock: _templates.descriptionBlock,

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

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwipeableMixin = void 0;
+exports.makeSwipeable = makeSwipeable;
+var _commons = require("@miso.ai/commons");
+function makeSwipeable(prototype) {
+  (0, _commons.mixin)(prototype, SwipeableMixin.prototype);
+}
+class SwipeableMixin {
+  _initSwipeable() {
+    this._swipeableContext = {
+      itemCount: undefined,
+      itemIndex: undefined,
+      displayedCount: undefined,
+      displayedIndex: undefined,
+      displayEventIndex: undefined
+    };
+  }
+
+  // TODO: autoplay
+
+  get itemIndex() {
+    return this._swipeableContext.itemIndex;
+  }
+  set itemIndex(index) {
+    const context = this._swipeableContext;
+    if (context.itemCount === undefined) {
+      return;
+    }
+    if (index < 0) {
+      index = context.itemCount - 1;
+    } else if (index >= context.itemCount) {
+      index = 0;
+    }
+    context.itemIndex = index;
+    (0, _commons.requestAnimationFrame)(() => this._syncSwipeableItemIndex());
+  }
+  next() {
+    if (this._swipeableContext.itemCount === undefined) {
+      return;
+    }
+    this.itemIndex++;
+  }
+  previous() {
+    if (this._swipeableContext.itemCount === undefined) {
+      return;
+    }
+    this.itemIndex--;
+  }
+  _renderSwipeable(element, states, controls) {
+    this._syncSwipeableItemCount(states);
+    this._syncSwipeableItemIndex();
+  }
+  _afterRenderSwipeable() {
+    this._emitSwipeableDisplayEvent();
+  }
+  _syncSwipeableItemCount() {
+    let {
+      state
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const context = this._swipeableContext;
+    const items = this._getItems(state);
+    const oldItemCount = context.itemCount;
+    const itemCount = context.itemCount = items ? items.length : undefined;
+    if (itemCount === oldItemCount) {
+      return;
+    }
+    // TODO: concern count === 0
+    if (itemCount === undefined) {
+      context.itemIndex = undefined;
+    } else if (oldItemCount === undefined) {
+      context.itemIndex = 0;
+    }
+    this._syncDisplayedSwipeableItemCount();
+  }
+  _syncDisplayedSwipeableItemCount() {
+    const context = this._swipeableContext;
+    const {
+      itemCount
+    } = context;
+    if (itemCount === context.displayedCount) {
+      return;
+    }
+    let {
+      element
+    } = this._view;
+    element = element.firstElementChild;
+    if (!element) {
+      return;
+    }
+    context.displayedCount = itemCount;
+    if (itemCount === undefined) {
+      element.removeAttribute('data-item-count');
+    } else {
+      element.setAttribute('data-item-count', itemCount);
+    }
+  }
+  _syncSwipeableItemIndex() {
+    const context = this._swipeableContext;
+    const index = context.itemIndex;
+    if (index === context.displayedIndex) {
+      return;
+    }
+    context.displayedIndex = index;
+    this._syncSwipeableListIndex(index);
+    this._syncSwipeableIndicatorIndex(index);
+  }
+  _syncSwipeableListIndex(index) {
+    const {
+      element
+    } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    listElement.style.left = `${-index * 100}%`;
+  }
+  _syncSwipeableIndicatorIndex(index) {
+    const {
+      element
+    } = this._view;
+    const indicatorElement = element && this._getSwipeableIndicatorElement(element);
+    if (!indicatorElement) {
+      return;
+    }
+    let i = 0;
+    for (const item of indicatorElement.children) {
+      item.classList[i === index ? 'add' : 'remove']('active');
+      i++;
+    }
+  }
+  _getSwipeableIndicatorElement(element) {
+    return element.querySelector('[data-role="index-indicator"]');
+  }
+  _emitSwipeableDisplayEvent() {
+    const context = this._swipeableContext;
+    const index = context.displayedIndex;
+    if (context.displayEventIndex === index) {
+      return;
+    }
+    context.displayEventIndex = index;
+    this._view._events.emit('display', {
+      index
+    });
+  }
+  _onClickSwipeable(event) {
+    const {
+      target
+    } = event;
+    if (target.closest(`[data-role="previous"]`)) {
+      event.preventDefault();
+      this.previous();
+    }
+    if (target.closest(`[data-role="next"]`)) {
+      event.preventDefault();
+      this.next();
+    }
+  }
+
+  // TODO: swipe gesture
+}
+exports.SwipeableMixin = SwipeableMixin;

package/dist/cjs/layout/{trackable.js → mixin/trackable.js}

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TrackableMixin = void 0;
 exports.makeTrackable = makeTrackable;
 var _commons = require("@miso.ai/commons");
-var _bindings = _interopRequireDefault(require("../util/bindings.js"));
-var _viewables = _interopRequireDefault(require("../util/viewables.js"));
-var _trackers = require("../util/trackers.js");
+var _bindings = _interopRequireDefault(require("../../util/bindings.js"));
+var _viewables = _interopRequireDefault(require("../../util/viewables.js"));
+var _trackers = require("../../util/trackers.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function makeTrackable(prototype) {
   (0, _commons.mixin)(prototype, TrackableMixin.prototype);
@@ -96,6 +96,7 @@ class TrackableMixin {
       click: options
     } = this._view.tracker.options || {};
     if ((0, _trackers.validateClick)(options, event, binding)) {
+      (0, _trackers.markAsTracked)(event);
       this._view.tracker.click([binding.value]);
     }
   }

package/dist/cjs/layout/{triggerable.js → mixin/triggerable.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.TriggerableMixin = void 0;
 exports.makeTriggerable = makeTriggerable;
 var _commons = require("@miso.ai/commons");
-var _constants = require("../constants.js");
-var _index = require("../actor/index.js");
+var _constants = require("../../constants.js");
+var _index = require("../../actor/index.js");
 function makeTriggerable(prototype) {
   (0, _commons.mixin)(prototype, TriggerableMixin.prototype);
 }

package/dist/cjs/layout/radio/radio.js

@@ -63,7 +63,11 @@ class RadioLayout extends _template.default {
       proxyElement
     } = view;
     this._unsubscribes = [...this._unsubscribes, view.hub.on(this._field, () => this._refresh()), proxyElement.on('click', e => this._handleClick(e))];
-    this._defaultValue ? this._select(this._defaultValue) : this._clear();
+    this._defaultValue ? this._select(this._defaultValue, {
+      silent: true
+    }) : this._clear({
+      silent: true
+    });
   }
   _preprocess(states, controls) {
     if (states.rendered) {
@@ -117,18 +121,18 @@ class RadioLayout extends _template.default {
     }
     this._state = undefined;
   }
-  _select(value) {
+  _select(value, options) {
     this._submit({
       value
-    });
+    }, options);
   }
-  _clear() {
+  _clear(options) {
     this._submit({
       unselected: true
-    });
+    }, options);
   }
-  async _submit(state) {
-    this._view.hub.update(this._field, state);
+  async _submit(state, options) {
+    this._view.hub.update(this._field, state, options);
   }
 }
 exports.default = RadioLayout;

package/dist/cjs/layout/templates.js

@@ -14,7 +14,9 @@ exports.dateBlock = dateBlock;
 exports.descriptionBlock = descriptionBlock;
 exports.discountRateText = discountRateText;
 exports.helpers = void 0;
+exports.image = image;
 exports.imageBlock = imageBlock;
+exports.imageInfoBlock = imageInfoBlock;
 exports.indexBlock = indexBlock;
 exports.priceBlock = priceBlock;
 exports.product = product;
@@ -59,6 +61,13 @@ function article(layout, state, data, meta) {
   const [openTag, closeTag] = tagPair(layout, data);
   return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.articleInfoBlock || articleInfoBlock)(layout, data, meta), (templates.indexBlock || indexBlock)(layout, data, meta), closeTag].join('');
 }
+function image(layout, state, data, meta) {
+  const {
+    templates
+  } = layout;
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.imageInfoBlock || imageInfoBlock)(layout, data, meta), closeTag].join('');
+}
 function affiliation(layout, state, data, meta) {
   const {
     templates
@@ -91,6 +100,13 @@ function articleInfoBlock(layout, data, meta) {
   } = layout;
   return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.dateBlock || dateBlock)(layout, data, meta), (templates.descriptionBlock || descriptionBlock)(layout, data, meta), (templates.ctaBlock || ctaBlock)(layout, data, meta)].join('')}</div>`;
 }
+function imageInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta)].join('')}</div>`;
+}
 function titleBlock(_ref, _ref2) {
   let {
     className
@@ -182,14 +198,17 @@ function imageBlock(layout, data) {
     templates
   } = layout;
   const {
-    cover_image
+    cover_image,
+    image_src,
+    image_alt
   } = data;
-  if (!cover_image) {
+  if (!cover_image && !image_src) {
     return '';
   }
-  const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
-  const brand = meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
-  return `<div class="${className}__item-cover-image-container">${img}${brand}</div>`;
+  const subtype = image_src ? 'image' : 'cover-image';
+  const img = subtype === 'image' ? `<img class="${className}__item-${subtype}" src="${image_src}"${image_alt ? ` alt="${image_alt}"` : ''}>` : `<img class="${className}__item-${subtype}" src="${cover_image}">`;
+  const brand = subtype === 'cover-image' && meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
+  return `<div class="${className}__item-${subtype}-container">${img}${brand}</div>`;
 }
 function indexBlock(_ref10, data, _ref11) {
   let {

package/dist/cjs/layout/text/typewriter/index.js

@@ -189,6 +189,7 @@ class TypewriterLayout extends _progressive.default {
       const index = parseInt(citationLinkElement.dataset.index);
       if (!Number.isNaN(index)) {
         this._view._events.emit('citation-click', {
+          event,
           index
         });
       }
@@ -206,6 +207,7 @@ class TypewriterLayout extends _progressive.default {
         } = anchorElement;
         if (href) {
           this._view._events.emit('link-click', (0, _commons.trimObj)({
+            event,
             url: href,
             text: innerText ? innerText.trim() : '',
             className: className || '',