@inboxsdk/core 1.1.6 → 1.1.8

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

@@ -1,548 +1,714 @@
-"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"));
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import escape from 'lodash/escape';
+import * as Kefir from 'kefir';
+import kefirBus 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';
 class GmailCollapsibleSectionView {
-  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 = (0, _kefirBus.default)();
-    this._isReadyDeferred = new _defer.default();
-  }
-  destroy() {
-    if (this._element) this._element.remove();
-    if (this._eventStream) this._eventStream.end();
-    if (this._headerElement) this._headerElement.remove();
-    if (this._titleElement) this._titleElement.remove();
-    if (this._bodyElement) this._bodyElement.remove();
-    if (this._contentElement) this._contentElement.remove();
-    if (this._tableBodyElement) this._tableBodyElement.remove();
-    if (this._collapsedContainer) this._collapsedContainer.remove();
-    if (this._messageElement) this._messageElement.remove();
-    if (this._inboxDropdownButtonView) this._inboxDropdownButtonView.destroy();
-    if (this._dropdownViewController) this._dropdownViewController.destroy();
-  }
-  getElement() {
-    const element = this._element;
-    if (!element) throw new Error('tried to access element that does not exist');
-    return element;
-  }
-  getEventStream() {
-    return this._eventStream;
-  }
-  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) {
-    if (!this._isCollapsible) {
-      return;
-    }
-    this._isReadyDeferred.promise.then(() => {
-      if (value) this._collapse();else this._expand();
-    });
-  }
-  _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);
-    this._updateSummaryText(collapsibleSectionDescriptor);
-    this._updateDropdown(collapsibleSectionDescriptor);
-    this._updateContentElement(collapsibleSectionDescriptor);
-    this._updateTableRows(collapsibleSectionDescriptor);
-    this._updateMessageElement(collapsibleSectionDescriptor);
-    this._updateFooter(collapsibleSectionDescriptor);
-    this._collapsibleSectionDescriptor = collapsibleSectionDescriptor;
-  }
-  _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');
-    this._setupHeader(collapsibleSectionDescriptor);
-    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');
-    bodyContentsElement.appendChild(contentElement);
-    const messageElement = this._messageElement = document.createElement('div');
-    bodyContentsElement.appendChild(messageElement);
-    const tableBodyElement = this._tableBodyElement = document.createElement('div');
-    bodyContentsElement.appendChild(tableBodyElement);
-    this._setupFooter(collapsibleSectionDescriptor);
-    if (this._isCollapsible && this._titleElement) {
-      _kefir.default.fromEvents(this._titleElement, 'click').onValue(() => this._toggleCollapseState());
-    }
-    _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
-    });
-  }
-  _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, 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">', (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) {
-    const footerElement = this._footerElement = document.createElement('div');
-    footerElement.classList.add('inboxsdk__resultsSection_footer');
-    if (this._bodyElement) this._bodyElement.appendChild(footerElement);
-  }
-  _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));
-      this._eventStream.emit({
-        type: 'update',
-        property: 'orderHint'
-      });
-    }
-  }
-  _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) {
-    if (this._collapsibleSectionDescriptor.title !== collapsibleSectionDescriptor.title) {
-      const selector = 'h3 > .Wn';
-      if (this._titleElement) {
-        (0, _querySelectorOrFail.default)(this._titleElement, selector).textContent = collapsibleSectionDescriptor.title;
-      }
-    }
-  }
-  _updateSubtitle(collapsibleSectionDescriptor) {
-    const titleElement = this._titleElement;
-    if (!titleElement) return;
-    let subtitleElement = titleElement.querySelector('.inboxsdk__resultsSection_title_subtitle');
-    if (!collapsibleSectionDescriptor.subtitle) {
-      if (subtitleElement) {
-        subtitleElement.remove();
-      }
-    } else if (this._collapsibleSectionDescriptor.subtitle !== collapsibleSectionDescriptor.subtitle) {
-      if (!subtitleElement) {
-        subtitleElement = document.createElement('span');
-        if (subtitleElement && titleElement) {
-          subtitleElement.classList.add('inboxsdk__resultsSection_title_subtitle');
-          const insertionPoint = titleElement.querySelector('.Wn');
-          if (insertionPoint) {
-            subtitleElement.classList.add('aw5');
-            insertionPoint.appendChild(subtitleElement);
-          }
-        }
-      }
-      subtitleElement.textContent = '(' + collapsibleSectionDescriptor.subtitle + ')';
-    }
-  }
-  _updateSummaryText(collapsibleSectionDescriptor) {
-    const headerElement = this._headerElement;
-    if (!headerElement) return;
-    let summaryTextElement = headerElement.querySelector('.inboxsdk__resultsSection_header_summaryText');
-    if (!collapsibleSectionDescriptor.titleLinkText) {
-      if (summaryTextElement) {
-        summaryTextElement.remove();
-      }
-    } 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.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');
+    _driver;
+    _groupOrderHint;
+    _isReadyDeferred;
+    _isCollapsible;
+    _collapsibleSectionDescriptor = {};
+    _isSearch;
+    _element = null;
+    _headerElement = null;
+    _titleElement = null;
+    _bodyElement = null;
+    _contentElement = null;
+    _tableBodyElement = null;
+    _collapsedContainer = null;
+    _messageElement = null;
+    _footerElement = null;
+    _eventStream;
+    _isCollapsed = false;
+    _inboxDropdownButtonView = null;
+    _dropdownViewController = null;
+    constructor(driver, groupOrderHint, isSearch, isCollapsible) {
+        this._driver = driver;
+        this._isSearch = isSearch;
+        this._groupOrderHint = groupOrderHint;
+        this._isCollapsible = isCollapsible;
+        this._eventStream = kefirBus();
+        this._isReadyDeferred = new defer();
+    }
+    destroy() {
+        if (this._element)
+            this._element.remove();
+        if (this._eventStream)
+            this._eventStream.end();
+        if (this._headerElement)
+            this._headerElement.remove();
+        if (this._titleElement)
+            this._titleElement.remove();
+        if (this._bodyElement)
+            this._bodyElement.remove();
+        if (this._contentElement)
+            this._contentElement.remove();
+        if (this._tableBodyElement)
+            this._tableBodyElement.remove();
+        if (this._collapsedContainer)
+            this._collapsedContainer.remove();
+        if (this._messageElement)
+            this._messageElement.remove();
+        if (this._inboxDropdownButtonView)
+            this._inboxDropdownButtonView.destroy();
+        if (this._dropdownViewController)
+            this._dropdownViewController.destroy();
+    }
+    getElement() {
+        const element = this._element;
+        if (!element)
+            throw new Error('tried to access element that does not exist');
+        return element;
+    }
+    getEventStream() {
+        return this._eventStream;
+    }
+    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) {
+        if (!this._isCollapsible) {
+            return;
+        }
+        this._isReadyDeferred.promise.then(() => {
+            if (value)
+                this._collapse();
+            else
+                this._expand();
         });
-        const insertionPoint = headerElement.querySelector('.Cr');
-        if (insertionPoint) insertionPoint.insertAdjacentElement('afterbegin', summaryTextElement);
-      }
-      (0, _querySelectorOrFail.default)(summaryTextElement, '.Dj > *').textContent = collapsibleSectionDescriptor.titleLinkText;
-    }
-  }
-  _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) {
-      if (!this._inboxDropdownButtonView || !this._dropdownViewController) {
-        const inboxDropdownButtonView = this._inboxDropdownButtonView = new _inboxDropdownButtonView.default();
-        this._dropdownViewController = new _dropdownButtonViewController.default({
-          buttonView: inboxDropdownButtonView,
-          dropdownViewDriverClass: _gmailDropdownView.default,
-          dropdownShowFunction: collapsibleSectionDescriptor.onDropdownClick
+    }
+    _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);
+        this._updateSummaryText(collapsibleSectionDescriptor);
+        this._updateDropdown(collapsibleSectionDescriptor);
+        this._updateContentElement(collapsibleSectionDescriptor);
+        this._updateTableRows(collapsibleSectionDescriptor);
+        this._updateMessageElement(collapsibleSectionDescriptor);
+        this._updateFooter(collapsibleSectionDescriptor);
+        this._collapsibleSectionDescriptor = collapsibleSectionDescriptor;
+    }
+    _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');
+        this._setupHeader(collapsibleSectionDescriptor);
+        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'));
+        bodyContentsElement.appendChild(contentElement);
+        const messageElement = (this._messageElement =
+            document.createElement('div'));
+        bodyContentsElement.appendChild(messageElement);
+        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.fromEvents(element, 'removeCollapsedContainer').onValue(() => this._destroyCollapsedContainer());
+        Kefir.fromEvents(element, 'readdToCollapsedContainer').onValue(() => this._addToCollapsedContainer());
+        this._eventStream.emit({
+            type: 'update',
+            property: 'orderHint',
+            sectionDescriptor: collapsibleSectionDescriptor,
         });
+    }
+    _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, 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('');
+        const floatRightElement = document.createElement('div');
+        floatRightElement.classList.add('Cr');
+        if (this._isSearch)
+            floatRightElement.classList.add('Wg');
+        headerElement.appendChild(titleElement);
+        headerElement.appendChild(floatRightElement);
+    }
+    _setupFooter(collapsibleSectionDescriptor) {
+        const footerElement = (this._footerElement = document.createElement('div'));
+        footerElement.classList.add('inboxsdk__resultsSection_footer');
+        if (this._bodyElement)
+            this._bodyElement.appendChild(footerElement);
+    }
+    _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));
+            this._eventStream.emit({
+                type: 'update',
+                property: 'orderHint',
+            });
+        }
+    }
+    _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) {
+        if (this._collapsibleSectionDescriptor.title !==
+            collapsibleSectionDescriptor.title) {
+            const selector = 'h3 > .Wn';
+            if (this._titleElement) {
+                querySelector(this._titleElement, selector).textContent =
+                    collapsibleSectionDescriptor.title;
+            }
+        }
+    }
+    _updateSubtitle(collapsibleSectionDescriptor) {
+        const titleElement = this._titleElement;
+        if (!titleElement)
+            return;
+        let subtitleElement = titleElement.querySelector('.inboxsdk__resultsSection_title_subtitle');
+        if (!collapsibleSectionDescriptor.subtitle) {
+            if (subtitleElement) {
+                subtitleElement.remove();
+            }
+        }
+        else if (this._collapsibleSectionDescriptor.subtitle !==
+            collapsibleSectionDescriptor.subtitle) {
+            if (!subtitleElement) {
+                subtitleElement = document.createElement('span');
+                if (subtitleElement && titleElement) {
+                    subtitleElement.classList.add('inboxsdk__resultsSection_title_subtitle');
+                    const insertionPoint = titleElement.querySelector('.Wn');
+                    if (insertionPoint) {
+                        subtitleElement.classList.add('aw5');
+                        insertionPoint.appendChild(subtitleElement);
+                    }
+                }
+            }
+            subtitleElement.textContent =
+                '(' + collapsibleSectionDescriptor.subtitle + ')';
+        }
+    }
+    _updateSummaryText(collapsibleSectionDescriptor) {
         const headerElement = this._headerElement;
-        if (headerElement) {
-          const childElement = headerElement.querySelector('.Cr');
-          if (childElement) childElement.appendChild(inboxDropdownButtonView.getElement());
-        }
-      } else if (collapsibleSectionDescriptor.onDropdownClick !== this._collapsibleSectionDescriptor.onDropdownClick) {
-        if (this._dropdownViewController) this._dropdownViewController.setDropdownShowFunction(collapsibleSectionDescriptor.onDropdownClick);
-      }
-    }
-  }
-  _updateContentElement(collapsibleSectionDescriptor) {
-    const contentElement = this._contentElement;
-    if (!contentElement) return;
-    contentElement.innerHTML = '';
-    if (collapsibleSectionDescriptor.contentElement) {
-      contentElement.style.display = '';
-      contentElement.appendChild(collapsibleSectionDescriptor.contentElement);
-    } else {
-      contentElement.style.display = 'none';
-    }
-  }
-  _updateTableRows(collapsibleSectionDescriptor) {
-    const {
-      tableRows
-    } = collapsibleSectionDescriptor;
-    const tableBodyElement = this._tableBodyElement;
-    if (!tableBodyElement) return;
-    tableBodyElement.innerHTML = '';
-    if (!tableRows || tableRows.length === 0) {
-      tableBodyElement.style.display = 'none';
-    } else {
-      tableBodyElement.style.display = '';
-      this._renderTable(tableRows);
-    }
-  }
-  _renderTable(tableRows) {
-    const tableElement = document.createElement('table');
-    tableElement.setAttribute('class', 'F cf zt');
-    tableElement.innerHTML = _getTableHTML();
-    if (this._tableBodyElement) this._tableBodyElement.appendChild(tableElement);
-    const tbody = tableElement.querySelector('tbody');
-    const eventStream = this._eventStream;
-    tableRows.forEach(result => {
-      const rowElement = document.createElement('tr');
-      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.default.fromEvents(rowElement, 'click').map(() => ({
-        eventName: 'rowClicked',
-        rowDescriptor: result
-      })));
-    });
-  }
-  _updateMessageElement(collapsibleSectionDescriptor) {
-    const messageElement = this._messageElement;
-    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) {
-      this._showEmptyMessage();
-    }
-  }
-  _showLoadingMessage() {
-    const messageElement = this._messageElement;
-    if (messageElement) {
-      messageElement.setAttribute('class', 'TB TC inboxsdk__resultsSection_loading');
-      messageElement.innerHTML = 'loading...'; //TODO: localize
-      messageElement.style.display = '';
-    }
-  }
-  _showEmptyMessage() {
-    const messageElement = this._messageElement;
-    if (messageElement) {
-      messageElement.setAttribute('class', 'TB TC');
-      messageElement.innerHTML = 'No results found'; //TODO: localize
-      messageElement.style.display = '';
-    }
-  }
-  _updateFooter(collapsibleSectionDescriptor) {
-    const footerElement = this._footerElement;
-    if (!footerElement) return;
-    footerElement.innerHTML = '';
-    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.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();
-    } else {
-      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 = (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'
-    });
-  }
-  _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 = (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'
-    });
-  }
-  _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)) {
-      //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');
-      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);
-      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')) {
-      return;
-    }
-    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));
-  }
-  _pulloutSectionsFromCollapsedContainer(container) {
-    const prependedChildren = Array.from(container.children[0].children);
-    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);
-      return;
-    }
-    let collapsedContainer;
-    let isPrepend;
-    if (this._isCollapsedContainer(element.previousElementSibling)) {
-      isPrepend = false;
-      collapsedContainer = element.previousElementSibling;
-    } else if (this._isCollapsedContainer(element.nextElementSibling)) {
-      isPrepend = true;
-      collapsedContainer = element.nextElementSibling;
-    } else {
-      isPrepend = true;
-      this._createCollapsedContainer();
-      collapsedContainer = this._collapsedContainer;
-    }
-    if (isPrepend && collapsedContainer) {
-      collapsedContainer.children[0].insertBefore(element, collapsedContainer.children[0].firstElementChild);
-    } else if (collapsedContainer) {
-      collapsedContainer.children[0].appendChild(element);
-    }
-  }
-  _isCollapsedContainer(element) {
-    return element && element.classList.contains('inboxsdk__results_collapsedContainer');
-  }
-  _recollapse(children) {
-    children.forEach(child => {
-      const removeEvent = document.createEvent('CustomEvent');
-      removeEvent.initCustomEvent('removeCollapsedContainer', false, false, null);
-      child.dispatchEvent(removeEvent);
-      const readdEvent = document.createEvent('CustomEvent');
-      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 element = this._element;
-    if (element) element.insertAdjacentElement('afterend', collapsedContainer);
-  }
-  _destroyCollapsedContainer() {
-    if (this._collapsedContainer) {
-      this._collapsedContainer.remove();
-      this._collapsedContainer = null;
-    }
-  }
+        if (!headerElement)
+            return;
+        let summaryTextElement = headerElement.querySelector('.inboxsdk__resultsSection_header_summaryText');
+        if (!collapsibleSectionDescriptor.titleLinkText) {
+            if (summaryTextElement) {
+                summaryTextElement.remove();
+            }
+        }
+        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,
+                })));
+                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.insertAdjacentElement('afterbegin', summaryTextElement);
+            }
+            querySelector(summaryTextElement, '.Dj > *').textContent =
+                collapsibleSectionDescriptor.titleLinkText;
+        }
+    }
+    _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) {
+            if (!this._inboxDropdownButtonView || !this._dropdownViewController) {
+                const inboxDropdownButtonView = (this._inboxDropdownButtonView =
+                    new InboxDropdownButtonView());
+                this._dropdownViewController = new DropdownButtonViewController({
+                    buttonView: inboxDropdownButtonView,
+                    dropdownViewDriverClass: GmailDropdownView,
+                    dropdownShowFunction: collapsibleSectionDescriptor.onDropdownClick,
+                });
+                const headerElement = this._headerElement;
+                if (headerElement) {
+                    const childElement = headerElement.querySelector('.Cr');
+                    if (childElement)
+                        childElement.appendChild(inboxDropdownButtonView.getElement());
+                }
+            }
+            else if (collapsibleSectionDescriptor.onDropdownClick !==
+                this._collapsibleSectionDescriptor.onDropdownClick) {
+                if (this._dropdownViewController)
+                    this._dropdownViewController.setDropdownShowFunction(collapsibleSectionDescriptor.onDropdownClick);
+            }
+        }
+    }
+    _updateContentElement(collapsibleSectionDescriptor) {
+        const contentElement = this._contentElement;
+        if (!contentElement)
+            return;
+        contentElement.innerHTML = '';
+        if (collapsibleSectionDescriptor.contentElement) {
+            contentElement.style.display = '';
+            contentElement.appendChild(collapsibleSectionDescriptor.contentElement);
+        }
+        else {
+            contentElement.style.display = 'none';
+        }
+    }
+    _updateTableRows(collapsibleSectionDescriptor) {
+        const { tableRows } = collapsibleSectionDescriptor;
+        const tableBodyElement = this._tableBodyElement;
+        if (!tableBodyElement)
+            return;
+        tableBodyElement.innerHTML = '';
+        if (!tableRows || tableRows.length === 0) {
+            tableBodyElement.style.display = 'none';
+        }
+        else {
+            tableBodyElement.style.display = '';
+            this._renderTable(tableRows);
+        }
+    }
+    _renderTable(tableRows) {
+        const tableElement = document.createElement('table');
+        tableElement.setAttribute('class', 'F cf zt');
+        tableElement.innerHTML = _getTableHTML();
+        if (this._tableBodyElement)
+            this._tableBodyElement.appendChild(tableElement);
+        const tbody = tableElement.querySelector('tbody');
+        const eventStream = this._eventStream;
+        tableRows.forEach((result) => {
+            const rowElement = document.createElement('tr');
+            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,
+            })));
+        });
+    }
+    _updateMessageElement(collapsibleSectionDescriptor) {
+        const messageElement = this._messageElement;
+        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) {
+            this._showEmptyMessage();
+        }
+    }
+    _showLoadingMessage() {
+        const messageElement = this._messageElement;
+        if (messageElement) {
+            messageElement.setAttribute('class', 'TB TC inboxsdk__resultsSection_loading');
+            messageElement.innerHTML = 'loading...'; //TODO: localize
+            messageElement.style.display = '';
+        }
+    }
+    _showEmptyMessage() {
+        const messageElement = this._messageElement;
+        if (messageElement) {
+            messageElement.setAttribute('class', 'TB TC');
+            messageElement.innerHTML = 'No results found'; //TODO: localize
+            messageElement.style.display = '';
+        }
+    }
+    _updateFooter(collapsibleSectionDescriptor) {
+        const footerElement = this._footerElement;
+        if (!footerElement)
+            return;
+        footerElement.innerHTML = '';
+        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,
+                };
+            }));
+            footerElement.appendChild(footerLinkElement);
+            footerElement.insertAdjacentHTML('beforeend', '<br style="clear:both;">');
+        }
+    }
+    _toggleCollapseState() {
+        if (this._isCollapsed) {
+            this._expand();
+        }
+        else {
+            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);
+            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',
+        });
+    }
+    _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);
+            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',
+        });
+    }
+    _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)) {
+            //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');
+            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);
+            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')) {
+            return;
+        }
+        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));
+    }
+    _pulloutSectionsFromCollapsedContainer(container) {
+        const prependedChildren = Array.from(container.children[0].children);
+        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);
+            return;
+        }
+        let collapsedContainer;
+        let isPrepend;
+        if (this._isCollapsedContainer(element.previousElementSibling)) {
+            isPrepend = false;
+            collapsedContainer = element.previousElementSibling;
+        }
+        else if (this._isCollapsedContainer(element.nextElementSibling)) {
+            isPrepend = true;
+            collapsedContainer = element.nextElementSibling;
+        }
+        else {
+            isPrepend = true;
+            this._createCollapsedContainer();
+            collapsedContainer = this._collapsedContainer;
+        }
+        if (isPrepend && collapsedContainer) {
+            collapsedContainer.children[0].insertBefore(element, collapsedContainer.children[0].firstElementChild);
+        }
+        else if (collapsedContainer) {
+            collapsedContainer.children[0].appendChild(element);
+        }
+    }
+    _isCollapsedContainer(element) {
+        return (element &&
+            element.classList.contains('inboxsdk__results_collapsedContainer'));
+    }
+    _recollapse(children) {
+        children.forEach((child) => {
+            const removeEvent = document.createEvent('CustomEvent');
+            removeEvent.initCustomEvent('removeCollapsedContainer', false, false, null);
+            child.dispatchEvent(removeEvent);
+            const readdEvent = document.createEvent('CustomEvent');
+            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 element = this._element;
+        if (element)
+            element.insertAdjacentElement('afterend', collapsedContainer);
+    }
+    _destroyCollapsedContainer() {
+        if (this._collapsedContainer) {
+            this._collapsedContainer.remove();
+            this._collapsedContainer = null;
+        }
+    }
 }
 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 = (0, _autoHtml.default)`<div class="inboxsdk__resultsSection_result_icon inboxsdk__resultsSection_result_iconHtml">
+    let iconHtml = '';
+    if (result.iconHtml != null) {
+        iconHtml = autoHtml `<div class="inboxsdk__resultsSection_result_icon inboxsdk__resultsSection_result_iconHtml">
         ${{
-      __html: result.iconHtml
-    }}
+            __html: result.iconHtml,
+        }}
       </div>`;
-  } else if (result.iconUrl) {
-    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('');
+    }
+    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>',
+    ];
+    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 = [(0, _autoHtml.default)`<div class="ar as" data-tooltip="${label.title}">
+    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}">
       <div class="at" style="background-color: ${backgroundColor}; border-color: ${backgroundColor};">
