@inboxsdk/core 0.2.28-alpha.0 → 0.2.28-alpha.2

package/src/platform-implementation-js/dom-driver/gmail/views/native-gmail-nav-item-view.js

@@ -0,0 +1,360 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+
+import getInsertBeforeElement from '../../../lib/dom/get-insert-before-element';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import makeMutationObserverStream from '../../../lib/dom/make-mutation-observer-stream';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import findParent from '../../../../common/find-parent';
+
+import GmailElementGetter from '../gmail-element-getter';
+
+import GmailNavItemView, {
+  getLeftIndentationPaddingValue,
+} from './gmail-nav-item-view';
+
+import type GmailDriver from '../gmail-driver';
+
+export default class NativeGmailNavItemView {
+  _driver: GmailDriver;
+  _element: HTMLElement;
+  _navItemName: string;
+  _activeMarkerElement: ?HTMLElement = null;
+  _eventStream: Bus<any>;
+  _elementBus: Bus<HTMLElement>;
+  _elementStream: Kefir.Observable<HTMLElement>;
+  _isActive: boolean = false;
+  _itemContainerElement: ?HTMLElement = null;
+
+  constructor(
+    driver: GmailDriver,
+    nativeElement: HTMLElement,
+    navItemName: string
+  ) {
+    this._driver = driver;
+    this._element = nativeElement;
+    this._eventStream = kefirBus();
+    this._elementBus = kefirBus();
+    this._elementStream = this._elementBus.toProperty(() => this._element);
+
+    this._navItemName = navItemName;
+
+    // gmail v2 continually replaces the native nav elements
+    // so we have to monitor for this replacement and then
+    // readd any sub nav items
+    const parentElement = this._element.parentElement;
+    if (parentElement) {
+      makeMutationObserverChunkedStream((parentElement: any), {
+        childList: true,
+      })
+        .map(() =>
+          parentElement.querySelector(`.aim a[href*="#${this._navItemName}"]`)
+        )
+        .filter(Boolean)
+        .map((link) => findParent(link, (el) => el.classList.contains('aim')))
+        .filter(Boolean)
+        .filter((newElement) => newElement !== this._element)
+        .onValue((newElement) => {
+          if (newElement) {
+            const currentContainerElement = this._itemContainerElement;
+            if (currentContainerElement) {
+              //if we have an existing container then remove it
+              //so a new one can be created and get things back into a good state
+              currentContainerElement.remove();
+              this._itemContainerElement = null;
+            }
+            this._elementBus.emit(newElement);
+          }
+        });
+    }
+
+    this._elementStream.onValue((element) => {
+      this._element = element;
+      this._monitorElementForActiveChanges();
+      this.setActive(this._isActive);
+    });
+  }
+
+  destroy() {
+    this._element.classList.remove('inboxsdk__navItem_claimed');
+    this._eventStream.end();
+    this._elementBus.end();
+    if (this._activeMarkerElement) this._activeMarkerElement.remove();
+    if (this._itemContainerElement) this._itemContainerElement.remove();
+  }
+
+  getElement(): HTMLElement {
+    return this._element;
+  }
+
+  getEventStream(): Kefir.Observable<Object> {
+    return this._eventStream;
+  }
+
+  addNavItem(orderGroup: number, navItemDescriptor: Object): GmailNavItemView {
+    const gmailNavItemView = new GmailNavItemView(this._driver, orderGroup, 2);
+
+    Kefir.merge([
+      gmailNavItemView
+        .getEventStream()
+        .filter((event) => event.eventName === 'orderChanged'),
+
+      this._elementStream,
+    ]).onValue(() => this._addNavItemElement(gmailNavItemView));
+
+    gmailNavItemView.setNavItemDescriptor(navItemDescriptor);
+
+    return gmailNavItemView;
+  }
+
+  setActive(value: boolean) {
+    this._isActive = value;
+    const toElement = querySelector(this._element, '.TO');
+    if (value) {
+      this._element.classList.add('ain');
+      toElement.classList.add('nZ');
+      toElement.classList.add('aiq');
+    } else {
+      this._element.classList.remove('ain');
+      toElement.classList.remove('nZ');
+      toElement.classList.remove('aiq');
+    }
+
+    this._setHeights();
+  }
+
+  toggleCollapse() {
+    this._toggleCollapse();
+  }
+
+  setCollapsed(value: string) {
+    localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] = value;
+
+    if (!this._element.querySelector('.inboxsdk__expando')) {
+      return;
+    }
+
+    if (value) {
+      this._collapse();
+    } else {
+      this._expand();
+    }
+  }
+
+  remove() {
+    /* do nothing */
+  }
+
+  _monitorElementForActiveChanges() {
+    this._element.classList.add('inboxsdk__navItem_claimed');
+    const element = this._element;
+    const classChangeStream = makeMutationObserverChunkedStream(element, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+      .takeUntilBy(this._eventStream.filter(() => false).beforeEnd(() => null))
+      .toProperty(() => [])
+      .map(() => element);
+
+    classChangeStream
+      .filter((el) => el.classList.contains('ain'))
+      .onValue(() => this._createActiveMarkerElement());
+
+    classChangeStream
+      .filter((el) => !el.classList.contains('ain'))
+      .onValue(() => this._removeActiveMarkerElement());
+  }
+
+  _addNavItemElement(gmailNavItemView: GmailNavItemView) {
+    const itemContainerElement = this._getItemContainerElement();
+
+    const insertBeforeElement = getInsertBeforeElement(
+      gmailNavItemView.getElement(),
+      itemContainerElement.children,
+      ['data-group-order-hint', 'data-order-hint', 'data-insertion-order-hint']
+    );
+    itemContainerElement.insertBefore(
+      gmailNavItemView.getElement(),
+      insertBeforeElement
+    );
+
+    const element = gmailNavItemView.getElement();
+    querySelector(element, '.TN').style.marginLeft =
+      getLeftIndentationPaddingValue() + 'px';
+
+    this._setHeights();
+  }
+
+  _getItemContainerElement(): HTMLElement {
+    let itemContainerElement = this._itemContainerElement;
+    if (!itemContainerElement) {
+      itemContainerElement = this._itemContainerElement =
+        this._element.querySelector('.inboxsdk__navItem_container');
+      if (!itemContainerElement) {
+        itemContainerElement = this._createItemContainerElement();
+        this._createExpando();
+      }
+    }
+
+    return itemContainerElement;
+  }
+
+  _createItemContainerElement(): HTMLElement {
+    const itemContainerElement = (this._itemContainerElement =
+      document.createElement('div'));
+    itemContainerElement.classList.add('inboxsdk__navItem_container');
+
+    this._element.appendChild(itemContainerElement);
+    return itemContainerElement;
+  }
+
+  _createExpando() {
+    const link = this._element.querySelector('a');
+
+    const expandoElement = document.createElement('div');
+    expandoElement.setAttribute('class', 'TH aih J-J5-Ji inboxsdk__expando');
+    expandoElement.setAttribute('role', 'link');
+    expandoElement.title = `Expand ${
+      link ? link.title || link.textContent : ''
+    }`;
+
+    expandoElement.addEventListener(
+      'click',
+      (e: MouseEvent) => {
+        this._toggleCollapse();
+        e.stopPropagation();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      },
+      true
+    );
+
+    const insertionPoint = this._element.querySelector('.TN');
+    if (insertionPoint) {
+      (insertionPoint: any).insertAdjacentElement('afterbegin', expandoElement);
+    }
+
+    if (
+      localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] ===
+      'collapsed'
+    ) {
+      this._collapse();
+    } else {
+      this._expand();
+    }
+  }
+
+  _toggleCollapse() {
+    if (!this._element.querySelector('.inboxsdk__expando')) {
+      if (
+        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] ===
+        'collapsed'
+      ) {
+        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] =
+          'expanded';
+      } else {
+        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] =
+          'collapsed';
+      }
+      return;
+    }
+
+    if (
+      localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] ===
+      'collapsed'
+    ) {
+      this._expand();
+    } else {
+      this._collapse();
+    }
+  }
+
+  _collapse() {
+    const expandoElement = querySelector(this._element, '.inboxsdk__expando');
+    expandoElement.classList.remove('aih');
+    expandoElement.classList.add('aii');
+
+    if (this._itemContainerElement)
+      this._itemContainerElement.style.display = 'none';
+
+    localStorage.setItem(
+      'inboxsdk__nativeNavItem__state_' + this._navItemName,
+      'collapsed'
+    );
+
+    this._eventStream.emit({
+      eventName: 'collapsed',
+    });
+
+    this._setHeights();
+  }
+
+  _expand() {
+    const expandoElement = querySelector(this._element, '.inboxsdk__expando');
+    expandoElement.classList.add('aih');
+    expandoElement.classList.remove('aii');
+
+    if (this._itemContainerElement)
+      this._itemContainerElement.style.display = '';
+
+    localStorage.setItem(
+      'inboxsdk__nativeNavItem__state_' + this._navItemName,
+      'expanded'
+    );
+
+    this._eventStream.emit({
+      eventName: 'expanded',
+    });
+
+    this._setHeights();
+  }
+
+  _isExpanded(): boolean {
+    return !!this._element.querySelector('.inboxsdk__expando.aih');
+  }
+
+  _setHeights() {
+    const toElement = querySelector(this._element, '.TO');
+
+    if (this._element.classList.contains('ain') && this._itemContainerElement) {
+      this._element.style.height = '';
+
+      const totalHeight = this._element.clientHeight;
+      const itemHeight = toElement.clientHeight;
+
+      this._element.style.height = itemHeight + 'px';
+      this._element.style.overflow = 'visible';
+      this._element.style.marginBottom = totalHeight - itemHeight + 'px';
+    } else {
+      this._element.style.height = '';
+      this._element.style.overflow = '';
+      this._element.style.marginBottom = '';
+    }
+  }
+
+  _createActiveMarkerElement() {
+    this._removeActiveMarkerElement();
+
+    const activeMarkerElement = (this._activeMarkerElement =
+      document.createElement('div'));
+    activeMarkerElement.classList.add('inboxsdk__navItem_marker');
+    activeMarkerElement.classList.add('ain');
+    activeMarkerElement.innerHTML = '&nbsp;';
+
+    this._element.insertBefore(
+      activeMarkerElement,
+      this._element.firstElementChild
+    );
+  }
+
+  _removeActiveMarkerElement() {
+    const activeMarkerElement = this._activeMarkerElement;
+    if (activeMarkerElement) {
+      activeMarkerElement.remove();
+      this._activeMarkerElement = null;
+    }
+  }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-color-classes.d.ts

