@miso.ai/client-sdk-ui 1.10.0-beta.0 → 1.10.0-beta.10

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

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
+var _trackable = require("../trackable.js");
 var _templates = require("../templates.js");
 const _excluded = ["templates", "itemType"];
 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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-const VALUE = Symbol.for('miso.value');
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function root(layout, state) {
   const {
     className,
@@ -28,7 +27,7 @@ function ready(layout, state) {
   const {
     templates
   } = layout;
-  const values = state.value;
+  const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
   if (values && values.length > 0 || state.ongoing) {
@@ -45,7 +44,7 @@ function list(layout, state, values) {
   } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
 }
 function items(layout, state, values) {
   let {
@@ -84,7 +83,20 @@ const DEFAULT_TEMPLATES = Object.freeze({
   list,
   ordered: false,
   items,
-  item
+  item,
+  productInfoBlock: _templates.productInfoBlock,
+  articleInfoBlock: _templates.articleInfoBlock,
+  brandBlock: _templates.brandBlock,
+  titleBlock: _templates.titleBlock,
+  descriptionBlock: _templates.descriptionBlock,
+  dateBlock: _templates.dateBlock,
+  priceBlock: _templates.priceBlock,
+  discountRateText: _templates.discountRateText,
+  ctaBlock: _templates.ctaBlock,
+  cta: _templates.cta,
+  imageBlock: _templates.imageBlock,
+  indexBlock: _templates.indexBlock,
+  helpers: _templates.helpers
 });
 class CollectionLayout extends _template.default {
   static get category() {
@@ -103,19 +115,12 @@ class CollectionLayout extends _template.default {
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates),
       itemType
     }, options));
-    (0, _commons.defineValues)(this, {
-      bindings: Object.freeze({
-        list: this._listBindings.bind(this)
-      })
-    });
     this._view = undefined;
+    this._initTrackable();
   }
   initialize(view) {
     this._view = view;
-    const {
-      proxyElement
-    } = this._view = view;
-    this._unsubscribes.push(proxyElement.on('click', this._onClick.bind(this)));
+    this._unsubscribes.push(view.proxyElement.on('click', this._onClick.bind(this)));
   }
   _preprocess(_ref2) {
     let {
@@ -136,7 +141,7 @@ class CollectionLayout extends _template.default {
   _html(state, rendered, incremental) {
     if (incremental) {
       const offset = rendered.value.length;
-      const values = state.value.slice(offset);
+      const values = (this._getItems(state) || []).slice(offset);
       return values.length > 0 ? this.templates.items(this, state, values, {
         offset
       }) : '';
@@ -165,52 +170,40 @@ class CollectionLayout extends _template.default {
     } else {
       element.innerHTML = html;
     }
-    this._syncValues(element, state);
+    this._syncBindings(element, state);
   }
-  _syncValues(element, state) {
-    if (!element) {
-      return;
-    }
-    const values = state.value || [];
-    let i = 0;
-    for (const itemElement of this._listItemElements(element)) {
-      itemElement[VALUE] = values[i++];
-    }
+  _unrender() {
+    this._clearBindings();
+  }
+  _getItems(state) {
+    return state.value;
   }
   _getListElement(element) {
-    return element.querySelector(`.${this.className}__list`);
+    return element.querySelector('[data-role="list"]');
   }
-  _listItemElements(element) {
+  _getItemElements(element) {
     return element ? Array.from(element.querySelectorAll(`[data-role="item"]`)) : [];
   }
-  _listBindings(rootElement) {
-    if (!rootElement) {
-      return [];
-    }
-    const bindings = [];
-    for (const element of this._listItemElements(rootElement)) {
-      const value = element[VALUE];
-      if (!value) {
-        continue;
-      }
-      const key = this.options.itemType === 'product' ? value.product_id : value;
-      bindings.push({
-        element,
-        key,
-        value
-      });
-    }
-    return bindings;
-  }
   _onClick(event) {
     const element = event.target.closest(`[data-role="item"]`);
     if (!element) {
       return;
     }
-    const value = element[VALUE];
+    const binding = this._bindings.get(element);
+    if (!binding) {
+      return;
+    }
+    this._trackClick(event, binding);
+    this._emitClickEvent(event, binding);
+  }
+  _emitClickEvent(event, binding) {
     const {
       session
     } = this._view._state;
+    const {
+      value,
+      element
+    } = binding;
     this._view._events.emit('click', {
       session,
       value,
@@ -219,8 +212,10 @@ class CollectionLayout extends _template.default {
     });
   }
   destroy() {
+    this._destroyTrackable();
     this._view = undefined;
     super.destroy();
   }
 }
-exports.default = CollectionLayout;
+exports.default = CollectionLayout;
+(0, _trackable.makeTrackable)(CollectionLayout.prototype);

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _collection = _interopRequireDefault(require("./collection.js"));
 const _excluded = ["className"];
 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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'list';
 const DEFAULT_CLASSNAME = 'miso-list';
 class ListLayout extends _collection.default {

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

@@ -9,7 +9,7 @@ var _radio = _interopRequireDefault(require("./radio.js"));
 var _svgs = require("../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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'feedback';
 const DEFAULT_CLASSNAME = 'miso-feedback';
 const OPTIONS = ['helpful', 'unhelpful'];

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

@@ -10,7 +10,7 @@ var _template = _interopRequireDefault(require("../template.js"));
 var _templates = require("../templates.js");
 const _excluded = ["className", "templates", "field", "defaultValue"];
 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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function root(layout) {
   const {
     className,

package/dist/cjs/layout/raf.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 const _excluded = ["role", "workflow"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 class RafLayout {
   constructor() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/cjs/layout/template.js

@@ -9,7 +9,7 @@ var _raf = _interopRequireDefault(require("./raf.js"));
 var _templates = require("./templates.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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 class TemplateBasedLayout extends _raf.default {
   constructor() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/cjs/layout/templates.js

@@ -3,10 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.affiliation = affiliation;
+exports.affiliationInfoBlock = affiliationInfoBlock;
 exports.article = article;
+exports.articleInfoBlock = articleInfoBlock;
+exports.brandBlock = brandBlock;
+exports.cta = cta;
+exports.ctaBlock = ctaBlock;
+exports.dateBlock = dateBlock;
+exports.descriptionBlock = descriptionBlock;
+exports.discountRateText = discountRateText;
+exports.helpers = void 0;
+exports.imageBlock = imageBlock;
+exports.indexBlock = indexBlock;
+exports.priceBlock = priceBlock;
 exports.product = product;
+exports.productInfoBlock = productInfoBlock;
 exports.question = question;
 exports.requiresImplementation = requiresImplementation;
+exports.titleBlock = titleBlock;
 exports.unimplemented = unimplemented;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
@@ -28,83 +43,191 @@ function product(layout, state, data, meta) {
   const {
     templates
   } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
-  return [openTag, (templates.imageBlock || renderImageBlock)(layout, data, meta), (templates.infoBlock || productInfoBlock)(layout, data, meta), (templates.indexBlock || renderIndexBlock)(layout, data, meta), closeTag].join('');
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.productInfoBlock || productInfoBlock)(layout, data, meta), closeTag].join('');
 }
 function question(layout, state, data) {
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return `${openTag}${data.value || data.text || data}${closeTag}`;
 }
 function article(layout, state, data, meta) {
   const {
     templates
   } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
-  return [openTag, (templates.imageBlock || renderImageBlock)(layout, data, meta), (templates.infoBlock || articleInfoBlock)(layout, data, meta), (templates.indexBlock || renderIndexBlock)(layout, data, meta), closeTag].join('');
+  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 productInfoBlock(_ref, _ref2) {
+function affiliation(layout, state, data, meta) {
+  const {
+    templates
+  } = layout;
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [openTag, (templates.infoBlock || templates.affiliationInfoBlock || affiliationInfoBlock)(layout, data, meta), (templates.imageBlock || imageBlock)(layout, data, meta), (templates.brandBlock || brandBlock)(layout, data, meta), closeTag].join('');
+}
+function affiliationInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.descriptionBlock || descriptionBlock)(layout, data, meta), (templates.priceBlock || priceBlock)(layout, data, meta), (templates.ctaBlock || ctaBlock)(layout, data, meta)].join('')}</div>`;
+}
+function productInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.descriptionBlock || descriptionBlock)(layout, data, meta), (templates.priceBlock || priceBlock)(layout, data, meta)].join('')}</div>`;
+}
+function articleInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = 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 titleBlock(_ref, _ref2) {
   let {
     className
   } = _ref;
   let {
-    title,
-    description,
-    sale_price,
-    original_price
+    title
   } = _ref2;
-  let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>`;
-  }
-  if (description) {
-    content += `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>`;
-  }
-  const price = sale_price || original_price;
-  if (price) {
-    content += `<hr><div class="${className}__item-price">${price}</div>`;
-    // TODO: enhance this
+  return title ? `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>` : '';
+}
+function brandBlock(_ref3, _ref4) {
+  let {
+    className
+  } = _ref3;
+  let {
+    brand,
+    brand_logo
+  } = _ref4;
+  if (!brand && !brand_logo) {
+    return '';
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  const content = brand_logo ? `<img class="${className}__item-brand-logo" src="${brand_logo}"${brand ? ` alt="${brand}"` : ''}>` : `<div class="${className}__item-brand">${brand}</div>`;
+  return `<div class="${className}__item-brand-container">${content}</div>`;
 }
-function articleInfoBlock(_ref3, _ref4) {
+function descriptionBlock(_ref5, _ref6) {
+  let {
+    className
+  } = _ref5;
+  let {
+    snippet,
+    description
+  } = _ref6;
+  return snippet ? `<div class="${className}__item-snippet">${snippet}</div>` : description ? `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>` : '';
+}
+function dateBlock(_ref7, _ref8) {
   let {
     className,
     templates
-  } = _ref3;
+  } = _ref7;
   let {
-    title,
-    snippet,
-    description,
     created_at,
     updated_at,
     published_at
-  } = _ref4;
+  } = _ref8;
   const date = published_at || created_at || updated_at;
+  return date ? `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>` : '';
+}
+function priceBlock(layout, data) {
+  const {
+    className,
+    templates
+  } = layout;
+  const {
+    sale_price,
+    original_price,
+    currency = 'USD'
+  } = data;
+  const price = sale_price || original_price;
+  if (!price) {
+    return '';
+  }
+  const has_price_difference = original_price !== undefined && sale_price !== undefined && sale_price < original_price;
+  const discount_rate_percent = data.discount_rate_percent || (has_price_difference ? Math.floor((1 - sale_price / original_price) * 100) : undefined);
   let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>`;
+  // original price
+  if (has_price_difference) {
+    content += `<span class="${className}__item-original-price miso-price" data-currency="${currency}">${original_price}</span><br>`;
   }
-  if (date) {
-    content += `<div class="${className}__item-date">${renderDate(date, templates.date)}</div>`;
+  // current price
+  content += `<span class="${className}__item-price miso-price" data-currency="${currency}">${price}</span>`;
+  // discount rate
+  if (discount_rate_percent) {
+    const text = (templates.discountRateText || discountRateText)(layout, Object.assign({}, data, {
+      discount_rate_percent
+    }));
+    content += ` <span class="${className}__item-discount-rate">${text}</span>`;
   }
-  if (snippet) {
-    content += `<div class="${className}__item-snippet">${snippet}</div>`;
-  } else if (description) {
-    content += `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>`;
+  return `<div class="${className}__item-price-container">${content}</div>`;
+}
+function discountRateText(layout, _ref9) {
+  let {
+    discount_rate_percent
+  } = _ref9;
+  return `(${discount_rate_percent}% off)`;
+}
+function imageBlock(_ref10, _ref11) {
+  let {
+    className
+  } = _ref10;
+  let {
+    cover_image
+  } = _ref11;
+  if (!cover_image) {
+    return '';
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
+  return `<div class="${className}__item-cover-image-container">${img}</div>`;
+}
+function indexBlock(_ref12, data, _ref13) {
+  let {
+    className
+  } = _ref12;
+  let {
+    index
+  } = _ref13;
+  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${index + 1}"></span></div>`;
+}
+function ctaBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  let _cta = templates.cta || cta;
+  if (typeof _cta === 'function') {
+    _cta = _cta(layout, data, meta);
+  }
+  return _cta ? `<div class="${className}__item-cta-container">${_cta}</div>` : '';
+}
+function cta(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  let text = templates.ctaText;
+  if (typeof text === 'function') {
+    text = text(layout, data, meta);
+  }
+  return text ? `<div class="${className}__item-cta">${text}</div>` : '';
 }
 
 // helpers //
-function renderTagPair(_ref5, _ref6) {
+function tagPair(_ref14, _ref15) {
   let {
     className,
     options = {}
-  } = _ref5;
+  } = _ref14;
   let {
     product_id,
     url
-  } = _ref6;
+  } = _ref15;
+  let {
+    classSuffix = 'item-body',
+    role = 'item'
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
     link = {}
   } = options;
@@ -115,30 +238,8 @@ function renderTagPair(_ref5, _ref6) {
   const tag = url ? 'a' : 'div';
   const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
   const productAttrs = product_id ? `${_constants.ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
-  return [`<${tag} class="${className}__item-body" data-role="item" ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
-}
-function renderImageBlock(_ref7, _ref8) {
-  let {
-    className
-  } = _ref7;
-  let {
-    cover_image
-  } = _ref8;
-  if (!cover_image) {
-    return '';
-  }
-  const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
-  return `<div class="${className}__item-cover-image-container">${img}</div>`;
-}
-function renderIndexBlock(_ref9, data, _ref10) {
-  let {
-    className
-  } = _ref9;
-  let {
-    index
-  } = _ref10;
-  const i = index + 1;
-  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
+  const roleAttrs = role ? `data-role="${role}"` : '';
+  return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
 }
 const DEFAULT_DATE_OPTIONS = Object.freeze({
   locale: 'en-US',
@@ -146,7 +247,7 @@ const DEFAULT_DATE_OPTIONS = Object.freeze({
   month: 'short',
   day: 'numeric'
 });
-function renderDate(date) {
+function formatDate(date) {
   let fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_OPTIONS;
   switch (typeof fn) {
     case 'function':
@@ -158,4 +259,9 @@ function renderDate(date) {
     default:
       throw new Error(`Invalid date format: ${fn}`);
   }
-}
+}
+const helpers = exports.helpers = Object.freeze({
+  tagPair,
+  formatDate,
+  escapeHtml: _commons.escapeHtml
+});

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

@@ -9,7 +9,7 @@ var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 const _excluded = ["className", "templates", "tag"];
 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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'text';
 const DEFAULT_CLASSNAME = 'miso-text';
 function root(layout, state) {

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

@@ -12,7 +12,7 @@ var _plaintext = _interopRequireDefault(require("./plaintext.js"));
 var _utils = require("./utils.js");
 const _excluded = ["className", "tag", "format", "tooltip"];
 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 (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'typewriter';
 const DEFAULT_CLASSNAME = 'miso-typewriter';
 class TypewriterLayout extends _progressive.default {
@@ -86,7 +86,7 @@ class TypewriterLayout extends _progressive.default {
       onDebug
     });
     // capture citation link click if necessary
-    this._unsubscribes.push(this._view.proxyElement.on('click', e => this._handleClick(e)));
+    this._unsubscribes.push(this._view.proxyElement.on('click', e => this._onClick(e)));
   }
   _getSource(index) {
     const {
@@ -172,7 +172,7 @@ class TypewriterLayout extends _progressive.default {
   }
 
   // event //
-  _handleClick(_ref5) {
+  _onClick(_ref5) {
     let {
       target
     } = _ref5;