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

package/dist/cjs/actor/data.js

@@ -58,13 +58,12 @@ class DataActor {
       session
     } = this._hub.states;
     const request = _objectWithoutPropertiesLoose(event, _excluded);
-    if (!event._skipLoading) {
-      // emit response to update request
-      this._emitResponse({
-        session,
-        request
-      });
-    }
+
+    // emit response to update request
+    this._emitResponse({
+      session,
+      request
+    });
     try {
       const {
         signal

package/dist/cjs/actor/feedback.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var fields = _interopRequireWildcard(require("./fields.js"));
+var _constants = require("../constants.js");
 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; }
 class FeedbackActor {
@@ -13,45 +14,11 @@ class FeedbackActor {
     this._unsubscribes = [hub.on(fields.feedback(), state => this._trigger(state))];
   }
   _trigger(state) {
-    const {
-      [fields.data()]: data
-    } = this._hub.states;
-    const {
-      question_id
-    } = data && data.value || {};
-    if (!question_id) {
-      return;
-    }
-    // TODO: ad-hoc
-    const {
-      request
-    } = data || {};
-    const {
-      payload
-    } = request || {};
-    const question_source = payload && payload._meta && payload._meta.question_source;
-    this._hub.trigger(fields.interaction(), this._buildInteraction(state, {
-      question_source
-    }));
-  }
-  _buildInteraction(_ref, _ref2) {
-    let {
-      value,
-      unselected
-    } = _ref;
-    let {
-      question_source
-    } = _ref2;
-    return {
-      type: 'feedback',
-      context: {
-        custom_context: {
-          result_type: 'answer',
-          question_source,
-          value: unselected ? 'unselected' : value
-        }
-      }
-    };
+    this._hub.trigger(fields.tracker(), {
+      type: _constants.EVENT_TYPE.FEEDBACK,
+      result_type: 'answer',
+      value: state.unselected ? 'unselected' : state.value
+    });
   }
   _destroy() {
     for (const unsubscribe of this._unsubscribes) {

package/dist/cjs/actor/fields.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.completions = completions;
 exports.data = data;
 exports.event = event;
 exports.feedback = feedback;
 exports.filters = filters;
 exports.input = input;
 exports.interaction = interaction;
+exports.more = more;
 exports.query = query;
 exports.request = request;
 exports.response = response;
@@ -22,20 +24,23 @@ function session() {
 function suggestions() {
   return 'suggestions';
 }
+function completions() {
+  return 'completions';
+}
 function filters() {
   return 'filters';
 }
 function query() {
   return 'query';
 }
-function request(aspect) {
-  return aspect ? `request:${aspect}` : 'request';
+function request() {
+  return 'request';
 }
-function response(aspect) {
-  return aspect ? `response:${aspect}` : 'response';
+function response() {
+  return 'response';
 }
-function data(aspect) {
-  return aspect ? `data:${aspect}` : 'data';
+function data() {
+  return 'data';
 }
 function view(role) {
   return role ? `view:${role}` : 'view';
@@ -54,4 +59,7 @@ function feedback() {
 }
 function input() {
   return 'input';
+}
+function more() {
+  return 'more';
 }

package/dist/cjs/actor/hub.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _processors = require("../workflow/processors.js");
 class Hub {
   constructor() {
     (this._events = new _commons.EventEmitter())._injectSubscribeInterface(this);
@@ -20,7 +19,7 @@ class Hub {
     let {
       silent = false
     } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    this._states[name] = Object.freeze((0, _processors.removeDataInstructions)(state));
+    this._states[name] = Object.freeze(state);
     if (!silent) {
       this._events.emit(name, state);
     }

package/dist/cjs/actor/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "AutocompleteActor", {
-  enumerable: true,
-  get: function () {
-    return _autocomplete.default;
-  }
-});
 Object.defineProperty(exports, "DataActor", {
   enumerable: true,
   get: function () {
@@ -53,7 +47,6 @@ var _sessions = _interopRequireDefault(require("./sessions.js"));
 var _data = _interopRequireDefault(require("./data.js"));
 var _views = _interopRequireDefault(require("./views.js"));
 var _feedback = _interopRequireDefault(require("./feedback.js"));
-var _autocomplete = _interopRequireDefault(require("./autocomplete.js"));
 var _interactions = _interopRequireDefault(require("./interactions.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }

package/dist/cjs/actor/interactions.js

@@ -19,25 +19,14 @@ class InteractionsActor {
     this._unsubscribes = [hub.on(fields.interaction(), payload => this._handle(payload))];
   }
   _handle(payload) {
+    // TODO: omit when option == false
     payload = (0, _commons.asArray)(payload);
-    const {
-      preprocess = [],
-      handle
-    } = this._options.resolved.interactions;
-    for (const p of preprocess) {
-      payload = payload.map(p);
-    }
-    // TODO: support filter?
     if (payload.length === 0) {
       return;
     }
-    if (handle) {
-      handle(payload);
-    } else {
-      this._client.api.interactions.upload(payload, {
-        merge: true
-      });
-    }
+    this._client.api.interactions.upload(payload, {
+      merge: true
+    });
   }
   destroy() {
     for (const unsubscribe of this._unsubscribes) {

package/dist/cjs/actor/sessions.js

@@ -12,45 +12,14 @@ class SessionMaker {
   constructor(hub) {
     this._hub = hub;
     this._sessionIndex = 0;
-    (0, _commons.delegateGetters)(hub, this, ['active']);
-  }
-  get active() {
-    const {
-      session
-    } = this._hub.states;
-    return !!(session && session.active);
-  }
-  new() {
-    let {
-      force = false
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const currentSession = this._hub.states.session;
-    if (currentSession && !currentSession.active && !force) {
-      return;
-    }
-    const session = this._create();
-    this._hub.update(fields.session(), session);
-  }
-  start() {
-    const session = this._hub.states.session || this._create();
-    if (session.active) {
-      return;
-    }
-    this._hub.update(fields.session(), Object.assign({}, session, {
-      active: true
-    }));
   }
   restart() {
-    this._hub.update(fields.session(), this._create(true));
-  }
-  _create() {
-    let active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    return Object.freeze({
-      active,
+    const session = Object.freeze({
       uuid: (0, _commons.uuidv4)(),
       index: this._sessionIndex++,
       meta: {}
     });
+    this._hub.update(fields.session(), session);
   }
 }
 exports.default = SessionMaker;

package/dist/cjs/actor/tracker.js

@@ -8,7 +8,6 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _states = _interopRequireDefault(require("../util/states.js"));
-var _utils = require("./utils.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -36,35 +35,35 @@ class Tracker {
     return this._states.getFullState(item);
   }
   _trigger(type, items) {
-    let meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    (0, _constants.validateEventType)(type);
     if (this._valueless) {
-      meta = items;
       items = VALUELESS_ITEMS;
     }
-    (0, _constants.validateEventType)(type);
     this._syncSession();
-    if (type !== _constants.EVENT_TYPE.SUBMIT) {
-      items = this._states.untriggered((0, _commons.asArray)(items), type);
-      if (items.length === 0) {
-        return;
-      }
-      this._states.set(items, type, _constants.TRACKING_STATUS.TRIGGERED);
+    items = this._states.untriggered((0, _commons.asArray)(items), type);
+    if (items.length === 0) {
+      return;
     }
-    const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
-    const misoId = this._getMisoId();
-    const request = this._getRequestPayload();
-    const values = this._valueless ? undefined : items;
-
-    // TODO: should trigger 'tracker' and let workflow translate to interactions
-    this._hub.trigger(fields.interaction(), (0, _utils.toInteraction)({
-      property,
-      misoId,
-      request
-    }, {
-      event: type,
-      values,
-      meta
-    }));
+    this._states.set(items, type, _constants.TRACKING_STATUS.TRIGGERED);
+    this._sendToHub({
+      type,
+      items: this._valueless ? undefined : items
+    });
+  }
+  submit(_ref2) {
+    let {
+      value
+    } = _ref2;
+    this._syncSession();
+    this._sendToHub({
+      type: _constants.EVENT_TYPE.SUBMIT,
+      value
+    });
+  }
+  _sendToHub(args) {
+    this._hub.trigger(fields.tracker(), Object.freeze((0, _commons.trimObj)(Object.assign({
+      role: this._role
+    }, args))));
   }
   _syncSession() {
     const sessionId = this._getSessionId();
@@ -96,7 +95,7 @@ class Tracker {
   }
 }
 exports.default = Tracker;
-for (const type of _constants.TRACKING_EVENT_TYPES) {
+for (const type of _constants.PERFORMANCE_EVENT_TYPES) {
   Tracker.prototype[type] = function (items, meta) {
     this._trigger(type, items, meta);
   };

package/dist/cjs/actor/utils.js

@@ -4,55 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isCurrentSession = isCurrentSession;
-exports.isProduct = isProduct;
-exports.toInteraction = toInteraction;
-var _commons = require("@miso.ai/commons");
-var _constants = require("../constants.js");
-const PRODUCT_TYPED_PROPERTIES = new Set([_constants.ROLE.PRODUCTS, _constants.ROLE.SOURCES, _constants.ROLE.RELATED_RESOURCES]);
-
-// TODO: move away
-function isProduct(property) {
-  return PRODUCT_TYPED_PROPERTIES.has(property);
-}
-function toInteraction(_ref, _ref2) {
-  let {
-    property,
-    misoId,
-    request
-  } = _ref;
-  let {
-    event,
-    values,
-    manual
-  } = _ref2;
-  // TODO: ad-hoc
-  const question_source = request && request._meta && request._meta.question_source;
-  const isProductType = isProduct(property);
-  const isSubmit = event === _constants.EVENT_TYPE.SUBMIT;
-  const isAffiliation = property === _constants.ROLE.AFFILIATION;
-  const product_ids = isProductType && values ? values.map(v => typeof v === 'string' ? v : v.product_id).filter(v => v) : !isSubmit ? [] : undefined;
-  const items = !isProductType && !isSubmit && values ? values.map(v => v.text || v.id || v) : undefined;
-  const value = isSubmit ? values : undefined;
-  const channel = isAffiliation ? values[0] && values[0].channel : undefined;
-  const positions = isAffiliation ? values.map(v => v.position) : undefined;
-  const payload = (0, _commons.trimObj)({
-    type: event === 'viewable' ? 'viewable_impression' : event,
-    product_ids,
-    miso_id: misoId,
-    context: {
-      custom_context: (0, _commons.trimObj)({
-        property,
-        channel,
-        items,
-        value,
-        positions,
-        trigger: manual ? 'manual' : 'auto',
-        question_source
-      })
-    }
-  });
-  return payload;
-}
 function isCurrentSession(hub, session) {
   if (!session) {
     return false;

package/dist/cjs/actor/view.js

@@ -28,7 +28,7 @@ class ViewActor {
       target: this
     });
     this._views = views;
-    this._config = views._rolesConfig[role] || {};
+    this._mapping = asMappingFunction((views._roles.mappings || {})[role] || role);
     (0, _commons.defineValues)(this, {
       role,
       interface: new View(this)
@@ -112,6 +112,9 @@ class ViewActor {
     }
     return this._tracker;
   }
+  get workflowOptions() {
+    return this._views._getWorkflowOptions();
+  }
   get filters() {
     return this._views.filters;
   }
@@ -138,35 +141,32 @@ class ViewActor {
     const previousData = this._data;
     this._data = data = this._sliceData(data || this._views._getData());
 
-    // protocol: no reaction until session starts
+    // if data is unchanged, skip unless forced
+    if (!force && statesEqual(data, previousData)) {
+      return;
+    }
     const {
       session,
       status,
       ongoing,
       request,
-      meta
+      meta,
+      value
     } = data;
-    const active = session && session.active;
-    if (!force && !active) {
-      return;
-    }
-
-    // if data is unchanged, skip unless forced
-    if (!force && statesEqual(data, previousData)) {
-      return;
-    }
+    const baseState = Object.assign({
+      session,
+      status,
+      ongoing,
+      request,
+      meta,
+      data: value
+    }, getDataEmptyness(data));
 
     // render
     const notifyUpdate = function () {
       let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let options = arguments.length > 1 ? arguments[1] : undefined;
-      state !== false && _this.updateState(Object.assign({
-        session,
-        status,
-        ongoing,
-        request,
-        meta
-      }, state), options);
+      state !== false && _this.updateState(Object.assign({}, baseState, state), options);
     };
     try {
       await this._layout.render(element, data, {
@@ -179,29 +179,15 @@ class ViewActor {
       });
     }
   }
-  updateState(_ref) {
-    let {
-      session,
-      status,
-      ongoing,
-      request,
-      meta,
-      error
-    } = _ref;
+  updateState(state) {
     let {
       silent = false
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    if (error) {
-      status = _constants.STATUS.ERRONEOUS;
-    }
-    const state = this._state = Object.freeze((0, _commons.trimObj)({
-      session,
-      status,
-      ongoing,
-      request,
-      meta,
-      error
-    }));
+    // there might be error from notifyUpdate() call
+    const status = state.error ? _constants.STATUS.ERRONEOUS : state.status;
+    state = this._state = Object.freeze((0, _commons.trimObj)(Object.assign({}, state, {
+      status
+    })));
     const {
       role
     } = this;
@@ -221,7 +207,7 @@ class ViewActor {
       } = data,
       rest = _objectWithoutPropertiesLoose(data, _excluded);
     const sliced = Object.assign({
-      value: asMappingFunction(this._config.mapping || this.role)(data),
+      value: this._mapping(data),
       status,
       data: value,
       meta
@@ -300,4 +286,18 @@ function asMappingFunction(fn) {
     default:
       throw new Error(`Invalid mapping function: ${fn}`);
   }
+}
+function getDataEmptyness(data) {
+  return isDataStatusRelevantToEmptyness(data) ? {
+    empty: !!isDateValueEmpty(data)
+  } : {};
+}
+function isDataStatusRelevantToEmptyness(data) {
+  return data.status === _constants.STATUS.READY && !data.ongoing;
+}
+function isDateValueEmpty(data) {
+  const {
+    value
+  } = data;
+  return value === undefined || (Array.isArray(value) || typeof value === 'string') && !value.length;
 }

package/dist/cjs/actor/views.js

@@ -20,8 +20,7 @@ class ViewsActor {
       workflow,
       extensions,
       layouts,
-      roles = [],
-      rolesConfig = {},
+      roles,
       options
     } = _ref;
     this._hub = hub;
@@ -29,13 +28,16 @@ class ViewsActor {
     this._extensions = extensions;
     this._layoutFactory = layouts;
     this._options = options;
-    this._rolesConfig = rolesConfig;
+    this._roles = roles;
     this._containers = new Map();
     this._containerTracker = undefined;
     this._views = {};
-    this._trackers = new Trackers(this, roles);
+    this._trackers = new Trackers(this, roles.members);
     this._filters = new _filters.default(this);
-    for (const role of roles) {
+    for (const role of roles.members) {
+      if (role === _constants.ROLE.CONTAINER) {
+        continue;
+      }
       this._views[role] = new _view.default(this, role);
     }
     (0, _commons.defineValues)(this, {
@@ -45,7 +47,9 @@ class ViewsActor {
     window.addEventListener('resize', syncSize);
     this._unsubscribes = [() => window.removeEventListener('resize', syncSize), hub.on(fields.data(), data => this.refresh({
       data
-    })), options.on('trackers', () => this._syncTrackers()), options.on('layouts', () => this._syncLayouts())];
+    })), 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();
     this._syncLayouts();
   }
@@ -95,6 +99,9 @@ class ViewsActor {
   updateComponentRole(element, oldRole, newRole) {
     // TODO
   }
+  containsElement(element) {
+    return this._containers.has(element) || this._views[element.role];
+  }
   refreshElement(element) {
     const view = element.isContainer ? this._containers.get(element) : this._getViewByElement(element);
     view && view.refresh({
@@ -143,7 +150,8 @@ class ViewsActor {
         // TODO: try to omit if unchanged
         const fn = () => this._layoutFactory.create(name, Object.assign({}, options, {
           role,
-          workflow: this._workflowName
+          workflow: this._workflowName,
+          workflowOptions: this._getWorkflowOptions()
         }));
         if (role === _constants.ROLE.CONTAINER) {
           for (const view of this._containers.values()) {
@@ -163,7 +171,8 @@ class ViewsActor {
     const [name, options] = args;
     return this._layoutFactory.create(name, Object.assign({}, options, {
       role,
-      workflow: this._workflowName
+      workflow: this._workflowName,
+      workflowOptions: this._getWorkflowOptions()
     }));
   }
   get(role) {
@@ -229,6 +238,18 @@ 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);
@@ -266,6 +287,9 @@ class Trackers {
   constructor(views, roles) {
     this._views = views;
     for (const role of roles) {
+      if (role === _constants.ROLE.CONTAINER) {
+        continue;
+      }
       Object.defineProperty(this, role, {
         get: () => views.get(role).tracker
       });

package/dist/cjs/asset/svgs.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRIANGLE = exports.SEND = exports.SEARCH = void 0;
+exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = void 0;
+exports.getIcon = getIcon;
 var _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function trianglePath(r) {
@@ -14,13 +15,18 @@ function trianglePath(r) {
 }
 const PREFIX = 'miso-ui-icon';
 const ID = `${PREFIX}-svg-${_version.default.replaceAll('.', '_')}`;
+const ICON_NAME = {
+  SEND: 'send',
+  SEARCH: 'search',
+  TRIANGLE: 'triangle'
+};
 
 // CC0 SVGs
-const ICON_SEND = `<symbol id="${PREFIX}-send" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
-const ICON_SEARCH = `<symbol id="${PREFIX}-search" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
+const ICON_SEND = `<symbol id="${PREFIX}-${ICON_NAME.SEND}" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
+const ICON_SEARCH = `<symbol id="${PREFIX}-${ICON_NAME.SEARCH}" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
 
 // Custom SVGs
-const ICON_TRIANGLE = `<symbol id="${PREFIX}-triangle" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
+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 SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
@@ -32,9 +38,13 @@ function loadSvgSprites() {
   document.head.insertAdjacentHTML('beforeend', SPRITES_SVG);
 }
 loadSvgSprites();
-function getSvg(name) {
+function _icon(name) {
   return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
-const SEND = exports.SEND = getSvg('send');
-const SEARCH = exports.SEARCH = getSvg('search');
-const TRIANGLE = exports.TRIANGLE = getSvg('triangle');
+const ICON_NAMES = exports.ICON_NAMES = new Set(Object.values(ICON_NAME));
+function getIcon(name) {
+  return ICON_NAMES.has(name) ? _icon(name) : '';
+}
+const SEND = exports.SEND = _icon(ICON_NAME.SEND);
+const SEARCH = exports.SEARCH = _icon(ICON_NAME.SEARCH);
+const TRIANGLE = exports.TRIANGLE = _icon(ICON_NAME.TRIANGLE);