@@ -7,3 +7,4 @@ declare const ButtonColorClasses: {
     [name: string]: ButtonColors;
 };
 export default ButtonColorClasses;
+//# sourceMappingURL=button-color-classes.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-color-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-color-classes.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-color-classes.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,CAAA;CAoCvD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-view.d.ts

@@ -58,3 +58,4 @@ export default class ButtonView implements ButtonViewI {
     private _setupKeyboardShortcutEvent;
     private _setupAestheticEvents;
 }
+//# sourceMappingURL=button-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-view.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-view.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAGhF,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,eAAe,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,sBAAsB,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,YAAW,WAAW;IACpD,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,aAAa,CAA8C;IACnE,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,uBAAuB,CAA4C;IAC3E,OAAO,CAAC,YAAY,CAAgB;gBAEjB,OAAO,EAAE,iBAAiB;IA0BtC,OAAO;IAKP,UAAU,IAAI,WAAW;IAGzB,cAAc,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;IAI5C,QAAQ;IAKR,UAAU;IAKV,QAAQ,CAAC,SAAS,EAAE,MAAM;IAI1B,WAAW,CAAC,SAAS,EAAE,MAAM;IAI7B,aAAa;IAIb,UAAU,CAAC,KAAK,EAAE,OAAO;IAIzB,SAAS,IAAI,OAAO;IAIpB,MAAM,CAAC,OAAO,EAAE,GAAG;IAiC1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,kBAAkB;IA0B1B,OAAO,CAAC,qBAAqB;IA2B7B,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,iBAAiB;IA6CzB,OAAO,CAAC,2BAA2B;IAuBnC,OAAO,CAAC,qBAAqB;CAyB9B"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-accessory-button-view.d.ts

