@inboxsdk/core 1.2.4 → 1.2.7

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

@@ -1,194 +0,0 @@
-import last from 'lodash/last';
-import * as Kefir from 'kefir';
-import kefirBus from 'kefir-bus';
-import kefirStopper from 'kefir-stopper';
-import streamWaitFor from '../../../lib/stream-wait-for';
-import querySelector from '../../../lib/dom/querySelectorOrFail';
-import findParent from '../../../../common/find-parent';
-import GmailElementGetter from '../gmail-element-getter';
-import isComposeTitleBarLightColor from '../is-compose-titlebar-light-color';
-class GmailMoleViewDriver {
-    _driver;
-    _eventStream = kefirBus();
-    _stopper = kefirStopper();
-    _element;
-    constructor(driver, options) {
-        this; // interface check
-        this._driver = driver;
-        this._element = Object.assign(document.createElement('div'), {
-            className: 'inboxsdk__mole_view ' + (options.className || ''),
-            innerHTML: getHTMLString(options),
-        });
-        if (options.chrome === false) {
-            this._element.classList.add('inboxsdk__mole_view_chromeless');
-        }
-        else {
-            querySelector(this._element, '.inboxsdk__mole_view_titlebar').addEventListener('click', (e) => {
-                this.setMinimized(!this.getMinimized());
-                e.preventDefault();
-                e.stopPropagation();
-            });
-            const minimizeBtn = querySelector(this._element, '.Hl');
-            minimizeBtn.addEventListener('click', (e) => {
-                this.setMinimized(true);
-                e.preventDefault();
-                e.stopPropagation();
-            });
-            const maximizeBtn = querySelector(this._element, '.Hk');
-            maximizeBtn.addEventListener('click', (e) => {
-                this.setMinimized(false);
-                e.preventDefault();
-                e.stopPropagation();
-            });
-            const closeBtn = querySelector(this._element, '.Ha');
-            closeBtn.addEventListener('click', (e) => {
-                this.destroy();
-                e.preventDefault();
-                e.stopPropagation();
-            });
-            if (options.titleEl) {
-                this._setTitleEl(options.titleEl);
-            }
-            else {
-                this.setTitle(options.title || '');
-            }
-            if (options.minimizedTitleEl) {
-                this._setMinimizedTitleEl(options.minimizedTitleEl);
-            }
-            const titleButtons = options.titleButtons;
-            if (titleButtons) {
-                const titleButtonContainer = querySelector(this._element, '.inboxsdk__mole_title_buttons');
-                const lastChild = titleButtonContainer.lastElementChild;
-                titleButtons.forEach((titleButton) => {
-                    const img = document.createElement('img');
-                    if (titleButton.iconClass) {
-                        img.className = titleButton.iconClass;
-                    }
-                    img.setAttribute('data-tooltip', titleButton.title);
-                    img.addEventListener('click', (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        titleButton.onClick.call(null);
-                    });
-                    img.src = titleButton.iconUrl;
-                    titleButtonContainer.insertBefore(img, lastChild);
-                });
-            }
-        }
-        querySelector(this._element, '.inboxsdk__mole_view_content').appendChild(options.el);
-    }
-    show() {
-        const doShow = (moleParent) => {
-            moleParent.insertBefore(this._element, last(moleParent.children));
-            const dw = findParent(moleParent, (el) => el.nodeName === 'DIV' && el.classList.contains('dw'));
-            if (dw) {
-                dw.classList.add('inboxsdk__moles_in_use');
-            }
-        };
-        const moleParent = GmailElementGetter.getMoleParent();
-        if (moleParent) {
-            doShow(moleParent);
-        }
-        else {
-            const moleParentReadyEvent = streamWaitFor(() => GmailElementGetter.getMoleParent())
-                .takeUntilBy(this._stopper)
-                .onValue(doShow);
-            // For some users, the mole parent element seems to be lazily loaded by
-            // Gmail only once the user has used a compose view or a thread view.
-            // If the gmail mode has settled, we've been loaded for 10 seconds, and
-            // we don't have the mole parent yet, then force the mole parent to load
-            // by opening a compose view and then closing it.
-            Kefir.fromPromise(GmailElementGetter.waitForGmailModeToSettle())
-                .flatMap(() => {
-                // delay until we've passed TimestampOnReady + 10 seconds
-                return this._driver.delayToTimeAfterReady(10 * 1000);
-            })
-                .takeUntilBy(moleParentReadyEvent)
-                .takeUntilBy(this._stopper)
-                .onValue(() => {
-                this._driver.getLogger().eventSdkActive('mole parent force load');
-                this._driver.openNewComposeViewDriver().then((gmailComposeView) => {
-                    gmailComposeView.close();
-                });
-            });
-        }
-    }
-    setMinimized(minimized) {
-        if (minimized) {
-            this._element.classList.add('inboxsdk__minimized');
-            this._eventStream.emit({
-                eventName: 'minimize',
-            });
-        }
-        else {
-            this._element.classList.remove('inboxsdk__minimized');
-            // If the mole is off the left edge of the screen, then move it to the
-            // right.
-            const moleParent = this._element.parentElement;
-            if (moleParent && this._element.getBoundingClientRect().left < 0) {
-                moleParent.insertBefore(this._element, last(moleParent.children));
-            }
-            this._eventStream.emit({
-                eventName: 'restore',
-            });
-        }
-    }
-    getMinimized() {
-        return this._element.classList.contains('inboxsdk__minimized');
-    }
-    setTitle(text) {
-        const titleElement = this._element.querySelector('.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_default');
-        if (titleElement) {
-            titleElement.textContent = text;
-        }
-    }
-    _setTitleEl(el) {
-        const container = this._element.querySelector('.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_default');
-        if (container) {
-            container.textContent = '';
-            container.appendChild(el);
-        }
-    }
-    _setMinimizedTitleEl(el) {
-        const container = this._element.querySelector('.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_minimized');
-        if (container) {
-            this._element.classList.add('inboxsdk__mole_use_minimize_title');
-            container.textContent = '';
-            container.appendChild(el);
-        }
-    }
-    getEventStream() {
-        return this._eventStream;
-    }
-    destroy() {
-        this._element.remove();
-        this._eventStream.end();
-        this._stopper.destroy();
-    }
-}
-export default GmailMoleViewDriver;
-function getHTMLString(options) {
-    const originalView = !isComposeTitleBarLightColor();
-    return `
-    <div class="inboxsdk__mole_view_inner ${originalView ? 'inboxsdk__original_view' : ''}">
-      ${getTitleHTMLString(options)}
-      <div class="inboxsdk__mole_view_content ${originalView ? 'inboxsdk__original_view' : ''}"></div>
-    </div>
-  `;
-}
-function getTitleHTMLString(options) {
-    if (options.chrome === false) {
-        return '';
-    }
-    else {
-        const originalView = !isComposeTitleBarLightColor();
-        return `
-      <div class="inboxsdk__mole_view_titlebar${originalView ? ' inboxsdk__original_view' : ''}">
-        <div class="inboxsdk__mole_title_buttons${originalView ? ' inboxsdk__original_view' : ''}">
-          <img class="Hl" src="images/cleardot.gif" alt="Minimize" aria-label="Minimize" data-tooltip-delay="800" data-tooltip="Minimize"><img class="Hk" id=":rp" src="images/cleardot.gif" alt="Minimize" aria-label="Maximize" data-tooltip-delay="800" data-tooltip="Maximize"><!--<img class="Hq aUG" src="images/cleardot.gif" alt="Pop-out" aria-label="Full-screen (Shift for Pop-out)" data-tooltip-delay="800" data-tooltip="Full-screen (Shift for Pop-out)">--><img class="Ha" src="images/cleardot.gif" alt="Close" aria-label="Close" data-tooltip-delay="800" data-tooltip="Close">
-        </div>
-        <h2 class="inboxsdk__mole_default"></h2>
-        <h2 class="inboxsdk__mole_minimized"></h2>
-      </div>`;
-    }
-}

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

