@concord-consortium/lara-interactive-api 1.9.3-pre.7 → 1.9.3-pre.8

package/index.js

@@ -1751,854 +1751,335 @@ module.exports = function deepFreeze (o) {
 
 /***/ }),
 
-/***/ "./node_modules/iframe-phone/lib/iframe-endpoint.js":
-/*!**********************************************************!*\
-  !*** ./node_modules/iframe-phone/lib/iframe-endpoint.js ***!
-  \**********************************************************/
+/***/ "./node_modules/process/browser.js":
+/*!*****************************************!*\
+  !*** ./node_modules/process/browser.js ***!
+  \*****************************************/
 /*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, exports) {
 
-var structuredClone = __webpack_require__(/*! ./structured-clone */ "./node_modules/iframe-phone/lib/structured-clone.js");
-var HELLO_INTERVAL_LENGTH = 200;
-var HELLO_TIMEOUT_LENGTH = 60000;
+// shim for using process in browser
+var process = module.exports = {};
 
-function IFrameEndpoint() {
-  var listeners = {};
-  var isInitialized = false;
-  var connected = false;
-  var postMessageQueue = [];
-  var helloInterval;
+// cached from whatever global is present so that test runners that stub it
+// don't break things.  But we need to wrap it in a try catch in case it is
+// wrapped in strict mode code which doesn't define any globals.  It's inside a
+// function because try/catches deoptimize in certain engines.
 
-  function postToParent(message) {
-    // See http://dev.opera.com/articles/view/window-postmessage-messagechannel/#crossdoc
-    //     https://github.com/Modernizr/Modernizr/issues/388
-    //     http://jsfiddle.net/ryanseddon/uZTgD/2/
-    if (structuredClone.supported()) {
-      window.parent.postMessage(message, '*');
-    } else {
-      window.parent.postMessage(JSON.stringify(message), '*');
-    }
-  }
+var cachedSetTimeout;
+var cachedClearTimeout;
 
-  function post(type, content) {
-    var message;
-    // Message object can be constructed from 'type' and 'content' arguments or it can be passed
-    // as the first argument.
-    if (arguments.length === 1 && typeof type === 'object' && typeof type.type === 'string') {
-      message = type;
-    } else {
-      message = {
-        type: type,
-        content: content
-      };
+function defaultSetTimout() {
+    throw new Error('setTimeout has not been defined');
+}
+function defaultClearTimeout () {
+    throw new Error('clearTimeout has not been defined');
+}
+(function () {
+    try {
+        if (typeof setTimeout === 'function') {
+            cachedSetTimeout = setTimeout;
+        } else {
+            cachedSetTimeout = defaultSetTimout;
+        }
+    } catch (e) {
+        cachedSetTimeout = defaultSetTimout;
     }
-    if (connected) {
-      postToParent(message);
-    } else {
-      postMessageQueue.push(message);
+    try {
+        if (typeof clearTimeout === 'function') {
+            cachedClearTimeout = clearTimeout;
+        } else {
+            cachedClearTimeout = defaultClearTimeout;
+        }
+    } catch (e) {
+        cachedClearTimeout = defaultClearTimeout;
+    }
+} ())
+function runTimeout(fun) {
+    if (cachedSetTimeout === setTimeout) {
+        //normal enviroments in sane situations
+        return setTimeout(fun, 0);
+    }
+    // if setTimeout wasn't available but was latter defined
+    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+        cachedSetTimeout = setTimeout;
+        return setTimeout(fun, 0);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedSetTimeout(fun, 0);
+    } catch(e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+            return cachedSetTimeout.call(null, fun, 0);
+        } catch(e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+            return cachedSetTimeout.call(this, fun, 0);
+        }
     }
-  }
-
-  function postHello() {
-    postToParent({
-      type: 'hello'
-    });
-  }
 
-  function addListener(type, fn) {
-    listeners[type] = fn;
-  }
 
-  function removeListener(type) {
-    delete listeners[type];
-  }
+}
+function runClearTimeout(marker) {
+    if (cachedClearTimeout === clearTimeout) {
+        //normal enviroments in sane situations
+        return clearTimeout(marker);
+    }
+    // if clearTimeout wasn't available but was latter defined
+    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+        cachedClearTimeout = clearTimeout;
+        return clearTimeout(marker);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedClearTimeout(marker);
+    } catch (e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
+            return cachedClearTimeout.call(null, marker);
+        } catch (e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+            return cachedClearTimeout.call(this, marker);
+        }
+    }
 
-  function removeAllListeners() {
-    listeners = {};
-  }
 
-  function getListenerNames() {
-    return Object.keys(listeners);
-  }
 
-  function messageListener(message) {
-    // Anyone can send us a message. Only pay attention to messages from parent.
-    if (message.source !== window.parent) return;
-    var messageData = message.data;
-    if (typeof messageData === 'string') messageData = JSON.parse(messageData);
+}
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
 