@@ -15,3 +15,4 @@ export default class CreateAccessoryButtonView implements ButtonViewI {
     private _setupElement;
     private _setupEventStream;
 }
+//# sourceMappingURL=create-accessory-button-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-accessory-button-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-accessory-button-view.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-accessory-button-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,MAAM,CAAC,OAAO,OAAO,yBAA0B,YAAW,WAAW;IACnE,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,QAAQ,CAAkB;;IAO3B,MAAM;IAIN,UAAU;IAIV,OAAO;IAMP,UAAU,IAAI,WAAW;IAIzB,cAAc,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;IAI5C,QAAQ;IAKR,UAAU;IAKjB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,iBAAiB;CAe1B"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-parent-accessory-button-view.d.ts

@@ -15,3 +15,4 @@ export default class CreateParentAccessoryButtonView implements ButtonViewI {
     private _setupElement;
     private _setupEventStream;
 }
+//# sourceMappingURL=create-parent-accessory-button-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-parent-accessory-button-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-parent-accessory-button-view.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-parent-accessory-button-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,MAAM,CAAC,OAAO,OAAO,+BAAgC,YAAW,WAAW;IACzE,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,QAAQ,CAAkB;;IAO3B,QAAQ;IAOR,UAAU;IAOV,OAAO;IAMP,UAAU,IAAI,WAAW;IAIzB,cAAc,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;IAI5C,UAAU;IAIV,MAAM;IAIb,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,iBAAiB;CAe1B"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/inbox-dropdown-button-view.js