@@ -1,352 +0,0 @@
-import sortBy from 'lodash/sortBy';
-import escape from 'lodash/escape';
-import asap from 'asap';
-import kefirBus from 'kefir-bus';
-import kefirStopper from 'kefir-stopper';
-import querySelector from '../../../lib/dom/querySelectorOrFail';
-import ButtonView from './buttons/button-view';
-import BasicButtonViewController from '../../../widgets/buttons/basic-button-view-controller';
-const ARROW_HORIZONTAL_HEIGHT = 9;
-const ARROW_HORIZONTAL_WIDTH = 18;
-const ARROW_VERTICAL_HEIGHT = 18;
-const ARROW_VERTICAL_WIDTH = 9;
-export default class GmailTooltipView {
-    _element;
-    _eventStream = kefirBus();
-    _stopper = kefirStopper();
-    constructor(options = {}) {
-        this._setupElement(options);
-    }
-    destroy() {
-        this._eventStream.end();
-        this._stopper.destroy();
-        this._element.remove();
-    }
-    getElement() {
-        return this._element;
-    }
-    getStopper() {
-        return this._stopper;
-    }
-    getEventStream() {
-        return this._eventStream;
-    }
-    anchor(anchorElement, placementOptions) {
-        if (!anchorElement) {
-            return;
-        }
-        if (!this._element) {
-            return;
-        }
-        var targetBoundingBox = anchorElement.getBoundingClientRect();
-        var tipBoundingBox = this._element.getBoundingClientRect();
-        var theBoundingBoxWrapperToUse;
-        if (placementOptions && placementOptions.position) {
-            switch (placementOptions.position) {
-                case 'top':
-                    theBoundingBoxWrapperToUse = {
-                        type: 'top',
-                        value: this._getTopPositionBoundingBox(targetBoundingBox, tipBoundingBox),
-                    };
-                    break;
-                case 'bottom':
-                    theBoundingBoxWrapperToUse = {
-                        type: 'bottom',
-                        value: this._getBottomPositionBoundingBox(targetBoundingBox, tipBoundingBox),
-                    };
-                    break;
-            }
-        }
-        if (!theBoundingBoxWrapperToUse)
-            theBoundingBoxWrapperToUse = this._getAutomaticPlacementBoundingBox(targetBoundingBox, tipBoundingBox);
-        var containedBoundingBox = this._containBoundingBox(theBoundingBoxWrapperToUse.value, placementOptions && placementOptions.offset);
-        this._setPositionAtBoundingBox(containedBoundingBox);
-        this._setArrowPosition(theBoundingBoxWrapperToUse.type, containedBoundingBox, targetBoundingBox);
-    }
-    getContainerElement() {
-        return this._element;
-    }
-    getContentElement() {
-        return querySelector(this._element, '.aRM');
-    }
-    close() {
-        this.destroy();
-    }
-    _setupElement(options) {
-        this._element = document.createElement('div');
-        this._element.setAttribute('class', 'inboxsdk__tooltip');
-        if (options.el) {
-            const html = `<div class="T-P aRL">
-						<div class="T-P-Jz-UR">
-							<div class="aRM" tabindex="0">
-							</div>
-						</div>
-
-						<div class="T-P-hFsbo-UR T-P-hFsbo T-P-atB inboxsdk__tooltip_arrow">
-							<div class="T-P-atD"></div>
-							<div class="T-P-atC"></div>
-						</div>
-					</div>`;
-            this._element.innerHTML = html;
-            this._element.classList.add('inboxdk__tooltip_content');
-            querySelector(this._element, '.aRM').appendChild(options.el);
-        }
-        else {
-            const html = [
-                '<div class="T-P aRL">',
-                '<div class="T-P-Jz-UR">',
-                '<div class="aRM" tabindex="0">',
-                '<div class="aVn inboxsdk__tooltip_image">',
-                '</div>',
-                '<div class="aRR">',
-                escape(options.title || ''),
-                '</div>',
-                '<div class="aRQ">',
-                escape(options.subtitle || ''),
-                '</div>',
-                '<div class="inboxsdk__tooltip_button">',
-                '</div>',
-                '</div>',
-                '</div>',
-                '<div class="T-P-aut-UR T-P-aut inboxsdk__tooltip_close" aria-label="Close" role="button"></div>',
-                '<div class="T-P-hFsbo-UR T-P-hFsbo T-P-atB inboxsdk__tooltip_arrow">',
-                '<div class="T-P-atD"></div>',
-                '<div class="T-P-atC"></div>',
-                '</div>',
-                '</div>',
-            ].join('');
-            this._element.innerHTML = html;
-            const closeElement = this._element.querySelector('.inboxsdk__tooltip_close');
-            if (closeElement) {
-                closeElement.addEventListener('click', () => {
-                    this.destroy();
-                });
-            }
-            if (options.imageUrl) {
-                const image = document.createElement('img');
-                image.src = options.imageUrl;
-                querySelector(this._element, '.inboxsdk__tooltip_image').appendChild(image);
-                image.addEventListener('load', () => {
-                    asap(() => {
-                        this._eventStream.emit({
-                            eventName: 'imageLoaded',
-                        });
-                    });
-                });
-            }
-            if (options.button) {
-                const buttonOptions = Object.assign({}, options.button);
-                buttonOptions.buttonColor = 'blue';
-                const oldOnClick = buttonOptions.onClick;
-                buttonOptions.onClick = () => {
-                    this.destroy();
-                    if (oldOnClick) {
-                        oldOnClick();
-                    }
-                };
-                buttonOptions.buttonView = new ButtonView(buttonOptions);
-                new BasicButtonViewController(buttonOptions);
-                querySelector(this._element, '.inboxsdk__tooltip_button').appendChild(buttonOptions.buttonView.getElement());
-            }
-        }
-    }
-    _getAutomaticPlacementBoundingBox(targetBoundingBox, tipBoundingBox) {
-        var boundingBoxWrappers = [
-            {
-                type: 'top',
-                value: this._getTopPositionBoundingBox(targetBoundingBox, tipBoundingBox),
-            },
-            {
-                type: 'left',
-                value: this._getLeftPositionBoundingBox(targetBoundingBox, tipBoundingBox),
-            },
-            {
-                type: 'right',
-                value: this._getRightPositionBoundingBox(targetBoundingBox, tipBoundingBox),
-            },
-            {
-                type: 'bottom',
-                value: this._getBottomPositionBoundingBox(targetBoundingBox, tipBoundingBox),
-            },
-        ];
-        var bestBoundingBoxWrapper = this._figureOutBestBoundingBox(boundingBoxWrappers);
-        return bestBoundingBoxWrapper;
-    }
-    _getTopPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
-        var top = targetBoundingBox.top - tipBoundingBox.height - ARROW_HORIZONTAL_HEIGHT;
-        var left = targetBoundingBox.left +
-            targetBoundingBox.width / 2 -
-            tipBoundingBox.width / 2;
-        return [
-            {
-                x: left,
-                y: top,
-            },
-            {
-                x: left + tipBoundingBox.width,
-                y: top + tipBoundingBox.height,
-            },
-        ];
-    }
-    _getRightPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
-        var left = targetBoundingBox.right + ARROW_VERTICAL_WIDTH;
-        var top = targetBoundingBox.top +
-            targetBoundingBox.height / 2 -
-            tipBoundingBox.height / 2;
-        return [
-            {
-                x: left,
-                y: top,
-            },
-            {
-                x: left + tipBoundingBox.width,
-                y: top + tipBoundingBox.height,
-            },
-        ];
-    }
-    _getBottomPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
-        var top = targetBoundingBox.bottom + ARROW_HORIZONTAL_HEIGHT;
-        var left = targetBoundingBox.left +
-            targetBoundingBox.width / 2 -
-            tipBoundingBox.width / 2;
-        return [
-            {
-                x: left,
-                y: top,
-            },
-            {
-                x: left + tipBoundingBox.width,
-                y: top + tipBoundingBox.height,
-            },
-        ];
-    }
-    _getLeftPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
-        var left = targetBoundingBox.left - ARROW_VERTICAL_WIDTH - tipBoundingBox.width;
-        var top = targetBoundingBox.top +
-            targetBoundingBox.height / 2 -
-            tipBoundingBox.height / 2;
-        return [
-            {
-                x: left,
-                y: top,
-            },
-            {
-                x: left + tipBoundingBox.width,
-                y: top + tipBoundingBox.height,
-            },
-        ];
-    }
-    _figureOutBestBoundingBox(boundingBoxWrappers) {
-        for (var ii = 0; ii < boundingBoxWrappers.length; ii++) {
-            boundingBoxWrappers[ii].smallestDistance = this._getSmallestDistance(boundingBoxWrappers[ii]);
-        }
-        return sortBy(boundingBoxWrappers, function (boundingBoxWrapper) {
-            return boundingBoxWrapper.smallestDistance;
-        }).reverse()[0];
-    }
-    _getSmallestDistance(boundingBoxWrapper) {
-        var distances = [
-            boundingBoxWrapper.value[0].y,
-            boundingBoxWrapper.value[0].x,
-            document.body.clientWidth - boundingBoxWrapper.value[1].x,
-            document.body.clientHeight - boundingBoxWrapper.value[1].y, //bottom
-        ];
-        return sortBy(distances, function (distance) {
-            return distance;
-        })[0];
-    }
-    _containBoundingBox(boundingBox, offset) {
-        var boundingBoxHeight = boundingBox[1].y - boundingBox[0].y;
-        var boundingBoxWidth = boundingBox[1].x - boundingBox[0].x;
-        if (boundingBox[0].y < -1) {
-            boundingBox[0].y = 0;
-            boundingBox[1].y = boundingBox[0].y + boundingBoxHeight;
-        }
-        else if (boundingBox[1].y > document.body.clientHeight) {
-            boundingBox[0].y = document.body.clientHeight - boundingBoxHeight;
-            boundingBox[1].y = boundingBox[0].y + boundingBoxHeight;
-        }
-        if (boundingBox[0].x < -1) {
-            boundingBox[0].x = 0;
-            boundingBox[1].x = boundingBox[0].x + boundingBoxWidth;
-        }
-        else if (boundingBox[1].x > document.body.clientWidth) {
-            boundingBox[0].x = document.body.clientWidth - boundingBoxWidth - 20;
-            boundingBox[1].x = boundingBox[0].x + boundingBoxWidth;
-        }
-        if (offset) {
-            if (offset.left) {
-                boundingBox[0].x += offset.left;
-                boundingBox[1].x += offset.left;
-            }
-            if (offset.top) {
-                boundingBox[0].y += offset.top;
-                boundingBox[1].y += offset.top;
-            }
-        }
-        return boundingBox;
-    }
-    _setPositionAtBoundingBox(boundingBox) {
-        this._element.style.left = boundingBox[0].x + 'px';
-        this._element.style.top = boundingBox[0].y + 'px';
-    }
-    _setArrowPosition(type, containedBoundingBox, targetBoundingBox) {
-        var position = {};
-        switch (type) {
-            case 'top':
-                position.top = containedBoundingBox[1].y;
-                position.left = targetBoundingBox.left + targetBoundingBox.width / 2;
-                break;
-            case 'left':
-                position.top =
-                    (containedBoundingBox[0].y + containedBoundingBox[1].y) / 2 -
-                        ARROW_VERTICAL_HEIGHT / 2;
-                position.left = containedBoundingBox[1].x;
-                break;
-            case 'right':
-                position.top =
-                    (containedBoundingBox[0].y + containedBoundingBox[1].y) / 2 -
-                        ARROW_VERTICAL_HEIGHT / 2;
-                position.left =
-                    containedBoundingBox[0].x - ARROW_HORIZONTAL_WIDTH / 2 + 1;
-                break;
-            case 'bottom':
-                position.top = containedBoundingBox[0].y - ARROW_HORIZONTAL_HEIGHT + 1;
-                position.left =
-                    (containedBoundingBox[0].x + containedBoundingBox[1].x) / 2;
-                break;
-        }
-        const arrow = querySelector(this._element, '.inboxsdk__tooltip_arrow');
-        arrow.style.left = position.left + 'px';
-        arrow.style.top = position.top + 'px';
-    }
-}
-/*
-<div class="T-P aRL" style="visibility: visible; left: 949px; top: 511px; opacity: 1;">
-    <div class="T-P-Jz-UR">
-        <div class="aRM" tabindex="0">
-            <div class="aVn">
-                <img src="//ssl.gstatic.com/ui/v1/icons/mail/payusprm_2x.png" width="410px" height="82px">
-            </div>
-        <div class="aRR">
-            Send money for free with your debit card
-        </div>
-        <div class="aRQ">
-            Attach money securely to any email. You can ask to be paid back too.
-        </div>
-        <div>
-            <div class="T-I J-J5-Ji ztGYyc T-I-atl L3" role="button" tabindex="0" style="-webkit-user-select: none;">
-                Get started
-            </div>
-        </div>
-    </div>
-</div>
-<div class="T-P-aut-UR T-P-aut" aria-label="Close" role="button" tabindex="0"></div>
-<div class="T-P-hFsbo-UR T-P-hFsbo T-P-atB" style="left: 130.5px;">
-    <div class="T-P-atD"></div>
-    <div class="T-P-atC"></div>
-</div>
-</div>
-
-
-*/

