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

package/src/element/role/index.js

@@ -11,6 +11,7 @@ export { default as MisoRelatedResourcesElement } from './miso-related-resources
 export { default as MisoRelatedQuestionsElement } from './miso-related-questions.js';
 export { default as MisoSovrnAffiliationElement } from './miso-affiliation.js';
 export { default as MisoKeywordsElement } from './miso-keywords.js';
-export { default as MisoHitsElement } from './miso-hits.js';
+export { default as MisoTotalElement } from './miso-total.js';
 export { default as MisoFacetsElement } from './miso-facets.js';
+export { default as MisoMoreElement } from './miso-more.js';
 export { default as MisoErrorElement } from './miso-error.js';

package/src/element/role/{miso-hits.js → miso-more.js}

@@ -1,16 +1,16 @@
 import MisoComponentElement from './miso-component.js';
 import { ROLE } from '../../constants.js';
 
-export default class MisoHitsElement extends MisoComponentElement {
+export default class MisoMoreElement extends MisoComponentElement {
 
   constructor() {
     super({
-      role: ROLE.HITS,
+      role: ROLE.MORE,
     });
   }
 
   static get tagName() {
-    return 'miso-hits';
+    return 'miso-more';
   }
 
 }

package/src/element/role/miso-total.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoTotalElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.TOTAL,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-total';
+  }
+
+}

package/src/layout/affiliation/affiliation.js

@@ -1,5 +1,5 @@
 import { CarouselItemViewabilityObserver, requestAnimationFrame as raf } from '@miso.ai/commons';
-import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { STATUS } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
 import { affiliation, helpers } from '../templates.js';
 import { TRIANGLE } from '../../asset/svgs.js';
@@ -136,10 +136,6 @@ function autoplayOptionsEquals(a, b) {
 
 export default class AffiliationLayout extends CollectionLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.AFFILIATION;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/banner/banner.js

@@ -1,4 +1,3 @@
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { LOGO } from '../svgs.js';
 
@@ -19,10 +18,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class BannerLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.BANNER;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/button/more-button.js

@@ -0,0 +1,69 @@
+import { STATUS } from '../../constants.js';
+import { fields } from '../../actor/index.js';
+import TemplateBasedLayout from '../template.js';
+
+const TYPE = 'more-button';
+const DEFAULT_CLASSNAME = 'miso-more-button';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const disabledAttr = state.status !== STATUS.READY ? ' disabled' : '';
+  return `
+<div class="${className}"${roleAttr}${disabledAttr}>
+  ${templates.text(layout)}
+</div>
+`;
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  text,
+});
+
+function text(layout) {
+  return 'More';
+}
+
+export default class MoreButtonLayout extends TemplateBasedLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+  }
+
+  initialize(view) {
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      view.proxyElement.on('click', (e) => this._handleClick(e)),
+    ];
+  }
+
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest('data-role="more"');
+    if (!button || button.disabled) {
+      return;
+    }
+    this._view.hub.trigger(fields.more());
+  }
+
+}

package/src/layout/container/container.js

@@ -1,4 +1,4 @@
-import { ROLE, STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { ROLE, STATUS } from '../../constants.js';
 import RafLayout from '../raf.js';
 import MisoBannerElement from '../../element/miso-banner.js';
 import Viewables from '../../util/viewables.js';
@@ -7,10 +7,6 @@ const TYPE = 'container';
 
 export default class ContainerLayout extends RafLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.CONTAINER;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/error/error.js

@@ -1,4 +1,3 @@
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 
 const TYPE = 'error';
@@ -24,10 +23,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class ErrorLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.ERROR;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/index.js

@@ -12,4 +12,5 @@ export { default as FeedbackLayout } from './radio/feedback.js';
 export { default as TextLayout } from './text/text.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
 export { default as AffiliationLayout } from './affiliation/affiliation.js';
-export { default as FacetsLayout } from './input/facets.js';
+export { default as FacetsLayout } from './input/facets.js';
+export { default as MoreButtonLayout } from './button/more-button.js';

package/src/layout/input/facets.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import Bindings from '../../util/bindings.js';
 
@@ -88,10 +87,6 @@ function getSelectedValues(facets) {
 
 export default class FacetsLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.FILTERS;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/input/option-list.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../trackable.js';
@@ -41,10 +40,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class OptionListLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.QUERY;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/input/search-box.js

@@ -1,5 +1,5 @@
 import { defineValues, escapeHtml, findInAncestors, debounce } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY, STATUS, EVENT_TYPE, DATA_ASPECT } from '../../constants.js';
+import { STATUS, EVENT_TYPE } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { imageBlock, productInfoBlock } from '../templates.js';
@@ -78,10 +78,7 @@ function product(layout, { product }) {
 
 function completionList(layout, type, items) {
   const { className, templates } = layout;
-  return `
-<ul class="${className}__${type}-list" data-role="${type}-list">
-  ${items.map(item => templates.completionItem(layout, type, item)).join('')}
-</ul>`.trim();
+  return `<ul class="${className}__${type}-list" data-role="${type}-list">${items.map(item => templates.completionItem(layout, type, item)).join('')}</ul>`;
 }
 
 function completionItem(layout, type, item) {
@@ -115,10 +112,6 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
 
 export default class SearchBoxLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.QUERY;
-  }
-
   static get type() {
     return TYPE;
   }
@@ -154,7 +147,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       proxyElement.on('click', (e) => this._handleClick(e)),
       proxyElement.on('focusin', (e) => this._handleFocusIn(e)),
       proxyElement.on('focusout', (e) => this._handleFocusOut(e)),
-      hub.on(fields.data(DATA_ASPECT.AUTOCOMPLETE), () => view.refresh({ force: true })),
+      hub.on(fields.completions(), () => view.refresh({ force: true })),
     ];
   }
 