@@ -0,0 +1,32 @@
+/* @flow */
+
+import GenericButtonView from '../../../../lib/dom/generic-button-view';
+
+export default class InboxDropdownButtonView extends GenericButtonView {
+  constructor() {
+    const element = document.createElement('div');
+    element.setAttribute('class', 'aAE qi J-J5-Ji J-JN-M-I');
+
+    element.innerHTML = '<div class="J-J5-Ji J-JN-M-I-JG">&nbsp;</div>';
+
+    element.addEventListener('mouseenter', function () {
+      element.classList.add('J-JN-M-I-JW');
+    });
+
+    element.addEventListener('mouseleave', function () {
+      element.classList.remove('J-JN-M-I-JW');
+    });
+
+    super(element);
+  }
+
+  activate() {
+    this.getElement().classList.add('J-JN-M-I-JO');
+    this.getElement().classList.add('J-JN-M-I-Kq');
+  }
+
+  deactivate() {
+    this.getElement().classList.remove('J-JN-M-I-JO');
+    this.getElement().classList.remove('J-JN-M-I-Kq');
+  }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/modal-button-view.d.ts

@@ -26,3 +26,4 @@ export default class ModalButtonView implements ButtonViewI {
     private _setEnabled;
     private _setupEventStream;
 }
+//# sourceMappingURL=modal-button-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/modal-button-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-button-view.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/buttons/modal-button-view.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,OAAO,eAAgB,YAAW,WAAW;IACzD,OAAO,CAAC,QAAQ,CAAiD;IACjE,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,UAAU,CAAU;gBAET,OAAO,EAAE,iBAAiB;IActC,OAAO;IAKP,UAAU,IAAI,WAAW;IAGzB,cAAc,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;IAI5C,UAAU,CAAC,KAAK,EAAE,OAAO;IAIzB,MAAM;IAIN,SAAS,IAAI,OAAO;IAI3B,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,iBAAiB;CA4C1B"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-dropdown-button-view.d.ts

@@ -5,3 +5,4 @@ export default class MoreDropdownButtonView extends GenericButtonView {
     activate(): void;
     deactivate(): void;
 }
+//# sourceMappingURL=more-dropdown-button-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-dropdown-button-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-dropdown-button-view.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-dropdown-button-view.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AAExE,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,iBAAiB;IACnE,OAAO,CAAC,SAAS,CAAS;;IA4B1B,QAAQ;IAIR,UAAU;CAIX"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-parent-accessory-button-view.d.ts

@@ -2,3 +2,4 @@ import CreateParentAccessoryButtonView from './create-parent-accessory-button-vi
 export default class MoreParentAccessoryButtonView extends CreateParentAccessoryButtonView {
     constructor();
 }
+//# sourceMappingURL=more-parent-accessory-button-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-parent-accessory-button-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-parent-accessory-button-view.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-parent-accessory-button-view.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,MAAM,uCAAuC,CAAC;AAEpF,MAAM,CAAC,OAAO,OAAO,6BAA8B,SAAQ,+BAA+B;;CASzF"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/gmail-action-button-view.js

@@ -0,0 +1,57 @@
+/* @flow */
+
+import { defn } from 'ud';
+import isEqual from 'lodash/isEqual';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+
+class GmailActionButtonView {
+  _element: HTMLElement;
+  _actionDescriptor: ?Object;
+
+  constructor() {
+    this._element = document.createElement('div');
+    this._element.tabIndex = 0;
+    this._element.setAttribute('role', 'button');
+    this._element.className = 'inboxsdk__gmail_action ';
+    this._element.innerHTML = `
+			<div>
+			</div>`;
+
+    this._actionDescriptor = null;
+  }
+
+  getElement(): HTMLElement {
+    return this._element;
+  }
+
+  updateDescriptor(actionButtonDescriptor: ?Object) {
+    if (!actionButtonDescriptor) {
+      this._actionDescriptor = actionButtonDescriptor;
+      return;
+    }
+
+    if (isEqual(this._actionDescriptor, actionButtonDescriptor)) {
+      return;
+    }
+
+    this._updateTitle(actionButtonDescriptor.title);
+
+    this._element.className =
+      'inboxsdk__gmail_action ' + (actionButtonDescriptor.className || '');
+
+    this._actionDescriptor = actionButtonDescriptor;
+  }
+
+  setOnClick(callback: ?(event: MouseEvent) => void) {
+    (this._element: any).onclick = callback;
+  }
+
+  _updateTitle(title: string) {
+    if (this._actionDescriptor && this._actionDescriptor.title === title) {
+      return;
+    }
+
+    querySelector(this._element, 'div').textContent = title;
+  }
+}
+export default defn(module, GmailActionButtonView);

package/src/platform-implementation-js/dom-driver/gmail/widgets/gmail-dropdown-view.d.ts

@@ -6,3 +6,4 @@ export default class GmailDropdownView {
     getContainerElement(): HTMLElement;
     getContentElement(): HTMLElement;
 }
+//# sourceMappingURL=gmail-dropdown-view.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/widgets/gmail-dropdown-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gmail-dropdown-view.d.ts","sourceRoot":"","sources":["../../../../../../../src/platform-implementation-js/dom-driver/gmail/widgets/gmail-dropdown-view.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,iBAAiB;IACpC,OAAO,CAAC,iBAAiB,CAAc;IACvC,OAAO,CAAC,eAAe,CAAc;;IAc9B,OAAO;IAIP,mBAAmB;IAInB,iBAAiB;CAGzB"}

package/src/platform-implementation-js/dom-driver/gmail/widgets/gmail-label-view.js

@@ -0,0 +1,148 @@
+/* @flow */
+
+import { defn } from 'ud';
+import isEqual from 'lodash/isEqual';
+import updateIcon from '../../../driver-common/update-icon';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+
+class GmailLabelView {
+  _element: HTMLElement;
+  _labelDescriptor: Object;
+  _iconSettings: Object;
+
+  constructor(opts: { classes?: ?(string[]) } = {}) {
+    this._element = document.createElement('div');
+    this._element.className =
+      'inboxsdk__gmail_label ar as ' + (opts.classes || []).join(' ');
+    this._element.innerHTML = `
+			<div class="at">
+				<div class="au">
+					<div class="av"></div>
+				</div>
+			</div>`;
+
+    this._labelDescriptor = {};
+    this._iconSettings = {};
+  }
+
+  getElement(): HTMLElement {
+    return this._element;
+  }
+
+  updateLabelDescriptor(labelDescriptor: ?Object) {
+    this._handleNewLabelDescriptor(labelDescriptor);
+  }
+
+  _handleNewLabelDescriptor(labelDescriptor: ?Object) {
+    if (!labelDescriptor) {
+      this._labelDescriptor = {};
+      return;
+    }
+
+    labelDescriptor = Object.assign(
+      {
+        foregroundColor: 'rgb(102, 102, 102)', //dark grey
+        backgroundColor: 'rgb(221, 221, 221)', //light grey
+        maxWidth: '90px',
+      },
+      labelDescriptor
+    );
+
+    if (isEqual(this._labelDescriptor, labelDescriptor)) {
+      return;
+    }
+
+    updateIcon(
+      this._iconSettings,
+      querySelector(this._element, '.at'),
+      false,
+      labelDescriptor.iconClass,
+      labelDescriptor.iconUrl,
+      undefined,
+      labelDescriptor.iconHtml
+    );
+    if (
+      labelDescriptor.iconClass ||
+      labelDescriptor.iconUrl ||
+      labelDescriptor.iconHtml
+    ) {
+      this._element.classList.add('inboxsdk__label_has_icon');
+    } else {
+      this._element.classList.remove('inboxsdk__label_has_icon');
+    }
+    this._updateBackgroundColor(labelDescriptor.backgroundColor);
+    this._updateForegroundColor(labelDescriptor.foregroundColor);
+    this._updateIconBackgroundColor(labelDescriptor.iconBackgroundColor);
+    this._updateTitle(labelDescriptor.title, labelDescriptor.titleHtml);
+    this._updateTextMaxWidth(labelDescriptor.maxWidth);
+
+    this._labelDescriptor = labelDescriptor;
+  }
+
+  _updateTextMaxWidth(maxWidth: string) {
+    if (this._labelDescriptor.maxWidth === maxWidth) {
+      return;
+    }
+
+    const childEl = this._element.querySelector('.av');
+    if (childEl) {
+      childEl.style.maxWidth = maxWidth;
+    }
+  }
+
+  _updateBackgroundColor(backgroundColor: string) {
+    if (this._labelDescriptor.backgroundColor === backgroundColor) {
+      return;
+    }
+
+    const elToChange = querySelector(this._element, '.at');
+    elToChange.style.backgroundColor = backgroundColor;
+    elToChange.style.borderColor = backgroundColor;
+
+    querySelector(this._element, '.au').style.borderColor = backgroundColor;
+  }
+
+  _updateForegroundColor(foregroundColor: string) {
+    if (this._labelDescriptor.foregroundColor === foregroundColor) {
+      return;
+    }
+
+    querySelector(this._element, '.at').style.color = foregroundColor;
+  }
+
+  _updateIconBackgroundColor(iconBackgroundColor: ?string) {
+    const icon = this.getElement().querySelector('.inboxsdk__button_icon');
+    if (icon) {
+      icon.style.backgroundColor = iconBackgroundColor || '';
+    }
+  }
+
+  _updateTitle(title: string, titleHtml?: string) {
+    if (
+      this._labelDescriptor.title === title &&
+      this._labelDescriptor.titleHtml === titleHtml
+    ) {
+      return;
+    }
+
+    if (titleHtml) {
+      querySelector(this._element, '.au').innerHTML = titleHtml || '';
+      return;
+    }
+
+    let contentEl;
+    try {
+      contentEl = querySelector(this._element, '.av');
+    } catch (e) {
+      const outerEl = querySelector(this._element, '.au');
+      outerEl.innerHTML = '';
+      contentEl = document.createElement('div');
+      contentEl.setAttribute('class', 'av');
+      outerEl.appendChild(contentEl);
+    }
+    contentEl.textContent = title;
+    this._element.children[0].setAttribute('data-tooltip', title);
+  }
+}
+
+export default defn(module, GmailLabelView);