-    if (!connected && messageData.type === 'hello') {
-      connected = true;
-      stopPostingHello();
-      while (postMessageQueue.length > 0) {
-        post(postMessageQueue.shift());
-      }
+function cleanUpNextTick() {
+    if (!draining || !currentQueue) {
+        return;
     }
-
-    if (connected && listeners[messageData.type]) {
-      listeners[messageData.type](messageData.content);
+    draining = false;
+    if (currentQueue.length) {
+        queue = currentQueue.concat(queue);
+    } else {
+        queueIndex = -1;
     }
-  }
-
-  function disconnect() {
-    connected = false;
-    stopPostingHello();
-    removeAllListeners();
-    window.removeEventListener('message', messageListener);
-  }
-
-  /**
-    Initialize communication with the parent frame. This should not be called until the app's custom
-    listeners are registered (via our 'addListener' public method) because, once we open the
-    communication, the parent window may send any messages it may have queued. Messages for which
-    we don't have handlers will be silently ignored.
-  */
-  function initialize() {
-    if (isInitialized) {
-      return;
+    if (queue.length) {
+        drainQueue();
     }
-    isInitialized = true;
-    if (window.parent === window) return;
-
-    // We kick off communication with the parent window by sending a "hello" message. Then we wait
-    // for a handshake (another "hello" message) from the parent window.
-    startPostingHello();
-    window.addEventListener('message', messageListener, false);
-  }
+}
 
-  function startPostingHello() {
-    if (helloInterval) {
-      stopPostingHello();
+function drainQueue() {
+    if (draining) {
+        return;
     }
-    helloInterval = window.setInterval(postHello, HELLO_INTERVAL_LENGTH);
-    window.setTimeout(stopPostingHello, HELLO_TIMEOUT_LENGTH);
-    // Post the first msg immediately.
-    postHello();
-  }
-
-  function stopPostingHello() {
-    window.clearInterval(helloInterval);
-    helloInterval = null;
-  }
+    var timeout = runTimeout(cleanUpNextTick);
+    draining = true;
 
-  // Public API.
-  return {
-    initialize: initialize,
-    getListenerNames: getListenerNames,
-    addListener: addListener,
-    removeListener: removeListener,
-    removeAllListeners: removeAllListeners,
-    disconnect: disconnect,
-    post: post
-  };
+    var len = queue.length;
+    while(len) {
+        currentQueue = queue;
+        queue = [];
+        while (++queueIndex < len) {
+            if (currentQueue) {
+                currentQueue[queueIndex].run();
+            }
+        }
+        queueIndex = -1;
+        len = queue.length;
+    }
+    currentQueue = null;
+    draining = false;
+    runClearTimeout(timeout);
 }
 
-var instance = null;
-
-// IFrameEndpoint is a singleton, as iframe can't have multiple parents anyway.
-module.exports = function getIFrameEndpoint() {
-  if (!instance) {
-    instance = new IFrameEndpoint();
-  }
-  return instance;
+process.nextTick = function (fun) {
+    var args = new Array(arguments.length - 1);
+    if (arguments.length > 1) {
+        for (var i = 1; i < arguments.length; i++) {
+            args[i - 1] = arguments[i];
+        }
+    }
+    queue.push(new Item(fun, args));
+    if (queue.length === 1 && !draining) {
+        runTimeout(drainQueue);
+    }
 };
 
-
-/***/ }),
-
-/***/ "./node_modules/iframe-phone/lib/iframe-phone-rpc-endpoint.js":
-/*!********************************************************************!*\
-  !*** ./node_modules/iframe-phone/lib/iframe-phone-rpc-endpoint.js ***!
-  \********************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var ParentEndpoint = __webpack_require__(/*! ./parent-endpoint */ "./node_modules/iframe-phone/lib/parent-endpoint.js");
-var getIFrameEndpoint = __webpack_require__(/*! ./iframe-endpoint */ "./node_modules/iframe-phone/lib/iframe-endpoint.js");
-
-// Not a real UUID as there's an RFC for that (needed for proper distributed computing).
-// But in this fairly parochial situation, we just need to be fairly sure to avoid repeats.
-function getPseudoUUID() {
-  var chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
-  var len = chars.length;
-  var ret = [];
-
-  for (var i = 0; i < 10; i++) {
-    ret.push(chars[Math.floor(Math.random() * len)]);
-  }
-  return ret.join('');
+// v8 likes predictible objects
+function Item(fun, array) {
+    this.fun = fun;
+    this.array = array;
 }
+Item.prototype.run = function () {
+    this.fun.apply(null, this.array);
+};
+process.title = 'browser';
+process.browser = true;
+process.env = {};
+process.argv = [];
+process.version = ''; // empty string to avoid regexp issues
+process.versions = {};
 
-module.exports = function IframePhoneRpcEndpoint(handler, namespace, targetWindow, targetOrigin, phone) {
-  var pendingCallbacks = Object.create({});
-
-  // if it's a non-null object, rather than a function, 'handler' is really an options object
-  if (handler && typeof handler === 'object') {
-    namespace = handler.namespace;
-    targetWindow = handler.targetWindow;
-    targetOrigin = handler.targetOrigin;
-    phone = handler.phone;
-    handler = handler.handler;
-  }
-
-  if (!phone) {
-    if (targetWindow === window.parent) {
-      phone = getIFrameEndpoint();
-      phone.initialize();
-    } else {
-      phone = new ParentEndpoint(targetWindow, targetOrigin);
-    }
-  }
-
-  phone.addListener(namespace, function (message) {
-    var callbackObj;
-
-    if (message.messageType === 'call' && typeof this.handler === 'function') {
-      this.handler.call(undefined, message.value, function (returnValue) {
-        phone.post(namespace, {
-          messageType: 'returnValue',
-          uuid: message.uuid,
-          value: returnValue
-        });
-      });
-    } else if (message.messageType === 'returnValue') {
-      callbackObj = pendingCallbacks[message.uuid];
-
-      if (callbackObj) {
-        window.clearTimeout(callbackObj.timeout);
-        if (callbackObj.callback) {
-          callbackObj.callback.call(undefined, message.value);
-        }
-        pendingCallbacks[message.uuid] = null;
-      }
-    }
-  }.bind(this));
-
-  function call(message, callback) {
-    var uuid = getPseudoUUID();
+function noop() {}
 
-    pendingCallbacks[uuid] = {
-      callback: callback,
-      timeout: window.setTimeout(function () {
-        if (callback) {
-          callback(undefined, new Error("IframePhone timed out waiting for reply"));
-        }
-      }, 2000)
-    };
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
+process.prependListener = noop;
+process.prependOnceListener = noop;
 
-    phone.post(namespace, {
-      messageType: 'call',
-      uuid: uuid,
-      value: message
-    });
-  }
+process.listeners = function (name) { return [] }
 
-  function disconnect() {
-    phone.disconnect();
-  }
+process.binding = function (name) {
+    throw new Error('process.binding is not supported');
+};
 
-  this.handler = handler;
-  this.call = call.bind(this);
-  this.disconnect = disconnect.bind(this);
+process.cwd = function () { return '/' };
+process.chdir = function (dir) {
+    throw new Error('process.chdir is not supported');
 };
+process.umask = function() { return 0; };
 
 
 /***/ }),
 
-/***/ "./node_modules/iframe-phone/lib/parent-endpoint.js":
-/*!**********************************************************!*\
-  !*** ./node_modules/iframe-phone/lib/parent-endpoint.js ***!
-  \**********************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var structuredClone = __webpack_require__(/*! ./structured-clone */ "./node_modules/iframe-phone/lib/structured-clone.js");
+/***/ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js":
+/*!*************************************************************************!*\
+  !*** ./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js ***!
+  \*************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-/**
-  Call as:
-    new ParentEndpoint(targetWindow, targetOrigin, afterConnectedCallback)
-      targetWindow is a WindowProxy object. (Messages will be sent to it)
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* WEBPACK VAR INJECTION */(function(global) {/**
+ * A collection of shims that provide minimal functionality of the ES6 collections.
+ *
+ * These implementations are not meant to be used outside of the ResizeObserver
+ * modules as they cover only a limited range of use cases.
+ */
+/* eslint-disable require-jsdoc, valid-jsdoc */
+var MapShim = (function () {
+    if (typeof Map !== 'undefined') {
+        return Map;
+    }
+    /**
+     * Returns index in provided array that matches the specified key.
+     *
+     * @param {Array<Array>} arr
+     * @param {*} key
+     * @returns {number}
+     */
+    function getIndex(arr, key) {
+        var result = -1;
+        arr.some(function (entry, index) {
+            if (entry[0] === key) {
+                result = index;
+                return true;
+            }
+            return false;
+        });
+        return result;
+    }
+    return /** @class */ (function () {
+        function class_1() {
+            this.__entries__ = [];
+        }
+        Object.defineProperty(class_1.prototype, "size", {
+            /**
+             * @returns {boolean}
+             */
+            get: function () {
+                return this.__entries__.length;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @param {*} key
+         * @returns {*}
+         */
+        class_1.prototype.get = function (key) {
+            var index = getIndex(this.__entries__, key);
+            var entry = this.__entries__[index];
+            return entry && entry[1];
+        };
+        /**
+         * @param {*} key
+         * @param {*} value
+         * @returns {void}
+         */
+        class_1.prototype.set = function (key, value) {
+            var index = getIndex(this.__entries__, key);
+            if (~index) {
+                this.__entries__[index][1] = value;
+            }
+            else {
+                this.__entries__.push([key, value]);
+            }
+        };
+        /**
+         * @param {*} key
+         * @returns {void}
+         */
+        class_1.prototype.delete = function (key) {
+            var entries = this.__entries__;
+            var index = getIndex(entries, key);
+            if (~index) {
+                entries.splice(index, 1);
+            }
+        };
+        /**
+         * @param {*} key
+         * @returns {void}
+         */
+        class_1.prototype.has = function (key) {
+            return !!~getIndex(this.__entries__, key);
+        };
+        /**
+         * @returns {void}
+         */
+        class_1.prototype.clear = function () {
+            this.__entries__.splice(0);
+        };
+        /**
+         * @param {Function} callback
+         * @param {*} [ctx=null]
+         * @returns {void}
+         */
+        class_1.prototype.forEach = function (callback, ctx) {
+            if (ctx === void 0) { ctx = null; }
+            for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
+                var entry = _a[_i];
+                callback.call(ctx, entry[1], entry[0]);
+            }
+        };
+        return class_1;
+    }());
+})();
 
-      targetOrigin is the origin of the targetWindow. (Messages will be restricted to this origin)
+/**
+ * Detects whether window and document objects are available in current environment.
+ */
+var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
 
-      afterConnectedCallback is an optional callback function to be called when the connection is
-        established.
-
-  OR (less secure):
-    new ParentEndpoint(targetIframe, afterConnectedCallback)
-
-      targetIframe is a DOM object (HTMLIframeElement); messages will be sent to its contentWindow.
-
-      afterConnectedCallback is an optional callback function
-
-    In this latter case, targetOrigin will be inferred from the value of the src attribute of the
-    provided DOM object at the time of the constructor invocation. This is less secure because the
-    iframe might have been navigated to an unexpected domain before constructor invocation.
-
-  Note that it is important to specify the expected origin of the iframe's content to safeguard
-  against sending messages to an unexpected domain. This might happen if our iframe is navigated to
-  a third-party URL unexpectedly. Furthermore, having a reference to Window object (as in the first
-  form of the constructor) does not protect against sending a message to the wrong domain. The
-  window object is actualy a WindowProxy which transparently proxies the Window object of the
-  underlying iframe, so that when the iframe is navigated, the "same" WindowProxy now references a
-  completely differeent Window object, possibly controlled by a hostile domain.
-
-  See http://www.esdiscuss.org/topic/a-dom-use-case-that-can-t-be-emulated-with-direct-proxies for
-  more about this weird behavior of WindowProxies (the type returned by <iframe>.contentWindow).
-*/
-
-module.exports = function ParentEndpoint(targetWindowOrIframeEl, targetOrigin, afterConnectedCallback) {
-  var postMessageQueue = [];
-  var connected = false;
-  var handlers = {};
-  var targetWindowIsIframeElement;
-
-  function getIframeOrigin(iframe) {
-    return iframe.src.match(/(.*?\/\/.*?)\//)[1];
-  }
-
-  function post(type, content) {
-    var message;
-    // Message object can be constructed from 'type' and 'content' arguments or it can be passed
-    // as the first argument.
-    if (arguments.length === 1 && typeof type === 'object' && typeof type.type === 'string') {
-      message = type;
-    } else {
-      message = {
-        type: type,
-        content: content
-      };
-    }
-    if (connected) {
-      var tWindow = getTargetWindow();
-      // if we are laready connected ... send the message
-      // See http://dev.opera.com/articles/view/window-postmessage-messagechannel/#crossdoc
-      //     https://github.com/Modernizr/Modernizr/issues/388
-      //     http://jsfiddle.net/ryanseddon/uZTgD/2/
-      if (structuredClone.supported()) {
-        tWindow.postMessage(message, targetOrigin);
-      } else {
-        tWindow.postMessage(JSON.stringify(message), targetOrigin);
-      }
-    } else {
-      // else queue up the messages to send after connection complete.
-      postMessageQueue.push(message);
-    }
-  }
-
-  function addListener(messageName, func) {
-    handlers[messageName] = func;
-  }
-
-  function removeListener(messageName) {
-    delete handlers[messageName];
-  }
-
-  function removeAllListeners() {
-    handlers = {};
-  }
-
-  // Note that this function can't be used when IFrame element hasn't been added to DOM yet
-  // (.contentWindow would be null). At the moment risk is purely theoretical, as the parent endpoint
-  // only listens for an incoming 'hello' message and the first time we call this function
-  // is in #receiveMessage handler (so iframe had to be initialized before, as it could send 'hello').
-  // It would become important when we decide to refactor the way how communication is initialized.
-  function getTargetWindow() {
-    if (targetWindowIsIframeElement) {
-      var tWindow = targetWindowOrIframeEl.contentWindow;
-      if (!tWindow) {
-        throw "IFrame element needs to be added to DOM before communication " +
-              "can be started (.contentWindow is not available)";
-      }
-      return tWindow;
-    }
-    return targetWindowOrIframeEl;
-  }
-
-  function receiveMessage(message) {
-    var messageData;
-    if (message.source === getTargetWindow() && (targetOrigin === '*' || message.origin === targetOrigin)) {
-      messageData = message.data;
-      if (typeof messageData === 'string') {
-        messageData = JSON.parse(messageData);
-      }
-      if (handlers[messageData.type]) {
-        handlers[messageData.type](messageData.content);
-      } else {
-        console.log("cant handle type: " + messageData.type);
-      }
-    }
-  }
-
-  function disconnect() {
-    connected = false;
-    removeAllListeners();
-    window.removeEventListener('message', receiveMessage);
-  }
-
-  // handle the case that targetWindowOrIframeEl is actually an <iframe> rather than a Window(Proxy) object
-  // Note that if it *is* a WindowProxy, this probe will throw a SecurityException, but in that case
-  // we also don't need to do anything
-  try {
-    targetWindowIsIframeElement = targetWindowOrIframeEl.constructor === HTMLIFrameElement;
-  } catch (e) {
-    targetWindowIsIframeElement = false;
-  }
-
-  if (targetWindowIsIframeElement) {
-    // Infer the origin ONLY if the user did not supply an explicit origin, i.e., if the second
-    // argument is empty or is actually a callback (meaning it is supposed to be the
-    // afterConnectionCallback)
-    if (!targetOrigin || targetOrigin.constructor === Function) {
-      afterConnectedCallback = targetOrigin;
-      targetOrigin = getIframeOrigin(targetWindowOrIframeEl);
-    }
-  }
-
-  // Handle pages served through file:// protocol. Behaviour varies in different browsers. Safari sets origin
-  // to 'file://' and everything works fine, but Chrome and Safari set message.origin to null.
-  // Also, https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage says:
-  //  > Lastly, posting a message to a page at a file: URL currently requires that the targetOrigin argument be "*".
-  //  > file:// cannot be used as a security restriction; this restriction may be modified in the future.
-  // So, using '*' seems like the only possible solution.
-  if (targetOrigin === 'file://') {
-    targetOrigin = '*';
-  }
-
-  // when we receive 'hello':
-  addListener('hello', function () {
-    connected = true;
-
-    // send hello response
-    post({
-      type: 'hello',
-      // `origin` property isn't used by IframeEndpoint anymore (>= 1.2.0), but it's being sent to be
-      // backward compatible with old IframeEndpoint versions (< v1.2.0).
-      origin: window.location.href.match(/(.*?\/\/.*?)\//)[1]
-    });
-
-    // give the user a chance to do things now that we are connected
-    // note that is will happen before any queued messages
-    if (afterConnectedCallback && typeof afterConnectedCallback === "function") {
-      afterConnectedCallback();
-    }
-
-    // Now send any messages that have been queued up ...
-    while (postMessageQueue.length > 0) {
-      post(postMessageQueue.shift());
-    }
-  });
-
-  window.addEventListener('message', receiveMessage, false);
-
-  // Public API.
-  return {
-    post: post,
-    addListener: addListener,
-    removeListener: removeListener,
-    removeAllListeners: removeAllListeners,
-    disconnect: disconnect,
-    getTargetWindow: getTargetWindow,
-    targetOrigin: targetOrigin
-  };
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/iframe-phone/lib/structured-clone.js":
-/*!***********************************************************!*\
-  !*** ./node_modules/iframe-phone/lib/structured-clone.js ***!
-  \***********************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-var featureSupported = {
-  'structuredClones': 0
-};
-
-(function () {
-  var result = 0;
-
-  if (!!window.postMessage) {
-    try {
-      // Spec states you can't transmit DOM nodes and it will throw an error
-      // postMessage implementations that support cloned data will throw.
-      window.postMessage(document.createElement("a"), "*");
-    } catch (e) {
-      // BBOS6 throws but doesn't pass through the correct exception
-      // so check error message
-      result = (e.DATA_CLONE_ERR || e.message === "Cannot post cyclic structures.") ? 1 : 0;
-      featureSupported = {
-        'structuredClones': result
-      };
-    }
-  }
-}());
-
-exports.supported = function supported() {
-  return featureSupported && featureSupported.structuredClones > 0;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/iframe-phone/main.js":
-/*!*******************************************!*\
-  !*** ./node_modules/iframe-phone/main.js ***!
-  \*******************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = {
-  /**
-   * Allows to communicate with an iframe.
-   */
-  ParentEndpoint:  __webpack_require__(/*! ./lib/parent-endpoint */ "./node_modules/iframe-phone/lib/parent-endpoint.js"),
-  /**
-   * Allows to communicate with a parent page.
-   * IFrameEndpoint is a singleton, as iframe can't have multiple parents anyway.
-   */
-  getIFrameEndpoint: __webpack_require__(/*! ./lib/iframe-endpoint */ "./node_modules/iframe-phone/lib/iframe-endpoint.js"),
-  structuredClone: __webpack_require__(/*! ./lib/structured-clone */ "./node_modules/iframe-phone/lib/structured-clone.js"),
-
-  // TODO: May be misnamed
-  IframePhoneRpcEndpoint: __webpack_require__(/*! ./lib/iframe-phone-rpc-endpoint */ "./node_modules/iframe-phone/lib/iframe-phone-rpc-endpoint.js")
-
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/process/browser.js":
-/*!*****************************************!*\
-  !*** ./node_modules/process/browser.js ***!
-  \*****************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-// shim for using process in browser
-var process = module.exports = {};
-
-// cached from whatever global is present so that test runners that stub it
-// don't break things.  But we need to wrap it in a try catch in case it is
-// wrapped in strict mode code which doesn't define any globals.  It's inside a
-// function because try/catches deoptimize in certain engines.
-
-var cachedSetTimeout;
-var cachedClearTimeout;
-
-function defaultSetTimout() {
-    throw new Error('setTimeout has not been defined');
-}
-function defaultClearTimeout () {
-    throw new Error('clearTimeout has not been defined');
-}
-(function () {
-    try {
-        if (typeof setTimeout === 'function') {
-            cachedSetTimeout = setTimeout;
-        } else {
-            cachedSetTimeout = defaultSetTimout;
-        }
-    } catch (e) {
-        cachedSetTimeout = defaultSetTimout;
-    }
-    try {
-        if (typeof clearTimeout === 'function') {
-            cachedClearTimeout = clearTimeout;
-        } else {
-            cachedClearTimeout = defaultClearTimeout;
-        }
-    } catch (e) {
-        cachedClearTimeout = defaultClearTimeout;
-    }
-} ())
-function runTimeout(fun) {
-    if (cachedSetTimeout === setTimeout) {
-        //normal enviroments in sane situations
-        return setTimeout(fun, 0);
-    }
-    // if setTimeout wasn't available but was latter defined
-    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
-        cachedSetTimeout = setTimeout;
-        return setTimeout(fun, 0);
-    }
-    try {
-        // when when somebody has screwed with setTimeout but no I.E. maddness
-        return cachedSetTimeout(fun, 0);
-    } catch(e){
-        try {
-            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
-            return cachedSetTimeout.call(null, fun, 0);
-        } catch(e){
-            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
-            return cachedSetTimeout.call(this, fun, 0);
-        }
-    }
-
-
-}
-function runClearTimeout(marker) {
-    if (cachedClearTimeout === clearTimeout) {
-        //normal enviroments in sane situations
-        return clearTimeout(marker);
-    }
-    // if clearTimeout wasn't available but was latter defined
-    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
-        cachedClearTimeout = clearTimeout;
-        return clearTimeout(marker);
-    }
-    try {
-        // when when somebody has screwed with setTimeout but no I.E. maddness
-        return cachedClearTimeout(marker);
-    } catch (e){
-        try {
-            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
-            return cachedClearTimeout.call(null, marker);
-        } catch (e){
-            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
-            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
-            return cachedClearTimeout.call(this, marker);
-        }
-    }
-
-
-
-}
-var queue = [];
-var draining = false;
-var currentQueue;
-var queueIndex = -1;
-
-function cleanUpNextTick() {
-    if (!draining || !currentQueue) {
-        return;
-    }
-    draining = false;
-    if (currentQueue.length) {
-        queue = currentQueue.concat(queue);
-    } else {
-        queueIndex = -1;
-    }
-    if (queue.length) {
-        drainQueue();
-    }
-}
-
-function drainQueue() {
-    if (draining) {
-        return;
-    }
-    var timeout = runTimeout(cleanUpNextTick);
-    draining = true;
-
-    var len = queue.length;
-    while(len) {
-        currentQueue = queue;
-        queue = [];
-        while (++queueIndex < len) {
-            if (currentQueue) {
-                currentQueue[queueIndex].run();
-            }
-        }
-        queueIndex = -1;
-        len = queue.length;
-    }
-    currentQueue = null;
-    draining = false;
-    runClearTimeout(timeout);
-}
-
-process.nextTick = function (fun) {
-    var args = new Array(arguments.length - 1);
-    if (arguments.length > 1) {
-        for (var i = 1; i < arguments.length; i++) {
-            args[i - 1] = arguments[i];
-        }
-    }
-    queue.push(new Item(fun, args));
-    if (queue.length === 1 && !draining) {
-        runTimeout(drainQueue);
-    }
-};
-
-// v8 likes predictible objects
-function Item(fun, array) {
-    this.fun = fun;
-    this.array = array;
-}
-Item.prototype.run = function () {
-    this.fun.apply(null, this.array);
-};
-process.title = 'browser';
-process.browser = true;
-process.env = {};
-process.argv = [];
-process.version = ''; // empty string to avoid regexp issues
-process.versions = {};
-
-function noop() {}
-
-process.on = noop;
-process.addListener = noop;
-process.once = noop;
-process.off = noop;
-process.removeListener = noop;
-process.removeAllListeners = noop;
-process.emit = noop;
-process.prependListener = noop;
-process.prependOnceListener = noop;
-
-process.listeners = function (name) { return [] }
-
-process.binding = function (name) {
-    throw new Error('process.binding is not supported');
-};
-
-process.cwd = function () { return '/' };
-process.chdir = function (dir) {
-    throw new Error('process.chdir is not supported');
-};
-process.umask = function() { return 0; };
-
-
-/***/ }),
-
-/***/ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js":
-/*!*************************************************************************!*\
-  !*** ./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js ***!
-  \*************************************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* WEBPACK VAR INJECTION */(function(global) {/**
- * A collection of shims that provide minimal functionality of the ES6 collections.
- *
- * These implementations are not meant to be used outside of the ResizeObserver
- * modules as they cover only a limited range of use cases.
- */
-/* eslint-disable require-jsdoc, valid-jsdoc */
-var MapShim = (function () {
-    if (typeof Map !== 'undefined') {
-        return Map;
-    }
-    /**
-     * Returns index in provided array that matches the specified key.
-     *
-     * @param {Array<Array>} arr
-     * @param {*} key
-     * @returns {number}
-     */
-    function getIndex(arr, key) {
-        var result = -1;
-        arr.some(function (entry, index) {
-            if (entry[0] === key) {
-                result = index;
-                return true;
-            }
-            return false;
-        });
-        return result;
-    }
-    return /** @class */ (function () {
-        function class_1() {
-            this.__entries__ = [];
-        }
-        Object.defineProperty(class_1.prototype, "size", {
-            /**
-             * @returns {boolean}
-             */
-            get: function () {
-                return this.__entries__.length;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * @param {*} key
-         * @returns {*}
-         */
-        class_1.prototype.get = function (key) {
-            var index = getIndex(this.__entries__, key);
-            var entry = this.__entries__[index];
-            return entry && entry[1];
-        };
-        /**
-         * @param {*} key
-         * @param {*} value
-         * @returns {void}
-         */
-        class_1.prototype.set = function (key, value) {
-            var index = getIndex(this.__entries__, key);
-            if (~index) {
-                this.__entries__[index][1] = value;
-            }
-            else {
-                this.__entries__.push([key, value]);
-            }
-        };
-        /**
-         * @param {*} key
-         * @returns {void}
-         */
-        class_1.prototype.delete = function (key) {
-            var entries = this.__entries__;
-            var index = getIndex(entries, key);
-            if (~index) {
-                entries.splice(index, 1);
-            }
-        };
-        /**
-         * @param {*} key
-         * @returns {void}
-         */
-        class_1.prototype.has = function (key) {
-            return !!~getIndex(this.__entries__, key);
-        };
-        /**
-         * @returns {void}
-         */
-        class_1.prototype.clear = function () {
-            this.__entries__.splice(0);
-        };
-        /**
-         * @param {Function} callback
-         * @param {*} [ctx=null]
-         * @returns {void}
-         */
-        class_1.prototype.forEach = function (callback, ctx) {
-            if (ctx === void 0) { ctx = null; }
-            for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
-                var entry = _a[_i];
-                callback.call(ctx, entry[1], entry[0]);
-            }
-        };
-        return class_1;
-    }());
-})();
-
-/**
- * Detects whether window and document objects are available in current environment.
- */
-var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
-
-// Returns global object of a current environment.
-var global$1 = (function () {
-    if (typeof global !== 'undefined' && global.Math === Math) {
-        return global;
-    }
-    if (typeof self !== 'undefined' && self.Math === Math) {
-        return self;
-    }
-    if (typeof window !== 'undefined' && window.Math === Math) {
-        return window;
-    }
-    // eslint-disable-next-line no-new-func
-    return Function('return this')();
-})();
+// Returns global object of a current environment.
+var global$1 = (function () {
+    if (typeof global !== 'undefined' && global.Math === Math) {
+        return global;
+    }
+    if (typeof self !== 'undefined' && self.Math === Math) {
+        return self;
+    }
+    if (typeof window !== 'undefined' && window.Math === Math) {
+        return window;
+    }
+    // eslint-disable-next-line no-new-func
+    return Function('return this')();
+})();
 
 /**
  * A shim for the requestAnimationFrame which falls back to the setTimeout if
@@ -4568,1237 +4049,1756 @@ var __assign = (this && this.__assign) || function () {
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendCustomMessage = exports.setOnUnload = exports.sendReportItemAnswer = exports.getAttachmentUrl = exports.readAttachment = exports.writeAttachment = exports.getLibraryInteractiveList = exports.getInteractiveSnapshot = exports.setLinkedInteractives = exports.getInteractiveList = exports.closeModal = exports.showModal = exports.removeLinkedInteractiveStateListener = exports.addLinkedInteractiveStateListener = exports.removeGlobalInteractiveStateListener = exports.addGlobalInteractiveStateListener = exports.removeAuthoredStateListener = exports.addAuthoredStateListener = exports.removeInteractiveStateListener = exports.addInteractiveStateListener = exports.log = exports.getFirebaseJwt = exports.getAuthInfo = exports.setNavigation = exports.setHint = exports.postDecoratedContentEvent = exports.setHeight = exports.setSupportedFeatures = exports.notifyReportItemClientReady = exports.removeGetReportItemAnswerListener = exports.addGetReportItemAnswerListener = exports.removeDecorateContentListener = exports.addDecorateContentListener = exports.removeCustomMessageListener = exports.addCustomMessageListener = exports.setGlobalInteractiveState = exports.getGlobalInteractiveState = exports.setAuthoredState = exports.getAuthoredState = exports.flushStateUpdates = exports.setInteractiveState = exports.setInteractiveStateTimeout = exports.getInteractiveState = exports.getMode = exports.getInitInteractiveMessage = void 0;
+var client_1 = __webpack_require__(/*! ./client */ "./src/interactive-api-client/client.ts");
+var uuid_1 = __webpack_require__(/*! uuid */ "./node_modules/uuid/dist/esm-browser/index.js");
+var THROW_NOT_IMPLEMENTED_YET = function (method) {
+    throw new Error(method + " is not yet implemented in the client!");
+};
+var getInitInteractiveMessage = function () {
+    var client = (0, client_1.getClient)();
+    return new Promise(function (resolve) {
+        if (client.managedState.initMessage) {
+            resolve(client.managedState.initMessage);
+        }
+        else {
+            client.managedState.once("initInteractive", function () { return resolve(client.managedState.initMessage); });
+        }
+    });
+};
+exports.getInitInteractiveMessage = getInitInteractiveMessage;
+var getMode = function () {
+    return (0, exports.getInitInteractiveMessage)().then(function (initInteractiveMessage) { return initInteractiveMessage === null || initInteractiveMessage === void 0 ? void 0 : initInteractiveMessage.mode; });
+};
+exports.getMode = getMode;
+var getInteractiveState = function () {
+    return (0, client_1.getClient)().managedState.interactiveState;
+};
+exports.getInteractiveState = getInteractiveState;
+var setInteractiveStateTimeoutId;
+var delayedInteractiveStateUpdate = null;
+exports.setInteractiveStateTimeout = 2000; // ms
+/**
+ * Note that state will become frozen and should never be mutated.
+ * Each time you update state, make sure that a new object is passed.
+ *
+ * Good:
+ * ```
+ * setInteractiveState(Object.assign({}, previousState, {someProperty: "a new value"}));
+ * // or
+ * setInteractiveState({...previousState, someProperty: "a new value"});
+ * ```
+ *
+ * Bad:
+ * ```
+ * previousState.someProperty = "a new value";
+ * setInteractiveState(previousState);
+ * ```
+ */
+var setInteractiveState = function (newInteractiveState) {
+    var client = (0, client_1.getClient)();
+    client.managedState.interactiveState = newInteractiveState;
+    window.clearTimeout(setInteractiveStateTimeoutId);
+    delayedInteractiveStateUpdate = function () {
+        client.post("interactiveState", newInteractiveState);
+        client.managedState.interactiveStateDirty = false;
+        delayedInteractiveStateUpdate = null;
+    };
+    setInteractiveStateTimeoutId = window.setTimeout(function () {
+        // Note that delayedInteractiveStateUpdate might be equal to null if it was executed before using .flush()
+        delayedInteractiveStateUpdate === null || delayedInteractiveStateUpdate === void 0 ? void 0 : delayedInteractiveStateUpdate();
+    }, exports.setInteractiveStateTimeout);
+};
+exports.setInteractiveState = setInteractiveState;
+/**
+ * Useful in rare cases when it's not desirable to wait for the delayed state updates (at this point it only applies
+ * to interactive state updates). Internally used by the showModal and closeModal functions, as opening modal
+ * usually means reloading interactive. It's necessary to make sure that the state is up to date before it happens.
+ */
+var flushStateUpdates = function () {
+    // Note that if delayedInteractiveStateUpdate was set, it should set itself to null and setTimeout will ignore it.
+    delayedInteractiveStateUpdate === null || delayedInteractiveStateUpdate === void 0 ? void 0 : delayedInteractiveStateUpdate();
+    window.clearTimeout(setInteractiveStateTimeoutId);
+};
+exports.flushStateUpdates = flushStateUpdates;
+var getAuthoredState = function () {
+    return (0, client_1.getClient)().managedState.authoredState;
+};
+exports.getAuthoredState = getAuthoredState;
+/**
+ * Note that state will become frozen and should never be mutated.
+ * Each time you update state, make sure that a new object is passed.
+ *
+ * Good:
+ * ```
+ * setAuthoredState(Object.assign({}, previousState, {someProperty: "a new value"}));
+ * // or
+ * setAuthoredState({...previousState, someProperty: "a new value"});
+ * ```
+ *
+ * Bad:
+ * ```
+ * previousState.someProperty = "a new value";
+ * setAuthoredState(previousState);
+ * ```
+ */
+var setAuthoredState = function (newAuthoredState) {
+    var client = (0, client_1.getClient)();
+    client.managedState.authoredState = newAuthoredState;
+    client.post("authoredState", newAuthoredState);
+};
+exports.setAuthoredState = setAuthoredState;
+var getGlobalInteractiveState = function () {
+    return (0, client_1.getClient)().managedState.globalInteractiveState;
+};
+exports.getGlobalInteractiveState = getGlobalInteractiveState;
+/**
+ * Note that state will become frozen and should never be mutated.
+ * Each time you update state, make sure that a new object is passed.
+ *
+ * Good:
+ * ```
+ * setGlobalInteractiveState(Object.assign({}, previousState, {someProperty: "a new value"}));
+ * // or
+ * setGlobalInteractiveState({...previousState, someProperty: "a new value"});
+ * ```
+ *
+ * Bad:
+ * ```
+ * previousState.someProperty = "a new value";
+ * setGlobalInteractiveState(previousState);
+ * ```
+ */
+var setGlobalInteractiveState = function (newGlobalState) {
+    var client = (0, client_1.getClient)();
+    client.managedState.globalInteractiveState = newGlobalState;
+    client.post("interactiveStateGlobal", newGlobalState);
+};
+exports.setGlobalInteractiveState = setGlobalInteractiveState;
+var addCustomMessageListener = function (callback, handles) {
+    var client = (0, client_1.getClient)();
+    if (handles) {
+        client.customMessagesHandled = handles;
+    }
+    client.addListener("customMessage", callback);
+};
+exports.addCustomMessageListener = addCustomMessageListener;
+var removeCustomMessageListener = function () {
+    return (0, client_1.getClient)().removeListener("customMessage");
+};
+exports.removeCustomMessageListener = removeCustomMessageListener;
+var addDecorateContentListener = function (callback) {
+    (0, client_1.getClient)().addListener("decorateContent", function (msg) {
+        callback({
+            words: msg.words,
+            replace: msg.replace,
+            wordClass: msg.wordClass,
+            eventListeners: msg.listenerTypes.map(function (listener) {
+                return {
+                    type: listener.type,
+                    listener: function (evt) {
+                        var wordElement = evt.srcElement;
+                        if (!wordElement) {
+                            return;
+                        }
+                        var clickedWord = (wordElement.textContent || "").toLowerCase();
+                        (0, exports.postDecoratedContentEvent)({ type: listener.type,
+                            text: clickedWord,
+                            bounds: wordElement.getBoundingClientRect() });
+                    }
+                };
+            })
+        });
+    });
+};
+exports.addDecorateContentListener = addDecorateContentListener;
+var removeDecorateContentListener = function () {
+    (0, client_1.getClient)().removeListener("decorateContent");
+};
+exports.removeDecorateContentListener = removeDecorateContentListener;
+// tslint:disable-next-line:max-line-length
+var addGetReportItemAnswerListener = function (callback) {
+    (0, client_1.getClient)().addListener("getReportItemAnswer", callback);
+};
+exports.addGetReportItemAnswerListener = addGetReportItemAnswerListener;
+var removeGetReportItemAnswerListener = function () {
+    (0, client_1.getClient)().removeListener("getReportItemAnswer");
+};
+exports.removeGetReportItemAnswerListener = removeGetReportItemAnswerListener;
+var notifyReportItemClientReady = function (metadata) {
+    (0, client_1.getClient)().post("reportItemClientReady", metadata);
+};
+exports.notifyReportItemClientReady = notifyReportItemClientReady;
+var setSupportedFeatures = function (features) {
+    var request = {
+        apiVersion: 1,
+        features: features
+    };
+    (0, client_1.getClient)().setSupportedFeatures(request);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
+exports.setSupportedFeatures = setSupportedFeatures;
+var setHeight = function (height) {
+    (0, client_1.getClient)().post("height", height);
+};
+exports.setHeight = setHeight;
+var postDecoratedContentEvent = function (msg) {
+    (0, client_1.getClient)().post("decoratedContentEvent", msg);
+};
+exports.postDecoratedContentEvent = postDecoratedContentEvent;
+/**
+ * Providing empty string or null disables hint.
+ */
+var setHint = function (hint) {
+    var request = { text: hint };
+    (0, client_1.getClient)().post("hint", request);
+};
+exports.setHint = setHint;
+var setNavigation = function (options) {
+    (0, client_1.getClient)().post("navigation", options);
+};
+exports.setNavigation = setNavigation;
+var getAuthInfo = function () {
+    return new Promise(function (resolve, reject) {
+        var listener = function (authInfo) {
+            resolve(authInfo);
+        };
+        var client = (0, client_1.getClient)();
+        var requestId = client.getNextRequestId();
+        var request = {
+            requestId: requestId
+        };
+        client.addListener("authInfo", listener, requestId);
+        client.post("getAuthInfo", request);
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
+exports.getAuthInfo = getAuthInfo;
+var getFirebaseJwt = function (firebaseApp) {
+    return new Promise(function (resolve, reject) {
+        (0, exports.getInitInteractiveMessage)().then(function (initMsg) {
+            var _a, _b;
+            if (((_b = (_a = initMsg === null || initMsg === void 0 ? void 0 : initMsg.hostFeatures) === null || _a === void 0 ? void 0 : _a.getFirebaseJwt) === null || _b === void 0 ? void 0 : _b.version) === "1.0.0") {
+                var listener = function (response) {
+                    if (response.response_type === "ERROR") {
+                        reject(response.message || "Error getting Firebase JWT");
+                    }
+                    else if (response.token) {
+                        try {
+                            var claimsJson = atob(response.token.split(".")[1]);
+                            resolve({ token: response.token, claims: JSON.parse(claimsJson) });
+                        }
+                        catch (error) {
+                            reject("Unable to parse JWT Token");
+                        }
+                    }
+                    else {
+                        reject("Empty token");
+                    }
+                };
+                var client = (0, client_1.getClient)();
+                var requestId = client.getNextRequestId();
+                var request = {
+                    requestId: requestId,
+                    firebase_app: firebaseApp
+                };
+                client.addListener("firebaseJWT", listener, requestId);
+                client.post("getFirebaseJWT", request);
             }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
+            else {
+                reject("getFirebaseJwt not supported by the host environment");
+            }
+        });
+    });
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+exports.getFirebaseJwt = getFirebaseJwt;
+var log = function (action, data) {
+    (0, client_1.getClient)().post("log", { action: action, data: data });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sendCustomMessage = exports.setOnUnload = exports.sendReportItemAnswer = exports.getAttachmentUrl = exports.readAttachment = exports.writeAttachment = exports.getLibraryInteractiveList = exports.getInteractiveSnapshot = exports.setLinkedInteractives = exports.getInteractiveList = exports.closeModal = exports.showModal = exports.removeLinkedInteractiveStateListener = exports.addLinkedInteractiveStateListener = exports.removeGlobalInteractiveStateListener = exports.addGlobalInteractiveStateListener = exports.removeAuthoredStateListener = exports.addAuthoredStateListener = exports.removeInteractiveStateListener = exports.addInteractiveStateListener = exports.log = exports.getFirebaseJwt = exports.getAuthInfo = exports.setNavigation = exports.setHint = exports.postDecoratedContentEvent = exports.setHeight = exports.setSupportedFeatures = exports.notifyReportItemClientReady = exports.removeGetReportItemAnswerListener = exports.addGetReportItemAnswerListener = exports.removeDecorateContentListener = exports.addDecorateContentListener = exports.removeCustomMessageListener = exports.addCustomMessageListener = exports.setGlobalInteractiveState = exports.getGlobalInteractiveState = exports.setAuthoredState = exports.getAuthoredState = exports.flushStateUpdates = exports.setInteractiveState = exports.setInteractiveStateTimeout = exports.getInteractiveState = exports.getMode = exports.getInitInteractiveMessage = void 0;
-var client_1 = __webpack_require__(/*! ./client */ "./src/interactive-api-client/client.ts");
-var uuid_1 = __webpack_require__(/*! uuid */ "./node_modules/uuid/dist/esm-browser/index.js");
-var THROW_NOT_IMPLEMENTED_YET = function (method) {
-    throw new Error(method + " is not yet implemented in the client!");
+exports.log = log;
+// tslint:disable-next-line:max-line-length
+var addInteractiveStateListener = function (listener) {
+    (0, client_1.getClient)().managedState.on("interactiveStateUpdated", listener);
 };
-var getInitInteractiveMessage = function () {
-    var client = (0, client_1.getClient)();
-    return new Promise(function (resolve) {
-        if (client.managedState.initMessage) {
-            resolve(client.managedState.initMessage);
-        }
-        else {
-            client.managedState.once("initInteractive", function () { return resolve(client.managedState.initMessage); });
-        }
-    });
+exports.addInteractiveStateListener = addInteractiveStateListener;
+// tslint:disable-next-line:max-line-length
+var removeInteractiveStateListener = function (listener) {
+    (0, client_1.getClient)().managedState.off("interactiveStateUpdated", listener);
 };
-exports.getInitInteractiveMessage = getInitInteractiveMessage;
-var getMode = function () {
-    return (0, exports.getInitInteractiveMessage)().then(function (initInteractiveMessage) { return initInteractiveMessage === null || initInteractiveMessage === void 0 ? void 0 : initInteractiveMessage.mode; });
+exports.removeInteractiveStateListener = removeInteractiveStateListener;
+var addAuthoredStateListener = function (listener) {
+    (0, client_1.getClient)().managedState.on("authoredStateUpdated", listener);
 };
-exports.getMode = getMode;
-var getInteractiveState = function () {
-    return (0, client_1.getClient)().managedState.interactiveState;
+exports.addAuthoredStateListener = addAuthoredStateListener;
+var removeAuthoredStateListener = function (listener) {
+    (0, client_1.getClient)().managedState.off("authoredStateUpdated", listener);
 };
-exports.getInteractiveState = getInteractiveState;
-var setInteractiveStateTimeoutId;
-var delayedInteractiveStateUpdate = null;
-exports.setInteractiveStateTimeout = 2000; // ms
+exports.removeAuthoredStateListener = removeAuthoredStateListener;
+// tslint:disable-next-line:max-line-length
+var addGlobalInteractiveStateListener = function (listener) {
+    (0, client_1.getClient)().managedState.on("globalInteractiveStateUpdated", listener);
+};
+exports.addGlobalInteractiveStateListener = addGlobalInteractiveStateListener;
+// tslint:disable-next-line:max-line-length
+var removeGlobalInteractiveStateListener = function (listener) {
+    (0, client_1.getClient)().managedState.off("globalInteractiveStateUpdated", listener);
+};
+exports.removeGlobalInteractiveStateListener = removeGlobalInteractiveStateListener;
+// Mapping between external listener and internal listener, so it's possible to remove linkedInteractiveState listeners.
+var _linkedInteractiveStateListeners = new Map();
 /**
- * Note that state will become frozen and should never be mutated.
- * Each time you update state, make sure that a new object is passed.
- *
- * Good:
- * ```
- * setInteractiveState(Object.assign({}, previousState, {someProperty: "a new value"}));
- * // or
- * setInteractiveState({...previousState, someProperty: "a new value"});
- * ```
- *
- * Bad:
- * ```
- * previousState.someProperty = "a new value";
- * setInteractiveState(previousState);
- * ```
+ * The listener should be called immediately after it is added with any state of the linked
+ * interactive that the host currently knows about. This first call might not happen
+ * synchronously it could be slightly delayed. And then the listener should be called again
+ * whenever the state of the linked interactive changes.
  */
-var setInteractiveState = function (newInteractiveState) {
+var addLinkedInteractiveStateListener = function (listener, options) {
     var client = (0, client_1.getClient)();
-    client.managedState.interactiveState = newInteractiveState;
-    window.clearTimeout(setInteractiveStateTimeoutId);
-    delayedInteractiveStateUpdate = function () {
-        client.post("interactiveState", newInteractiveState);
-        client.managedState.interactiveStateDirty = false;
-        delayedInteractiveStateUpdate = null;
+    var listenerId = (0, uuid_1.v4)();
+    var internalListener = function (response) {
+        if (response.listenerId === listenerId) {
+            listener(response.interactiveState);
+        }
     };
-    setInteractiveStateTimeoutId = window.setTimeout(function () {
-        // Note that delayedInteractiveStateUpdate might be equal to null if it was executed before using .flush()
-        delayedInteractiveStateUpdate === null || delayedInteractiveStateUpdate === void 0 ? void 0 : delayedInteractiveStateUpdate();
-    }, exports.setInteractiveStateTimeout);
+    client.addListener("linkedInteractiveState", internalListener);
+    // Initialize observing in the host environment.
+    var request = __assign(__assign({}, options), { listenerId: listenerId });
+    client.post("addLinkedInteractiveStateListener", request);
+    // Save wrappedInternalListener so it's possible to remove it later.
+    _linkedInteractiveStateListeners.set(listener, {
+        listenerId: request.listenerId,
+        internalListener: internalListener
+    });
 };
-exports.setInteractiveState = setInteractiveState;
+exports.addLinkedInteractiveStateListener = addLinkedInteractiveStateListener;
+var removeLinkedInteractiveStateListener = function (listener) {
+    var client = (0, client_1.getClient)();
+    if (_linkedInteractiveStateListeners.has(listener)) {
+        var _a = _linkedInteractiveStateListeners.get(listener), internalListener = _a.internalListener, listenerId = _a.listenerId;
+        // Remove local message handler. Theoretically it's not necessary if host implementation is correct
+        // (no more messages with this listenerId should be sent), but just to keep things cleaner.
+        client.removeListener("linkedInteractiveState", undefined, internalListener);
+        // Stop observing in the host environment.
+        var request = { listenerId: listenerId };
+        client.post("removeLinkedInteractiveStateListener", request);
+        _linkedInteractiveStateListeners.delete(listener);
+    }
+};
+exports.removeLinkedInteractiveStateListener = removeLinkedInteractiveStateListener;
 /**
- * Useful in rare cases when it's not desirable to wait for the delayed state updates (at this point it only applies
- * to interactive state updates). Internally used by the showModal and closeModal functions, as opening modal
- * usually means reloading interactive. It's necessary to make sure that the state is up to date before it happens.
+ * "lightbox" type is used for displaying images or generic iframes (e.g. help page, but NOT dynamic interactives).
+ * "dialog" is used for showing dynamic interactives. It'll be initialized correctly by the host environment and
+ * all the runtime features will be supported.
  */
-var flushStateUpdates = function () {
-    // Note that if delayedInteractiveStateUpdate was set, it should set itself to null and setTimeout will ignore it.
-    delayedInteractiveStateUpdate === null || delayedInteractiveStateUpdate === void 0 ? void 0 : delayedInteractiveStateUpdate();
-    window.clearTimeout(setInteractiveStateTimeoutId);
+var showModal = function (options) {
+    // Opening modal usually means reloading interactive. It's necessary to make sure that the state is up to date
+    // before it happens.
+    (0, exports.flushStateUpdates)();
+    (0, client_1.getClient)().post("showModal", options);
 };
-exports.flushStateUpdates = flushStateUpdates;
-var getAuthoredState = function () {
-    return (0, client_1.getClient)().managedState.authoredState;
+exports.showModal = showModal;
+var closeModal = function (options) {
+    // Opening modal usually means reloading interactive. It's necessary to make sure that the state is up to date
+    // before it happens.
+    (0, exports.flushStateUpdates)();
+    (0, client_1.getClient)().post("closeModal", options);
 };
-exports.getAuthoredState = getAuthoredState;
-/**
- * Note that state will become frozen and should never be mutated.
- * Each time you update state, make sure that a new object is passed.
- *
- * Good:
- * ```
- * setAuthoredState(Object.assign({}, previousState, {someProperty: "a new value"}));
- * // or
- * setAuthoredState({...previousState, someProperty: "a new value"});
- * ```
- *
- * Bad:
- * ```
- * previousState.someProperty = "a new value";
- * setAuthoredState(previousState);
- * ```
- */
-var setAuthoredState = function (newAuthoredState) {
-    var client = (0, client_1.getClient)();
-    client.managedState.authoredState = newAuthoredState;
-    client.post("authoredState", newAuthoredState);
+exports.closeModal = closeModal;
+var getInteractiveList = function (options) {
+    return new Promise(function (resolve, reject) {
+        return (0, exports.getMode)()
+            .then(function (mode) {
+            if (mode === "authoring") {
+                var client = (0, client_1.getClient)();
+                var requestId = client.getNextRequestId();
+                var request = __assign({ requestId: requestId }, options);
+                client.addListener("interactiveList", resolve, requestId);
+                client.post("getInteractiveList", request);
+            }
+            else {
+                reject("getInteractiveList is only available in authoring mode");
+            }
+        });
+    });
 };
-exports.setAuthoredState = setAuthoredState;
-var getGlobalInteractiveState = function () {
-    return (0, client_1.getClient)().managedState.globalInteractiveState;
+exports.getInteractiveList = getInteractiveList;
+var setLinkedInteractives = function (options) {
+    (0, client_1.getClient)().post("setLinkedInteractives", options);
 };
-exports.getGlobalInteractiveState = getGlobalInteractiveState;
+exports.setLinkedInteractives = setLinkedInteractives;
+var getInteractiveSnapshot = function (options) {
+    return new Promise(function (resolve, reject) {
+        var listener = function (snapshotResponse) {
+            resolve(snapshotResponse);
+        };
+        var client = (0, client_1.getClient)();
+        var requestId = client.getNextRequestId();
+        var request = __assign({ requestId: requestId }, options);
+        client.addListener("interactiveSnapshot", listener, requestId);
+        client.post("getInteractiveSnapshot", request);
+    });
+};
+exports.getInteractiveSnapshot = getInteractiveSnapshot;
 /**
- * Note that state will become frozen and should never be mutated.
- * Each time you update state, make sure that a new object is passed.
- *
- * Good:
- * ```
- * setGlobalInteractiveState(Object.assign({}, previousState, {someProperty: "a new value"}));
- * // or
- * setGlobalInteractiveState({...previousState, someProperty: "a new value"});
- * ```
- *
- * Bad:
- * ```
- * previousState.someProperty = "a new value";
- * setGlobalInteractiveState(previousState);
- * ```
+ * @todo Implement this function.
  */
-var setGlobalInteractiveState = function (newGlobalState) {
-    var client = (0, client_1.getClient)();
-    client.managedState.globalInteractiveState = newGlobalState;
-    client.post("interactiveStateGlobal", newGlobalState);
-};
-exports.setGlobalInteractiveState = setGlobalInteractiveState;
-var addCustomMessageListener = function (callback, handles) {
-    var client = (0, client_1.getClient)();
-    if (handles) {
-        client.customMessagesHandled = handles;
-    }
-    client.addListener("customMessage", callback);
+var getLibraryInteractiveList = function (options) {
+    THROW_NOT_IMPLEMENTED_YET("getLibraryInteractiveList");
 };
-exports.addCustomMessageListener = addCustomMessageListener;
-var removeCustomMessageListener = function () {
-    return (0, client_1.getClient)().removeListener("customMessage");
+exports.getLibraryInteractiveList = getLibraryInteractiveList;
+var writeAttachment = function (params) {
+    return new Promise(function (resolve, reject) {
+        var client = (0, client_1.getClient)();
+        var content = params.content, _a = params.options, options = _a === void 0 ? {} : _a, others = __rest(params, ["content", "options"]);
+        var _b = params.contentType, contentType = _b === void 0 ? "text/plain" : _b;
+        var request = __assign(__assign({}, others), { operation: "write", requestId: client.getNextRequestId() });
+        client.addListener("attachmentUrl", function (response) { return __awaiter(void 0, void 0, void 0, function () {
+            var headers, _a, e_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!response.url) return [3 /*break*/, 5];
+                        headers = __assign({}, options.headers);
+                        headers["Content-Type"] = contentType;
+                        options.headers = headers;
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        // resolves with the fetch Response object, so clients can check status
+                        _a = resolve;
+                        return [4 /*yield*/, fetch(response.url, __assign(__assign({}, options), { method: "PUT", body: content }))];
+                    case 2:
+                        // resolves with the fetch Response object, so clients can check status
+                        _a.apply(void 0, [_b.sent()]);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _b.sent();
+                        reject(e_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [3 /*break*/, 6];
+                    case 5:
+                        reject(new Error(response.error || "error writing attachment"));
+                        _b.label = 6;
+                    case 6: return [2 /*return*/];
+                }
+            });
+        }); }, request.requestId);
+        client.post("getAttachmentUrl", request);
+    });
 };
-exports.removeCustomMessageListener = removeCustomMessageListener;
-var addDecorateContentListener = function (callback) {
-    (0, client_1.getClient)().addListener("decorateContent", function (msg) {
-        callback({
-            words: msg.words,
-            replace: msg.replace,
-            wordClass: msg.wordClass,
-            eventListeners: msg.listenerTypes.map(function (listener) {
-                return {
-                    type: listener.type,
-                    listener: function (evt) {
-                        var wordElement = evt.srcElement;
-                        if (!wordElement) {
-                            return;
-                        }
-                        var clickedWord = (wordElement.textContent || "").toLowerCase();
-                        (0, exports.postDecoratedContentEvent)({ type: listener.type,
-                            text: clickedWord,
-                            bounds: wordElement.getBoundingClientRect() });
-                    }
-                };
-            })
-        });
+exports.writeAttachment = writeAttachment;
+var readAttachment = function (params) {
+    return new Promise(function (resolve, reject) {
+        // set up response listener
+        var client = (0, client_1.getClient)();
+        var request = __assign(__assign({}, params), { operation: "read", requestId: client.getNextRequestId() });
+        client.addListener("attachmentUrl", function (response) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, e_2;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!response.url) return [3 /*break*/, 5];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        // resolves with the fetch Response object, so clients can check status
+                        // or convert to JSON or text or something else.
+                        _a = resolve;
+                        return [4 /*yield*/, fetch(response.url)];
+                    case 2:
+                        // resolves with the fetch Response object, so clients can check status
+                        // or convert to JSON or text or something else.
+                        _a.apply(void 0, [_b.sent()]);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_2 = _b.sent();
+                        reject(e_2);
+                        return [3 /*break*/, 4];
+                    case 4: return [3 /*break*/, 6];
+                    case 5:
+                        reject(new Error(response.error || "error reading attachment"));
+                        _b.label = 6;
+                    case 6: return [2 /*return*/];
+                }
+            });
+        }); }, request.requestId);
+        client.post("getAttachmentUrl", request);
     });
 };
-exports.addDecorateContentListener = addDecorateContentListener;
-var removeDecorateContentListener = function () {
-    (0, client_1.getClient)().removeListener("decorateContent");
+exports.readAttachment = readAttachment;
+var getAttachmentUrl = function (params) {
+    return new Promise(function (resolve, reject) {
+        // set up response listener
+        var client = (0, client_1.getClient)();
+        var requestId = client.getNextRequestId();
+        var request = __assign(__assign({}, params), { operation: "read", requestId: requestId });
+        client.addListener("attachmentUrl", function (response) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (response.url) {
+                    resolve(response.url);
+                }
+                else {
+                    reject(new Error(response.error || "error getting attachment url"));
+                }
+                return [2 /*return*/];
+            });
+        }); }, request.requestId);
+        client.post("getAttachmentUrl", request);
+    });
 };
-exports.removeDecorateContentListener = removeDecorateContentListener;
-// tslint:disable-next-line:max-line-length
-var addGetReportItemAnswerListener = function (callback) {
-    (0, client_1.getClient)().addListener("getReportItemAnswer", callback);
+exports.getAttachmentUrl = getAttachmentUrl;
+var sendReportItemAnswer = function (request) {
+    (0, client_1.getClient)().post("reportItemAnswer", request);
 };
-exports.addGetReportItemAnswerListener = addGetReportItemAnswerListener;
-var removeGetReportItemAnswerListener = function () {
-    (0, client_1.getClient)().removeListener("getReportItemAnswer");
+exports.sendReportItemAnswer = sendReportItemAnswer;
+var setOnUnload = function (onUnload) {
+    (0, client_1.getClient)().setOnUnload(onUnload);
 };
-exports.removeGetReportItemAnswerListener = removeGetReportItemAnswerListener;
-var notifyReportItemClientReady = function (metadata) {
-    (0, client_1.getClient)().post("reportItemClientReady", metadata);
+exports.setOnUnload = setOnUnload;
+var sendCustomMessage = function (customMessage) {
+    (0, client_1.getClient)().post("customMessage", customMessage);
 };
-exports.notifyReportItemClientReady = notifyReportItemClientReady;
-var setSupportedFeatures = function (features) {
-    var request = {
-        apiVersion: 1,
-        features: features
+exports.sendCustomMessage = sendCustomMessage;
+
+
+/***/ }),
+
+/***/ "./src/interactive-api-client/client.ts":
+/*!**********************************************!*\
+  !*** ./src/interactive-api-client/client.ts ***!
+  \**********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    (0, client_1.getClient)().setSupportedFeatures(request);
+    return __assign.apply(this, arguments);
 };
-exports.setSupportedFeatures = setSupportedFeatures;
-var setHeight = function (height) {
-    (0, client_1.getClient)().post("height", height);
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 };
-exports.setHeight = setHeight;
-var postDecoratedContentEvent = function (msg) {
-    (0, client_1.getClient)().post("decoratedContentEvent", msg);
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 };
-exports.postDecoratedContentEvent = postDecoratedContentEvent;
-/**
- * Providing empty string or null disables hint.
- */
-var setHint = function (hint) {
-    var request = { text: hint };
-    (0, client_1.getClient)().post("hint", request);
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-exports.setHint = setHint;
-var setNavigation = function (options) {
-    (0, client_1.getClient)().post("navigation", options);
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Client = exports.getClient = void 0;
+// iframe phone uses 1 listener per message type so we multiplex over 1 listener in this code
+// to allow callbacks to optionally be tied to a requestId.  This allows us to have multiple listeners
+// to the same message and auto-removing listeners when a requestId is given.
+var iframePhone = __webpack_require__(/*! iframe-phone */ "./src/interactive-api-client/node_modules/iframe-phone/main.js");
+var in_frame_1 = __webpack_require__(/*! ./in-frame */ "./src/interactive-api-client/in-frame.ts");
+var managed_state_1 = __webpack_require__(/*! ./managed-state */ "./src/interactive-api-client/managed-state.ts");
+var parseJSONIfString = function (data) {
+    // Note that we don't want to call JSON.parse for an empty string.
+    try {
+        return typeof data === "string" ? JSON.parse(data) : data;
+    }
+    catch (_a) {
+        // If JSON string is malformed, it's an empty string, or not a JSON at all, return the original value.
+        return data;
+    }
 };
-exports.setNavigation = setNavigation;
-var getAuthInfo = function () {
-    return new Promise(function (resolve, reject) {
-        var listener = function (authInfo) {
-            resolve(authInfo);
+var phoneInitialized = function () { return iframePhone.getIFrameEndpoint().getListenerNames().length > 0; };
+var clientInstance;
+var getClient = function () {
+    // !phoneInitialized() part isn't really necessary. But it's fine in web browser and it helps in testing environment.
+    // Tests can reset mock iframe phone and get new Client instance.
+    if (!clientInstance || !phoneInitialized()) {
+        clientInstance = new Client();
+    }
+    return clientInstance;
+};
+exports.getClient = getClient;
+/**
+ * This class is intended to provide basic helpers (like `post()` or `add/removeListener`), maintain client-specific
+ * state, and generally be as minimal as possible. Most of the client-specific helpers and logic can be implemented
+ * in api.ts or hooks.ts (or both so the client app has choice).
+ */
+var Client = /** @class */ (function () {
+    function Client() {
+        var _this = this;
+        this.phone = iframePhone.getIFrameEndpoint();
+        this.managedState = new managed_state_1.ManagedState();
+        this.listeners = {};
+        this.requestId = 1;
+        this.onUnload = undefined;
+        this.setSupportedFeatures = function (request) {
+            var newRequest = request;
+            if (_this.customMessagesHandled) {
+                var features = request.features, others = __rest(request, ["features"]);
+                features.customMessages = { handles: _this.customMessagesHandled };
+                newRequest = __assign({ features: features }, others);
+            }
+            _this.post("supportedFeatures", newRequest);
         };
-        var client = (0, client_1.getClient)();
-        var requestId = client.getNextRequestId();
-        var request = {
-            requestId: requestId
+        this.setOnUnload = function (onUnload) {
+            _this.onUnload = onUnload;
         };
-        client.addListener("authInfo", listener, requestId);
-        client.post("getAuthInfo", request);
-    });
-};
-exports.getAuthInfo = getAuthInfo;
-var getFirebaseJwt = function (firebaseApp) {
-    return new Promise(function (resolve, reject) {
-        (0, exports.getInitInteractiveMessage)().then(function (initMsg) {
-            var _a, _b;
-            if (((_b = (_a = initMsg === null || initMsg === void 0 ? void 0 : initMsg.hostFeatures) === null || _a === void 0 ? void 0 : _a.getFirebaseJwt) === null || _b === void 0 ? void 0 : _b.version) === "1.0.0") {
-                var listener = function (response) {
-                    if (response.response_type === "ERROR") {
-                        reject(response.message || "Error getting Firebase JWT");
+        if (!(0, in_frame_1.inIframe)()) {
+            // tslint:disable-next-line:no-console
+            console.warn("Interactive API is meant to be used in iframe");
+        }
+        if (phoneInitialized()) {
+            throw new Error("IframePhone has been initialized previously. Only one Client instance is allowed.");
+        }
+        this.connect();
+        // Warn users when they want to reload page before the data gets sent to LARA.
+        window.addEventListener("beforeunload", function (e) {
+            if (_this.managedState.interactiveStateDirty) {
+                // Browser will display different message anyway, but returnValue must be set.
+                e.returnValue = "State has not been saved. Are you sure you want to leave this page?";
+            }
+            return e;
+        });
+    }
+    Client.prototype.getNextRequestId = function () {
+        return this.requestId++;
+    };
+    Client.prototype.post = function (message, content) {
+        this.phone.post(message, content);
+    };
+    Client.prototype.addListener = function (message, callback, requestId) {
+        var _this = this;
+        if (this.phone) {
+            // add either a generic message listener (no requestId) or an auto-removing request listener
+            // note: we may have multiple listeners on the same generic message
+            this.listeners[message] = this.listeners[message] || [];
+            var noExistingListener = this.listeners[message].length === 0;
+            this.listeners[message].push({ requestId: requestId, callback: callback });
+            // iframe-phone only handles 1 listener per message so add the listener if we haven't already
+            if (noExistingListener) {
+                this.phone.addListener(message, function (content) {
+                    // strip requestId from the response so callbacks don't see it
+                    var contentRequestId = content ? content.requestId : undefined;
+                    if (content) {
+                        delete content.requestId;
                     }
-                    else if (response.token) {
-                        try {
-                            var claimsJson = atob(response.token.split(".")[1]);
-                            resolve({ token: response.token, claims: JSON.parse(claimsJson) });
-                        }
-                        catch (error) {
-                            reject("Unable to parse JWT Token");
+                    _this.listeners[message].forEach(function (listener) {
+                        // note: requestId can be undefined for listeners to Lara messages
+                        // that aren't responses to one-time requests
+                        if (listener.requestId === contentRequestId) {
+                            listener.callback(content);
                         }
+                    });
+                    // if a request id was returned by lara auto-remove it from the listeners as it is a
+                    // response to a one-time request
+                    if (contentRequestId) {
+                        _this.removeListener(message, contentRequestId);
                     }
-                    else {
-                        reject("Empty token");
-                    }
-                };
-                var client = (0, client_1.getClient)();
-                var requestId = client.getNextRequestId();
-                var request = {
-                    requestId: requestId,
-                    firebase_app: firebaseApp
-                };
-                client.addListener("firebaseJWT", listener, requestId);
-                client.post("getFirebaseJWT", request);
+                });
+            }
+            return true;
+        }
+        return false;
+    };
+    Client.prototype.removeListener = function (message, requestId, callback) {
+        if (this.listeners[message]) {
+            // When callback is provided, remove this particular callback.
+            // Otherwise try to use requestId.
+            if (callback) {
+                this.listeners[message] = this.listeners[message].filter(function (l) { return l.callback !== callback; });
             }
             else {
-                reject("getFirebaseJwt not supported by the host environment");
+                // note: requestId can be undefined when using it as a generic listener
+                this.listeners[message] = this.listeners[message].filter(function (l) { return l.requestId !== requestId; });
             }
-        });
-    });
-};
-exports.getFirebaseJwt = getFirebaseJwt;
-var log = function (action, data) {
-    (0, client_1.getClient)().post("log", { action: action, data: data });
-};
-exports.log = log;
-// tslint:disable-next-line:max-line-length
-var addInteractiveStateListener = function (listener) {
-    (0, client_1.getClient)().managedState.on("interactiveStateUpdated", listener);
-};
-exports.addInteractiveStateListener = addInteractiveStateListener;
-// tslint:disable-next-line:max-line-length
-var removeInteractiveStateListener = function (listener) {
-    (0, client_1.getClient)().managedState.off("interactiveStateUpdated", listener);
-};
-exports.removeInteractiveStateListener = removeInteractiveStateListener;
-var addAuthoredStateListener = function (listener) {
-    (0, client_1.getClient)().managedState.on("authoredStateUpdated", listener);
-};
-exports.addAuthoredStateListener = addAuthoredStateListener;
-var removeAuthoredStateListener = function (listener) {
-    (0, client_1.getClient)().managedState.off("authoredStateUpdated", listener);
-};
-exports.removeAuthoredStateListener = removeAuthoredStateListener;
-// tslint:disable-next-line:max-line-length
-var addGlobalInteractiveStateListener = function (listener) {
-    (0, client_1.getClient)().managedState.on("globalInteractiveStateUpdated", listener);
-};
-exports.addGlobalInteractiveStateListener = addGlobalInteractiveStateListener;
-// tslint:disable-next-line:max-line-length
-var removeGlobalInteractiveStateListener = function (listener) {
-    (0, client_1.getClient)().managedState.off("globalInteractiveStateUpdated", listener);
-};
-exports.removeGlobalInteractiveStateListener = removeGlobalInteractiveStateListener;
-// Mapping between external listener and internal listener, so it's possible to remove linkedInteractiveState listeners.
-var _linkedInteractiveStateListeners = new Map();
-/**
- * The listener should be called immediately after it is added with any state of the linked
- * interactive that the host currently knows about. This first call might not happen
- * synchronously it could be slightly delayed. And then the listener should be called again
- * whenever the state of the linked interactive changes.
- */
-var addLinkedInteractiveStateListener = function (listener, options) {
-    var client = (0, client_1.getClient)();
-    var listenerId = (0, uuid_1.v4)();
-    var internalListener = function (response) {
-        if (response.listenerId === listenerId) {
-            listener(response.interactiveState);
+            // if no more local listeners exist remove it from iframe-phone
+            if (this.listeners[message].length === 0) {
+                this.phone.removeListener(message);
+            }
+            return true;
         }
+        return false;
     };
-    client.addListener("linkedInteractiveState", internalListener);
-    // Initialize observing in the host environment.
-    var request = __assign(__assign({}, options), { listenerId: listenerId });
-    client.post("addLinkedInteractiveStateListener", request);
-    // Save wrappedInternalListener so it's possible to remove it later.
-    _linkedInteractiveStateListeners.set(listener, {
-        listenerId: request.listenerId,
-        internalListener: internalListener
-    });
-};
-exports.addLinkedInteractiveStateListener = addLinkedInteractiveStateListener;
-var removeLinkedInteractiveStateListener = function (listener) {
-    var client = (0, client_1.getClient)();
-    if (_linkedInteractiveStateListeners.has(listener)) {
-        var _a = _linkedInteractiveStateListeners.get(listener), internalListener = _a.internalListener, listenerId = _a.listenerId;
-        // Remove local message handler. Theoretically it's not necessary if host implementation is correct
-        // (no more messages with this listenerId should be sent), but just to keep things cleaner.
-        client.removeListener("linkedInteractiveState", undefined, internalListener);
-        // Stop observing in the host environment.
-        var request = { listenerId: listenerId };
-        client.post("removeLinkedInteractiveStateListener", request);
-        _linkedInteractiveStateListeners.delete(listener);
-    }
-};
-exports.removeLinkedInteractiveStateListener = removeLinkedInteractiveStateListener;
-/**
- * "lightbox" type is used for displaying images or generic iframes (e.g. help page, but NOT dynamic interactives).
- * "dialog" is used for showing dynamic interactives. It'll be initialized correctly by the host environment and
- * all the runtime features will be supported.
- */
-var showModal = function (options) {
-    // Opening modal usually means reloading interactive. It's necessary to make sure that the state is up to date
-    // before it happens.
-    (0, exports.flushStateUpdates)();
-    (0, client_1.getClient)().post("showModal", options);
-};
-exports.showModal = showModal;
-var closeModal = function (options) {
-    // Opening modal usually means reloading interactive. It's necessary to make sure that the state is up to date
-    // before it happens.
-    (0, exports.flushStateUpdates)();
-    (0, client_1.getClient)().post("closeModal", options);
-};
-exports.closeModal = closeModal;
-var getInteractiveList = function (options) {
-    return new Promise(function (resolve, reject) {
-        return (0, exports.getMode)()
-            .then(function (mode) {
-            if (mode === "authoring") {
-                var client = (0, client_1.getClient)();
-                var requestId = client.getNextRequestId();
-                var request = __assign({ requestId: requestId }, options);
-                client.addListener("interactiveList", resolve, requestId);
-                client.post("getInteractiveList", request);
+    Client.prototype.connect = function () {
+        var _this = this;
+        this.phone = iframePhone.getIFrameEndpoint();
+        this.addListener("initInteractive", function (newInitMessage) {
+            _this.managedState.initMessage = newInitMessage;
+            // parseJSONIfString is used below quite a few times, as LARA and report are not consistent about format.
+            // Sometimes they send string (report page), sometimes already parsed JSON (authoring, runtime).
+            if (newInitMessage.mode === "reportItem") {
+                _this.managedState.authoredState = {};
             }
             else {
-                reject("getInteractiveList is only available in authoring mode");
+                _this.managedState.authoredState = parseJSONIfString(newInitMessage.authoredState);
+            }
+            if (newInitMessage.mode === "runtime" || newInitMessage.mode === "report") {
+                _this.managedState.interactiveState = parseJSONIfString(newInitMessage.interactiveState);
+                // Don't consider initial state to be dirty, as user would see warnings while trying to leave page even
+                // without making any change.
+                _this.managedState.interactiveStateDirty = false;
+            }
+            if (newInitMessage.mode === "runtime") {
+                _this.managedState.globalInteractiveState = parseJSONIfString(newInitMessage.globalInteractiveState);
+            }
+        });
+        this.addListener("getInteractiveState", function (options) { return __awaiter(_this, void 0, void 0, function () {
+            var finalState;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!((options === null || options === void 0 ? void 0 : options.unloading) && this.onUnload)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.onUnload(options)];
+                    case 1:
+                        finalState = _a.sent();
+                        if (finalState) {
+                            this.managedState.interactiveState = finalState;
+                        }
+                        _a.label = 2;
+                    case 2:
+                        this.post("interactiveState", this.managedState.interactiveState);
+                        this.managedState.interactiveStateDirty = false;
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        this.addListener("loadInteractiveGlobal", function (globalState) {
+            _this.managedState.globalInteractiveState = parseJSONIfString(globalState);
+        });
+        this.phone.initialize();
+    };
+    return Client;
+}());
+exports.Client = Client;
+
+
+/***/ }),
+
+/***/ "./src/interactive-api-client/hooks.ts":
+/*!*********************************************!*\
+  !*** ./src/interactive-api-client/hooks.ts ***!
+  \*********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
             }
-        });
-    });
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 };
-exports.getInteractiveList = getInteractiveList;
-var setLinkedInteractives = function (options) {
-    (0, client_1.getClient)().post("setLinkedInteractives", options);
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAccessibility = exports.DefaultAccessibilitySettings = exports.useReportItem = exports.useAutoSetHeight = exports.useDecorateContent = exports.useCustomMessages = exports.useInitMessage = exports.useGlobalInteractiveState = exports.useAuthoredState = exports.useInteractiveState = void 0;
+var react_1 = __webpack_require__(/*! react */ "react");
+var resize_observer_polyfill_1 = __webpack_require__(/*! resize-observer-polyfill */ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js");
+var client = __webpack_require__(/*! ./api */ "./src/interactive-api-client/api.ts");
+var accessibility_1 = __webpack_require__(/*! ../shared/accessibility */ "./src/shared/accessibility.ts");
+var handleUpdate = function (newStateOrUpdateFunc, prevState) {
+    if (typeof newStateOrUpdateFunc === "function") {
+        return newStateOrUpdateFunc(prevState);
+    }
+    else {
+        return newStateOrUpdateFunc;
+    }
 };
-exports.setLinkedInteractives = setLinkedInteractives;
-var getInteractiveSnapshot = function (options) {
-    return new Promise(function (resolve, reject) {
-        var listener = function (snapshotResponse) {
-            resolve(snapshotResponse);
+var useInteractiveState = function () {
+    var _a = (0, react_1.useState)(null), interactiveState = _a[0], setInteractiveState = _a[1];
+    (0, react_1.useEffect)(function () {
+        setInteractiveState(client.getInteractiveState());
+        // Setup client event listeners. They will ensure that another instance of this hook (or anything else
+        // using client directly) makes changes to interactive state, this hook will receive these changes.
+        var handleStateUpdate = function (newState) {
+            setInteractiveState(newState);
         };
-        var client = (0, client_1.getClient)();
-        var requestId = client.getNextRequestId();
-        var request = __assign({ requestId: requestId }, options);
-        client.addListener("interactiveSnapshot", listener, requestId);
-        client.post("getInteractiveSnapshot", request);
-    });
+        client.addInteractiveStateListener(handleStateUpdate);
+        return function () {
+            client.removeInteractiveStateListener(handleStateUpdate);
+        };
+    }, []);
+    var handleSetInteractiveState = (0, react_1.useCallback)(function (stateOrUpdateFunc) {
+        // Use client-managed state, as it should be up to date. React-managed state might not be the most recent version.
+        var newState = handleUpdate(stateOrUpdateFunc, client.getInteractiveState());
+        setInteractiveState(newState);
+        client.setInteractiveState(newState);
+    }, []);
+    return { interactiveState: interactiveState, setInteractiveState: handleSetInteractiveState };
 };
-exports.getInteractiveSnapshot = getInteractiveSnapshot;
-/**
- * @todo Implement this function.
- */
-var getLibraryInteractiveList = function (options) {
-    THROW_NOT_IMPLEMENTED_YET("getLibraryInteractiveList");
+exports.useInteractiveState = useInteractiveState;
+var useAuthoredState = function () {
+    var _a = (0, react_1.useState)(null), authoredState = _a[0], setAuthoredState = _a[1];
+    (0, react_1.useEffect)(function () {
+        // Note that we need to update authoredState exactly in this moment, right before setting up event listeners.
+        // It can't be done above using initial useState value. There's a little delay between initial render and calling
+        // useEffect. If client's authoredState gets updated before the listener is added, this hook will have outdated
+        // value. It's not only a theoretical issue, it was actually happening in Safari:
+        // https://www.pivotaltracker.com/story/show/174154314
+        // initInteractive message that includes authoredAuthored message was received between initial render and calling
+        // client.addAuthoredStateListener, so the state update was lost.
+        setAuthoredState(client.getAuthoredState());
+        // Setup client event listeners. They will ensure that another instance of this hook (or anything else
+        // using client directly) makes changes to authored state, this hook will receive these changes.
+        var handleStateUpdate = function (newState) {
+            setAuthoredState(newState);
+        };
+        client.addAuthoredStateListener(handleStateUpdate);
+        return function () {
+            client.removeAuthoredStateListener(handleStateUpdate);
+        };
+    }, []);
+    var handleSetAuthoredState = (0, react_1.useCallback)(function (stateOrUpdateFunc) {
+        // Use client-managed state, as it should be up to date. React-managed state might not be the most recent version.
+        var newState = handleUpdate(stateOrUpdateFunc, client.getAuthoredState());
+        setAuthoredState(newState);
+        client.setAuthoredState(newState);
+    }, []);
+    return { authoredState: authoredState, setAuthoredState: handleSetAuthoredState };
 };
-exports.getLibraryInteractiveList = getLibraryInteractiveList;
-var writeAttachment = function (params) {
-    return new Promise(function (resolve, reject) {
-        var client = (0, client_1.getClient)();
-        var content = params.content, _a = params.options, options = _a === void 0 ? {} : _a, others = __rest(params, ["content", "options"]);
-        var _b = params.contentType, contentType = _b === void 0 ? "text/plain" : _b;
-        var request = __assign(__assign({}, others), { operation: "write", requestId: client.getNextRequestId() });
-        client.addListener("attachmentUrl", function (response) { return __awaiter(void 0, void 0, void 0, function () {
-            var headers, _a, e_1;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!response.url) return [3 /*break*/, 5];
-                        headers = __assign({}, options.headers);
-                        headers["Content-Type"] = contentType;
-                        options.headers = headers;
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        // resolves with the fetch Response object, so clients can check status
-                        _a = resolve;
-                        return [4 /*yield*/, fetch(response.url, __assign(__assign({}, options), { method: "PUT", body: content }))];
-                    case 2:
-                        // resolves with the fetch Response object, so clients can check status
-                        _a.apply(void 0, [_b.sent()]);
-                        return [3 /*break*/, 4];
-                    case 3:
-                        e_1 = _b.sent();
-                        reject(e_1);
-                        return [3 /*break*/, 4];
-                    case 4: return [3 /*break*/, 6];
-                    case 5:
-                        reject(new Error(response.error || "error writing attachment"));
-                        _b.label = 6;
-                    case 6: return [2 /*return*/];
-                }
-            });
-        }); }, request.requestId);
-        client.post("getAttachmentUrl", request);
-    });
+exports.useAuthoredState = useAuthoredState;
+var useGlobalInteractiveState = function () {
+    var _a = (0, react_1.useState)(null), globalInteractiveState = _a[0], setGlobalInteractiveState = _a[1];
+    (0, react_1.useEffect)(function () {
+        setGlobalInteractiveState(client.getGlobalInteractiveState());
+        // Setup client event listeners. They will ensure that another instance of this hook (or anything else
+        // using client directly) makes changes to global interactive state, this hook will receive these changes.
+        var handleStateUpdate = function (newState) {
+            setGlobalInteractiveState(newState);
+        };
+        client.addGlobalInteractiveStateListener(handleStateUpdate);
+        return function () {
+            client.removeGlobalInteractiveStateListener(handleStateUpdate);
+        };
+    }, []);
+    // tslint:disable-next-line:max-line-length
+    var handleSetGlobalInteractiveState = (0, react_1.useCallback)(function (stateOrUpdateFunc) {
+        // Use client-managed state, as it should be up to date. React-managed state might not be the most recent version.
+        var newState = handleUpdate(stateOrUpdateFunc, client.getGlobalInteractiveState());
+        setGlobalInteractiveState(newState);
+        client.setGlobalInteractiveState(newState);
+    }, []);
+    return { globalInteractiveState: globalInteractiveState, setGlobalInteractiveState: handleSetGlobalInteractiveState };
 };
-exports.writeAttachment = writeAttachment;
-var readAttachment = function (params) {
-    return new Promise(function (resolve, reject) {
-        // set up response listener
-        var client = (0, client_1.getClient)();
-        var request = __assign(__assign({}, params), { operation: "read", requestId: client.getNextRequestId() });
-        client.addListener("attachmentUrl", function (response) { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, e_2;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!response.url) return [3 /*break*/, 5];
-                        _b.label = 1;
+exports.useGlobalInteractiveState = useGlobalInteractiveState;
+// tslint:disable-next-line:max-line-length
+var useInitMessage = function () {
+    var _a = (0, react_1.useState)(null), initMessage = _a[0], setInitMessage = _a[1];
+    (0, react_1.useEffect)(function () {
+        // useEffect callback can't be async.
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var initMsg;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, client.getInitInteractiveMessage()];
                     case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        // resolves with the fetch Response object, so clients can check status
-                        // or convert to JSON or text or something else.
-                        _a = resolve;
-                        return [4 /*yield*/, fetch(response.url)];
-                    case 2:
-                        // resolves with the fetch Response object, so clients can check status
-                        // or convert to JSON or text or something else.
-                        _a.apply(void 0, [_b.sent()]);
-                        return [3 /*break*/, 4];
-                    case 3:
-                        e_2 = _b.sent();
-                        reject(e_2);
-                        return [3 /*break*/, 4];
-                    case 4: return [3 /*break*/, 6];
-                    case 5:
-                        reject(new Error(response.error || "error reading attachment"));
-                        _b.label = 6;
-                    case 6: return [2 /*return*/];
+                        initMsg = _a.sent();
+                        setInitMessage(initMsg);
+                        return [2 /*return*/];
                 }
             });
-        }); }, request.requestId);
-        client.post("getAttachmentUrl", request);
-    });
+        }); })();
+    }, []);
+    return initMessage;
 };
-exports.readAttachment = readAttachment;
-var getAttachmentUrl = function (params) {
-    return new Promise(function (resolve, reject) {
-        // set up response listener
-        var client = (0, client_1.getClient)();
-        var requestId = client.getNextRequestId();
-        var request = __assign(__assign({}, params), { operation: "read", requestId: requestId });
-        client.addListener("attachmentUrl", function (response) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                if (response.url) {
-                    resolve(response.url);
-                }
-                else {
-                    reject(new Error(response.error || "error getting attachment url"));
-                }
-                return [2 /*return*/];
-            });
-        }); }, request.requestId);
-        client.post("getAttachmentUrl", request);
-    });
+exports.useInitMessage = useInitMessage;
+var useCustomMessages = function (callback, handles) {
+    (0, react_1.useEffect)(function () {
+        client.addCustomMessageListener(callback, handles);
+        return function () { client.removeCustomMessageListener(); };
+    }, []);
+};
+exports.useCustomMessages = useCustomMessages;
+var useDecorateContent = function (callback) {
+    (0, react_1.useEffect)(function () {
+        client.addDecorateContentListener(callback);
+        return function () { return client.removeDecorateContentListener(); };
+    }, []);
+};
+exports.useDecorateContent = useDecorateContent;
+var useAutoSetHeight = function () {
+    var initMessage = (0, exports.useInitMessage)();
+    (0, react_1.useEffect)(function () {
+        if (initMessage) {
+            var body_1 = document.body;
+            var html_1 = document.documentElement;
+            var updateHeight_1 = function () {
+                var height = Math.max(body_1.scrollHeight, body_1.offsetHeight, html_1.clientHeight, html_1.scrollHeight, html_1.offsetHeight);
+                client.setHeight(height);
+            };
+            var observer_1 = new resize_observer_polyfill_1.default(function () { return updateHeight_1(); });
+            if (body_1) {
+                observer_1.observe(body_1);
+            }
+            return function () { return observer_1.disconnect(); };
+        }
+    }, [initMessage]);
 };
-exports.getAttachmentUrl = getAttachmentUrl;
-var sendReportItemAnswer = function (request) {
-    (0, client_1.getClient)().post("reportItemAnswer", request);
+exports.useAutoSetHeight = useAutoSetHeight;
+// tslint:disable-next-line:max-line-length
+var useReportItem = function (_a) {
+    var metadata = _a.metadata, handler = _a.handler;
+    (0, react_1.useEffect)(function () {
+        client.addGetReportItemAnswerListener(handler);
+        client.notifyReportItemClientReady(metadata);
+        return function () { return client.removeGetReportItemAnswerListener(); };
+    }, []);
 };
-exports.sendReportItemAnswer = sendReportItemAnswer;
-var setOnUnload = function (onUnload) {
-    (0, client_1.getClient)().setOnUnload(onUnload);
+exports.useReportItem = useReportItem;
+exports.DefaultAccessibilitySettings = {
+    fontSize: "normal",
+    fontSizeInPx: 16,
+    fontType: "normal",
+    fontFamilyForType: (0, accessibility_1.getFamilyForFontType)("normal"),
 };
-exports.setOnUnload = setOnUnload;
-var sendCustomMessage = function (customMessage) {
-    (0, client_1.getClient)().post("customMessage", customMessage);
+var useAccessibility = function (props) {
+    var _a = props || {}, updateHtmlFontSize = _a.updateHtmlFontSize, addBodyClass = _a.addBodyClass, fontFamilySelector = _a.fontFamilySelector;
+    var initMessage = (0, exports.useInitMessage)();
+    var _b = (0, react_1.useState)(exports.DefaultAccessibilitySettings), accessibility = _b[0], setAccessibility = _b[1];
+    // text may be optional while font type setting is rolled out from staging to production through AP
+    var normalizeClass = function (text) { return (text || "").toLowerCase().replace(/\s/, "-"); };
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (initMessage && initMessage.mode === "runtime") {
+            var _accessibility = initMessage.accessibility || exports.DefaultAccessibilitySettings;
+            var fontSize = _accessibility.fontSize, fontSizeInPx = _accessibility.fontSizeInPx, fontType = _accessibility.fontType, fontFamilyForType = _accessibility.fontFamilyForType;
+            setAccessibility(_accessibility);
+            if (updateHtmlFontSize || addBodyClass || fontFamilySelector) {
+                var html = document.getElementsByTagName("html").item(0);
+                var body = document.getElementsByTagName("body").item(0);
+                if (updateHtmlFontSize && html && fontSizeInPx) {
+                    html.style.fontSize = fontSizeInPx + "px";
+                }
+                if (addBodyClass && body) {
+                    body.classList.add("font-size-" + normalizeClass(fontSize));
+                    body.classList.add("font-type-" + normalizeClass(fontType));
+                }
+                if (fontFamilySelector && fontFamilyForType) {
+                    var style = document.createElement("style");
+                    document.head.appendChild(style);
+                    (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(fontFamilySelector + " { font-family: " + fontFamilyForType + "; }", 0);
+                }
+            }
+        }
+    }, [initMessage, updateHtmlFontSize, addBodyClass, fontFamilySelector]);
+    return accessibility;
 };
-exports.sendCustomMessage = sendCustomMessage;
+exports.useAccessibility = useAccessibility;
 
 
 /***/ }),
 
-/***/ "./src/interactive-api-client/client.ts":
-/*!**********************************************!*\
-  !*** ./src/interactive-api-client/client.ts ***!
-  \**********************************************/
+/***/ "./src/interactive-api-client/in-frame.ts":
+/*!************************************************!*\
+  !*** ./src/interactive-api-client/in-frame.ts ***!
+  \************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Client = exports.getClient = void 0;
-// iframe phone uses 1 listener per message type so we multiplex over 1 listener in this code
-// to allow callbacks to optionally be tied to a requestId.  This allows us to have multiple listeners
-// to the same message and auto-removing listeners when a requestId is given.
-var iframePhone = __webpack_require__(/*! iframe-phone */ "./node_modules/iframe-phone/main.js");
-var in_frame_1 = __webpack_require__(/*! ./in-frame */ "./src/interactive-api-client/in-frame.ts");
-var managed_state_1 = __webpack_require__(/*! ./managed-state */ "./src/interactive-api-client/managed-state.ts");
-var parseJSONIfString = function (data) {
-    // Note that we don't want to call JSON.parse for an empty string.
+exports.inIframe = void 0;
+var _inIframe = (function () {
     try {
-        return typeof data === "string" ? JSON.parse(data) : data;
-    }
-    catch (_a) {
-        // If JSON string is malformed, it's an empty string, or not a JSON at all, return the original value.
-        return data;
+        return window.self !== window.top;
     }
-};
-var phoneInitialized = function () { return iframePhone.getIFrameEndpoint().getListenerNames().length > 0; };
-var clientInstance;
-var getClient = function () {
-    // !phoneInitialized() part isn't really necessary. But it's fine in web browser and it helps in testing environment.
-    // Tests can reset mock iframe phone and get new Client instance.
-    if (!clientInstance || !phoneInitialized()) {
-        clientInstance = new Client();
+    catch (e) {
+        return true;
     }
-    return clientInstance;
+})();
+var inIframe = function () { return _inIframe; };
+exports.inIframe = inIframe;
+
+
+/***/ }),
+
+/***/ "./src/interactive-api-client/index.ts":
+/*!*********************************************!*\
+  !*** ./src/interactive-api-client/index.ts ***!
+  \*********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.getClient = getClient;
-/**
- * This class is intended to provide basic helpers (like `post()` or `add/removeListener`), maintain client-specific
- * state, and generally be as minimal as possible. Most of the client-specific helpers and logic can be implemented
- * in api.ts or hooks.ts (or both so the client app has choice).
- */
-var Client = /** @class */ (function () {
-    function Client() {
-        var _this = this;
-        this.phone = iframePhone.getIFrameEndpoint();
-        this.managedState = new managed_state_1.ManagedState();
-        this.listeners = {};
-        this.requestId = 1;
-        this.onUnload = undefined;
-        this.setSupportedFeatures = function (request) {
-            var newRequest = request;
-            if (_this.customMessagesHandled) {
-                var features = request.features, others = __rest(request, ["features"]);
-                features.customMessages = { handles: _this.customMessagesHandled };
-                newRequest = __assign({ features: features }, others);
-            }
-            _this.post("supportedFeatures", newRequest);
-        };
-        this.setOnUnload = function (onUnload) {
-            _this.onUnload = onUnload;
-        };
-        if (!(0, in_frame_1.inIframe)()) {
-            // tslint:disable-next-line:no-console
-            console.warn("Interactive API is meant to be used in iframe");
-        }
-        if (phoneInitialized()) {
-            throw new Error("IframePhone has been initialized previously. Only one Client instance is allowed.");
-        }
-        this.connect();
-        // Warn users when they want to reload page before the data gets sent to LARA.
-        window.addEventListener("beforeunload", function (e) {
-            if (_this.managedState.interactiveStateDirty) {
-                // Browser will display different message anyway, but returnValue must be set.
-                e.returnValue = "State has not been saved. Are you sure you want to leave this page?";
-            }
-            return e;
-        });
-    }
-    Client.prototype.getNextRequestId = function () {
-        return this.requestId++;
-    };
-    Client.prototype.post = function (message, content) {
-        this.phone.post(message, content);
-    };
-    Client.prototype.addListener = function (message, callback, requestId) {
-        var _this = this;
-        if (this.phone) {
-            // add either a generic message listener (no requestId) or an auto-removing request listener
-            // note: we may have multiple listeners on the same generic message
-            this.listeners[message] = this.listeners[message] || [];
-            var noExistingListener = this.listeners[message].length === 0;
-            this.listeners[message].push({ requestId: requestId, callback: callback });
-            // iframe-phone only handles 1 listener per message so add the listener if we haven't already
-            if (noExistingListener) {
-                this.phone.addListener(message, function (content) {
-                    // strip requestId from the response so callbacks don't see it
-                    var contentRequestId = content ? content.requestId : undefined;
-                    if (content) {
-                        delete content.requestId;
-                    }
-                    _this.listeners[message].forEach(function (listener) {
-                        // note: requestId can be undefined for listeners to Lara messages
-                        // that aren't responses to one-time requests
-                        if (listener.requestId === contentRequestId) {
-                            listener.callback(content);
-                        }
-                    });
-                    // if a request id was returned by lara auto-remove it from the listeners as it is a
-                    // response to a one-time request
-                    if (contentRequestId) {
-                        _this.removeListener(message, contentRequestId);
-                    }
-                });
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(__webpack_require__(/*! ./types */ "./src/interactive-api-client/types.ts"), exports);
+__exportStar(__webpack_require__(/*! ./metadata-types */ "./src/interactive-api-client/metadata-types.ts"), exports);
+__exportStar(__webpack_require__(/*! ./in-frame */ "./src/interactive-api-client/in-frame.ts"), exports);
+__exportStar(__webpack_require__(/*! ./api */ "./src/interactive-api-client/api.ts"), exports);
+__exportStar(__webpack_require__(/*! ./hooks */ "./src/interactive-api-client/hooks.ts"), exports);
+__exportStar(__webpack_require__(/*! ./client */ "./src/interactive-api-client/client.ts"), exports);
+
+
+/***/ }),
+
+/***/ "./src/interactive-api-client/managed-state.ts":
+/*!*****************************************************!*\
+  !*** ./src/interactive-api-client/managed-state.ts ***!
+  \*****************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManagedState = void 0;
+var eventemitter2_1 = __webpack_require__(/*! eventemitter2 */ "./node_modules/eventemitter2/lib/eventemitter2.js");
+var deepFreeze = __webpack_require__(/*! deep-freeze */ "./node_modules/deep-freeze/index.js");
+var ManagedState = /** @class */ (function () {
+    function ManagedState() {
+        this.interactiveStateDirty = false;
+        this._initMessage = null;
+        // State variables are kept separately from initMessage, as they might get updated. For client user convenience,
+        // this state is kept here and all the updates emit appropriate event.
+        this._interactiveState = null;
+        this._authoredState = null;
+        this._globalInteractiveState = null;
+        this.emitter = new eventemitter2_1.EventEmitter2({
+            maxListeners: Infinity
+        });
+    }
+    Object.defineProperty(ManagedState.prototype, "initMessage", {
+        get: function () {
+            return this._initMessage;
+        },
+        set: function (value) {
+            // null is an object too.
+            if (value !== null && typeof value === "object") {
+                value = deepFreeze(value);
             }
-            return true;
-        }
-        return false;
-    };
-    Client.prototype.removeListener = function (message, requestId, callback) {
-        if (this.listeners[message]) {
-            // When callback is provided, remove this particular callback.
-            // Otherwise try to use requestId.
-            if (callback) {
-                this.listeners[message] = this.listeners[message].filter(function (l) { return l.callback !== callback; });
+            this._initMessage = value;
+            this.emit("initInteractive", value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ManagedState.prototype, "interactiveState", {
+        get: function () {
+            return this._interactiveState;
+        },
+        set: function (value) {
+            // null is an object too.
+            if (value !== null && typeof value === "object") {
+                value = deepFreeze(value);
             }
-            else {
-                // note: requestId can be undefined when using it as a generic listener
-                this.listeners[message] = this.listeners[message].filter(function (l) { return l.requestId !== requestId; });
+            this._interactiveState = value;
+            this.emit("interactiveStateUpdated", value);
+            this.interactiveStateDirty = true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ManagedState.prototype, "authoredState", {
+        get: function () {
+            return this._authoredState;
+        },
+        set: function (value) {
+            // null is an object too.
+            if (value !== null && typeof value === "object") {
+                value = deepFreeze(value);
             }
-            // if no more local listeners exist remove it from iframe-phone
-            if (this.listeners[message].length === 0) {
-                this.phone.removeListener(message);
+            this._authoredState = value;
+            this.emit("authoredStateUpdated", value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ManagedState.prototype, "globalInteractiveState", {
+        get: function () {
+            return this._globalInteractiveState;
+        },
+        set: function (value) {
+            // null is an object too.
+            if (value !== null && typeof value === "object") {
+                value = deepFreeze(value);
             }
-            return true;
-        }
-        return false;
+            this._globalInteractiveState = value;
+            this.emit("globalInteractiveStateUpdated", value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ManagedState.prototype.emit = function (event, content) {
+        this.emitter.emit(event, content);
     };
-    Client.prototype.connect = function () {
-        var _this = this;
-        this.phone = iframePhone.getIFrameEndpoint();
-        this.addListener("initInteractive", function (newInitMessage) {
-            _this.managedState.initMessage = newInitMessage;
-            // parseJSONIfString is used below quite a few times, as LARA and report are not consistent about format.
-            // Sometimes they send string (report page), sometimes already parsed JSON (authoring, runtime).
-            if (newInitMessage.mode === "reportItem") {
-                _this.managedState.authoredState = {};
-            }
-            else {
-                _this.managedState.authoredState = parseJSONIfString(newInitMessage.authoredState);
-            }
-            if (newInitMessage.mode === "runtime" || newInitMessage.mode === "report") {
-                _this.managedState.interactiveState = parseJSONIfString(newInitMessage.interactiveState);
-                // Don't consider initial state to be dirty, as user would see warnings while trying to leave page even
-                // without making any change.
-                _this.managedState.interactiveStateDirty = false;
-            }
-            if (newInitMessage.mode === "runtime") {
-                _this.managedState.globalInteractiveState = parseJSONIfString(newInitMessage.globalInteractiveState);
-            }
-        });
-        this.addListener("getInteractiveState", function (options) { return __awaiter(_this, void 0, void 0, function () {
-            var finalState;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!((options === null || options === void 0 ? void 0 : options.unloading) && this.onUnload)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.onUnload(options)];
-                    case 1:
-                        finalState = _a.sent();
-                        if (finalState) {
-                            this.managedState.interactiveState = finalState;
-                        }
-                        _a.label = 2;
-                    case 2:
-                        this.post("interactiveState", this.managedState.interactiveState);
-                        this.managedState.interactiveStateDirty = false;
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        this.addListener("loadInteractiveGlobal", function (globalState) {
-            _this.managedState.globalInteractiveState = parseJSONIfString(globalState);
-        });
-        this.phone.initialize();
+    ManagedState.prototype.on = function (event, handler) {
+        this.emitter.on(event, handler);
     };
-    return Client;
+    ManagedState.prototype.off = function (event, handler) {
+        this.emitter.off(event, handler);
+    };
+    ManagedState.prototype.once = function (event, handler) {
+        this.emitter.once(event, handler);
+    };
+    return ManagedState;
 }());
-exports.Client = Client;
+exports.ManagedState = ManagedState;
+
+
+/***/ }),
+
+/***/ "./src/interactive-api-client/metadata-types.ts":
+/*!******************************************************!*\
+  !*** ./src/interactive-api-client/metadata-types.ts ***!
+  \******************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+// Each time these interfaces are updated, it might be necessary to also update base_interactive.rb
+// and interactive_run_state.rb files that process this data passed from interactives and send
+// to report service and portal.
+Object.defineProperty(exports, "__esModule", { value: true });
+
+
+/***/ }),
+
+/***/ "./src/interactive-api-client/node_modules/iframe-phone/lib/iframe-endpoint.js":
+/*!*************************************************************************************!*\
+  !*** ./src/interactive-api-client/node_modules/iframe-phone/lib/iframe-endpoint.js ***!
+  \*************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var structuredClone = __webpack_require__(/*! ./structured-clone */ "./src/interactive-api-client/node_modules/iframe-phone/lib/structured-clone.js");
+var HELLO_INTERVAL_LENGTH = 200;
+var HELLO_TIMEOUT_LENGTH = 60000;
+
+function IFrameEndpoint() {
+  var listeners = {};
+  var isInitialized = false;
+  var connected = false;
+  var postMessageQueue = [];
+  var helloInterval;
+
+  function postToParent(message) {
+    // See http://dev.opera.com/articles/view/window-postmessage-messagechannel/#crossdoc
+    //     https://github.com/Modernizr/Modernizr/issues/388
+    //     http://jsfiddle.net/ryanseddon/uZTgD/2/
+    if (structuredClone.supported()) {
+      window.parent.postMessage(message, '*');
+    } else {
+      window.parent.postMessage(JSON.stringify(message), '*');
+    }
+  }
+
+  function post(type, content) {
+    var message;
+    // Message object can be constructed from 'type' and 'content' arguments or it can be passed
+    // as the first argument.
+    if (arguments.length === 1 && typeof type === 'object' && typeof type.type === 'string') {
+      message = type;
+    } else {
+      message = {
+        type: type,
+        content: content
+      };
+    }
+    if (connected) {
+      postToParent(message);
+    } else {
+      postMessageQueue.push(message);
+    }
+  }
+
+  function postHello() {
+    postToParent({
+      type: 'hello'
+    });
+  }
+
+  function addListener(type, fn) {
+    listeners[type] = fn;
+  }
+
+  function removeListener(type) {
+    delete listeners[type];
+  }
+
+  function removeAllListeners() {
+    listeners = {};
+  }
+
+  function getListenerNames() {
+    return Object.keys(listeners);
+  }
 
+  function messageListener(message) {
+    // Anyone can send us a message. Only pay attention to messages from parent.
+    if (message.source !== window.parent) return;
+    var messageData = message.data;
+    if (typeof messageData === 'string') messageData = JSON.parse(messageData);
 
-/***/ }),
+    if (!connected && messageData.type === 'hello') {
+      connected = true;
+      stopPostingHello();
+      while (postMessageQueue.length > 0) {
+        post(postMessageQueue.shift());
+      }
+    }
 
-/***/ "./src/interactive-api-client/hooks.ts":
-/*!*********************************************!*\
-  !*** ./src/interactive-api-client/hooks.ts ***!
-  \*********************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+    if (connected && listeners[messageData.type]) {
+      listeners[messageData.type](messageData.content);
+    }
+  }
 
-"use strict";
+  function disconnect() {
+    connected = false;
+    stopPostingHello();
+    removeAllListeners();
+    window.removeEventListener('message', messageListener);
+  }
 
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAccessibility = exports.DefaultAccessibilitySettings = exports.useReportItem = exports.useAutoSetHeight = exports.useDecorateContent = exports.useCustomMessages = exports.useInitMessage = exports.useGlobalInteractiveState = exports.useAuthoredState = exports.useInteractiveState = void 0;
-var react_1 = __webpack_require__(/*! react */ "react");
-var resize_observer_polyfill_1 = __webpack_require__(/*! resize-observer-polyfill */ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js");
-var client = __webpack_require__(/*! ./api */ "./src/interactive-api-client/api.ts");
-var accessibility_1 = __webpack_require__(/*! ../shared/accessibility */ "./src/shared/accessibility.ts");
-var handleUpdate = function (newStateOrUpdateFunc, prevState) {
-    if (typeof newStateOrUpdateFunc === "function") {
-        return newStateOrUpdateFunc(prevState);
+  /**
+    Initialize communication with the parent frame. This should not be called until the app's custom
+    listeners are registered (via our 'addListener' public method) because, once we open the
+    communication, the parent window may send any messages it may have queued. Messages for which
+    we don't have handlers will be silently ignored.
+  */
+  function initialize() {
+    if (isInitialized) {
+      return;
     }
-    else {
-        return newStateOrUpdateFunc;
+    isInitialized = true;
+    if (window.parent === window) return;
+
+    // We kick off communication with the parent window by sending a "hello" message. Then we wait
+    // for a handshake (another "hello" message) from the parent window.
+    startPostingHello();
+    window.addEventListener('message', messageListener, false);
+  }
+
+  function startPostingHello() {
+    if (helloInterval) {
+      stopPostingHello();
     }
+    helloInterval = window.setInterval(postHello, HELLO_INTERVAL_LENGTH);
+    window.setTimeout(stopPostingHello, HELLO_TIMEOUT_LENGTH);
+    // Post the first msg immediately.
+    postHello();
+  }
+
+  function stopPostingHello() {
+    window.clearInterval(helloInterval);
+    helloInterval = null;
+  }
+
+  // Public API.
+  return {
+    initialize: initialize,
+    getListenerNames: getListenerNames,
+    addListener: addListener,
+    removeListener: removeListener,
+    removeAllListeners: removeAllListeners,
+    disconnect: disconnect,
+    post: post
+  };
+}
+
+var instance = null;
+
+// IFrameEndpoint is a singleton, as iframe can't have multiple parents anyway.
+module.exports = function getIFrameEndpoint() {
+  if (!instance) {
+    instance = new IFrameEndpoint();
+  }
+  return instance;
 };
-var useInteractiveState = function () {
-    var _a = (0, react_1.useState)(null), interactiveState = _a[0], setInteractiveState = _a[1];
-    (0, react_1.useEffect)(function () {
-        setInteractiveState(client.getInteractiveState());
-        // Setup client event listeners. They will ensure that another instance of this hook (or anything else
-        // using client directly) makes changes to interactive state, this hook will receive these changes.
-        var handleStateUpdate = function (newState) {
-            setInteractiveState(newState);
-        };
-        client.addInteractiveStateListener(handleStateUpdate);
-        return function () {
-            client.removeInteractiveStateListener(handleStateUpdate);
-        };
-    }, []);
-    var handleSetInteractiveState = (0, react_1.useCallback)(function (stateOrUpdateFunc) {
-        // Use client-managed state, as it should be up to date. React-managed state might not be the most recent version.
-        var newState = handleUpdate(stateOrUpdateFunc, client.getInteractiveState());
-        setInteractiveState(newState);
-        client.setInteractiveState(newState);
-    }, []);
-    return { interactiveState: interactiveState, setInteractiveState: handleSetInteractiveState };
-};
-exports.useInteractiveState = useInteractiveState;
-var useAuthoredState = function () {
-    var _a = (0, react_1.useState)(null), authoredState = _a[0], setAuthoredState = _a[1];
-    (0, react_1.useEffect)(function () {
-        // Note that we need to update authoredState exactly in this moment, right before setting up event listeners.
-        // It can't be done above using initial useState value. There's a little delay between initial render and calling
-        // useEffect. If client's authoredState gets updated before the listener is added, this hook will have outdated
-        // value. It's not only a theoretical issue, it was actually happening in Safari:
-        // https://www.pivotaltracker.com/story/show/174154314
-        // initInteractive message that includes authoredAuthored message was received between initial render and calling
-        // client.addAuthoredStateListener, so the state update was lost.
-        setAuthoredState(client.getAuthoredState());
-        // Setup client event listeners. They will ensure that another instance of this hook (or anything else
-        // using client directly) makes changes to authored state, this hook will receive these changes.
-        var handleStateUpdate = function (newState) {
-            setAuthoredState(newState);
-        };
-        client.addAuthoredStateListener(handleStateUpdate);
-        return function () {
-            client.removeAuthoredStateListener(handleStateUpdate);
-        };
-    }, []);
-    var handleSetAuthoredState = (0, react_1.useCallback)(function (stateOrUpdateFunc) {
-        // Use client-managed state, as it should be up to date. React-managed state might not be the most recent version.
-        var newState = handleUpdate(stateOrUpdateFunc, client.getAuthoredState());
-        setAuthoredState(newState);
-        client.setAuthoredState(newState);
-    }, []);
-    return { authoredState: authoredState, setAuthoredState: handleSetAuthoredState };
-};
-exports.useAuthoredState = useAuthoredState;
-var useGlobalInteractiveState = function () {
-    var _a = (0, react_1.useState)(null), globalInteractiveState = _a[0], setGlobalInteractiveState = _a[1];
-    (0, react_1.useEffect)(function () {
-        setGlobalInteractiveState(client.getGlobalInteractiveState());
-        // Setup client event listeners. They will ensure that another instance of this hook (or anything else
-        // using client directly) makes changes to global interactive state, this hook will receive these changes.
-        var handleStateUpdate = function (newState) {
-            setGlobalInteractiveState(newState);
-        };
-        client.addGlobalInteractiveStateListener(handleStateUpdate);
-        return function () {
-            client.removeGlobalInteractiveStateListener(handleStateUpdate);
-        };
-    }, []);
-    // tslint:disable-next-line:max-line-length
-    var handleSetGlobalInteractiveState = (0, react_1.useCallback)(function (stateOrUpdateFunc) {
-        // Use client-managed state, as it should be up to date. React-managed state might not be the most recent version.
-        var newState = handleUpdate(stateOrUpdateFunc, client.getGlobalInteractiveState());
-        setGlobalInteractiveState(newState);
-        client.setGlobalInteractiveState(newState);
-    }, []);
-    return { globalInteractiveState: globalInteractiveState, setGlobalInteractiveState: handleSetGlobalInteractiveState };
-};
-exports.useGlobalInteractiveState = useGlobalInteractiveState;
-// tslint:disable-next-line:max-line-length
-var useInitMessage = function () {
-    var _a = (0, react_1.useState)(null), initMessage = _a[0], setInitMessage = _a[1];
-    (0, react_1.useEffect)(function () {
-        // useEffect callback can't be async.
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var initMsg;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, client.getInitInteractiveMessage()];
-                    case 1:
-                        initMsg = _a.sent();
-                        setInitMessage(initMsg);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, []);
-    return initMessage;
-};
-exports.useInitMessage = useInitMessage;
-var useCustomMessages = function (callback, handles) {
-    (0, react_1.useEffect)(function () {
-        client.addCustomMessageListener(callback, handles);
-        return function () { client.removeCustomMessageListener(); };
-    }, []);
-};
-exports.useCustomMessages = useCustomMessages;
-var useDecorateContent = function (callback) {
-    (0, react_1.useEffect)(function () {
-        client.addDecorateContentListener(callback);
-        return function () { return client.removeDecorateContentListener(); };
-    }, []);
-};
-exports.useDecorateContent = useDecorateContent;
-var useAutoSetHeight = function () {
-    var initMessage = (0, exports.useInitMessage)();
-    (0, react_1.useEffect)(function () {
-        if (initMessage) {
-            var body_1 = document.body;
-            var html_1 = document.documentElement;
-            var updateHeight_1 = function () {
-                var height = Math.max(body_1.scrollHeight, body_1.offsetHeight, html_1.clientHeight, html_1.scrollHeight, html_1.offsetHeight);
-                client.setHeight(height);
-            };
-            var observer_1 = new resize_observer_polyfill_1.default(function () { return updateHeight_1(); });
-            if (body_1) {
-                observer_1.observe(body_1);
-            }
-            return function () { return observer_1.disconnect(); };
-        }
-    }, [initMessage]);
-};
-exports.useAutoSetHeight = useAutoSetHeight;
-// tslint:disable-next-line:max-line-length
-var useReportItem = function (_a) {
-    var metadata = _a.metadata, handler = _a.handler;
-    (0, react_1.useEffect)(function () {
-        client.addGetReportItemAnswerListener(handler);
-        client.notifyReportItemClientReady(metadata);
-        return function () { return client.removeGetReportItemAnswerListener(); };
-    }, []);
-};
-exports.useReportItem = useReportItem;
-exports.DefaultAccessibilitySettings = {
-    fontSize: "normal",
-    fontSizeInPx: 16,
-    fontType: "normal",
-    fontFamilyForType: (0, accessibility_1.getFamilyForFontType)("normal"),
-};
-var useAccessibility = function (props) {
-    var _a = props || {}, updateHtmlFontSize = _a.updateHtmlFontSize, addBodyClass = _a.addBodyClass, fontFamilySelector = _a.fontFamilySelector;
-    var initMessage = (0, exports.useInitMessage)();
-    var _b = (0, react_1.useState)(exports.DefaultAccessibilitySettings), accessibility = _b[0], setAccessibility = _b[1];
-    // text may be optional while font type setting is rolled out from staging to production through AP
-    var normalizeClass = function (text) { return (text || "").toLowerCase().replace(/\s/, "-"); };
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (initMessage && initMessage.mode === "runtime") {
-            var _accessibility = initMessage.accessibility || exports.DefaultAccessibilitySettings;
-            var fontSize = _accessibility.fontSize, fontSizeInPx = _accessibility.fontSizeInPx, fontType = _accessibility.fontType, fontFamilyForType = _accessibility.fontFamilyForType;
-            setAccessibility(_accessibility);
-            if (updateHtmlFontSize || addBodyClass || fontFamilySelector) {
-                var html = document.getElementsByTagName("html").item(0);
-                var body = document.getElementsByTagName("body").item(0);
-                if (updateHtmlFontSize && html && fontSizeInPx) {
-                    html.style.fontSize = fontSizeInPx + "px";
-                }
-                if (addBodyClass && body) {
-                    body.classList.add("font-size-" + normalizeClass(fontSize));
-                    body.classList.add("font-type-" + normalizeClass(fontType));
-                }
-                if (fontFamilySelector && fontFamilyForType) {
-                    var style = document.createElement("style");
-                    document.head.appendChild(style);
-                    (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(fontFamilySelector + " { font-family: " + fontFamilyForType + "; }", 0);
-                }
-            }
+
+
+/***/ }),
+
+/***/ "./src/interactive-api-client/node_modules/iframe-phone/lib/iframe-phone-rpc-endpoint.js":
+/*!***********************************************************************************************!*\
+  !*** ./src/interactive-api-client/node_modules/iframe-phone/lib/iframe-phone-rpc-endpoint.js ***!
+  \***********************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var ParentEndpoint = __webpack_require__(/*! ./parent-endpoint */ "./src/interactive-api-client/node_modules/iframe-phone/lib/parent-endpoint.js");
+var getIFrameEndpoint = __webpack_require__(/*! ./iframe-endpoint */ "./src/interactive-api-client/node_modules/iframe-phone/lib/iframe-endpoint.js");
+
+// Not a real UUID as there's an RFC for that (needed for proper distributed computing).
+// But in this fairly parochial situation, we just need to be fairly sure to avoid repeats.
+function getPseudoUUID() {
+  var chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  var len = chars.length;
+  var ret = [];
+
+  for (var i = 0; i < 10; i++) {
+    ret.push(chars[Math.floor(Math.random() * len)]);
+  }
+  return ret.join('');
+}
+
+module.exports = function IframePhoneRpcEndpoint(handler, namespace, targetWindow, targetOrigin, phone) {
+  var pendingCallbacks = Object.create({});
+
+  // if it's a non-null object, rather than a function, 'handler' is really an options object
+  if (handler && typeof handler === 'object') {
+    namespace = handler.namespace;
+    targetWindow = handler.targetWindow;
+    targetOrigin = handler.targetOrigin;
+    phone = handler.phone;
+    handler = handler.handler;
+  }
+
+  if (!phone) {
+    if (targetWindow === window.parent) {
+      phone = getIFrameEndpoint();
+      phone.initialize();
+    } else {
+      phone = new ParentEndpoint(targetWindow, targetOrigin);
+    }
+  }
+
+  phone.addListener(namespace, function (message) {
+    var callbackObj;
+
+    if (message.messageType === 'call' && typeof this.handler === 'function') {
+      this.handler.call(undefined, message.value, function (returnValue) {
+        phone.post(namespace, {
+          messageType: 'returnValue',
+          uuid: message.uuid,
+          value: returnValue
+        });
+      });
+    } else if (message.messageType === 'returnValue') {
+      callbackObj = pendingCallbacks[message.uuid];
+
+      if (callbackObj) {
+        window.clearTimeout(callbackObj.timeout);
+        if (callbackObj.callback) {
+          callbackObj.callback.call(undefined, message.value);
         }
-    }, [initMessage, updateHtmlFontSize, addBodyClass, fontFamilySelector]);
-    return accessibility;
+        pendingCallbacks[message.uuid] = null;
+      }
+    }
+  }.bind(this));
+
+  function call(message, callback) {
+    var uuid = getPseudoUUID();
+
+    pendingCallbacks[uuid] = {
+      callback: callback,
+      timeout: window.setTimeout(function () {
+        if (callback) {
+          callback(undefined, new Error("IframePhone timed out waiting for reply"));
+        }
+      }, 2000)
+    };
+
+    phone.post(namespace, {
+      messageType: 'call',
+      uuid: uuid,
+      value: message
+    });
+  }
+
+  function disconnect() {
+    phone.disconnect();
+  }
+
+  this.handler = handler;
+  this.call = call.bind(this);
+  this.disconnect = disconnect.bind(this);
 };
-exports.useAccessibility = useAccessibility;
 
 
-/***/ }),
+/***/ }),
+
+/***/ "./src/interactive-api-client/node_modules/iframe-phone/lib/parent-endpoint.js":
+/*!*************************************************************************************!*\
+  !*** ./src/interactive-api-client/node_modules/iframe-phone/lib/parent-endpoint.js ***!
+  \*************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var structuredClone = __webpack_require__(/*! ./structured-clone */ "./src/interactive-api-client/node_modules/iframe-phone/lib/structured-clone.js");
+
+/**
+  Call as:
+    new ParentEndpoint(targetWindow, targetOrigin, afterConnectedCallback)
+      targetWindow is a WindowProxy object. (Messages will be sent to it)
+
+      targetOrigin is the origin of the targetWindow. (Messages will be restricted to this origin)
+
+      afterConnectedCallback is an optional callback function to be called when the connection is
+        established.
+
+  OR (less secure):
+    new ParentEndpoint(targetIframe, afterConnectedCallback)
+
+      targetIframe is a DOM object (HTMLIframeElement); messages will be sent to its contentWindow.
+
+      afterConnectedCallback is an optional callback function
+
+    In this latter case, targetOrigin will be inferred from the value of the src attribute of the
+    provided DOM object at the time of the constructor invocation. This is less secure because the
+    iframe might have been navigated to an unexpected domain before constructor invocation.
+
+  Note that it is important to specify the expected origin of the iframe's content to safeguard
+  against sending messages to an unexpected domain. This might happen if our iframe is navigated to
+  a third-party URL unexpectedly. Furthermore, having a reference to Window object (as in the first
+  form of the constructor) does not protect against sending a message to the wrong domain. The
+  window object is actualy a WindowProxy which transparently proxies the Window object of the
+  underlying iframe, so that when the iframe is navigated, the "same" WindowProxy now references a
+  completely differeent Window object, possibly controlled by a hostile domain.
+
+  See http://www.esdiscuss.org/topic/a-dom-use-case-that-can-t-be-emulated-with-direct-proxies for
+  more about this weird behavior of WindowProxies (the type returned by <iframe>.contentWindow).
+*/
+
+module.exports = function ParentEndpoint(targetWindowOrIframeEl, targetOrigin, afterConnectedCallback) {
+  var postMessageQueue = [];
+  var connected = false;
+  var handlers = {};
+  var targetWindowIsIframeElement;
+
+  function getIframeOrigin(iframe) {
+    return iframe.src.match(/(.*?\/\/.*?)\//)[1];
+  }
+
+  function post(type, content) {
+    var message;
+    // Message object can be constructed from 'type' and 'content' arguments or it can be passed
+    // as the first argument.
+    if (arguments.length === 1 && typeof type === 'object' && typeof type.type === 'string') {
+      message = type;
+    } else {
+      message = {
+        type: type,
+        content: content
+      };
+    }
+    if (connected) {
+      var tWindow = getTargetWindow();
+      // if we are laready connected ... send the message
+      // See http://dev.opera.com/articles/view/window-postmessage-messagechannel/#crossdoc
+      //     https://github.com/Modernizr/Modernizr/issues/388
+      //     http://jsfiddle.net/ryanseddon/uZTgD/2/
+      if (structuredClone.supported()) {
+        tWindow.postMessage(message, targetOrigin);
+      } else {
+        tWindow.postMessage(JSON.stringify(message), targetOrigin);
+      }
+    } else {
+      // else queue up the messages to send after connection complete.
+      postMessageQueue.push(message);
+    }
+  }
+
+  function addListener(messageName, func) {
+    handlers[messageName] = func;
+  }
+
+  function removeListener(messageName) {
+    delete handlers[messageName];
+  }
+
+  function removeAllListeners() {
+    handlers = {};
+  }
+
+  // Note that this function can't be used when IFrame element hasn't been added to DOM yet
+  // (.contentWindow would be null). At the moment risk is purely theoretical, as the parent endpoint
+  // only listens for an incoming 'hello' message and the first time we call this function
+  // is in #receiveMessage handler (so iframe had to be initialized before, as it could send 'hello').
+  // It would become important when we decide to refactor the way how communication is initialized.
+  function getTargetWindow() {
+    if (targetWindowIsIframeElement) {
+      var tWindow = targetWindowOrIframeEl.contentWindow;
+      if (!tWindow) {
+        throw "IFrame element needs to be added to DOM before communication " +
+              "can be started (.contentWindow is not available)";
+      }
+      return tWindow;
+    }
+    return targetWindowOrIframeEl;
+  }
+
+  function receiveMessage(message) {
+    var messageData;
+    if (message.source === getTargetWindow() && (targetOrigin === '*' || message.origin === targetOrigin)) {
+      messageData = message.data;
+      if (typeof messageData === 'string') {
+        messageData = JSON.parse(messageData);
+      }
+      if (handlers[messageData.type]) {
+        handlers[messageData.type](messageData.content);
+      } else {
+        console.log("cant handle type: " + messageData.type);
+      }
+    }
+  }
+
+  function disconnect() {
+    connected = false;
+    removeAllListeners();
+    window.removeEventListener('message', receiveMessage);
+  }
+
+  // handle the case that targetWindowOrIframeEl is actually an <iframe> rather than a Window(Proxy) object
+  // Note that if it *is* a WindowProxy, this probe will throw a SecurityException, but in that case
+  // we also don't need to do anything
+  try {
+    targetWindowIsIframeElement = targetWindowOrIframeEl.constructor === HTMLIFrameElement;
+  } catch (e) {
+    targetWindowIsIframeElement = false;
+  }
 
-/***/ "./src/interactive-api-client/in-frame.ts":
-/*!************************************************!*\
-  !*** ./src/interactive-api-client/in-frame.ts ***!
-  \************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+  if (targetWindowIsIframeElement) {
+    // Infer the origin ONLY if the user did not supply an explicit origin, i.e., if the second
+    // argument is empty or is actually a callback (meaning it is supposed to be the
+    // afterConnectionCallback)
+    if (!targetOrigin || targetOrigin.constructor === Function) {
+      afterConnectedCallback = targetOrigin;
+      targetOrigin = getIframeOrigin(targetWindowOrIframeEl);
+    }
+  }
 
-"use strict";
+  // Handle pages served through file:// protocol. Behaviour varies in different browsers. Safari sets origin
+  // to 'file://' and everything works fine, but Chrome and Safari set message.origin to null.
+  // Also, https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage says:
+  //  > Lastly, posting a message to a page at a file: URL currently requires that the targetOrigin argument be "*".
+  //  > file:// cannot be used as a security restriction; this restriction may be modified in the future.
+  // So, using '*' seems like the only possible solution.
+  if (targetOrigin === 'file://') {
+    targetOrigin = '*';
+  }
 
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inIframe = void 0;
-var _inIframe = (function () {
-    try {
-        return window.self !== window.top;
-    }
-    catch (e) {
-        return true;
-    }
-})();
-var inIframe = function () { return _inIframe; };
-exports.inIframe = inIframe;
+  // when we receive 'hello':
+  addListener('hello', function () {
+    connected = true;
 
+    // send hello response
+    post({
+      type: 'hello',
+      // `origin` property isn't used by IframeEndpoint anymore (>= 1.2.0), but it's being sent to be
+      // backward compatible with old IframeEndpoint versions (< v1.2.0).
+      origin: window.location.href.match(/(.*?\/\/.*?)\//)[1]
+    });
 
-/***/ }),
+    // give the user a chance to do things now that we are connected
+    // note that is will happen before any queued messages
+    if (afterConnectedCallback && typeof afterConnectedCallback === "function") {
+      afterConnectedCallback();
+    }
 
-/***/ "./src/interactive-api-client/index.ts":
-/*!*********************************************!*\
-  !*** ./src/interactive-api-client/index.ts ***!
-  \*********************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+    // Now send any messages that have been queued up ...
+    while (postMessageQueue.length > 0) {
+      post(postMessageQueue.shift());
+    }
+  });
 
-"use strict";
+  window.addEventListener('message', receiveMessage, false);
 
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  // Public API.
+  return {
+    post: post,
+    addListener: addListener,
+    removeListener: removeListener,
+    removeAllListeners: removeAllListeners,
+    disconnect: disconnect,
+    getTargetWindow: getTargetWindow,
+    targetOrigin: targetOrigin
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(__webpack_require__(/*! ./types */ "./src/interactive-api-client/types.ts"), exports);
-__exportStar(__webpack_require__(/*! ./metadata-types */ "./src/interactive-api-client/metadata-types.ts"), exports);
-__exportStar(__webpack_require__(/*! ./in-frame */ "./src/interactive-api-client/in-frame.ts"), exports);
-__exportStar(__webpack_require__(/*! ./api */ "./src/interactive-api-client/api.ts"), exports);
-__exportStar(__webpack_require__(/*! ./hooks */ "./src/interactive-api-client/hooks.ts"), exports);
-__exportStar(__webpack_require__(/*! ./client */ "./src/interactive-api-client/client.ts"), exports);
 
 
 /***/ }),
 
-/***/ "./src/interactive-api-client/managed-state.ts":
-/*!*****************************************************!*\
-  !*** ./src/interactive-api-client/managed-state.ts ***!
-  \*****************************************************/
+/***/ "./src/interactive-api-client/node_modules/iframe-phone/lib/structured-clone.js":
+/*!**************************************************************************************!*\
+  !*** ./src/interactive-api-client/node_modules/iframe-phone/lib/structured-clone.js ***!
+  \**************************************************************************************/
 /*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, exports) {
 
-"use strict";
+var featureSupported = {
+  'structuredClones': 0
+};
 
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManagedState = void 0;
-var eventemitter2_1 = __webpack_require__(/*! eventemitter2 */ "./node_modules/eventemitter2/lib/eventemitter2.js");
-var deepFreeze = __webpack_require__(/*! deep-freeze */ "./node_modules/deep-freeze/index.js");
-var ManagedState = /** @class */ (function () {
-    function ManagedState() {
-        this.interactiveStateDirty = false;
-        this._initMessage = null;
-        // State variables are kept separately from initMessage, as they might get updated. For client user convenience,
-        // this state is kept here and all the updates emit appropriate event.
-        this._interactiveState = null;
-        this._authoredState = null;
-        this._globalInteractiveState = null;
-        this.emitter = new eventemitter2_1.EventEmitter2({
-            maxListeners: Infinity
-        });
+(function () {
+  var result = 0;
+
+  if (!!window.postMessage) {
+    try {
+      // Spec states you can't transmit DOM nodes and it will throw an error
+      // postMessage implementations that support cloned data will throw.
+      window.postMessage(document.createElement("a"), "*");
+    } catch (e) {
+      // BBOS6 throws but doesn't pass through the correct exception
+      // so check error message
+      result = (e.DATA_CLONE_ERR || e.message === "Cannot post cyclic structures.") ? 1 : 0;
+      featureSupported = {
+        'structuredClones': result
+      };
     }
-    Object.defineProperty(ManagedState.prototype, "initMessage", {
-        get: function () {
-            return this._initMessage;
-        },
-        set: function (value) {
-            // null is an object too.
-            if (value !== null && typeof value === "object") {
-                value = deepFreeze(value);
-            }
-            this._initMessage = value;
-            this.emit("initInteractive", value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ManagedState.prototype, "interactiveState", {
-        get: function () {
-            return this._interactiveState;
-        },
-        set: function (value) {
-            // null is an object too.
-            if (value !== null && typeof value === "object") {
-                value = deepFreeze(value);
-            }
-            this._interactiveState = value;
-            this.emit("interactiveStateUpdated", value);
-            this.interactiveStateDirty = true;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ManagedState.prototype, "authoredState", {
-        get: function () {
-            return this._authoredState;
-        },
-        set: function (value) {
-            // null is an object too.
-            if (value !== null && typeof value === "object") {
-                value = deepFreeze(value);
-            }
-            this._authoredState = value;
-            this.emit("authoredStateUpdated", value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ManagedState.prototype, "globalInteractiveState", {
-        get: function () {
-            return this._globalInteractiveState;
-        },
-        set: function (value) {
-            // null is an object too.
-            if (value !== null && typeof value === "object") {
-                value = deepFreeze(value);
-            }
-            this._globalInteractiveState = value;
-            this.emit("globalInteractiveStateUpdated", value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ManagedState.prototype.emit = function (event, content) {
-        this.emitter.emit(event, content);
-    };
-    ManagedState.prototype.on = function (event, handler) {
-        this.emitter.on(event, handler);
-    };
-    ManagedState.prototype.off = function (event, handler) {
-        this.emitter.off(event, handler);
-    };
-    ManagedState.prototype.once = function (event, handler) {
-        this.emitter.once(event, handler);
-    };
-    return ManagedState;
+  }
 }());
-exports.ManagedState = ManagedState;
+
+exports.supported = function supported() {
+  return featureSupported && featureSupported.structuredClones > 0;
+};
 
 
 /***/ }),
 
-/***/ "./src/interactive-api-client/metadata-types.ts":
-/*!******************************************************!*\
-  !*** ./src/interactive-api-client/metadata-types.ts ***!
-  \******************************************************/
+/***/ "./src/interactive-api-client/node_modules/iframe-phone/main.js":
+/*!**********************************************************************!*\
+  !*** ./src/interactive-api-client/node_modules/iframe-phone/main.js ***!
+  \**********************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
+module.exports = {
+  /**
+   * Allows to communicate with an iframe.
+   */
+  ParentEndpoint:  __webpack_require__(/*! ./lib/parent-endpoint */ "./src/interactive-api-client/node_modules/iframe-phone/lib/parent-endpoint.js"),
+  /**
+   * Allows to communicate with a parent page.
+   * IFrameEndpoint is a singleton, as iframe can't have multiple parents anyway.
+   */
+  getIFrameEndpoint: __webpack_require__(/*! ./lib/iframe-endpoint */ "./src/interactive-api-client/node_modules/iframe-phone/lib/iframe-endpoint.js"),
+  structuredClone: __webpack_require__(/*! ./lib/structured-clone */ "./src/interactive-api-client/node_modules/iframe-phone/lib/structured-clone.js"),
 
-// Each time these interfaces are updated, it might be necessary to also update base_interactive.rb
-// and interactive_run_state.rb files that process this data passed from interactives and send
-// to report service and portal.
-Object.defineProperty(exports, "__esModule", { value: true });
+  // TODO: May be misnamed
+  IframePhoneRpcEndpoint: __webpack_require__(/*! ./lib/iframe-phone-rpc-endpoint */ "./src/interactive-api-client/node_modules/iframe-phone/lib/iframe-phone-rpc-endpoint.js")
+
+};
 
 
 /***/ }),