@@ -188,7 +181,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     state = super._preprocess({ state });
     return {
       ...state,
-      completions: this._view.hub.states[fields.data(DATA_ASPECT.AUTOCOMPLETE)],
+      completions: this._view.hub.states[fields.completions()],
     };
   }
 
@@ -198,6 +191,9 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       super._render(element, data, controls);
     }
     this._updateCompletions(element, data, controls);
+  }
+
+  _afterRender(element, state) {
     this._fullfillFocusRequest(element);
     this._fullfillValueRequest(element);
   }
@@ -206,7 +202,8 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     if (!state.completions) {
       return;
     }
-    const { status = STATUS.INITIAL, index, value: completions } = state.completions;
+    const { status = STATUS.INITIAL, session, value: completions } = state.completions;
+    const { index } = session;
     if (rendered && rendered.completions.index === index && rendered.completions.status === status) {
       return;
     }
@@ -289,7 +286,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   }
 
   _handleKeyDown({ key, target, isComposing }) {
-    if (!isComposing && key === 'Enter' && target.matches('input')) {
+    if (!isComposing && key === 'Enter' && target.matches('[data-role="input"]')) {
       this._submit(target.value);
       target.blur();
     }
@@ -345,7 +342,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     if (!options) {
       return;
     }
-    this._view.tracker.submit(value);
+    this._view.tracker.submit({ value }); // not array
   }
 
 }

package/src/layout/list/cards.js

@@ -5,10 +5,6 @@ const DEFAULT_CLASSNAME = 'miso-cards';
 
 export default class CardsLayout extends CollectionLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/list/carousel.js

