@inboxsdk/core 0.2.28-alpha.4 → 0.2.28-alpha.5

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-collapsible-section-view.js

@@ -1,56 +1,43 @@
-/* @flow */
-
-import { defn } from 'ud';
-import escape from 'lodash/escape';
-import Kefir from 'kefir';
-import kefirBus from 'kefir-bus';
-import type { Bus } from 'kefir-bus';
-import defer from '../../../../common/defer';
-import autoHtml from 'auto-html';
-
-import querySelector from '../../../lib/dom/querySelectorOrFail';
-import InboxDropdownButtonView from '../widgets/buttons/inbox-dropdown-button-view';
-import GmailDropdownView from '../widgets/gmail-dropdown-view';
-import DropdownButtonViewController from '../../../widgets/buttons/dropdown-button-view-controller';
-
-import type GmailDriver from '../gmail-driver';
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ud = require("ud");
+var _escape = _interopRequireDefault(require("lodash/escape"));
+var _kefir = _interopRequireDefault(require("kefir"));
+var _kefirBus = _interopRequireDefault(require("kefir-bus"));
+var _defer = _interopRequireDefault(require("../../../../common/defer"));
+var _autoHtml = _interopRequireDefault(require("auto-html"));
+var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
+var _inboxDropdownButtonView = _interopRequireDefault(require("../widgets/buttons/inbox-dropdown-button-view"));
+var _gmailDropdownView = _interopRequireDefault(require("../widgets/gmail-dropdown-view"));
+var _dropdownButtonViewController = _interopRequireDefault(require("../../../widgets/buttons/dropdown-button-view-controller"));
 class GmailCollapsibleSectionView {
-  _driver: GmailDriver;
-  _groupOrderHint: number;
-  _isReadyDeferred: Object;
-  _isCollapsible: boolean;
-  _collapsibleSectionDescriptor: Object = {};
-  _isSearch: boolean;
-  _element: ?HTMLElement = null;
-  _headerElement: ?HTMLElement = null;
-  _titleElement: ?HTMLElement = null;
-  _bodyElement: ?HTMLElement = null;
-  _contentElement: ?HTMLElement = null;
-  _tableBodyElement: ?HTMLElement = null;
-  _collapsedContainer: ?HTMLElement = null;
-  _messageElement: ?HTMLElement = null;
-  _footerElement: ?HTMLElement = null;
-  _eventStream: Bus<any>;
-  _isCollapsed: boolean = false;
-  _inboxDropdownButtonView: ?Object = null;
-  _dropdownViewController: ?Object = null;
-
-  constructor(
-    driver: GmailDriver,
-    groupOrderHint: number,
-    isSearch: boolean,
-    isCollapsible: boolean
-  ) {
+  constructor(driver, groupOrderHint, isSearch, isCollapsible) {
+    (0, _defineProperty2.default)(this, "_collapsibleSectionDescriptor", {});
+    (0, _defineProperty2.default)(this, "_element", null);
+    (0, _defineProperty2.default)(this, "_headerElement", null);
+    (0, _defineProperty2.default)(this, "_titleElement", null);
+    (0, _defineProperty2.default)(this, "_bodyElement", null);
+    (0, _defineProperty2.default)(this, "_contentElement", null);
+    (0, _defineProperty2.default)(this, "_tableBodyElement", null);
+    (0, _defineProperty2.default)(this, "_collapsedContainer", null);
+    (0, _defineProperty2.default)(this, "_messageElement", null);
+    (0, _defineProperty2.default)(this, "_footerElement", null);
+    (0, _defineProperty2.default)(this, "_isCollapsed", false);
+    (0, _defineProperty2.default)(this, "_inboxDropdownButtonView", null);
+    (0, _defineProperty2.default)(this, "_dropdownViewController", null);
     this._driver = driver;
     this._isSearch = isSearch;
     this._groupOrderHint = groupOrderHint;
     this._isCollapsible = isCollapsible;
-    this._eventStream = kefirBus();
-
-    this._isReadyDeferred = new defer();
+    this._eventStream = (0, _kefirBus.default)();
+    this._isReadyDeferred = new _defer.default();
   }
-
   destroy() {
     if (this._element) this._element.remove();
     if (this._eventStream) this._eventStream.end();
@@ -64,59 +51,43 @@ class GmailCollapsibleSectionView {
     if (this._inboxDropdownButtonView) this._inboxDropdownButtonView.destroy();
     if (this._dropdownViewController) this._dropdownViewController.destroy();
   }
-
-  getElement(): HTMLElement {
+  getElement() {
     const element = this._element;
-    if (!element)
-      throw new Error('tried to access element that does not exist');
+    if (!element) throw new Error('tried to access element that does not exist');
     return element;
   }
-
-  getEventStream(): Kefir.Observable<any> {
+  getEventStream() {
     return this._eventStream;
   }
-
-  setCollapsibleSectionDescriptorProperty(
-    collapsibleSectionDescriptorProperty: Kefir.Observable<?Object>
-  ) {
-    const stoppedProperty = collapsibleSectionDescriptorProperty.takeUntilBy(
-      this._eventStream.filter(() => false).beforeEnd(() => null)
-    );
-
-    stoppedProperty.onValue((x) => this._updateValues(x));
-    stoppedProperty.take(1).onValue((x) => this._isReadyDeferred.resolve(this));
+  setCollapsibleSectionDescriptorProperty(collapsibleSectionDescriptorProperty) {
+    const stoppedProperty = collapsibleSectionDescriptorProperty.takeUntilBy(this._eventStream.filter(() => false).beforeEnd(() => null));
+    stoppedProperty.onValue(x => this._updateValues(x));
+    stoppedProperty.take(1).onValue(x => this._isReadyDeferred.resolve(this));
   }
-
-  setCollapsed(value: boolean) {
+  setCollapsed(value) {
     if (!this._isCollapsible) {
       return;
     }
-
     this._isReadyDeferred.promise.then(() => {
-      if (value) this._collapse();
-      else this._expand();
+      if (value) this._collapse();else this._expand();
     });
   }
-
-  _updateValues(collapsibleSectionDescriptor: ?Object) {
+  _updateValues(collapsibleSectionDescriptor) {
     const element = this._element;
     if (!collapsibleSectionDescriptor) {
       if (element) {
         element.style.display = 'none';
       }
-
       return;
     } else if (element) {
       element.style.display = '';
     }
-
     if (!element) {
       this._setupElement(collapsibleSectionDescriptor);
       this._showLoadingMessage();
     } else {
       this._updateElement(collapsibleSectionDescriptor);
     }
-
     this._updateHeader(collapsibleSectionDescriptor);
     this._updateTitle(collapsibleSectionDescriptor);
     this._updateSubtitle(collapsibleSectionDescriptor);
@@ -126,301 +97,163 @@ class GmailCollapsibleSectionView {
     this._updateTableRows(collapsibleSectionDescriptor);
     this._updateMessageElement(collapsibleSectionDescriptor);
     this._updateFooter(collapsibleSectionDescriptor);
-
     this._collapsibleSectionDescriptor = collapsibleSectionDescriptor;
   }
-
-  _setupElement(collapsibleSectionDescriptor: Object) {
-    const element = (this._element = document.createElement('div'));
+  _setupElement(collapsibleSectionDescriptor) {
+    const element = this._element = document.createElement('div');
     element.setAttribute('class', 'inboxsdk__resultsSection');
     element.setAttribute('data-group-order-hint', String(this._groupOrderHint));
-    element.setAttribute(
-      'data-order-hint',
-      String(
-        typeof collapsibleSectionDescriptor.orderHint === 'number'
-          ? collapsibleSectionDescriptor.orderHint
-          : 0
-      )
-    );
-    if (!this._isCollapsible)
-      element.classList.add('inboxsdk__resultsSection_nonCollapsible');
-
+    element.setAttribute('data-order-hint', String(typeof collapsibleSectionDescriptor.orderHint === 'number' ? collapsibleSectionDescriptor.orderHint : 0));
+    if (!this._isCollapsible) element.classList.add('inboxsdk__resultsSection_nonCollapsible');
     this._setupHeader(collapsibleSectionDescriptor);
-
-    const bodyElement = (this._bodyElement = document.createElement('div'));
+    const bodyElement = this._bodyElement = document.createElement('div');
     const bodyContentsElement = document.createElement('div');
     bodyContentsElement.classList.add('zE');
     bodyElement.appendChild(bodyContentsElement);
-
     element.appendChild(bodyElement);
-
-    const contentElement = (this._contentElement =
-      document.createElement('div'));
+    const contentElement = this._contentElement = document.createElement('div');
     bodyContentsElement.appendChild(contentElement);
-
-    const messageElement = (this._messageElement =
-      document.createElement('div'));
+    const messageElement = this._messageElement = document.createElement('div');
     bodyContentsElement.appendChild(messageElement);
-
-    const tableBodyElement = (this._tableBodyElement =
-      document.createElement('div'));
+    const tableBodyElement = this._tableBodyElement = document.createElement('div');
     bodyContentsElement.appendChild(tableBodyElement);
-
     this._setupFooter(collapsibleSectionDescriptor);
-
     if (this._isCollapsible && this._titleElement) {
-      Kefir.fromEvents(this._titleElement, 'click').onValue(() =>
-        this._toggleCollapseState()
-      );
+      _kefir.default.fromEvents(this._titleElement, 'click').onValue(() => this._toggleCollapseState());
     }
-
-    Kefir.fromEvents(element, 'removeCollapsedContainer').onValue(() =>
-      this._destroyCollapsedContainer()
-    );
-    Kefir.fromEvents(element, 'readdToCollapsedContainer').onValue(() =>
-      this._addToCollapsedContainer()
-    );
-
+    _kefir.default.fromEvents(element, 'removeCollapsedContainer').onValue(() => this._destroyCollapsedContainer());
+    _kefir.default.fromEvents(element, 'readdToCollapsedContainer').onValue(() => this._addToCollapsedContainer());
     this._eventStream.emit({
       type: 'update',
       property: 'orderHint',
-      sectionDescriptor: collapsibleSectionDescriptor,
+      sectionDescriptor: collapsibleSectionDescriptor
     });
   }
-
-  _setupHeader(collapsibleSectionDescriptor: Object) {
-    const headerElement = (this._headerElement = document.createElement('div'));
+  _setupHeader(collapsibleSectionDescriptor) {
+    const headerElement = this._headerElement = document.createElement('div');
     headerElement.classList.add('inboxsdk__resultsSection_header', 'Wg');
-
     this._setupGmailv2Header(headerElement, collapsibleSectionDescriptor);
-
     if (this._element) this._element.appendChild(headerElement);
   }
-
-  _setupGmailv2Header(
-    headerElement: HTMLElement,
-    collapsibleSectionDescriptor: Object
-  ) {
-    const titleElement = (this._titleElement = document.createElement('div'));
+  _setupGmailv2Header(headerElement, collapsibleSectionDescriptor) {
+    const titleElement = this._titleElement = document.createElement('div');
     titleElement.setAttribute('class', 'inboxsdk__resultsSection_title');
-
-    titleElement.innerHTML = [
-      '<h3 class="Wr iR">',
-      '<img alt="" src="//ssl.gstatic.com/ui/v1/icons/mail/images/cleardot.gif" class="qi Wp Wq">',
-      '<div class="Wn">',
-      escape(collapsibleSectionDescriptor.title),
-      '</div>',
-      '</h3>',
-    ].join('');
-
+    titleElement.innerHTML = ['<h3 class="Wr iR">', '<img alt="" src="//ssl.gstatic.com/ui/v1/icons/mail/images/cleardot.gif" class="qi Wp Wq">', '<div class="Wn">', (0, _escape.default)(collapsibleSectionDescriptor.title), '</div>', '</h3>'].join('');
     const floatRightElement = document.createElement('div');
     floatRightElement.classList.add('Cr');
     if (this._isSearch) floatRightElement.classList.add('Wg');
-
     headerElement.appendChild(titleElement);
     headerElement.appendChild(floatRightElement);
   }
-
-  _setupFooter(collapsibleSectionDescriptor: Object) {
-    const footerElement = (this._footerElement = document.createElement('div'));
+  _setupFooter(collapsibleSectionDescriptor) {
+    const footerElement = this._footerElement = document.createElement('div');
     footerElement.classList.add('inboxsdk__resultsSection_footer');
-
     if (this._bodyElement) this._bodyElement.appendChild(footerElement);
   }
-
-  _updateElement(collapsibleSectionDescriptor: Object) {
-    if (
-      this._collapsibleSectionDescriptor.orderHint !==
-      collapsibleSectionDescriptor.orderHint
-    ) {
+  _updateElement(collapsibleSectionDescriptor) {
+    if (this._collapsibleSectionDescriptor.orderHint !== collapsibleSectionDescriptor.orderHint) {
       const element = this._element;
-      if (element)
-        element.setAttribute(
-          'data-order-hint',
-          '' +
-            (typeof collapsibleSectionDescriptor.orderHint === 'number'
-              ? collapsibleSectionDescriptor.orderHint
-              : 0)
-        );
-
+      if (element) element.setAttribute('data-order-hint', '' + (typeof collapsibleSectionDescriptor.orderHint === 'number' ? collapsibleSectionDescriptor.orderHint : 0));
       this._eventStream.emit({
         type: 'update',
-        property: 'orderHint',
+        property: 'orderHint'
       });
     }
   }
-
-  _updateHeader(collapsibleSectionDescriptor: Object) {
-    if (
-      this._isCollapsible ||
-      collapsibleSectionDescriptor.title ||
-      collapsibleSectionDescriptor.subtitle ||
-      collapsibleSectionDescriptor.titleLinkText ||
-      collapsibleSectionDescriptor.hasDropdown
-    ) {
+  _updateHeader(collapsibleSectionDescriptor) {
+    if (this._isCollapsible || collapsibleSectionDescriptor.title || collapsibleSectionDescriptor.subtitle || collapsibleSectionDescriptor.titleLinkText || collapsibleSectionDescriptor.hasDropdown) {
       if (this._headerElement) this._headerElement.style.display = '';
     } else {
       if (this._headerElement) this._headerElement.style.display = 'none';
     }
   }
-
-  _updateTitle(collapsibleSectionDescriptor: Object) {
-    if (
-      this._collapsibleSectionDescriptor.title !==
-      collapsibleSectionDescriptor.title
-    ) {
+  _updateTitle(collapsibleSectionDescriptor) {
+    if (this._collapsibleSectionDescriptor.title !== collapsibleSectionDescriptor.title) {
       const selector = 'h3 > .Wn';
-
       if (this._titleElement) {
-        querySelector(this._titleElement, selector).textContent =
-          collapsibleSectionDescriptor.title;
+        (0, _querySelectorOrFail.default)(this._titleElement, selector).textContent = collapsibleSectionDescriptor.title;
       }
     }
   }
-
-  _updateSubtitle(collapsibleSectionDescriptor: Object) {
+  _updateSubtitle(collapsibleSectionDescriptor) {
     const titleElement = this._titleElement;
     if (!titleElement) return;
-
-    let subtitleElement = titleElement.querySelector(
-      '.inboxsdk__resultsSection_title_subtitle'
-    );
+    let subtitleElement = titleElement.querySelector('.inboxsdk__resultsSection_title_subtitle');
     if (!collapsibleSectionDescriptor.subtitle) {
       if (subtitleElement) {
         subtitleElement.remove();
       }
-    } else if (
-      this._collapsibleSectionDescriptor.subtitle !==
-      collapsibleSectionDescriptor.subtitle
-    ) {
+    } else if (this._collapsibleSectionDescriptor.subtitle !== collapsibleSectionDescriptor.subtitle) {
       if (!subtitleElement) {
         subtitleElement = document.createElement('span');
         if (subtitleElement && titleElement) {
-          subtitleElement.classList.add(
-            'inboxsdk__resultsSection_title_subtitle'
-          );
-
+          subtitleElement.classList.add('inboxsdk__resultsSection_title_subtitle');
           const insertionPoint = titleElement.querySelector('.Wn');
-
           if (insertionPoint) {
             subtitleElement.classList.add('aw5');
-            (insertionPoint: any).appendChild(subtitleElement);
+            insertionPoint.appendChild(subtitleElement);
           }
         }
       }
-
-      subtitleElement.textContent =
-        '(' + collapsibleSectionDescriptor.subtitle + ')';
+      subtitleElement.textContent = '(' + collapsibleSectionDescriptor.subtitle + ')';
     }
   }
-
-  _updateSummaryText(collapsibleSectionDescriptor: Object) {
+  _updateSummaryText(collapsibleSectionDescriptor) {
     const headerElement = this._headerElement;
     if (!headerElement) return;
-
-    let summaryTextElement = headerElement.querySelector(
-      '.inboxsdk__resultsSection_header_summaryText'
-    );
+    let summaryTextElement = headerElement.querySelector('.inboxsdk__resultsSection_header_summaryText');
     if (!collapsibleSectionDescriptor.titleLinkText) {
       if (summaryTextElement) {
         summaryTextElement.remove();
       }
-    } else if (
-      collapsibleSectionDescriptor.titleLinkText !==
-      this._collapsibleSectionDescriptor.titleLinkText
-    ) {
+    } else if (collapsibleSectionDescriptor.titleLinkText !== this._collapsibleSectionDescriptor.titleLinkText) {
       if (!summaryTextElement) {
         summaryTextElement = document.createElement('div');
-        summaryTextElement.setAttribute(
-          'class',
-          'inboxsdk__resultsSection_header_summaryText Wm'
-        );
-
-        summaryTextElement.innerHTML = [
-          '<span class="Di">&nbsp;',
-          '<div class="J-J5-Ji amH">',
-          '<span class="Dj">',
-          '<span></span>',
-          '</span>',
-          '&nbsp;',
-          '</div>',
-          '</span>',
-        ].join('');
-
-        this._eventStream.plug(
-          Kefir.fromEvents(summaryTextElement, 'click').map(() => ({
-            eventName: 'titleLinkClicked',
-            sectionDescriptor: this._collapsibleSectionDescriptor,
-          }))
-        );
-
+        summaryTextElement.setAttribute('class', 'inboxsdk__resultsSection_header_summaryText Wm');
+        summaryTextElement.innerHTML = ['<span class="Di">&nbsp;', '<div class="J-J5-Ji amH">', '<span class="Dj">', '<span></span>', '</span>', '&nbsp;', '</div>', '</span>'].join('');
+        this._eventStream.plug(_kefir.default.fromEvents(summaryTextElement, 'click').map(() => ({
+          eventName: 'titleLinkClicked',
+          sectionDescriptor: this._collapsibleSectionDescriptor
+        })));
         const _summaryTextElement = summaryTextElement;
         summaryTextElement.addEventListener('mouseenter', function () {
           _summaryTextElement.classList.add('aqi');
         });
-
         summaryTextElement.addEventListener('mouseleave', function () {
           _summaryTextElement.classList.remove('aqi');
         });
-
         const insertionPoint = headerElement.querySelector('.Cr');
-        if (insertionPoint)
-          (insertionPoint: any).insertAdjacentElement(
-            'afterbegin',
-            summaryTextElement
-          );
+        if (insertionPoint) insertionPoint.insertAdjacentElement('afterbegin', summaryTextElement);
       }
-
-      querySelector(summaryTextElement, '.Dj > *').textContent =
-        collapsibleSectionDescriptor.titleLinkText;
+      (0, _querySelectorOrFail.default)(summaryTextElement, '.Dj > *').textContent = collapsibleSectionDescriptor.titleLinkText;
     }
   }
-
-  _updateDropdown(collapsibleSectionDescriptor: Object) {
-    if (
-      !collapsibleSectionDescriptor.hasDropdown ||
-      !collapsibleSectionDescriptor.onDropdownClick
-    ) {
-      if (this._inboxDropdownButtonView)
-        this._inboxDropdownButtonView.destroy();
+  _updateDropdown(collapsibleSectionDescriptor) {
+    if (!collapsibleSectionDescriptor.hasDropdown || !collapsibleSectionDescriptor.onDropdownClick) {
+      if (this._inboxDropdownButtonView) this._inboxDropdownButtonView.destroy();
       if (this._dropdownViewController) this._dropdownViewController.destroy();
-    } else if (
-      collapsibleSectionDescriptor.hasDropdown &&
-      collapsibleSectionDescriptor.onDropdownClick
-    ) {
+    } else if (collapsibleSectionDescriptor.hasDropdown && collapsibleSectionDescriptor.onDropdownClick) {
       if (!this._inboxDropdownButtonView || !this._dropdownViewController) {
-        const inboxDropdownButtonView = (this._inboxDropdownButtonView =
-          new InboxDropdownButtonView());
-        this._dropdownViewController = new DropdownButtonViewController({
+        const inboxDropdownButtonView = this._inboxDropdownButtonView = new _inboxDropdownButtonView.default();
+        this._dropdownViewController = new _dropdownButtonViewController.default({
           buttonView: inboxDropdownButtonView,
-          dropdownViewDriverClass: GmailDropdownView,
-          dropdownShowFunction: collapsibleSectionDescriptor.onDropdownClick,
+          dropdownViewDriverClass: _gmailDropdownView.default,
+          dropdownShowFunction: collapsibleSectionDescriptor.onDropdownClick
         });
-
         const headerElement = this._headerElement;
         if (headerElement) {
           const childElement = headerElement.querySelector('.Cr');
-          if (childElement)
-            childElement.appendChild(inboxDropdownButtonView.getElement());
+          if (childElement) childElement.appendChild(inboxDropdownButtonView.getElement());
         }
-      } else if (
-        collapsibleSectionDescriptor.onDropdownClick !==
-        this._collapsibleSectionDescriptor.onDropdownClick
-      ) {
-        if (this._dropdownViewController)
-          this._dropdownViewController.setDropdownShowFunction(
-            collapsibleSectionDescriptor.onDropdownClick
-          );
+      } else if (collapsibleSectionDescriptor.onDropdownClick !== this._collapsibleSectionDescriptor.onDropdownClick) {
+        if (this._dropdownViewController) this._dropdownViewController.setDropdownShowFunction(collapsibleSectionDescriptor.onDropdownClick);
       }
     }
   }
-
-  _updateContentElement(collapsibleSectionDescriptor: Object) {
+  _updateContentElement(collapsibleSectionDescriptor) {
     const contentElement = this._contentElement;
     if (!contentElement) return;
-
     contentElement.innerHTML = '';
-
     if (collapsibleSectionDescriptor.contentElement) {
       contentElement.style.display = '';
       contentElement.appendChild(collapsibleSectionDescriptor.contentElement);
@@ -428,14 +261,13 @@ class GmailCollapsibleSectionView {
       contentElement.style.display = 'none';
     }
   }
-
-  _updateTableRows(collapsibleSectionDescriptor: Object) {
-    const { tableRows } = collapsibleSectionDescriptor;
+  _updateTableRows(collapsibleSectionDescriptor) {
+    const {
+      tableRows
+    } = collapsibleSectionDescriptor;
     const tableBodyElement = this._tableBodyElement;
     if (!tableBodyElement) return;
-
     tableBodyElement.innerHTML = '';
-
     if (!tableRows || tableRows.length === 0) {
       tableBodyElement.style.display = 'none';
     } else {
@@ -443,70 +275,44 @@ class GmailCollapsibleSectionView {
       this._renderTable(tableRows);
     }
   }
-
-  _renderTable(tableRows: Array<Object>) {
+  _renderTable(tableRows) {
     const tableElement = document.createElement('table');
     tableElement.setAttribute('class', 'F cf zt');
     tableElement.innerHTML = _getTableHTML();
-
-    if (this._tableBodyElement)
-      this._tableBodyElement.appendChild(tableElement);
-
+    if (this._tableBodyElement) this._tableBodyElement.appendChild(tableElement);
     const tbody = tableElement.querySelector('tbody');
     const eventStream = this._eventStream;
-
-    tableRows.forEach((result) => {
+    tableRows.forEach(result => {
       const rowElement = document.createElement('tr');
-      rowElement.setAttribute(
-        'class',
-        'inboxsdk__resultsSection_tableRow zA ' + (result.isRead ? 'yO' : 'zE')
-      );
+      rowElement.setAttribute('class', 'inboxsdk__resultsSection_tableRow zA ' + (result.isRead ? 'yO' : 'zE'));
       rowElement.innerHTML = _getRowHTML(result);
-
       if (!tbody) throw new Error('should not happen');
       tbody.appendChild(rowElement);
-
-      eventStream.plug(
-        Kefir.fromEvents(rowElement, 'click').map(() => ({
-          eventName: 'rowClicked',
-          rowDescriptor: result,
-        }))
-      );
+      eventStream.plug(_kefir.default.fromEvents(rowElement, 'click').map(() => ({
+        eventName: 'rowClicked',
+        rowDescriptor: result
+      })));
     });
   }
-
-  _updateMessageElement(collapsibleSectionDescriptor: Object) {
+  _updateMessageElement(collapsibleSectionDescriptor) {
     const messageElement = this._messageElement;
-    if (
-      (collapsibleSectionDescriptor.tableRows &&
-        collapsibleSectionDescriptor.tableRows.length > 0) ||
-      collapsibleSectionDescriptor.contentElement
-    ) {
+    if (collapsibleSectionDescriptor.tableRows && collapsibleSectionDescriptor.tableRows.length > 0 || collapsibleSectionDescriptor.contentElement) {
       if (messageElement) {
         messageElement.innerHTML = '';
         messageElement.style.display = 'none';
       }
-    } else if (
-      collapsibleSectionDescriptor.tableRows &&
-      collapsibleSectionDescriptor.tableRows.length === 0 &&
-      !collapsibleSectionDescriptor.contentElement
-    ) {
+    } else if (collapsibleSectionDescriptor.tableRows && collapsibleSectionDescriptor.tableRows.length === 0 && !collapsibleSectionDescriptor.contentElement) {
       this._showEmptyMessage();
     }
   }
-
   _showLoadingMessage() {
     const messageElement = this._messageElement;
     if (messageElement) {
-      messageElement.setAttribute(
-        'class',
-        'TB TC inboxsdk__resultsSection_loading'
-      );
+      messageElement.setAttribute('class', 'TB TC inboxsdk__resultsSection_loading');
       messageElement.innerHTML = 'loading...'; //TODO: localize
       messageElement.style.display = '';
     }
   }
-
   _showEmptyMessage() {
     const messageElement = this._messageElement;
     if (messageElement) {
@@ -515,41 +321,27 @@ class GmailCollapsibleSectionView {
       messageElement.style.display = '';
     }
   }
-
-  _updateFooter(collapsibleSectionDescriptor: Object) {
+  _updateFooter(collapsibleSectionDescriptor) {
     const footerElement = this._footerElement;
     if (!footerElement) return;
-
     footerElement.innerHTML = '';
-
-    if (
-      !collapsibleSectionDescriptor.footerLinkText &&
-      !collapsibleSectionDescriptor.footerLinkIconUrl &&
-      !collapsibleSectionDescriptor.footerLinkIconClass
-    ) {
+    if (!collapsibleSectionDescriptor.footerLinkText && !collapsibleSectionDescriptor.footerLinkIconUrl && !collapsibleSectionDescriptor.footerLinkIconClass) {
       footerElement.style.display = 'none';
     } else {
       footerElement.style.display = '';
-
       const footerLinkElement = document.createElement('span');
       footerLinkElement.setAttribute('class', 'e Wb');
-      footerLinkElement.textContent =
-        collapsibleSectionDescriptor.footerLinkText;
-
-      this._eventStream.plug(
-        Kefir.fromEvents(footerLinkElement, 'click').map(() => {
-          return {
-            eventName: 'footerClicked',
-            sectionDescriptor: this._collapsibleSectionDescriptor,
-          };
-        })
-      );
-
+      footerLinkElement.textContent = collapsibleSectionDescriptor.footerLinkText;
+      this._eventStream.plug(_kefir.default.fromEvents(footerLinkElement, 'click').map(() => {
+        return {
+          eventName: 'footerClicked',
+          sectionDescriptor: this._collapsibleSectionDescriptor
+        };
+      }));
       footerElement.appendChild(footerLinkElement);
       footerElement.insertAdjacentHTML('beforeend', '<br style="clear:both;">');
     }
   }
-
   _toggleCollapseState() {
     if (this._isCollapsed) {
       this._expand();
@@ -557,154 +349,103 @@ class GmailCollapsibleSectionView {
       this._collapse();
     }
   }
-
   _collapse() {
     const element = this._element;
     if (!element) {
       return;
     }
-
     element.classList.add('inboxsdk__resultsSection_collapsed');
-
     if (!this._isSearch) {
       this._addToCollapsedContainer();
     }
-
     const selector = 'h3 > img.Wp';
     if (this._titleElement) {
-      const arrowSpan = querySelector(this._titleElement, selector);
+      const arrowSpan = (0, _querySelectorOrFail.default)(this._titleElement, selector);
       if (arrowSpan) {
         arrowSpan.classList.remove('Wq');
         arrowSpan.classList.add('Wo');
       }
     }
-
     if (this._bodyElement) this._bodyElement.style.display = 'none';
     this._isCollapsed = true;
-
     this._eventStream.emit({
-      eventName: 'collapsed',
+      eventName: 'collapsed'
     });
   }
-
   _expand() {
     const element = this._element;
     if (!element) {
       return;
     }
-
     element.classList.remove('inboxsdk__resultsSection_collapsed');
-
     if (!this._isSearch) {
       this._removeFromCollapsedContainer();
     }
-
     const selector = 'h3 > img.Wp';
     if (this._titleElement) {
-      const arrowSpan = querySelector(this._titleElement, selector);
+      const arrowSpan = (0, _querySelectorOrFail.default)(this._titleElement, selector);
       if (arrowSpan) {
         arrowSpan.classList.remove('Wo');
         arrowSpan.classList.add('Wq');
       }
     }
-
     if (this._bodyElement) this._bodyElement.style.display = '';
     this._isCollapsed = false;
-
     this._eventStream.emit({
-      eventName: 'expanded',
+      eventName: 'expanded'
     });
   }
-
   _addToCollapsedContainer() {
     const element = this._element;
     if (!element) return;
     if (this._headerElement) this._headerElement.classList.remove('Wg');
-
-    if (
-      this._isCollapsedContainer(element.previousElementSibling) &&
-      this._isCollapsedContainer(element.nextElementSibling)
-    ) {
+    if (this._isCollapsedContainer(element.previousElementSibling) && this._isCollapsedContainer(element.nextElementSibling)) {
       //we are surrounded by collapse containers, let's favor our previous sibling
       const otherCollapseContainer = element.nextElementSibling;
       const previousSibling = element.previousElementSibling;
       if (!previousSibling) throw new Error('previousSibling does not exist');
-      if (!otherCollapseContainer)
-        throw new Error('otherCollapseContainer does not exist');
-
+      if (!otherCollapseContainer) throw new Error('otherCollapseContainer does not exist');
       const anchor = previousSibling.children[0].appendChild(element);
 
       //now we need to "merge" the two collapse containers. This can be done by taking all the result sections out of the collapsed container
       //and calling our "recollapse" helper function on them
-      const elementsToRecollapse = Array.from(
-        otherCollapseContainer.children[0].children
-      ).concat(Array.from(otherCollapseContainer.children[1].children));
-
-      if (otherCollapseContainer)
-        this._pulloutSectionsFromCollapsedContainer(
-          (otherCollapseContainer: any)
-        );
+      const elementsToRecollapse = Array.from(otherCollapseContainer.children[0].children).concat(Array.from(otherCollapseContainer.children[1].children));
+      if (otherCollapseContainer) this._pulloutSectionsFromCollapsedContainer(otherCollapseContainer);
       this._recollapse(elementsToRecollapse);
     } else {
       this._readdToCollapsedContainer();
     }
   }
-
   _removeFromCollapsedContainer() {
     if (this._headerElement) this._headerElement.classList.add('Wg');
     const element = this._element;
     if (!element) return;
-
     const parentElement = element.parentElement;
     if (!parentElement) return;
-
     const container = parentElement.parentElement;
-
-    if (
-      !container ||
-      !container.classList.contains('inboxsdk__results_collapsedContainer')
-    ) {
+    if (!container || !container.classList.contains('inboxsdk__results_collapsedContainer')) {
       return;
     }
-
-    const elementsToRecollapse = Array.from(
-      container.children[0].children
-    ).concat(Array.from(container.children[1].children));
-    this._pulloutSectionsFromCollapsedContainer((container: any));
+    const elementsToRecollapse = Array.from(container.children[0].children).concat(Array.from(container.children[1].children));
+    this._pulloutSectionsFromCollapsedContainer(container);
     this._destroyCollapsedContainer();
-
-    this._recollapse(elementsToRecollapse.filter((child) => child !== element));
+    this._recollapse(elementsToRecollapse.filter(child => child !== element));
   }
-
-  _pulloutSectionsFromCollapsedContainer(container: HTMLElement) {
+  _pulloutSectionsFromCollapsedContainer(container) {
     const prependedChildren = Array.from(container.children[0].children);
-    prependedChildren.forEach((child) =>
-      (container: any).insertAdjacentElement('beforebegin', child)
-    );
-
-    const appendedChildren = Array.from(
-      container.children[1].children
-    ).reverse();
-    appendedChildren.forEach((child) =>
-      (container: any).insertAdjacentElement('afterend', child)
-    );
+    prependedChildren.forEach(child => container.insertAdjacentElement('beforebegin', child));
+    const appendedChildren = Array.from(container.children[1].children).reverse();
+    appendedChildren.forEach(child => container.insertAdjacentElement('afterend', child));
   }
-
   _readdToCollapsedContainer() {
     const element = this._element;
     if (!element) return;
-
     if (this._collapsedContainer) {
-      this._collapsedContainer.children[0].insertBefore(
-        element,
-        this._collapsedContainer.children[1].firstElementChild
-      );
+      this._collapsedContainer.children[0].insertBefore(element, this._collapsedContainer.children[1].firstElementChild);
       return;
     }
-
     let collapsedContainer;
     let isPrepend;
-
     if (this._isCollapsedContainer(element.previousElementSibling)) {
       isPrepend = false;
       collapsedContainer = element.previousElementSibling;
@@ -716,61 +457,32 @@ class GmailCollapsibleSectionView {
       this._createCollapsedContainer();
       collapsedContainer = this._collapsedContainer;
     }
-
     if (isPrepend && collapsedContainer) {
-      collapsedContainer.children[0].insertBefore(
-        element,
-        collapsedContainer.children[0].firstElementChild
-      );
+      collapsedContainer.children[0].insertBefore(element, collapsedContainer.children[0].firstElementChild);
     } else if (collapsedContainer) {
       collapsedContainer.children[0].appendChild(element);
     }
   }
-
-  _isCollapsedContainer(element: any) {
-    return (
-      element &&
-      element.classList.contains('inboxsdk__results_collapsedContainer')
-    );
+  _isCollapsedContainer(element) {
+    return element && element.classList.contains('inboxsdk__results_collapsedContainer');
   }
-
-  _recollapse(children: Array<Object>) {
-    children.forEach((child) => {
+  _recollapse(children) {
+    children.forEach(child => {
       const removeEvent = document.createEvent('CustomEvent');
-      (removeEvent: any).initCustomEvent(
-        'removeCollapsedContainer',
-        false,
-        false,
-        null
-      );
+      removeEvent.initCustomEvent('removeCollapsedContainer', false, false, null);
       child.dispatchEvent(removeEvent);
-
       const readdEvent = document.createEvent('CustomEvent');
-      (readdEvent: any).initCustomEvent(
-        'readdToCollapsedContainer',
-        false,
-        false,
-        null
-      );
+      readdEvent.initCustomEvent('readdToCollapsedContainer', false, false, null);
       child.dispatchEvent(readdEvent);
     });
   }
-
   _createCollapsedContainer() {
-    const collapsedContainer = (this._collapsedContainer =
-      document.createElement('div'));
-    collapsedContainer.setAttribute(
-      'class',
-      'inboxsdk__results_collapsedContainer Wg'
-    );
-    collapsedContainer.innerHTML =
-      '<div class="inboxsdk__results_collapsedContainer_prepend"></div><div class="inboxsdk__results_collapsedContainer_append"></div>';
-
+    const collapsedContainer = this._collapsedContainer = document.createElement('div');
+    collapsedContainer.setAttribute('class', 'inboxsdk__results_collapsedContainer Wg');
+    collapsedContainer.innerHTML = '<div class="inboxsdk__results_collapsedContainer_prepend"></div><div class="inboxsdk__results_collapsedContainer_append"></div>';
     const element = this._element;
-    if (element)
-      (element: any).insertAdjacentElement('afterend', collapsedContainer);
+    if (element) element.insertAdjacentElement('afterend', collapsedContainer);
   }
-
   _destroyCollapsedContainer() {
     if (this._collapsedContainer) {
       this._collapsedContainer.remove();
@@ -778,132 +490,67 @@ class GmailCollapsibleSectionView {
     }
   }
 }
-
 function _getTableHTML() {
-  return [
-    '<colgroup>',
-    '<col class="k0vOLb">',
-    '<col class="Ci">',
-    '<col class="y5">',
-    '<col class="WA">',
-    '<col class="yY">',
-    '<col>',
-    '<col class="xX">',
-    '</colgroup>',
-    '<tbody>',
-    '</tbody>',
-  ].join('');
+  return ['<colgroup>', '<col class="k0vOLb">', '<col class="Ci">', '<col class="y5">', '<col class="WA">', '<col class="yY">', '<col>', '<col class="xX">', '</colgroup>', '<tbody>', '</tbody>'].join('');
 }
-
 function _getRowHTML(result) {
   let iconHtml = '';
   if (result.iconHtml != null) {
-    iconHtml = autoHtml`<div class="inboxsdk__resultsSection_result_icon inboxsdk__resultsSection_result_iconHtml">
-        ${{ __html: result.iconHtml }}
+    iconHtml = (0, _autoHtml.default)`<div class="inboxsdk__resultsSection_result_icon inboxsdk__resultsSection_result_iconHtml">
+        ${{
+      __html: result.iconHtml
+    }}
       </div>`;
   } else if (result.iconUrl) {
-    iconHtml = autoHtml`<img class="inboxsdk__resultsSection_result_icon ${
-      result.iconClass || ''
-    }" src="${result.iconUrl}">`;
-  } else if (result.iconClass)
-    iconHtml = autoHtml`<div class="${result.iconClass}"></div>`;
-
-  const labelsHtml = Array.isArray(result.labels)
-    ? result.labels.map(_getLabelHTML).join('')
-    : '';
-
-  const rowArr = [
-    '<td class="xY PF"></td>',
-    '<td class="xY oZ-x3"></td>',
-    '<td class="xY WA">',
-    iconHtml,
-    '</td>',
-    '<td class="xY WA"></td>',
-    '<td class="xY yX inboxsdk__resultsSection_result_title">',
-    '<div class="yW">',
-    '<span ' + (result.isRead ? '' : 'class="zF"') + '>',
-    escape(result.title),
-    '</span>',
-    '</div>',
-    '</td>',
-    '<td class="xY a4W">',
-    '<div class="xS">',
-    '<div class="xT">',
-    '<div class="yi">',
-    labelsHtml,
-    '</div>',
-    '<div class="y6">',
-    '<span class="bog">',
-    result.isRead ? '' : '<b>',
-    escape(result.body || ''),
-    result.isRead ? '' : '</b>',
-    '</span>',
-    '</div>',
-    '</div>',
-    '</div>',
-    '</td>',
-    '<td class="xY xW">',
-    '<span' + (result.isRead ? '' : ' class="bq3"') + '>',
-    escape(result.shortDetailText || ''),
-    '</span>',
-    '</td>',
-  ];
-
+    iconHtml = (0, _autoHtml.default)`<img class="inboxsdk__resultsSection_result_icon ${result.iconClass || ''}" src="${result.iconUrl}">`;
+  } else if (result.iconClass) iconHtml = (0, _autoHtml.default)`<div class="${result.iconClass}"></div>`;
+  const labelsHtml = Array.isArray(result.labels) ? result.labels.map(_getLabelHTML).join('') : '';
+  const rowArr = ['<td class="xY PF"></td>', '<td class="xY oZ-x3"></td>', '<td class="xY WA">', iconHtml, '</td>', '<td class="xY WA"></td>', '<td class="xY yX inboxsdk__resultsSection_result_title">', '<div class="yW">', '<span ' + (result.isRead ? '' : 'class="zF"') + '>', (0, _escape.default)(result.title), '</span>', '</div>', '</td>', '<td class="xY a4W">', '<div class="xS">', '<div class="xT">', '<div class="yi">', labelsHtml, '</div>', '<div class="y6">', '<span class="bog">', result.isRead ? '' : '<b>', (0, _escape.default)(result.body || ''), result.isRead ? '' : '</b>', '</span>', '</div>', '</div>', '</div>', '</td>', '<td class="xY xW">', '<span' + (result.isRead ? '' : ' class="bq3"') + '>', (0, _escape.default)(result.shortDetailText || ''), '</span>', '</td>'];
   return rowArr.join('');
 }
-
 function _getLabelHTML(label) {
   const backgroundColor = label.backgroundColor || 'rgb(194, 194, 194)'; //grey
   const foregroundColor = label.foregroundColor || 'rgb(255, 255, 255)'; //white
   const maxWidth = label.maxWidth || '90px';
-
-  const retArray = [
-    autoHtml`<div class="ar as" data-tooltip="${label.title}">
+  const retArray = [(0, _autoHtml.default)`<div class="ar as" data-tooltip="${label.title}">
       <div class="at" style="background-color: ${backgroundColor}; border-color: ${backgroundColor};">
-        <div class="au" style="border-color: ${backgroundColor};">`,
-  ];
-
-  const styleHtml = label.iconBackgroundColor
-    ? autoHtml`style="background-color: ${label.iconBackgroundColor}"`
-    : '';
-
+        <div class="au" style="border-color: ${backgroundColor};">`];
+  const styleHtml = label.iconBackgroundColor ? (0, _autoHtml.default)`style="background-color: ${label.iconBackgroundColor}"` : '';
   if (label.iconHtml != null) {
-    retArray.push(
-      autoHtml`<div class="inboxsdk__resultsSection_label_icon inboxsdk__resultsSection_label_iconHtml"
-        ${{ __html: styleHtml }}
+    retArray.push((0, _autoHtml.default)`<div class="inboxsdk__resultsSection_label_icon inboxsdk__resultsSection_label_iconHtml"
+        ${{
+      __html: styleHtml
+    }}
       >
-        ${{ __html: label.iconHtml }}
-      </div>`
-    );
+        ${{
+      __html: label.iconHtml
+    }}
+      </div>`);
   } else if (label.iconClass) {
-    retArray.push(
-      autoHtml`<div
+    retArray.push((0, _autoHtml.default)`<div
         class="inboxsdk__resultsSection_label_icon ${label.iconClass || ''}"
-        ${{ __html: styleHtml }}
+        ${{
+      __html: styleHtml
+    }}
         >
-      </div>`
-    );
+      </div>`);
   } else if (label.iconUrl) {
-    retArray.push(
-      autoHtml`<img
+    retArray.push((0, _autoHtml.default)`<img
         class="inboxsdk__resultsSection_label_icon"
-        ${{ __html: styleHtml }}
-        src="${label.iconUrl}" />`
-    );
+        ${{
+      __html: styleHtml
+    }}
+        src="${label.iconUrl}" />`);
   }
-
-  retArray.push(
-    autoHtml`
+  retArray.push((0, _autoHtml.default)`
           <div class="av" style="color: ${foregroundColor}; max-width: ${maxWidth}">
             ${label.title}
           </div>
         </div>
       </div>
     </div>
-    `
-  );
-
+    `);
   return retArray.join('');
 }
-
-export default defn(module, GmailCollapsibleSectionView);
+var _default = (0, _ud.defn)(module, GmailCollapsibleSectionView);
+exports.default = _default;