-        <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((0, _autoHtml.default)`<div class="inboxsdk__resultsSection_label_icon inboxsdk__resultsSection_label_iconHtml"
+        <div class="au" style="border-color: ${backgroundColor};">`,
+    ];
+    const styleHtml = label.iconBackgroundColor
+        ? autoHtml `style="background-color: ${label.iconBackgroundColor}"`
+        : '';
+    if (label.iconHtml != null) {
+        retArray.push(autoHtml `<div class="inboxsdk__resultsSection_label_icon inboxsdk__resultsSection_label_iconHtml"
         ${{
-      __html: styleHtml
-    }}
+            __html: styleHtml,
+        }}
       >
         ${{
-      __html: label.iconHtml
-    }}
+            __html: label.iconHtml,
+        }}
       </div>`);
-  } else if (label.iconClass) {
-    retArray.push((0, _autoHtml.default)`<div
+    }
+    else if (label.iconClass) {
+        retArray.push(autoHtml `<div
         class="inboxsdk__resultsSection_label_icon ${label.iconClass || ''}"
         ${{
-      __html: styleHtml
-    }}
+            __html: styleHtml,
+        }}
         >
       </div>`);
-  } else if (label.iconUrl) {
-    retArray.push((0, _autoHtml.default)`<img
+    }
+    else if (label.iconUrl) {
+        retArray.push(autoHtml `<img
         class="inboxsdk__resultsSection_label_icon"
         ${{
-      __html: styleHtml
-    }}
+            __html: styleHtml,
+        }}
         src="${label.iconUrl}" />`);
-  }
-  retArray.push((0, _autoHtml.default)`
+    }
+    retArray.push(autoHtml `
           <div class="av" style="color: ${foregroundColor}; max-width: ${maxWidth}">
             ${label.title}
           </div>
@@ -550,7 +716,6 @@ function _getLabelHTML(label) {
       </div>
     </div>
     `);
-  return retArray.join('');
+    return retArray.join('');
 }
-var _default = (0, _ud.defn)(module, GmailCollapsibleSectionView);
-exports.default = _default;
+export default GmailCollapsibleSectionView;