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

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

@@ -57,12 +57,24 @@ Object.defineProperty(exports, "MisoKeywordsElement", {
     return _misoKeywords.default;
   }
 });
+Object.defineProperty(exports, "MisoMessagesElement", {
+  enumerable: true,
+  get: function () {
+    return _misoMessages.default;
+  }
+});
 Object.defineProperty(exports, "MisoMoreElement", {
   enumerable: true,
   get: function () {
     return _misoMore.default;
   }
 });
+Object.defineProperty(exports, "MisoNewThreadElement", {
+  enumerable: true,
+  get: function () {
+    return _misoNewThread.default;
+  }
+});
 Object.defineProperty(exports, "MisoProductsElement", {
   enumerable: true,
   get: function () {
@@ -105,6 +117,12 @@ Object.defineProperty(exports, "MisoRelatedResourcesElement", {
     return _misoRelatedResources.default;
   }
 });
+Object.defineProperty(exports, "MisoRenameElement", {
+  enumerable: true,
+  get: function () {
+    return _misoRename.default;
+  }
+});
 Object.defineProperty(exports, "MisoResultsElement", {
   enumerable: true,
   get: function () {
@@ -123,6 +141,24 @@ Object.defineProperty(exports, "MisoSourcesElement", {
     return _misoSources.default;
   }
 });
+Object.defineProperty(exports, "MisoSubscriptionElement", {
+  enumerable: true,
+  get: function () {
+    return _misoSubscription.default;
+  }
+});
+Object.defineProperty(exports, "MisoThreadsElement", {
+  enumerable: true,
+  get: function () {
+    return _misoThreads.default;
+  }
+});
+Object.defineProperty(exports, "MisoTitleElement", {
+  enumerable: true,
+  get: function () {
+    return _misoTitle.default;
+  }
+});
 Object.defineProperty(exports, "MisoTotalElement", {
   enumerable: true,
   get: function () {
@@ -149,5 +185,11 @@ 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 _misoThreads = _interopRequireDefault(require("./miso-threads.js"));
+var _misoNewThread = _interopRequireDefault(require("./miso-new-thread.js"));
+var _misoTitle = _interopRequireDefault(require("./miso-title.js"));
+var _misoRename = _interopRequireDefault(require("./miso-rename.js"));
+var _misoSubscription = _interopRequireDefault(require("./miso-subscription.js"));
+var _misoMessages = _interopRequireDefault(require("./miso-messages.js"));
 var _misoError = _interopRequireDefault(require("./miso-error.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

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

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

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

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

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

@@ -13,7 +13,7 @@ var _dom = require("../../util/dom.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'affiliation';
+const TYPE = _constants.LAYOUT_TYPE.AFFILIATION;
 const DEFAULT_CLASSNAME = 'miso-affiliation';
 function root(layout, state) {
   const {

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

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'banner';
+const TYPE = _constants.LAYOUT_TYPE.BANNER;
 const DEFAULT_CLASSNAME = 'miso-banner';
 function root(layout) {
   const {

package/dist/cjs/layout/button/button.js

@@ -0,0 +1,130 @@
+"use strict";
+
+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 _svgs = require("../../asset/svgs.js");
+var _prompt = _interopRequireDefault(require("../../util/prompt.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const TYPE = _constants.LAYOUT_TYPE.BUTTON;
+const DEFAULT_CLASSNAME = 'miso-button';
+function root(layout, state) {
+  const {
+    className,
+    role,
+    templates
+  } = layout;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  return `<button type="button" class="${className}"${roleAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+}
+function icon(layout) {
+  const {
+    icon
+  } = layout.options;
+  return icon ? (0, _svgs.getIcon)(icon) : '';
+}
+function text(layout) {
+  const {
+    className,
+    options: {
+      text
+    }
+  } = layout;
+  return text ? `<span class="${className}__text">${(0, _commons.escapeHtml)(text)}</span>` : '';
+}
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  icon,
+  text
+});
+
+/**
+ * A generic button: an icon and a label, both configurable (`icon` is an icon
+ * name, `text` the label; either can be omitted), emitting a `submit` view
+ * event when clicked — for the workflow to act on, per role.
+ *
+ * It carries no data of its own, so it renders in any state; use it for
+ * actions that stand apart from the data they act on, such as the new chat
+ * button (role `new_thread`) of the chat history interface.
+ *
+ * With a `prompt` option, the click asks for a text through the shared
+ * prompt dialog first, pre-filled with the control's current value — the
+ * role's mapped data value, as of the latest render — and the submit event
+ * carries the confirmed text as `value`; a cancelled, cleared, or unchanged
+ * dialog submits nothing. Use it for actions that take a text input, such
+ * as the rename button (role `rename`) of the conversation header, whose
+ * role maps to `'thread.title'`.
+ */
+class ButtonLayout extends _template.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor(_ref = {}) {
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+  }
+  initialize(view) {
+    this._unsubscribes = [...this._unsubscribes, view.proxyElement.on('click', event => this._handleClick(event))];
+  }
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest(`button.${this.className}`);
+    if (!button || button.disabled) {
+      return;
+    }
+    this.options.prompt ? this._submitViaPrompt(event) : this._submit(event);
+  }
+  _submit(event, payload) {
+    const {
+      session
+    } = this._view._state || {};
+    this._view._emit('submit', Object.assign({
+      session,
+      domEvent: event
+    }, payload));
+  }
+  async _submitViaPrompt(event) {
+    const current = this._currentValue();
+    const value = await (0, _prompt.default)(Object.assign({
+      value: typeof current === 'string' ? current : ''
+    }, this.options.prompt));
+    if (!value || value === current) {
+      return; // cancelled, cleared, or unchanged
+    }
+    this._submit(event, {
+      value
+    });
+  }
+
+  /**
+   * The current value of the control: the role's mapped data value, as of
+   * the latest render.
+   */
+  _currentValue() {
+    const state = this._element && this._rendered.get(this._element);
+    return state && state.value;
+  }
+}
+exports.default = ButtonLayout;

package/dist/cjs/layout/button/checkbox.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _constants = require("../../constants.js");
+var _button = _interopRequireDefault(require("./button.js"));
+var _svgs = require("../../asset/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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const TYPE = _constants.LAYOUT_TYPE.CHECKBOX;
+const DEFAULT_CLASSNAME = 'miso-checkbox';
+function root(layout, state) {
+  const {
+    className,
+    role,
+    templates
+  } = layout;
+  const checked = isChecked(state);
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const checkedAttr = checked ? ' data-checked' : '';
+  return `<button type="button" class="${className}" role="switch" aria-checked="${checked}"${roleAttr}${checkedAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+}
+function icon(layout, state) {
+  const {
+    icon,
+    checkedIcon = icon
+  } = layout.options;
+  const name = isChecked(state) ? checkedIcon : icon;
+  return name ? (0, _svgs.getIcon)(name) : '';
+}
+function text(layout, state) {
+  const {
+    className,
+    options: {
+      text,
+      checkedText = text
+    }
+  } = layout;
+  const value = isChecked(state) ? checkedText : text;
+  return value ? `<span class="${className}__text">${(0, _commons.escapeHtml)(value)}</span>` : '';
+}
+
+// the checked state is the mapped data value, so it renders from data alone
+function isChecked({
+  value
+} = {}) {
+  return value === true;
+}
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  icon,
+  text
+});
+
+/**
+ * A checkbox that looks like a button: an icon and a label, each with an
+ * optional checked variant (`icon`/`text` and `checkedIcon`/`checkedText`,
+ * the latter falling back to the former). It is a switch — semantically a
+ * checkbox (`role="switch"`, `aria-checked`), visually a button — for
+ * on/off state a user toggles, such as the answer-updates subscription of
+ * the conversation panel (role `subscription`).
+ *
+ * The checked state comes from the data (the mapped value is the boolean —
+ * e.g. role `subscription` maps to `'thread.subscribed'`), so a click emits
+ * a `change` view event carrying the requested state (`{ checked }`) and
+ * nothing else: the workflow acts on it and the new state arrives back down
+ * the data path, like any other rendering.
+ */
+class CheckboxLayout extends _button.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor(_ref = {}) {
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+  }
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest(`button.${this.className}`);
+    if (!button || button.disabled) {
+      return;
+    }
+    // what the user toggles is the control's current value
+    const checked = this._currentValue() === true;
+    const {
+      session
+    } = this._view._state || {};
+    this._view._emit('change', {
+      session,
+      checked: !checked,
+      domEvent: event
+    });
+  }
+}
+exports.default = CheckboxLayout;

package/dist/cjs/layout/button/more-button.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _constants = require("../../constants.js");
-var _index = require("../../actor/index.js");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _template = _interopRequireDefault(require("../template.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'more-button';
+const TYPE = _constants.LAYOUT_TYPE.MORE_BUTTON;
 const DEFAULT_CLASSNAME = 'miso-more-button';
 function root(layout, state) {
   const {
@@ -67,7 +67,7 @@ class MoreButtonLayout extends _template.default {
     if (!button || button.disabled) {
       return;
     }
-    this._view.hub.trigger(_index.fields.more());
+    this._view.hub.trigger(_clientSdkWorkflow.fields.more());
   }
 }
 exports.default = MoreButtonLayout;

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

@@ -12,7 +12,7 @@ var _dom = require("../../util/dom.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'container';
+const TYPE = _constants.LAYOUT_TYPE.CONTAINER;
 class ContainerLayout extends _raf.default {
   static get type() {
     return TYPE;

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'error';
+const TYPE = _constants.LAYOUT_TYPE.ERROR;
 const DEFAULT_CLASSNAME = 'miso-error';
 function root(layout, state) {
   const {

package/dist/cjs/layout/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "BannerLayout", {
     return _banner.default;
   }
 });
+Object.defineProperty(exports, "ButtonLayout", {
+  enumerable: true,
+  get: function () {
+    return _button.default;
+  }
+});
 Object.defineProperty(exports, "CardsLayout", {
   enumerable: true,
   get: function () {
@@ -27,6 +33,12 @@ Object.defineProperty(exports, "CarouselLayout", {
     return _carousel.default;
   }
 });
+Object.defineProperty(exports, "CheckboxLayout", {
+  enumerable: true,
+  get: function () {
+    return _checkbox.default;
+  }
+});
 Object.defineProperty(exports, "CollectionLayout", {
   enumerable: true,
   get: function () {
@@ -75,6 +87,12 @@ Object.defineProperty(exports, "ListLayout", {
     return _list.default;
   }
 });
+Object.defineProperty(exports, "MessagesLayout", {
+  enumerable: true,
+  get: function () {
+    return _messages.default;
+  }
+});
 Object.defineProperty(exports, "MoreButtonLayout", {
   enumerable: true,
   get: function () {
@@ -111,6 +129,12 @@ Object.defineProperty(exports, "TextLayout", {
     return _text.default;
   }
 });
+Object.defineProperty(exports, "ThreadsLayout", {
+  enumerable: true,
+  get: function () {
+    return _threads.default;
+  }
+});
 Object.defineProperty(exports, "TypewriterLayout", {
   enumerable: true,
   get: function () {
@@ -123,6 +147,8 @@ var _error = _interopRequireDefault(require("./error/error.js"));
 var _banner = _interopRequireDefault(require("./banner/banner.js"));
 var _collection = _interopRequireDefault(require("./list/collection.js"));
 var _list = _interopRequireDefault(require("./list/list.js"));
+var _threads = _interopRequireDefault(require("./list/threads.js"));
+var _messages = _interopRequireDefault(require("./list/messages.js"));
 var _horizontal = _interopRequireDefault(require("./list/horizontal.js"));
 var _cards = _interopRequireDefault(require("./list/cards.js"));
 var _carousel = _interopRequireDefault(require("./list/carousel.js"));
@@ -136,4 +162,6 @@ 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"));
+var _button = _interopRequireDefault(require("./button/button.js"));
+var _checkbox = _interopRequireDefault(require("./button/checkbox.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _commons = require("@miso.ai/commons");
-var _index = require("../../actor/index.js");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _template = _interopRequireDefault(require("../template.js"));
 var _bindings = _interopRequireDefault(require("../../util/bindings.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'facets';
+const TYPE = _constants.LAYOUT_TYPE.FACETS;
 const DEFAULT_CLASSNAME = 'miso-facets';
 const DEDAULT_FACET_CLASSNAME = 'miso-facet';
 const CUSTOM_ATTRIBUTES_PREFIX = 'custom_attributes.';
@@ -158,7 +159,7 @@ class FacetsLayout extends _template.default {
     this._clearBindings();
   }
   _syncSelections() {
-    const selectedValues = getSelectedValues(this._view.hub.states[_index.fields.filters()].facets);
+    const selectedValues = getSelectedValues(this._view.hub.states[_clientSdkWorkflow.fields.filters()].facets);
     for (const {
       value: {
         field,

package/dist/cjs/layout/input/option-list.js

@@ -4,15 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _constants = require("../../constants.js");
 var _commons = require("@miso.ai/commons");
-var _index = require("../../actor/index.js");
+var _clientSdkWorkflow = require("@miso.ai/client-sdk-workflow");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../mixin/trackable.js");
 var _dom = require("../../util/dom.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const TYPE = 'option-list';
+const TYPE = _constants.LAYOUT_TYPE.OPTION_LIST;
 const DEFAULT_CLASSNAME = 'miso-option-list';
 function root(layout, state) {
   const {