package/src/platform-implementation-js/dom-driver/gmail/widgets/gmail-top-message-bar-driver.js

@@ -1,76 +0,0 @@
-import kefirBus from 'kefir-bus';
-import fakeWindowResize from '../../../lib/fake-window-resize';
-export default class GmailTopMessageBarDriver {
-    _element;
-    _eventStream;
-    _resizeObserver;
-    constructor(optionStream) {
-        this._eventStream = kefirBus();
-        const ResizeObserver = global.ResizeObserver;
-        if (ResizeObserver) {
-            this._resizeObserver = new ResizeObserver(() => {
-                this.setTopMessageBarHeight();
-            });
-        }
-        optionStream
-            .takeUntilBy(this._eventStream.filter(() => false).beforeEnd(() => null))
-            .onValue((option) => {
-            if (!option) {
-                if (this._element) {
-                    this._element.remove();
-                    this._element = null;
-                }
-            }
-            else if (option) {
-                var element = this._element;
-                if (!element) {
-                    element = this._element = document.createElement('div');
-                    element.classList.add('inboxsdk__topMessageBar');
-                    document.body.insertBefore(element, document.body.firstChild);
-                    document.body.classList.add('inboxsdk__hasTopMessageBar');
-                    fakeWindowResize();
-                }
-                if (option.el !== element.children[0]) {
-                    element.innerHTML = '';
-                    if (option.el) {
-                        element.appendChild(option.el);
-                        if (this._resizeObserver) {
-                            this._resizeObserver.observe(element);
-                        }
-                        this.setTopMessageBarHeight();
-                    }
-                }
-            }
-        });
-    }
-    destroy() {
-        if (this._element) {
-            this._element.remove();
-            this._element = null;
-        }
-        this._eventStream.end();
-        if (this._resizeObserver) {
-            this._resizeObserver.disconnect();
-        }
-        if (document.querySelectorAll('.inboxsdk__topMessageBar').length === 0) {
-            document.body.classList.remove('inboxsdk__hasTopMessageBar');
-        }
-        else {
-            this.setTopMessageBarHeight();
-        }
-        fakeWindowResize();
-    }
-    getEventStream() {
-        return this._eventStream;
-    }
-    remove() {
-        this.destroy();
-    }
-    setTopMessageBarHeight() {
-        const topMessageBars = [
-            ...document.querySelectorAll('.inboxsdk__topMessageBar'),
-        ];
-        const height = topMessageBars.reduce((acc, currValue) => acc + currValue.offsetHeight, 0);
-        document.body.style.setProperty('--inboxsdk__topMessageBar-height', `${height}px`);
-    }
-}

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-backdrop.js

