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

package/dist/cjs/actor/filters.js

@@ -15,6 +15,30 @@ function mergeState() {
     facets: Object.freeze((0, _commons.trimObj)(Object.assign({}, state.facets, update.facets)))
   })));
 }
+function optionsToState() {
+  let {
+    sort
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  // TODO: facets
+  return (0, _commons.trimObj)({
+    facets: Object.freeze({}),
+    sort: sortOptionsToState(sort)
+  });
+}
+function sortOptionsToState(sort) {
+  if (!sort) {
+    return undefined;
+  }
+  const {
+    options = []
+  } = sort;
+  for (const option of options) {
+    if (option.default) {
+      return Object.freeze(option);
+    }
+  }
+  return Object.freeze(options[0]);
+}
 class Filters {
   constructor(views) {
     let {
@@ -22,7 +46,6 @@ class Filters {
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this._views = views;
     this._hub = views._hub;
-    this._states = this._initialStates = mergeState({}); // TODO: support custom initial states
     const error = this._error = this._error.bind(this);
     this._events = new _commons.EventEmitter({
       target: this,
@@ -31,13 +54,24 @@ class Filters {
     (0, _commons.defineValues)(this, {
       facets: new Facets(this, facetsOptions)
     });
+    this._unsubscribes = [views._options.on('filters', () => this._syncOptions())];
+    this._syncOptions();
+    this._states = undefined;
   }
-  get states() {
-    return this._states;
+  _syncOptions() {
+    const options = this._views._options.resolved.filters;
+    this._initialStates = optionsToState(options);
+    this.apply({
+      silent: true
+    });
+  }
+  _getStates() {
+    return this._states || this._initialStates;
   }
   update(updates) {
-    const oldStates = this._states;
-    const states = this._states = mergeState(Object.assign({}, this._states, updates));
+    const oldStates = this._getStates();
+    this._states = mergeState(Object.assign({}, oldStates, updates));
+    const states = this._getStates();
     this._events.emit('update', {
       updates,
       states,
@@ -45,21 +79,33 @@ class Filters {
     });
   }
   reset() {
-    const oldStates = this._states;
-    const states = this._states = this._initialStates;
+    const oldStates = this.states;
+    this._states = undefined;
+    const states = this._getStates();
     this._events.emit('reset', {
       states,
       oldStates
     });
   }
   apply() {
-    this._hub.update(fields.filters(), this._states);
-    this._events.emit('apply');
+    let {
+      silent = false
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const states = this._getStates();
+    this._hub.update(fields.filters(), states, {
+      silent
+    });
+    !silent && this._events.emit('apply');
   }
   _error(error) {
     this._views._error(error);
   }
-  _destroy() {}
+  _destroy() {
+    for (const unsubscribe of this._unsubscribes) {
+      unsubscribe();
+    }
+    this._unsubscribes = [];
+  }
 }
 exports.default = Filters;
 class Facets {
@@ -92,7 +138,7 @@ class Facets {
     }
   }
   _select(field, value) {
-    const values = this._options.multiple ? [...(this._filters._states.facets[field] || []), value] : [value];
+    const values = this._options.multivalued ? [...(this._filters._states.facets[field] || []), value] : [value];
     values.sort();
     this._filters.update({
       facets: {

package/dist/cjs/actor/tracker.js

@@ -17,20 +17,15 @@ class Tracker {
     let {
       hub,
       role,
-      valueless = false,
-      options
+      valueless = false
     } = _ref;
     this._hub = hub;
     this._role = role;
     this._valueless = !!valueless;
-    this._options = options;
     // TODO: know item type
 
     this._states = new _states.default(this._getSessionId());
   }
-  get options() {
-    return typeof this._options === 'function' ? this._options() : this._options;
-  }
   getState(item) {
     return this._states.getFullState(item);
   }

package/dist/cjs/actor/view.js

@@ -106,14 +106,16 @@ class ViewActor {
       } = this;
       this._tracker = new _tracker.default({
         hub,
-        role,
-        options: () => this._getTrackerOptions()
+        role
       });
     }
     return this._tracker;
   }
   get workflowOptions() {
-    return this._views._getWorkflowOptions();
+    return this._views._options.resolved;
+  }
+  get trackerOptions() {
+    return this._views._getTrackerOptions(this.role);
   }
   get filters() {
     return this._views.filters;
@@ -195,10 +197,6 @@ class ViewActor {
       silent
     });
   }
-  _getTrackerOptions() {
-    // used by tracker to expose tracker options to layout
-    return this._views._getTrackerOptions(this.role);
-  }
   _sliceData(data) {
     const {
         value,
@@ -207,7 +205,7 @@ class ViewActor {
       } = data,
       rest = _objectWithoutPropertiesLoose(data, _excluded);
     const sliced = Object.assign({
-      value: this._mapping(data),
+      value: this._mapping(data, this),
       status,
       data: value,
       meta

package/dist/cjs/actor/views.js

@@ -47,10 +47,7 @@ class ViewsActor {
     window.addEventListener('resize', syncSize);
     this._unsubscribes = [() => window.removeEventListener('resize', syncSize), hub.on(fields.data(), data => this.refresh({
       data
-    })), options.on('autocomplete', () => this._syncAutocompleteOptions()), options.on('pagination', () => this._syncPaginationOptions()), options.on('trackers', () => this._syncTrackers()), options.on('layouts', () => this._syncLayouts())];
-    this._syncAutocompleteOptions();
-    this._syncPaginationOptions();
-    this._syncTrackers();
+    })), options.on('layouts', () => this._syncLayouts())];
     this._syncLayouts();
   }
   get trackers() {
@@ -150,15 +147,17 @@ class ViewsActor {
         // TODO: try to omit if unchanged
         const fn = () => this._layoutFactory.create(name, Object.assign({}, options, {
           role,
-          workflow: this._workflowName,
-          workflowOptions: this._getWorkflowOptions()
+          workflow: this._workflowName
         }));
         if (role === _constants.ROLE.CONTAINER) {
           for (const view of this._containers.values()) {
             view.layout = fn();
           }
         } else {
-          this.get(role).layout = fn();
+          const view = this.get(role);
+          if (view) {
+            view.layout = fn();
+          }
         }
       }
     }
@@ -171,12 +170,11 @@ class ViewsActor {
     const [name, options] = args;
     return this._layoutFactory.create(name, Object.assign({}, options, {
       role,
-      workflow: this._workflowName,
-      workflowOptions: this._getWorkflowOptions()
+      workflow: this._workflowName
     }));
   }
   get(role) {
-    return this._views[role] || (this._views[role] = new _view.default(this, role));
+    return this._views[role];
   }
   get views() {
     return this._getViews(true);
@@ -219,11 +217,9 @@ class ViewsActor {
   _getData(data) {
     return data || this._hub.states[fields.data()];
   }
-  _syncTrackers() {
-    this._trackerOptions = this._options.resolved.trackers;
-  }
   _getTrackerOptions(role) {
-    return (0, _trackers.normalizeTrackerOptions)(this._trackerOptions && this._trackerOptions[role] || false);
+    const allTrackerOptions = this._options.resolved.trackers;
+    return (0, _trackers.normalizeTrackerOptions)(allTrackerOptions && allTrackerOptions[role] || false);
   }
   _getContainerTracker() {
     if (!this._containerTracker) {
@@ -238,18 +234,6 @@ class ViewsActor {
     }
     return this._containerTracker;
   }
-  _syncAutocompleteOptions() {
-    this._autocompleteOptions = this._options.resolved.autocomplete;
-  }
-  _syncPaginationOptions() {
-    this._paginationOptions = this._options.resolved.pagination;
-  }
-  _getWorkflowOptions() {
-    return (0, _commons.trimObj)({
-      autocomplete: this._autocompleteOptions,
-      pagination: this._paginationOptions
-    });
-  }
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRACKING_STATUS = exports.TRACKING_EVENT_TYPES = exports.STATUS = exports.ROLE = exports.PERFORMANCE_EVENT_TYPES = exports.ORGANIC_QUESTION_SOURCE = exports.EVENT_TYPE = exports.DEFAULT_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
+exports.WORKFLOW_CONFIGURABLE = exports.TRACKING_STATUS = exports.TRACKING_EVENT_TYPES = exports.STATUS = exports.ROLE = exports.PERFORMANCE_EVENT_TYPES = exports.ORGANIC_QUESTION_SOURCE = 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.isPerformanceEventType = isPerformanceEventType;
 exports.isProductRole = isProductRole;
@@ -34,6 +34,7 @@ const ROLE = exports.ROLE = Object.freeze({
   FACETS: 'facets',
   TOTAL: 'total',
   MORE: 'more',
+  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]);
@@ -81,4 +82,13 @@ function validateTrackingStatus(value) {
   if (value !== TRACKING_STATUS.UNTRACKED && value !== TRACKING_STATUS.TRACKING && value !== TRACKING_STATUS.TRIGGERED) {
     throw new Error(`Unrecognized tracking status: ${value}`);
   }
-}
+}
+const WORKFLOW_CONFIGURABLE = exports.WORKFLOW_CONFIGURABLE = Object.freeze({
+  API: 'api',
+  LAYOUTS: 'layouts',
+  DATA_PROCESSOR: 'dataProcessor',
+  TRACKERS: 'trackers',
+  INTERACTIONS: 'interactions',
+  FILTERS: 'filters',
+  PAGINATION: 'pagination'
+});

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

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "MisoResultsElement", {
     return _misoResults.default;
   }
 });
+Object.defineProperty(exports, "MisoSortElement", {
+  enumerable: true,
+  get: function () {
+    return _misoSort.default;
+  }
+});
 Object.defineProperty(exports, "MisoSourcesElement", {
   enumerable: true,
   get: function () {
@@ -121,5 +127,6 @@ var _misoKeywords = _interopRequireDefault(require("./miso-keywords.js"));
 var _misoTotal = _interopRequireDefault(require("./miso-total.js"));
 var _misoFacets = _interopRequireDefault(require("./miso-facets.js"));
 var _misoMore = _interopRequireDefault(require("./miso-more.js"));
+var _misoSort = _interopRequireDefault(require("./miso-sort.js"));
 var _misoError = _interopRequireDefault(require("./miso-error.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

@@ -203,7 +203,7 @@ class AffiliationLayout extends _collection.default {
     super.initialize(view);
     const {
       viewable: options
-    } = this._view.tracker.options || {};
+    } = this._view.trackerOptions || {};
     this._viewable = new _commons.CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
   }
 

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

@@ -106,7 +106,7 @@ class ContainerLayout extends _raf.default {
   _trackImpression() {
     const {
       impression: options
-    } = this._view.tracker.options || {};
+    } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -119,7 +119,7 @@ class ContainerLayout extends _raf.default {
   async _trackViewable(element) {
     const {
       viewable: options
-    } = this._view.tracker.options || {};
+    } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }

package/dist/cjs/layout/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "SearchBoxLayout", {
     return _searchBox.default;
   }
 });
+Object.defineProperty(exports, "SelectLayout", {
+  enumerable: true,
+  get: function () {
+    return _select.default;
+  }
+});
 Object.defineProperty(exports, "TemplateBasedLayout", {
   enumerable: true,
   get: function () {
@@ -114,5 +120,6 @@ var _text = _interopRequireDefault(require("./text/text.js"));
 var _index = _interopRequireDefault(require("./text/typewriter/index.js"));
 var _affiliation = _interopRequireDefault(require("./affiliation/affiliation.js"));
 var _facets = _interopRequireDefault(require("./input/facets.js"));
+var _select = _interopRequireDefault(require("./input/select.js"));
 var _moreButton = _interopRequireDefault(require("./button/more-button.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
+var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _bindings = _interopRequireDefault(require("../../util/bindings.js"));
 const _excluded = ["className", "templates"];
@@ -150,7 +151,6 @@ class FacetsLayout extends _template.default {
   initialize(view) {
     const {
       proxyElement,
-      hub,
       filters
     } = view;
     this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e)), filters.on('update', e => this._updateSelections(e)), filters.on('reset', () => this._syncSelections())];
@@ -166,7 +166,7 @@ class FacetsLayout extends _template.default {
     this._clearBindings();
   }
   _syncSelections() {
-    const selectedValues = getSelectedValues(this._view.filters.states.facets);
+    const selectedValues = getSelectedValues(this._view.hub.states[_index.fields.filters()].facets);
     for (const {
       value: {
         field,

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

@@ -396,7 +396,7 @@ class SearchBoxLayout extends _template.default {
   _trackSubmit(value) {
     const {
       [_constants.EVENT_TYPE.SUBMIT]: options
-    } = this._view.tracker.options || {};
+    } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }

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

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _template = _interopRequireDefault(require("../template.js"));
+var _trackable = require("../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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const TYPE = 'select';
+const DEFAULT_CLASSNAME = 'miso-select';
+function root(layout, state) {
+  const {
+    className,
+    role,
+    templates
+  } = layout;
+  const roleAttr = role ? `data-role="${role}"` : '';
+  const values = layout._getItems(state);
+  const selected = values.find(value => value.selected) || values[0];
+  return `
+<div class="${className}" ${roleAttr}>
+  ${templates.button(layout, selected)}
+  ${templates.options(layout, state)}
+</div>`;
+}
+function button(layout, value) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<button class="${className}__button" data-role="button" tabindex="0">${templates.text(layout, value)}</button>`;
+}
+function options(layout, state) {
+  const {
+    className,
+    templates
+  } = layout;
+  const values = layout._getItems(state);
+  return `<ul class="${className}__options">${values.map((value, index) => templates.option(layout, value, {
+    index
+  })).join('')}</ul>`;
+}
+function option(layout, value) {
+  const {
+    className,
+    templates
+  } = layout;
+  const selectedClass = value.selected ? 'selected' : '';
+  return `<li class="${className}__option ${selectedClass}" data-role="option" tabindex="0">${templates.text(layout, value)}</li>`;
+}
+function text(layout, value) {
+  return (0, _commons.escapeHtml)(value && value.text && (0, _commons.kebabOrSnakeToHuman)(value.text) || value || '');
+}
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  button,
+  options,
+  option,
+  text
+});
+class SelectLayout extends _template.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor() {
+    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+    this._initTrackable();
+  }
+  initialize(view) {
+    const {
+      proxyElement
+    } = view;
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e))];
+  }
+  _afterRender(element, state) {
+    this._syncBindings(element, state);
+  }
+  _unrender() {
+    this._clearBindings();
+  }
+  _getItems(state) {
+    return state.value || [];
+  }
+  _getOptionsElement(element) {
+    return element.querySelector(`[data-role="options"]`);
+  }
+  _getItemElements(element) {
+    return element ? Array.from(element.querySelectorAll(`[data-role="option"]`)) : [];
+  }
+  _handleClick(event) {
+    if (!this._element) {
+      return;
+    }
+    for (let element = event.target; element && element !== this._element; element = element.parentElement) {
+      const {
+        role
+      } = element.dataset;
+      switch (role) {
+        case 'button':
+          this._toggle();
+          break;
+        case 'option':
+          const binding = this._bindings.get(element);
+          this._select(binding && binding.value);
+          break;
+      }
+    }
+  }
+  _toggle() {
+    if (!this._element) {
+      return;
+    }
+    const child = this._element.children[0];
+    child && child.classList.toggle('open');
+  }
+  async _select(value) {
+    if (!value) {
+      return;
+    }
+    // TODO: reflect selection right away
+    this._view._events.emit('select', {
+      value
+    });
+  }
+  destroy() {
+    this._destroyTrackable();
+    super.destroy();
+  }
+}
+exports.default = SelectLayout;
+(0, _trackable.makeTrackable)(SelectLayout.prototype);

package/dist/cjs/layout/raf.js

@@ -5,21 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-const _excluded = ["role", "workflow", "workflowOptions"];
+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.includes(n)) continue; t[n] = r[n]; } return t; }
 class RafLayout {
   constructor() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {
         role,
-        workflow,
-        workflowOptions
+        workflow
       } = _ref,
       options = _objectWithoutPropertiesLoose(_ref, _excluded);
     (0, _commons.defineValues)(this, {
       role,
       workflow,
-      workflowOptions,
       options
     });
     this._unsubscribes = [];

package/dist/cjs/layout/trackable.js

@@ -56,7 +56,7 @@ class TrackableMixin {
     }
     const {
       impression: options
-    } = this._view.tracker.options || {};
+    } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -80,7 +80,7 @@ class TrackableMixin {
     }
     const {
       viewable: options
-    } = this._view.tracker.options || {};
+    } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -94,7 +94,7 @@ class TrackableMixin {
   _trackClick(event, binding) {
     const {
       click: options
-    } = this._view.tracker.options || {};
+    } = this._view.trackerOptions || {};
     if ((0, _trackers.validateClick)(options, event, binding)) {
       this._view.tracker.click([binding.value]);
     }

package/dist/cjs/layout/triggerable.js

@@ -19,7 +19,7 @@ class TriggerableMixin {
     if (!this.options.infiniteScroll) {
       return;
     }
-    const workflowPaginationOptions = this.workflowOptions.pagination;
+    const workflowPaginationOptions = this._view.workflowOptions.pagination;
     if (!workflowPaginationOptions.active || workflowPaginationOptions.mode !== 'infiniteScroll') {
       return;
     }

package/dist/cjs/util/trackers.js

@@ -8,6 +8,8 @@ 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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+// TODO: think about how to incorporate this with workflow options
+
 const DEFAULT_TRACKER_OPTIONS = Object.freeze({
   impression: Object.freeze({}),
   viewable: Object.freeze({

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

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

@@ -10,7 +10,7 @@ var _index = require("../actor/index.js");
 var _constants = require("../constants.js");
 var _index2 = require("../layout/index.js");
 var _index3 = require("../affiliation/index.js");
-var _options = require("./options.js");
+var _index4 = require("./options/index.js");
 var _processors = require("./processors.js");
 var _useLink = require("./use-link.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -65,7 +65,7 @@ const DEFAULT_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_OP
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS
 }));
-const ROLES_OPTIONS = (0, _options.mergeRolesOptions)(_base.default.ROLES_OPTIONS, {
+const ROLES_OPTIONS = (0, _index4.mergeRolesOptions)(_base.default.ROLES_OPTIONS, {
   main: _constants.ROLE.ANSWER,
   members: Object.keys(DEFAULT_LAYOUTS)
 });