@miso.ai/client-sdk-ui 1.11.5-beta.1 → 1.11.5-beta.10

package/dist/cjs/actor/data.js

@@ -28,11 +28,12 @@ class DataActor {
     return this._source;
   }
   _handleSession(session) {
-    // protocol: inactive -> no reaction
+    // this is mandatory in any case
+    /*
     if (!this.active) {
       return;
     }
-
+    */
     // abort ongoing data fetch if any
     if (!this._session || session.index !== this._session.index) {
       // new session, abort preview data fetch if necessary
@@ -44,6 +45,7 @@ class DataActor {
     }
     this._session = session;
 
+    // TODO: move this to workflow
     // reflect session update
     this._emitResponse({
       session

package/dist/cjs/actor/view.js

@@ -231,13 +231,14 @@ class ViewActor {
     for (const {
       role
     } of element.components) {
-      // not a data role -> nonempty
+      // not a data role -> irrelevant
       if (!(0, _constants.isDataRole)(role)) {
-        return false;
+        continue;
       }
       let sliced = value && value[role];
       if (role === _constants.ROLE.QUERY_SUGGESTIONS) {
         // special case: query suggestions -> look up value from hub
+        // TODO: adhoc
         const data = this.hub.states[fields.suggestions()];
         sliced = data && data.value;
       }

package/dist/cjs/asset/svgs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRIANGLE_EQ = exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = exports.CHEVRON_NEGATIVE = void 0;
+exports.TRIANGLE_EQ = exports.TRIANGLE = exports.SEND = exports.SEARCH = exports.ICON_NAMES = exports.CHEVRON_NEGATIVE = exports.CHEVRON = void 0;
 exports.getIcon = getIcon;
 var _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,6 +20,7 @@ const ICON_NAME = {
   SEARCH: 'search',
   TRIANGLE: 'triangle',
   TRIANGLE_EQ: 'triangle-eq',
+  CHEVRON: 'chevron',
   CHEVRON_NEGATIVE: 'chevron-negative'
 };
 
@@ -30,8 +31,9 @@ const ICON_SEARCH = `<symbol id="${PREFIX}-${ICON_NAME.SEARCH}" viewBox="0 0 24
 // Custom SVGs
 const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
 const ICON_TRIANGLE_EQ = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE_EQ}" viewBox="-100 -100 200 200"><path d="M12.99 -77.5A15 15,0,0,0,-12.99 -77.5L-73.61 27.5A15 15,0,0,0,-60.62 50L60.62 50A15 15,0,0,0,73.61 27.5L12.99 -77.5Z"/></symbol>`;
+const ICON_CHEVRON = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON}" viewBox="-100 -100 200 200"><path d="M10.61 -43.94A15 15,0,0,0,-10.61 -43.94L-60.61 6.06A15 15,0,0,0,-39.39 27.27L0 -12.12L39.39 27.27A15 15,0,0,0,60.61 6.06L10.61 -43.94Z"/></symbol>`;
 const ICON_CHEVRON_NEGATIVE = `<symbol id="${PREFIX}-${ICON_NAME.CHEVRON_NEGATIVE}" viewBox="-100 -100 200 200"><path d="M100 100V-200H-200V200H200ZM-10.61 -43.94A15 15,0,0,1,10.61 -43.94L60.61 6.06A15 15,0,0,1,39.39 27.27L0 -12.12L-39.39 27.27A15 15,0,0,1,-60.61 6.06L-10.61 -43.94Z"/></symbol>`;
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON_NEGATIVE];
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE];
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
 function loadSvgSprites() {
@@ -53,4 +55,5 @@ const SEND = exports.SEND = _icon(ICON_NAME.SEND);
 const SEARCH = exports.SEARCH = _icon(ICON_NAME.SEARCH);
 const TRIANGLE = exports.TRIANGLE = _icon(ICON_NAME.TRIANGLE);
 const TRIANGLE_EQ = exports.TRIANGLE_EQ = _icon(ICON_NAME.TRIANGLE_EQ);
+const CHEVRON = exports.CHEVRON = _icon(ICON_NAME.CHEVRON);
 const CHEVRON_NEGATIVE = exports.CHEVRON_NEGATIVE = _icon(ICON_NAME.CHEVRON_NEGATIVE);

package/dist/cjs/constants.js

@@ -72,7 +72,8 @@ const STATUS = exports.STATUS = Object.freeze({
   ONGOING: 'ongoing',
   DONE: 'done',
   EMPTY: 'empty',
-  NONEMPTY: 'nonempty'
+  NONEMPTY: 'nonempty',
+  UNANSWERABLE: 'unanswerable'
 });
 function validateEventType(value) {
   if (TRACKING_EVENT_TYPES.indexOf(value) < 0) {

package/dist/cjs/defaults/hybrid-search/answer-box.js

@@ -15,13 +15,15 @@ class AnswerBox {
   constructor(client, element) {
     let {
       classPrefix = _constants.CLASS_PREFIX,
-      phrases = {}
+      phrases = {},
+      hideWhenUnanswerable = true
     } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     this._client = client;
     this._workflow = client.ui.hybridSearch;
     this._element = element;
     this._classPrefix = classPrefix;
     this._phrases = phrases;
+    this._hideWhenUnanswerable = hideWhenUnanswerable;
     this._init();
   }
   _init() {
@@ -65,10 +67,19 @@ class AnswerBox {
     const {
       status
     } = this._workflow._answer;
+    const {
+      meta: {
+        unanswerable = false
+      } = {}
+    } = this._workflow._answer._hub.states[_index.fields.data()];
     switch (status) {
       case _constants2.STATUS.ERRONEOUS:
       case _constants2.STATUS.READY:
-        this.show();
+        if (unanswerable && this._hideWhenUnanswerable) {
+          this.hide();
+        } else {
+          this.show();
+        }
         break;
       default:
         this.hide();

package/dist/cjs/defaults/hybrid-search/controls.js

@@ -7,11 +7,12 @@ exports.wireAnswerBox = wireAnswerBox;
 var _answerBox = _interopRequireDefault(require("./answer-box.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function wireAnswerBox(client, element) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   if (!client) {
     throw new Error('client is required');
   }
   if (!element) {
     return;
   }
-  new _answerBox.default(client, element);
+  new _answerBox.default(client, element, options);
 }

package/dist/cjs/defaults/hybrid-search/templates.js

@@ -18,6 +18,15 @@ class Sections extends _templates.Sections {
       helpers
     });
   }
+  answer(options) {
+    const {
+      container
+    } = this._helpers;
+    return container(options, {
+      name: 'answer',
+      visibleWhen: 'ready !unanswerable'
+    }, [...this.question(options), '<miso-answer></miso-answer>', '<miso-feedback></miso-feedback>']);
+  }
   answerBox(options) {
     const {
       element

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

@@ -9,6 +9,7 @@ var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("../list/collection.js"));
 var _templates = require("../templates.js");
 var _svgs = require("../../asset/svgs.js");
+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; }
@@ -18,7 +19,8 @@ function root(layout, state) {
   const {
     className,
     role,
-    templates
+    templates,
+    options
   } = layout;
   const {
     status
@@ -29,7 +31,8 @@ function root(layout, state) {
   const items = layout._getItems(state);
   const itemCount = items ? items.length : undefined;
   const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemTypeAttr}${itemCountAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -293,12 +296,8 @@ class AffiliationLayout extends _collection.default {
     if (!element) {
       return;
     }
+    (0, _dom.setOrRemoveAttribute)(element, 'data-item-count', itemCount);
     this._displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
   _syncItemIndex() {
     const index = this._itemIndex;

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

@@ -80,13 +80,17 @@ class ContainerLayout extends _raf.default {
       ongoing,
       meta: {
         miso_id,
-        empty = false
+        empty = false,
+        unanswerable = false
       } = {}
     } = state;
     const statuses = [status, empty ? _constants.STATUS.EMPTY : _constants.STATUS.NONEMPTY];
     if (status === _constants.STATUS.READY) {
       statuses.push(ongoing ? _constants.STATUS.ONGOING : _constants.STATUS.DONE);
     }
+    if (unanswerable) {
+      statuses.push(_constants.STATUS.UNANSWERABLE);
+    }
     element.setAttribute('status', statuses.join(' '));
     if (miso_id) {
       element.setAttribute('miso-id', miso_id);

package/dist/cjs/layout/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "FeedbackLayout", {
     return _feedback.default;
   }
 });
+Object.defineProperty(exports, "GalleryLayout", {
+  enumerable: true,
+  get: function () {
+    return _gallery.default;
+  }
+});
 Object.defineProperty(exports, "ListLayout", {
   enumerable: true,
   get: function () {
@@ -113,6 +119,7 @@ var _collection = _interopRequireDefault(require("./list/collection.js"));
 var _list = _interopRequireDefault(require("./list/list.js"));
 var _cards = _interopRequireDefault(require("./list/cards.js"));
 var _carousel = _interopRequireDefault(require("./list/carousel.js"));
+var _gallery = _interopRequireDefault(require("./list/gallery.js"));
 var _searchBox = _interopRequireDefault(require("./input/search-box.js"));
 var _optionList = _interopRequireDefault(require("./input/option-list.js"));
 var _feedback = _interopRequireDefault(require("./radio/feedback.js"));

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

@@ -8,6 +8,7 @@ var _commons = require("@miso.ai/commons");
 var _index = require("../../actor/index.js");
 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; }
@@ -107,7 +108,7 @@ class OptionListLayout extends _template.default {
       return;
     }
     const optionValues = this._getItems(state) || [];
-    optionsElement.classList[optionValues.length === 0 ? 'add' : 'remove']('empty');
+    (0, _dom.addOrRemoveClass)(optionsElement, 'empty', optionValues.length === 0);
   }
   _getItems(state) {
     return state.value;

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

@@ -10,6 +10,7 @@ var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _templates = require("../templates.js");
 var _svgs = require("../../asset/svgs.js");
+var _dom = require("../../util/dom.js");
 const _excluded = ["className", "templates", "autocomplete"];
 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; }
@@ -250,7 +251,7 @@ class SearchBoxLayout extends _template.default {
       return;
     }
     const items = context.trackItems(completions);
-    element.classList[items.length > 0 ? 'add' : 'remove']('nonempty');
+    (0, _dom.addOrRemoveClass)(element, 'nonempty', items.length > 0);
     autocompleteElement.setAttribute('data-status', status);
     autocompleteElement.innerHTML = this.templates.completions(this, items);
     writeToState({

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

@@ -50,8 +50,8 @@ function control(layout, state, direction) {
   } = layout;
   return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
 }
-function controlIcon(layout, state, direction) {
-  return _svgs.CHEVRON_NEGATIVE;
+function controlIcon(layout) {
+  return layout.options.itemType === 'image' ? _svgs.CHEVRON_NEGATIVE : _svgs.CHEVRON;
 }
 function indexIndicator(layout, state, values) {
   const {

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

@@ -16,13 +16,15 @@ function root(layout, state) {
   const {
     className,
     role,
-    templates
+    templates,
+    options
   } = layout;
   const {
     status
   } = state;
-  const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${itemTypeAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -48,8 +50,9 @@ function list(layout, state, values) {
     options
   } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
+  const itemTypeAttr = options.itemType ? ` data-item-type="${options.itemType}"` : ''; // backward compatible
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list"${itemTypeAttr}>${templates.items(layout, state, values)}</${listTag}>`;
 }
 function items(layout, state, values) {
   let {

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

@@ -0,0 +1,270 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _collection = _interopRequireDefault(require("./collection.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; }
+function calculateItemSizes(itemCount, columnCount) {
+  const totalSpaces = columnCount * 2;
+  let remainingSpaces = Math.max(totalSpaces - itemCount, 0);
+  let small = itemCount;
+  // turning a small block into a large block takes 3 extra spaces
+  const large = Math.min(Math.floor(remainingSpaces / 3), small);
+  small -= large;
+  remainingSpaces -= large * 3;
+  // turning a small block into a medium block takes 1 extra space
+  const medium = Math.min(remainingSpaces, small);
+  small -= medium;
+  remainingSpaces -= medium;
+  return [large, medium, small];
+}
+function item(layout, state, value, index) {
+  const {
+    className,
+    templates,
+    options
+  } = layout;
+  const {
+    itemType
+  } = options;
+  const body = templates[itemType](layout, state, value, {
+    index
+  });
+  const sizeClass = value._size ? ` ${className}__item-${value._size}` : '';
+  return `<li class="${className}__item${sizeClass}">${body}</li>`;
+}
+const DEFAULT_HEIGHT = '16rem';
+const DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, {
+  item
+}));
+const TYPE = 'gallery';
+const DEFAULT_CLASSNAME = 'miso-gallery';
+class GalleryLayout extends _collection.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._galleryContext = {
+      itemAspectRatio: undefined,
+      itemCount: undefined,
+      columnCount: undefined
+    };
+  }
+  syncSize() {
+    const {
+      element
+    } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._syncItemSizes(listElement);
+  }
+  _preprocess(_ref2) {
+    let {
+      state,
+      rendered
+    } = _ref2;
+    const incremental = this._shallRenderIncrementally(state, rendered);
+    const bodyHtml = incremental ? undefined : this._bodyHtml(state);
+    const itemsHtml = this._itemsHtml(state, rendered);
+    return Object.assign({}, state, (0, _commons.trimObj)({
+      incremental,
+      bodyHtml,
+      itemsHtml
+    }));
+  }
+  _bodyHtml(state) {
+    return this.templates.root(this, Object.assign({}, state, {
+      value: []
+    }));
+  }
+  _itemsHtml(state, rendered) {
+    const offset = rendered && rendered.value && rendered.value.length || 0;
+    const values = (this._getItems(state) || []).slice(offset);
+    return values.length > 0 ? this.templates.items(this, state, values, {
+      offset
+    }) : '';
+  }
+  _render(element, states, controls) {
+    this._syncItemCount(states);
+    this._syncCssVariables();
+    const listElement = this._renderListElement(element, states, controls);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._renderItems(listElement, states, controls);
+  }
+  _renderListElement(element, _ref3) {
+    let {
+      state
+    } = _ref3;
+    const {
+      incremental,
+      bodyHtml
+    } = state;
+    if (!incremental) {
+      element.innerHTML = bodyHtml;
+    }
+    return this._getListElement(element);
+  }
+  _renderItems(listElement, states) {
+    if (states.state.incremental) {
+      this._appendItems(listElement, states);
+    } else {
+      this._updateItems(listElement, states);
+    }
+  }
+  _updateItems(listElement, _ref4) {
+    let {
+      state
+    } = _ref4;
+    const {
+      itemSizes
+    } = this._galleryContext;
+    const values = this._writeItemSizes(this._getItems(state) || [], itemSizes);
+    listElement.innerHTML = this.templates.items(this, state, values);
+  }
+  _appendItems(listElement, _ref5) {
+    let {
+      state
+    } = _ref5;
+    const {
+      itemSizes
+    } = this._galleryContext;
+    // update existing items
+    this._syncItemSizes(listElement);
+    // append new items
+    const offset = listElement.children.length;
+    const values = this._writeItemSizes((this._getItems(state) || []).slice(offset), itemSizes, offset);
+    listElement.insertAdjacentHTML('beforeend', this.templates.items(this, state, values, {
+      offset
+    }));
+  }
+  _writeItemSizes(values) {
+    let [large = 0, medium = 0] = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    let offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let omitted = 0;
+    if (offset > 0) {
+      omitted = Math.min(offset, large);
+      offset -= omitted;
+      large -= omitted;
+    }
+    if (offset > 0) {
+      omitted = Math.min(offset, medium);
+      offset -= omitted;
+      medium -= omitted;
+    }
+    const results = [];
+    for (const value of values) {
+      let _size = 'small';
+      if (large > 0) {
+        _size = 'large';
+        large--;
+      } else if (medium > 0) {
+        _size = 'medium';
+        medium--;
+      }
+      results.push(Object.assign({}, value, {
+        _size
+      }));
+    }
+    return results;
+  }
+  _syncCssVariables() {
+    const context = this._galleryContext;
+    let {
+      itemAspectRatio = 1
+    } = this.options;
+    itemAspectRatio = context.itemAspectRatio = (0, _dom.cssAspectRatio)(itemAspectRatio);
+    const {
+      element
+    } = this._view;
+    if (!element) {
+      return;
+    }
+    // TODO: skip if equal to default values
+    element.style.setProperty('--miso-gallery-item-1x1-aspect-ratio', `${itemAspectRatio}`);
+    element.style.setProperty('--miso-gallery-item-1x2-aspect-ratio', `${itemAspectRatio.scaleBy([1, 2])}`);
+  }
+  _syncListAspectRatio(listElement) {
+    const context = this._galleryContext;
+    const {
+      itemCount,
+      itemAspectRatio
+    } = context;
+    const {
+      height = DEFAULT_HEIGHT
+    } = this.options;
+    const resolvedHeight = (0, _dom.resolveCssLength)(height);
+    const width = listElement.clientWidth;
+    if (width === 0) {
+      context.columnCount = undefined;
+      context.itemSizes = undefined;
+      return; // probably not visible yet
+    }
+    const columnCount = context.columnCount = Math.round(width * itemAspectRatio.width * 2 / (resolvedHeight * itemAspectRatio.height));
+    context.itemSizes = calculateItemSizes(itemCount, columnCount);
+
+    // update DOM
+    listElement.style.aspectRatio = `${columnCount} / 2`;
+    listElement.style.height = itemCount > 0 ? 'auto' : '0';
+  }
+  _syncItemCount() {
+    let {
+      state
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const items = this._getItems(state);
+    this._galleryContext.itemCount = items ? items.length : undefined;
+  }
+  _syncItemSizes(listElement) {
+    const {
+      itemSizes = []
+    } = this._galleryContext;
+    let [large = 0, medium = 0] = itemSizes;
+    const {
+      className
+    } = this;
+
+    // update DOM
+    for (const itemElement of listElement.children) {
+      let lg = false,
+        md = false;
+      if (large > 0) {
+        lg = true;
+        large--;
+      } else if (medium > 0) {
+        md = true;
+        medium--;
+      }
+      (0, _dom.addOrRemoveClass)(itemElement, `${className}__item-large`, lg);
+      (0, _dom.addOrRemoveClass)(itemElement, `${className}__item-medium`, md);
+      (0, _dom.addOrRemoveClass)(itemElement, `${className}__item-small`, !lg && !md);
+    }
+  }
+}
+exports.default = GalleryLayout;

package/dist/cjs/layout/mixin/swipeable.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SwipeableMixin = void 0;
 exports.makeSwipeable = makeSwipeable;
 var _commons = require("@miso.ai/commons");
+var _dom = require("../../util/dom.js");
 function makeSwipeable(prototype) {
   (0, _commons.mixin)(prototype, SwipeableMixin.prototype);
 }
@@ -36,7 +37,7 @@ class SwipeableMixin {
       index = 0;
     }
     context.itemIndex = index;
-    (0, _commons.requestAnimationFrame)(() => this._syncSwipeableItemIndex());
+    (0, _commons.requestAnimationFrame)(() => this._syncDisplayedSwipeableItemIndex());
   }
   next() {
     if (this._swipeableContext.itemCount === undefined) {
@@ -52,7 +53,8 @@ class SwipeableMixin {
   }
   _renderSwipeable(element, states, controls) {
     this._syncSwipeableItemCount(states);
-    this._syncSwipeableItemIndex();
+    this._syncDisplayedSwipeableItemCount();
+    this._syncDisplayedSwipeableItemIndex();
   }
   _afterRenderSwipeable() {
     this._emitSwipeableDisplayEvent();
@@ -74,7 +76,6 @@ class SwipeableMixin {
     } else if (oldItemCount === undefined) {
       context.itemIndex = 0;
     }
-    this._syncDisplayedSwipeableItemCount();
   }
   _syncDisplayedSwipeableItemCount() {
     const context = this._swipeableContext;
@@ -91,22 +92,20 @@ class SwipeableMixin {
     if (!element) {
       return;
     }
+    (0, _dom.setOrRemoveAttribute)(element, 'data-item-count', itemCount);
     context.displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
-  _syncSwipeableItemIndex() {
+  _syncDisplayedSwipeableItemIndex() {
     const context = this._swipeableContext;
-    const index = context.itemIndex;
-    if (index === context.displayedIndex) {
+    const {
+      itemIndex
+    } = context;
+    if (itemIndex === context.displayedIndex) {
       return;
     }
-    context.displayedIndex = index;
-    this._syncSwipeableListIndex(index);
-    this._syncSwipeableIndicatorIndex(index);
+    context.displayedIndex = itemIndex;
+    this._syncSwipeableListIndex(itemIndex);
+    this._syncSwipeableIndicatorIndex(itemIndex);
   }
   _syncSwipeableListIndex(index) {
     const {
@@ -128,7 +127,7 @@ class SwipeableMixin {
     }
     let i = 0;
     for (const item of indicatorElement.children) {
-      item.classList[i === index ? 'add' : 'remove']('active');
+      (0, _dom.addOrRemoveClass)(item, 'active', i === index);
       i++;
     }
   }

package/dist/cjs/layout/raf.js

@@ -115,6 +115,8 @@ class RafLayout {
     state = Object.freeze(Object.assign({}, state, stateExtra.value));
     this._rendered.set(this._element, state);
     notifyUpdate && notifyUpdate(...argsForNotifyUpdate.value);
+
+    // TODO: should the signature be aligned with _render?
     this._afterRender(this._element, state);
   }
   _render() {