@@ -35,10 +35,6 @@ function chevron(layout) {
 
 export default class CarouselLayout extends CollectionLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/list/collection.js

@@ -1,13 +1,14 @@
-import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { STATUS } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../trackable.js';
+import { makeTriggerable } from '../triggerable.js';
 import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
   const { className, role, templates } = layout;
   const { status } = state;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 
 function ready(layout, state) {
@@ -15,7 +16,7 @@ function ready(layout, state) {
   const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
-  if ((values && values.length > 0) || state.ongoing) {
+  if ((values && values.length > 0) || state.ongoing) { // TODO: ad-hoc ongoing?
     return templates.list(layout, state, values);
   } else {
     return templates.empty(layout, state);
@@ -42,6 +43,15 @@ function item(layout, state, value, index) {
   return `<li class="${className}__item">${body}</li>`;
 }
 
+function trigger(layout, state) {
+  const { className } = layout;
+  return `<div class="${className}__trigger" data-role="trigger"></div>`;
+}
+
+function loading() {
+  return `<div class="miso-loading" aria-label="Loading" data-role="loading"></div>`;
+}
+
 // TODO: let templates.js control what to be included here
 
 const DEFAULT_TEMPLATES = Object.freeze({
@@ -67,14 +77,12 @@ const DEFAULT_TEMPLATES = Object.freeze({
   cta,
   imageBlock,
   indexBlock,
+  trigger,
+  loading,
 });
 
 export default class CollectionLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.LIST;
-  }
-
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }
@@ -86,6 +94,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
       ...options,
     });
     this._initTrackable();
+    this._initTriggerable();
   }
 
   initialize(view) {
@@ -106,8 +115,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
     // TODO: compare item ids as well
     return this.options.incremental &&
     rendered && rendered.value && rendered.value.length > 0 &&
-      state.status === STATUS.READY &&
-      rendered.status === STATUS.READY &&
+    state.value && state.value.length >= rendered.value.length &&
       state.session && rendered.session &&
       state.session.id === rendered.session.id;
   }
@@ -138,10 +146,12 @@ export default class CollectionLayout extends TemplateBasedLayout {
 
   _afterRender(element, state) {
     this._syncBindings(element, state);
+    this._syncTrigger(element, state);
   }
 
   _unrender() {
     this._clearBindings();
+    this._untrackTrigger();
   }
 
   _getItems(state) {
@@ -177,6 +187,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
 
   destroy() {
     this._destroyTrackable();
+    this._destroyTriggerable();
     this._view = undefined;
     super.destroy();
   }
@@ -184,3 +195,4 @@ export default class CollectionLayout extends TemplateBasedLayout {
 }
 
 makeTrackable(CollectionLayout.prototype);
+makeTriggerable(CollectionLayout.prototype);

package/src/layout/list/list.js

@@ -5,10 +5,6 @@ const DEFAULT_CLASSNAME = 'miso-list';
 
 export default class ListLayout extends CollectionLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/radio/feedback.js

@@ -50,10 +50,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class FeedbackLayout extends RadioLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/radio/radio.js

@@ -1,5 +1,4 @@
 import { findInAncestors, requestAnimationFrame as raf } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { requiresImplementation } from '../templates.js';
 
@@ -30,10 +29,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class RadioLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.RADIO;
-  }
-
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }

package/src/layout/raf.js

@@ -2,8 +2,8 @@ import { defineValues, requestAnimationFrame as raf, capture } from '@miso.ai/co
 
 export default class RafLayout {
 
-  constructor({ role, workflow, ...options } = {}) {
-    defineValues(this, { role, workflow, options });
+  constructor({ role, workflow, workflowOptions, ...options } = {}) {
+    defineValues(this, { role, workflow, workflowOptions, options });
     this._unsubscribes = [];
     this._rendered = new WeakMap();
     this._element = undefined;

package/src/layout/text/text.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 
 const TYPE = 'text';
@@ -42,10 +41,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class TextLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.TEXT;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/text/typewriter/index.js

@@ -1,5 +1,5 @@
 import { trimObj, defineValues, Resolution, pacer } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY, STATUS } from '../../../constants.js';
+import { STATUS } from '../../../constants.js';
 import ProgressiveLayout from '../../progressive.js';
 import PlaintextRenderer from './plaintext.js';
 import { containerElement, cursorClassName, fromSameSession, normalizeOnDebug } from './utils.js';
@@ -9,10 +9,6 @@ const DEFAULT_CLASSNAME = 'miso-typewriter';
 
 export default class TypewriterLayout extends ProgressiveLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.TEXT;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/triggerable.js

@@ -0,0 +1,76 @@
+import { mixin, viewable as whenViewable } from '@miso.ai/commons';
+import { STATUS } from '../constants.js';
+import { fields } from '../actor/index.js';
+
+export function makeTriggerable(prototype) {
+  mixin(prototype, TriggerableMixin.prototype);
+}
+
+export class TriggerableMixin {
+
+  _initTriggerable() {
+    this._trigger = undefined;
+  }
+
+  _syncTrigger(element, state) {
+    if (!this.options.infiniteScroll) {
+      return;
+    }
+    const workflowPaginationOptions = this.workflowOptions.pagination;
+    if (!workflowPaginationOptions.active || workflowPaginationOptions.mode !== 'infiniteScroll') {
+      return;
+    }
+    // only track trigger when ready
+    if (state.status === STATUS.READY) {
+      this._trackTrigger(element);
+    } else {
+      this._untrackTrigger();
+    }
+  }
+
+  async _trackTrigger(element) {
+    if (this._trigger) {
+      return;
+    }
+    const triggerElement = element.querySelector('[data-role="trigger"]');
+    if (!triggerElement) {
+      return;
+    }
+    const ac = new AbortController();
+    this._trigger = Object.freeze({
+      element: triggerElement,
+      ac,
+    });
+    let result = false;
+    try {
+      await whenViewable(triggerElement, { area: 1, duration: 0, signal: ac.signal });
+      result = true;
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        throw e;
+      }
+    } finally {
+      this._trigger = undefined;
+    }
+    if (result) {
+      this._onTrigger();
+    }
+  }
+
+  _onTrigger() {
+    this._view.hub.trigger(fields.more());
+  }
+
+  _untrackTrigger() {
+    if (!this._trigger) {
+      return;
+    }
+    this._trigger.ac && this._trigger.ac.abort();
+    this._trigger = undefined;
+  }
+
+  _destroyTriggerable() {
+    this._untrackTrigger();
+  }
+
+}

package/src/util/states.js

@@ -4,20 +4,6 @@ import { EVENT_TYPE, TRACKING_STATUS, validateEventType, validateTrackingStatus
 const { IMPRESSION, VIEWABLE, CLICK } = EVENT_TYPE;
 const { UNTRACKED, TRIGGERED } = TRACKING_STATUS;
 
-/*
-const STATES = {
-  NEW: Object.freeze({
-    [IMPRESSION]: UNTRACKED,
-    [VIEWABLE]: UNTRACKED,
-  }),
-  UNTRACKED: Object.freeze({
-    [IMPRESSION]: UNTRACKED,
-    [VIEWABLE]: UNTRACKED,
-    [CLICK]: UNTRACKED,
-  }),
-};
-*/
-
 const UNTRACKED_STATES = Object.freeze({
   [IMPRESSION]: UNTRACKED,
   [VIEWABLE]: UNTRACKED,

package/src/version.js

@@ -1 +1 @@
-export default '1.11.0-beta.9';
+export default '1.11.1-beta.0';