@@ -1,57 +0,0 @@
-import * as Kefir from 'kefir';
-import kefirBus from 'kefir-bus';
-import kefirStopper from 'kefir-stopper';
-class InboxBackdrop {
-    _preAutoCloseStream = kefirBus();
-    _stopper = kefirStopper();
-    _el;
-    constructor(zIndex = 500, target = document.body) {
-        const el = (this._el = document.createElement('div'));
-        el.className = 'inboxsdk__inbox_backdrop';
-        el.style.zIndex = String(zIndex);
-        Kefir.fromEvents(el, 'click')
-            .filter((event) => {
-            let isCanceled = false;
-            const appEvent = {
-                type: 'outsideInteraction',
-                cause: event,
-                cancel: () => {
-                    isCanceled = true;
-                },
-            };
-            this._preAutoCloseStream.emit(appEvent);
-            return !isCanceled;
-        })
-            .onValue(() => {
-            this.destroy();
-        });
-        if (!target)
-            throw new Error('no target');
-        target.appendChild(el);
-        this._stopper.onValue(() => {
-            el.classList.remove('inboxsdk__active');
-            Kefir.fromEvents(el, 'transitionend')
-                .merge(Kefir.later(200, undefined)) // transition might not finish if element is hidden
-                .take(1)
-                .onValue(() => {
-                el.remove();
-            });
-        });
-        el.offsetHeight; // force layout so that adding this class does a transition.
-        el.classList.add('inboxsdk__active');
-    }
-    getElement() {
-        return this._el;
-    }
-    getPreAutoCloseStream() {
-        return this._preAutoCloseStream;
-    }
-    getStopper() {
-        return this._stopper;
-    }
-    destroy() {
-        this._preAutoCloseStream.end();
-        this._stopper.destroy();
-    }
-}
-export default InboxBackdrop;