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

package/dist/cjs/util/trackers.js

@@ -3,13 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isTracked = isTracked;
+exports.markAsTracked = markAsTracked;
 exports.normalizeTrackerOptions = normalizeTrackerOptions;
 exports.validateClick = validateClick;
 var _commons = require("@miso.ai/commons");
 const _excluded = ["impression", "viewable", "click"];
 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; }
-// TODO: think about how to incorporate this with workflow options
-
+const TRACKED = Symbol.for('miso:tracked');
+function isTracked(event) {
+  return !!event[TRACKED];
+}
+function markAsTracked(event) {
+  event[TRACKED] = true;
+}
 const DEFAULT_TRACKER_OPTIONS = Object.freeze({
   impression: Object.freeze({}),
   viewable: Object.freeze({
@@ -24,6 +31,8 @@ function mergeOptions(def, opt) {
   // if opt is falsy then return false, merge otherwise
   return !!opt && Object.assign({}, def, opt);
 }
+
+// TODO: don't need this anymore
 function normalizeTrackerOptions(options) {
   // TODO: make this { active: false } to keep it an object
   if (options === false) {
@@ -61,15 +70,19 @@ function validateClick() {
   }
 
   // standard criteria
-  // 1. it must be a left click
+  // 1. each event can only be tracked once
+  if (isTracked(event)) {
+    return false;
+  }
+  // 2. it must be a left click
   if (event.button !== 0) {
     return false;
   }
-  // 2. event default must not be prevented
+  // 3. event default must not be prevented
   if (event.defaultPrevented) {
     return false;
   }
-  // 3. must go through a real link
+  // 4. must go through a real link
   if (!(0, _commons.findInAncestors)(event.target, element => element.tagName === 'A' && element.href || undefined)) {
     return false;
   }

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.4';
+var _default = exports.default = '1.11.5-beta.1';

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

@@ -13,7 +13,9 @@ var _index3 = require("../affiliation/index.js");
 var _index4 = require("./options/index.js");
 var _processors = require("./processors.js");
 var _useLink = require("./use-link.js");
-const _excluded = ["setValue", "focus", "param", "sourceParam"];
+var _trackers = require("../util/trackers.js");
+const _excluded = ["setValue", "focus", "param", "sourceParam"],
+  _excluded2 = ["event"];
 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 DEFAULT_API_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_API_OPTIONS, {
@@ -41,6 +43,10 @@ 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, {
+    incremental: true,
+    itemType: 'image'
+  }],
   [_constants.ROLE.SOURCES]: [_index2.ListLayout.type, {
     incremental: true,
     itemType: 'article',
@@ -63,6 +69,7 @@ const DEFAULT_TRACKERS = Object.freeze(Object.assign({}, _base.default.DEFAULT_T
     deduplicated: false,
     click: _index4.DEFAULT_TRACKER_OPTIONS.click // click only
   },
+  [_constants.ROLE.IMAGES]: _index4.DEFAULT_TRACKER_OPTIONS,
   [_constants.ROLE.SOURCES]: _index4.DEFAULT_TRACKER_OPTIONS,
   [_constants.ROLE.AFFILIATION]: _index4.DEFAULT_TRACKER_OPTIONS,
   [_constants.ROLE.PRODUCTS]: _index4.DEFAULT_TRACKER_OPTIONS
@@ -306,7 +313,6 @@ class AnswerBasedWorkflow extends _base.default {
     if (args.role !== _constants.ROLE.ANSWER) {
       return payload;
     }
-    console.log('writeAnswerClickInteraction', payload, args);
     const {
       items = []
     } = args;
@@ -334,8 +340,12 @@ class AnswerBasedWorkflow extends _base.default {
   // handlers //
   _onCitationClick(_ref4) {
     let {
-      index
+      index,
+      event
     } = _ref4;
+    if ((0, _trackers.isTracked)(event)) {
+      return;
+    }
     const {
       value
     } = this.states[_index.fields.data()] || {};
@@ -348,9 +358,18 @@ class AnswerBasedWorkflow extends _base.default {
       return;
     }
     // TODO: should we track impression as well?
+    (0, _trackers.markAsTracked)(event);
     this._views.trackers.sources.click([source.product_id]);
   }
-  _onAnswerLinkClick(item) {
+  _onAnswerLinkClick(_ref5) {
+    let {
+        event
+      } = _ref5,
+      item = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+    if ((0, _trackers.isTracked)(event)) {
+      return;
+    }
+    (0, _trackers.markAsTracked)(event);
     // put everything into args and let _defaultProcessInteraction() handles it
     // for it's hard to make it a standard item
     this._views.trackers.answer.click([], {

package/dist/cjs/workflow/search.js

@@ -85,7 +85,6 @@ class Search extends _searchBased.default {
 
   // destroy //
   _destroy(options) {
-    this._feedback._destroy();
     this._destroyAutocomplete();
     super._destroy(options);
   }

package/package.json

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

package/src/actor/views.js

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

package/src/asset/svgs.js

@@ -14,6 +14,8 @@ const ICON_NAME = {
   SEND: 'send',
   SEARCH: 'search',
   TRIANGLE: 'triangle',
+  TRIANGLE_EQ: 'triangle-eq',
+  CHEVRON_NEGATIVE: 'chevron-negative',
 };
 
 // CC0 SVGs
@@ -23,7 +25,11 @@ 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>`;
 
@@ -52,3 +58,5 @@ export function getIcon(name) {
 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_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);

package/src/constants.js

@@ -15,6 +15,7 @@ export const ROLE = Object.freeze({
   ITEMS: 'items',
   QUESTION: 'question',
   ANSWER: 'answer',
+  IMAGES: 'images',
   SOURCES: 'sources',
   RELATED_RESOURCES: 'related_resources',
   QUERY_SUGGESTIONS: 'query_suggestions',
@@ -36,6 +37,7 @@ const DATA_ROLE_SET = new Set([
   ROLE.ITEMS,
   ROLE.QUESTION,
   ROLE.ANSWER,
+  ROLE.IMAGES,
   ROLE.SOURCES,
   ROLE.RELATED_RESOURCES,
   ROLE.QUERY_SUGGESTIONS,
@@ -51,6 +53,7 @@ export function isDataRole(role) {
 
 const PRODUCT_ROLE_SET = new Set([
   ROLE.PRODUCTS,
+  ROLE.IMAGES,
   ROLE.SOURCES,
   ROLE.RELATED_RESOURCES,
 ]);

package/src/element/role/index.js

@@ -7,6 +7,7 @@ export { default as MisoProductsElement } from './miso-products.js';
 export { default as MisoQuestionElement } from './miso-question.js';
 export { default as MisoAnswerElement } from './miso-answer.js';
 export { default as MisoSourcesElement } from './miso-sources.js';
+export { default as MisoImagesElement } from './miso-images.js';
 export { default as MisoRelatedResourcesElement } from './miso-related-resources.js';
 export { default as MisoRelatedQuestionsElement } from './miso-related-questions.js';
 export { default as MisoSovrnAffiliationElement } from './miso-affiliation.js';

package/src/element/role/miso-images.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoImagesElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.IMAGES,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-images';
+  }
+
+}

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

@@ -1,7 +1,7 @@
 import { escapeHtml } from '@miso.ai/commons';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
-import { makeTrackable } from '../trackable.js';
+import { makeTrackable } from '../mixin/trackable.js';
 
 const TYPE = 'option-list';
 const DEFAULT_CLASSNAME = 'miso-option-list';

package/src/layout/input/select.js

@@ -1,6 +1,6 @@
 import { escapeHtml, kebabOrSnakeToHuman } from '@miso.ai/commons';
 import TemplateBasedLayout from '../template.js';
-import { makeTrackable } from '../trackable.js';
+import { makeTrackable } from '../mixin/trackable.js';
 
 const TYPE = 'select';
 const DEFAULT_CLASSNAME = 'miso-select';

package/src/layout/list/carousel.js

@@ -1,13 +1,19 @@
 import CollectionLayout from './collection.js';
+import { makeSwipeable } from '../mixin/swipeable.js';
+import { CHEVRON_NEGATIVE } from '../../asset/svgs.js';
 
 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({
@@ -15,22 +21,33 @@ const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
   ...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;
-  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 `${templates.controlContainer(layout, state, 'previous')}${templates.controlContainer(layout, state, 'next')}${templates.indexIndicator(layout, state, values)}`;
+}
+
+function controlContainer(layout, state, direction) {
+  const { className, templates } = layout;
+  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) {
-  const { className } = 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>`;
+function controlIcon(layout, state, direction) {
+  return CHEVRON_NEGATIVE;
+}
+
+function indexIndicator(layout, state, values) {
+  const { className, templates } = layout;
+  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>`;
 }
 
 export default class CarouselLayout extends CollectionLayout {
@@ -49,88 +66,24 @@ export default class CarouselLayout extends CollectionLayout {
 
   constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
     super({ className, templates: { ...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;
-  }
-
-  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)`);
-    }
+    this._renderSwipeable(element, states, controls);
   }
 
-  _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();
   }
 
 }
+
+makeSwipeable(CarouselLayout.prototype);

package/src/layout/list/collection.js

@@ -1,8 +1,8 @@
 import { STATUS } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
-import { makeTrackable } from '../trackable.js';
-import { makeTriggerable } from '../triggerable.js';
-import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
+import { makeTrackable } from '../mixin/trackable.js';
+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;
@@ -13,16 +13,20 @@ function root(layout, state) {
 
 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) { // TODO: ad-hoc ongoing?
-    return templates.list(layout, state, values);
+  if (values.length > 0 || state.ongoing) { // TODO: ad-hoc ongoing?
+    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, templates, options } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
@@ -57,16 +61,19 @@ function loading() {
 const DEFAULT_TEMPLATES = Object.freeze({
   product,
   article,
+  image,
   question,
   root,
   [STATUS.READY]: ready,
   empty: () => ``,
+  body,
   list,
   ordered: false,
   items,
   item,
   productInfoBlock,
   articleInfoBlock,
+  imageInfoBlock,
   brandBlock,
   titleBlock,
   descriptionBlock,

package/src/layout/mixin/swipeable.js

@@ -0,0 +1,162 @@
+import { mixin, requestAnimationFrame as raf } from '@miso.ai/commons';
+
+export function makeSwipeable(prototype) {
+  mixin(prototype, SwipeableMixin.prototype);
+}
+
+export 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;
+    raf(() => 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({ state } = {}) {
+    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
+
+}

package/src/layout/{trackable.js → mixin/trackable.js}

@@ -1,7 +1,7 @@
 import { mixin } from '@miso.ai/commons';
-import Bindings from '../util/bindings.js';
-import Viewables from '../util/viewables.js';
-import { validateClick } from '../util/trackers.js';
+import Bindings from '../../util/bindings.js';
+import Viewables from '../../util/viewables.js';
+import { validateClick, markAsTracked } from '../../util/trackers.js';
 
 export function makeTrackable(prototype) {
   mixin(prototype, TrackableMixin.prototype);
@@ -80,6 +80,7 @@ export class TrackableMixin {
   _trackClick(event, binding) {
     const { click: options } = this._view.tracker.options || {};
     if (validateClick(options, event, binding)) {
+      markAsTracked(event);
       this._view.tracker.click([binding.value]);
     }
   }

package/src/layout/{triggerable.js → mixin/triggerable.js}

@@ -1,6 +1,6 @@
 import { mixin, viewable as whenViewable } from '@miso.ai/commons';
-import { STATUS } from '../constants.js';
-import { fields } from '../actor/index.js';
+import { STATUS } from '../../constants.js';
+import { fields } from '../../actor/index.js';
 
 export function makeTriggerable(prototype) {
   mixin(prototype, TriggerableMixin.prototype);