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

package/dist/cjs/combo/base.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 const _excluded = ["name", "plugin", "MisoClient"];
-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 Combo extends _commons.Component {
   constructor(_ref) {
     let {

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRACKING_STATUS = exports.STATUS = exports.ROLE = exports.ORGANIC_QUESTION_SOURCE = exports.LAYOUT_CATEGORY = exports.EVENT_TYPE = exports.DEFAULT_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
+exports.TRACKING_STATUS = exports.TRACKING_EVENT_TYPES = exports.STATUS = exports.ROLE = exports.ORGANIC_QUESTION_SOURCE = exports.LAYOUT_CATEGORY = exports.EVENT_TYPE = exports.DEFAULT_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
 exports.isDataRole = isDataRole;
 exports.validateEventType = validateEventType;
 exports.validateTrackingStatus = validateTrackingStatus;
@@ -27,9 +27,10 @@ const ROLE = exports.ROLE = Object.freeze({
   RELATED_RESOURCES: 'related_resources',
   QUERY_SUGGESTIONS: 'query_suggestions',
   RELATED_QUESTIONS: 'related_questions',
+  AFFILIATION: 'affiliation',
   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]);
+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]);
 function isDataRole(role) {
   return DATA_ROLE_SET.has(role);
 }
@@ -40,6 +41,7 @@ const LAYOUT_CATEGORY = exports.LAYOUT_CATEGORY = Object.freeze({
   QUERY: 'query',
   RADIO: 'radio',
   TEXT: 'text',
+  AFFILIATION: 'affiliation',
   ERROR: 'error'
 });
 const EVENT_TYPE = exports.EVENT_TYPE = Object.freeze({
@@ -47,6 +49,7 @@ const EVENT_TYPE = exports.EVENT_TYPE = Object.freeze({
   VIEWABLE: 'viewable',
   CLICK: 'click'
 });
+const TRACKING_EVENT_TYPES = exports.TRACKING_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK];
 const TRACKING_STATUS = exports.TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',
@@ -63,7 +66,7 @@ const STATUS = exports.STATUS = Object.freeze({
   NONEMPTY: 'nonempty'
 });
 function validateEventType(value) {
-  if (value !== EVENT_TYPE.IMPRESSION && value !== EVENT_TYPE.VIEWABLE && value !== EVENT_TYPE.CLICK) {
+  if (TRACKING_EVENT_TYPES.indexOf(value) < 0) {
     throw new Error(`Unrecognized event type: ${value}`);
   }
 }

package/dist/cjs/defaults/ask/controls.js

@@ -7,7 +7,7 @@ exports.wireFollowUps = wireFollowUps;
 exports.wireRelatedResources = wireRelatedResources;
 var _templates = require("./templates.js");
 const _excluded = ["template"];
-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 wireFollowUps(client, element) {
   let _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let {

package/dist/cjs/defaults/ask/phrases.js

@@ -12,7 +12,7 @@ const question = exports.question = 'You asked...';
 /**
  * The phrase displayed right before <miso-sources>
  */
-const sources = exports.sources = 'My reply is based on the following';
+const sources = exports.sources = 'This reply is based on the following articles';
 
 /**
  * The phrase displayed right before <miso-query-suggestions>

package/dist/cjs/defaults/ask/templates.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.followUp = followUp;
+exports.helpers = void 0;
 exports.root = root;
+exports.sections = void 0;
 var _commons = require("@miso.ai/commons");
 var _constants = require("./constants.js");
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
@@ -12,7 +14,7 @@ const _excluded = ["classPrefix", "circledCitationIndex", "phrases"],
   _excluded2 = ["classes"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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; }
 // TODO: rename classPrefix -> rootClass?
 // TODO: placeholder
 
@@ -39,6 +41,25 @@ function followUp() {
   }, '<miso-query></miso-query>'), ...answerGroup(options)]);
 }
 ;
+const sections = exports.sections = Object.freeze({
+  followUps,
+  relatedResources,
+  querySuggestions,
+  answerGroup,
+  answer,
+  sources
+});
+const helpers = exports.helpers = Object.freeze({
+  normalizeOptions,
+  normalizePhraseOptions,
+  normalizePhraseOptionKey,
+  phrase,
+  phraseText,
+  section,
+  container,
+  element,
+  attrs
+});
 
 // options //
 function normalizeOptions() {
@@ -113,7 +134,7 @@ function querySuggestions(options) {
   }), '<miso-query-suggestions></miso-query-suggestions>']);
 }
 function answerGroup(options) {
-  return [answer(options), sources(options), container(options, {
+  return [answer(options), affiliation(options), sources(options), container(options, {
     name: 'bottom-spacing',
     visibleWhen: 'ongoing'
   })];
@@ -127,7 +148,6 @@ function answer(options) {
     tag: 'div'
   }), '<miso-question></miso-question>', '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
 }
-;
 function sources(options) {
   return container(options, {
     name: 'sources',
@@ -137,7 +157,18 @@ function sources(options) {
     tag: 'h3'
   }), '<miso-sources></miso-sources>']);
 }
-;
+function affiliation(options) {
+  const {
+    affiliation = true
+  } = options || {};
+  if (!affiliation) {
+    return '';
+  }
+  return container(options, {
+    name: 'affiliation',
+    visibleWhen: 'nonempty'
+  }, ['<miso-affiliation></miso-affiliation>']);
+}
 function phrase(options, _ref2) {
   let {
     name,

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

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "MisoSourcesElement", {
     return _misoSources.default;
   }
 });
+Object.defineProperty(exports, "MisoSovrnAffiliationElement", {
+  enumerable: true,
+  get: function () {
+    return _misoAffiliation.default;
+  }
+});
 var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
 var _misoQuery = _interopRequireDefault(require("./miso-query.js"));
 var _misoQuerySuggestions = _interopRequireDefault(require("./miso-query-suggestions.js"));
@@ -86,5 +92,6 @@ var _misoAnswer = _interopRequireDefault(require("./miso-answer.js"));
 var _misoSources = _interopRequireDefault(require("./miso-sources.js"));
 var _misoRelatedResources = _interopRequireDefault(require("./miso-related-resources.js"));
 var _misoRelatedQuestions = _interopRequireDefault(require("./miso-related-questions.js"));
+var _misoAffiliation = _interopRequireDefault(require("./miso-affiliation.js"));
 var _misoError = _interopRequireDefault(require("./miso-error.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/element/role/miso-affiliation.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 MisoAffiliationElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.AFFILIATION
+    });
+  }
+  static get tagName() {
+    return 'miso-affiliation';
+  }
+}
+exports.default = MisoAffiliationElement;

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

@@ -0,0 +1,330 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _constants = require("../../constants.js");
+var _collection = _interopRequireDefault(require("../list/collection.js"));
+var _templates = require("../templates.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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const TYPE = 'affiliation';
+const DEFAULT_CLASSNAME = 'miso-affiliation';
+function root(layout, state) {
+  const {
+    className,
+    role,
+    templates
+  } = layout;
+  const {
+    status
+  } = state;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const data = state.value || {};
+  const channelAttr = data.channel ? ` data-channel="${data.channel}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+}
+function ready(layout, state) {
+  const {
+    templates
+  } = layout;
+  const items = layout._getItems(state);
+  if (items && items.length > 0) {
+    return templates.control(layout, state, 'previous') + templates.body(layout, state) + templates.control(layout, state, 'next');
+  } else {
+    return templates.empty(layout, state);
+  }
+}
+function control(layout, state, direction) {
+  const {
+    className
+  } = layout;
+  return `<div class="${className}__control-${direction}" data-role="${direction}"></div>`;
+}
+function body(layout, state) {
+  const {
+    className,
+    templates
+  } = layout;
+  const items = layout._getItems(state);
+  return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
+}
+function header(layout, state) {
+  const {
+    className,
+    templates
+  } = layout;
+  let {
+    headerText
+  } = templates;
+  if (typeof headerText === 'function') {
+    headerText = headerText(layout, state);
+  }
+  if (!headerText) {
+    return '';
+  }
+  return `<div class="${className}__header"><div class="${className}__header-tab">${headerText}</div></div>`;
+}
+function item(layout, state, value, index) {
+  const {
+    className,
+    templates,
+    options
+  } = layout;
+  const {
+    itemType
+  } = options;
+  const header = templates.itemHeader(layout, state, value, {
+    index
+  });
+  const body = templates[itemType](layout, state, value, {
+    index
+  });
+  return `<li class="${className}__item">${header}${body}</li>`;
+}
+function itemHeader(layout, state, value, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  let {
+    headerText
+  } = templates;
+  if (typeof headerText === 'function') {
+    headerText = headerText(layout, state, value, meta);
+  }
+  if (!headerText) {
+    return '';
+  }
+  return `<div class="${className}__item-header"><div class="${className}__item-header-tab">${headerText}</div></div>`;
+}
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  [_constants.STATUS.READY]: ready,
+  control,
+  body,
+  header,
+  item,
+  itemHeader,
+  affiliation: _templates.affiliation,
+  ctaText: 'View',
+  headerText: 'Featured'
+});
+const INHERITED_DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, DEFAULT_TEMPLATES));
+function normalizeAutoplayOptions(options) {
+  if (options === true) {
+    options = {
+      interval: 5000
+    };
+  } else if (typeof options === 'number') {
+    if (options <= 0) {
+      options = false;
+    } else {
+      options = {
+        interval: Math.max(options, 500)
+      };
+    }
+  }
+  return options;
+}
+function autoplayOptionsEquals(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  return a.interval === b.interval;
+}
+class AffiliationLayout extends _collection.default {
+  static get category() {
+    return _constants.LAYOUT_CATEGORY.AFFILIATION;
+  }
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor() {
+    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates,
+        autoplay
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      itemType: 'affiliation',
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+    this._itemCount = undefined;
+    this._itemIndex = 0;
+    this._displayedCount = undefined;
+    this._displayedIndex = undefined;
+    this._viewable = undefined;
+    this._autoplay = {};
+    this.autoplay(autoplay);
+  }
+  initialize(view) {
+    super.initialize(view);
+    const {
+      viewable: options
+    } = this._view.trackerOptions || {};
+    this._viewable = new _commons.CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
+  }
+  autoplay() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    options = normalizeAutoplayOptions(options);
+    if (autoplayOptionsEquals(options, this._autoplay.options)) {
+      return;
+    }
+    if (this._autoplay.options) {
+      clearInterval(this._autoplay.intervalId);
+    }
+    this._autoplay = {
+      options
+    };
+    // TODO: use slower transition speed for autoplay
+    // TODO: pause on hover
+    // TODO: cooldown after manual interaction
+    if (options) {
+      this._autoplay.intervalId = setInterval(() => this.next(), options.interval);
+    }
+  }
+  get itemIndex() {
+    return this._itemIndex;
+  }
+  set itemIndex(index) {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    if (index < 0) {
+      index = this._itemCount - 1;
+    } else if (index >= this._itemCount) {
+      index = 0;
+    }
+    this._itemIndex = index;
+    (0, _commons.requestAnimationFrame)(() => this._syncItemIndex());
+  }
+  next() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex++;
+  }
+  previous() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex--;
+  }
+  _getItems(state) {
+    const {
+      products
+    } = state.value || {};
+    return products;
+  }
+  _render(element, states, controls) {
+    super._render(element, states, controls);
+
+    // update item count, but raf to display as attribute
+    const items = this._getItems(states.state);
+    this._itemCount = items ? items.length : undefined;
+    (0, _commons.requestAnimationFrame)(() => {
+      this._syncItemCount();
+      this._syncItemIndex();
+    });
+  }
+  _syncElement(element) {
+    const oldElement = this._element;
+    super._syncElement(element);
+    this._syncViewableElement(oldElement, element);
+  }
+  _syncViewableElement(oldElement, newElement) {
+    if (oldElement === newElement) {
+      return;
+    }
+    oldElement && this._viewable.unobserve(oldElement);
+    newElement && this._viewable.observe(newElement);
+  }
+  _syncItemCount() {
+    const itemCount = this._itemCount;
+    if (itemCount === this._displayedCount) {
+      return;
+    }
+    let {
+      element
+    } = this._view;
+    element = element.firstElementChild;
+    if (!element) {
+      return;
+    }
+    this._displayedCount = itemCount;
+    if (itemCount === undefined) {
+      element.removeAttribute('data-item-count');
+    } else {
+      element.setAttribute('data-item-count', itemCount);
+    }
+  }
+  _syncItemIndex() {
+    const index = this._itemIndex;
+    if (index === this._displayedIndex) {
+      return;
+    }
+    const {
+      element
+    } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    this._displayedIndex = index;
+    listElement.style.left = `${-index * 100}%`;
+    this._viewable.display(index);
+    this._view._events.emit('display', {
+      index
+    });
+  }
+  _onViewable(index) {
+    const item = this._getRenderedItemData(index);
+    if (!item) {
+      return;
+    }
+    this._view._track(_constants.EVENT_TYPE.VIEWABLE, [item]);
+  }
+  _getRenderedItemData(index) {
+    const {
+      value
+    } = this._rendered.get(this._element) || {};
+    if (!value) {
+      return undefined;
+    }
+    const {
+      products = []
+    } = value;
+    return products[index];
+  }
+  _trackViewables() {} // omit default behavior for we want to track by other means
+
+  _onClick(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;
+    }
+  }
+}
+exports.default = AffiliationLayout;

package/dist/cjs/layout/banner/banner.js

@@ -9,7 +9,7 @@ var _template = _interopRequireDefault(require("../template.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 = 'banner';
 const DEFAULT_CLASSNAME = 'miso-banner';
 function root(layout) {

package/dist/cjs/layout/container/container.js

@@ -9,7 +9,7 @@ var _raf = _interopRequireDefault(require("../raf.js"));
 var _misoBanner = _interopRequireDefault(require("../../element/miso-banner.js"));
 const _excluded = ["logo"];
 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 = 'container';
 class ContainerLayout extends _raf.default {
   static get category() {

package/dist/cjs/layout/error/error.js

@@ -8,7 +8,7 @@ var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.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 = 'error';
 const DEFAULT_CLASSNAME = 'miso-error';
 function root(layout, state) {

package/dist/cjs/layout/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AffiliationLayout", {
+  enumerable: true,
+  get: function () {
+    return _affiliation.default;
+  }
+});
 Object.defineProperty(exports, "BannerLayout", {
   enumerable: true,
   get: function () {
@@ -94,4 +100,5 @@ var _optionList = _interopRequireDefault(require("./input/option-list.js"));
 var _feedback = _interopRequireDefault(require("./radio/feedback.js"));
 var _text = _interopRequireDefault(require("./text/text.js"));
 var _index = _interopRequireDefault(require("./text/typewriter/index.js"));
+var _affiliation = _interopRequireDefault(require("./affiliation/affiliation.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }