).\n this.addEventListener('click', () => {});\n this.$.backdrop.addEventListener('click', () => {});\n }\n\n /** @private */\n _detectIosNavbar() {\n if (!this.opened) {\n return;\n }\n\n const innerHeight = window.innerHeight;\n const innerWidth = window.innerWidth;\n\n const landscape = innerWidth > innerHeight;\n\n const clientHeight = document.documentElement.clientHeight;\n\n if (landscape && clientHeight > innerHeight) {\n this.style.setProperty('--vaadin-overlay-viewport-bottom', clientHeight - innerHeight + 'px');\n } else {\n this.style.setProperty('--vaadin-overlay-viewport-bottom', '0');\n }\n }\n\n /**\n * @param {!Array} nodes\n * @protected\n */\n _setTemplateFromNodes(nodes) {\n this.template = nodes.filter(node => node.localName && node.localName === 'template')[0] || this.template;\n }\n\n /**\n * @param {Event=} sourceEvent\n * @event vaadin-overlay-close\n * fired before the `vaadin-overlay` will be closed. If canceled the closing of the overlay is canceled as well.\n */\n close(sourceEvent) {\n var evt = new CustomEvent('vaadin-overlay-close', {bubbles: true, cancelable: true, detail: {sourceEvent: sourceEvent}});\n this.dispatchEvent(evt);\n if (!evt.defaultPrevented) {\n this.opened = false;\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this._boundIosResizeListener) {\n this._detectIosNavbar();\n window.addEventListener('resize', this._boundIosResizeListener);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._boundIosResizeListener && window.removeEventListener('resize', this._boundIosResizeListener);\n }\n\n /** @private */\n _ironOverlayCanceled(event) {\n event.preventDefault();\n }\n\n /** @private */\n _mouseDownListener(event) {\n this._mouseDownInside = event.composedPath().indexOf(this.$.overlay) >= 0;\n }\n\n /** @private */\n _mouseUpListener(event) {\n this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;\n }\n\n /**\n * We need to listen on 'click' / 'tap' event and capture it and close the overlay before\n * propagating the event to the listener in the button. Otherwise, if the clicked button would call\n * open(), this would happen: https://www.youtube.com/watch?v=Z86V_ICUCD4\n *\n * @event vaadin-overlay-outside-click\n * fired before the `vaadin-overlay` will be closed on outside click. If canceled the closing of the overlay is canceled as well.\n *\n * @private\n */\n _outsideClickListener(event) {\n if (event.composedPath().indexOf(this.$.overlay) !== -1 ||\n this._mouseDownInside || this._mouseUpInside) {\n this._mouseDownInside = false;\n this._mouseUpInside = false;\n return;\n }\n if (!this._last) {\n return;\n }\n\n const evt = new CustomEvent('vaadin-overlay-outside-click', {bubbles: true, cancelable: true, detail: {sourceEvent: event}});\n this.dispatchEvent(evt);\n\n if (this.opened && !evt.defaultPrevented) {\n this.close(event);\n }\n }\n\n /**\n * @event vaadin-overlay-escape-press\n * fired before the `vaadin-overlay` will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.\n *\n * @private\n */\n _keydownListener(event) {\n if (!this._last) {\n return;\n }\n\n // TAB\n if (event.key === 'Tab' && this.focusTrap && !event.defaultPrevented) {\n // if only tab key is pressed, cycle forward, else cycle backwards.\n this._cycleTab(event.shiftKey ? -1 : 1);\n\n event.preventDefault();\n\n // ESC\n } else if (event.key === 'Escape' || event.key === 'Esc') {\n const evt = new CustomEvent('vaadin-overlay-escape-press', {bubbles: true, cancelable: true, detail: {sourceEvent: event}});\n this.dispatchEvent(evt);\n\n if (this.opened && !evt.defaultPrevented) {\n this.close(event);\n }\n }\n }\n\n /** @protected */\n _ensureTemplatized() {\n this._setTemplateFromNodes(Array.from(this.children));\n }\n\n /**\n * @event vaadin-overlay-open\n * fired after the `vaadin-overlay` is opened.\n *\n * @private\n */\n _openedChanged(opened, wasOpened) {\n if (!this._instance) {\n this._ensureTemplatized();\n }\n\n if (opened) {\n // Store focused node.\n this.__restoreFocusNode = this._getActiveElement();\n this._animatedOpening();\n\n afterNextRender(this, () => {\n if (this.focusTrap && !this.contains(document._activeElement || document.activeElement)) {\n this._cycleTab(0, 0);\n }\n\n const evt = new CustomEvent('vaadin-overlay-open', {bubbles: true});\n this.dispatchEvent(evt);\n });\n\n if (!this.modeless) {\n this._addGlobalListeners();\n }\n } else if (wasOpened) {\n this._animatedClosing();\n\n if (!this.modeless) {\n this._removeGlobalListeners();\n }\n }\n }\n\n /** @private */\n _hiddenChanged(hidden) {\n if (hidden && this.hasAttribute('closing')) {\n this._flushAnimation('closing');\n }\n }\n\n /**\n * @return {boolean}\n * @protected\n */\n _shouldAnimate() {\n const name = getComputedStyle(this).getPropertyValue('animation-name');\n const hidden = getComputedStyle(this).getPropertyValue('display') === 'none';\n return !hidden && name && name != 'none';\n }\n\n /**\n * @param {string} type\n * @param {Function} callback\n * @protected\n */\n _enqueueAnimation(type, callback) {\n const handler = `__${type}Handler`;\n const listener = event => {\n if (event && event.target !== this) {\n return;\n }\n callback();\n this.removeEventListener('animationend', listener);\n delete this[handler];\n };\n this[handler] = listener;\n this.addEventListener('animationend', listener);\n }\n\n /**\n * @param {string} type\n * @protected\n */\n _flushAnimation(type) {\n const handler = `__${type}Handler`;\n if (typeof this[handler] === 'function') {\n this[handler]();\n }\n }\n\n /** @protected */\n _animatedOpening() {\n if (this.parentNode === document.body && this.hasAttribute('closing')) {\n this._flushAnimation('closing');\n }\n this._attachOverlay();\n if (!this.modeless) {\n this._enterModalState();\n }\n this.setAttribute('opening', '');\n\n const finishOpening = () => {\n document.addEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);\n\n this.removeAttribute('opening');\n };\n\n if (this._shouldAnimate()) {\n this._enqueueAnimation('opening', finishOpening);\n } else {\n finishOpening();\n }\n }\n\n /** @protected */\n _attachOverlay() {\n this._placeholder = document.createComment('vaadin-overlay-placeholder');\n this.parentNode.insertBefore(this._placeholder, this);\n document.body.appendChild(this);\n this.bringToFront();\n }\n\n /** @protected */\n _animatedClosing() {\n if (this.hasAttribute('opening')) {\n this._flushAnimation('opening');\n }\n if (this._placeholder) {\n this._exitModalState();\n\n if (this.restoreFocusOnClose && this.__restoreFocusNode) {\n // If the activeElement is `` or inside the overlay,\n // we are allowed to restore the focus. In all the other\n // cases focus might have been moved elsewhere by another\n // component or by the user interaction (e.g. click on a\n // button outside the overlay).\n const activeElement = this._getActiveElement();\n\n if (activeElement === document.body || this._deepContains(activeElement)) {\n this.__restoreFocusNode.focus();\n }\n this.__restoreFocusNode = null;\n }\n\n this.setAttribute('closing', '');\n\n const finishClosing = () => {\n document.removeEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);\n this._detachOverlay();\n this.shadowRoot.querySelector('[part=\"overlay\"]').style.removeProperty('pointer-events');\n this.removeAttribute('closing');\n };\n\n if (this._shouldAnimate()) {\n this._enqueueAnimation('closing', finishClosing);\n } else {\n finishClosing();\n }\n }\n }\n\n /** @protected */\n _detachOverlay() {\n this._placeholder.parentNode.insertBefore(this, this._placeholder);\n this._placeholder.parentNode.removeChild(this._placeholder);\n }\n\n /**\n * Returns all attached overlays in visual stacking order.\n * @private\n */\n static get __attachedInstances() {\n return Array.from(document.body.children)\n .filter(el => el instanceof OverlayElement && !el.hasAttribute('closing'))\n .sort((a, b) => (a.__zIndex - b.__zIndex) || 0);\n }\n\n /**\n * returns true if this is the last one in the opened overlays stack\n * @return {boolean}\n * @protected\n */\n get _last() {\n return this === OverlayElement.__attachedInstances.pop();\n }\n\n /** @private */\n _modelessChanged(modeless) {\n if (!modeless) {\n if (this.opened) {\n this._addGlobalListeners();\n this._enterModalState();\n }\n } else {\n this._removeGlobalListeners();\n this._exitModalState();\n }\n }\n\n /** @protected */\n _addGlobalListeners() {\n document.addEventListener('mousedown', this._boundMouseDownListener);\n document.addEventListener('mouseup', this._boundMouseUpListener);\n // Firefox leaks click to document on contextmenu even if prevented\n // https://bugzilla.mozilla.org/show_bug.cgi?id=990614\n document.documentElement.addEventListener('click', this._boundOutsideClickListener, true);\n document.addEventListener('keydown', this._boundKeydownListener);\n }\n\n /** @protected */\n _enterModalState() {\n if (document.body.style.pointerEvents !== 'none') {\n // Set body pointer-events to 'none' to disable mouse interactions with\n // other document nodes.\n this._previousDocumentPointerEvents = document.body.style.pointerEvents;\n document.body.style.pointerEvents = 'none';\n }\n\n // Disable pointer events in other attached overlays\n OverlayElement.__attachedInstances.forEach(el => {\n if (el !== this) {\n el.shadowRoot.querySelector('[part=\"overlay\"]').style.pointerEvents = 'none';\n }\n });\n }\n\n /** @protected */\n _removeGlobalListeners() {\n document.removeEventListener('mousedown', this._boundMouseDownListener);\n document.removeEventListener('mouseup', this._boundMouseUpListener);\n document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);\n document.removeEventListener('keydown', this._boundKeydownListener);\n }\n\n /** @protected */\n _exitModalState() {\n if (this._previousDocumentPointerEvents !== undefined) {\n // Restore body pointer-events\n document.body.style.pointerEvents = this._previousDocumentPointerEvents;\n delete this._previousDocumentPointerEvents;\n }\n\n // Restore pointer events in the previous overlay(s)\n const instances = OverlayElement.__attachedInstances;\n let el;\n // Use instances.pop() to ensure the reverse order\n while (el = instances.pop()) {\n if (el === this) {\n // Skip the current instance\n continue;\n }\n el.shadowRoot.querySelector('[part=\"overlay\"]').style.removeProperty('pointer-events');\n if (!el.modeless) {\n // Stop after the last modal\n break;\n }\n }\n }\n\n /** @protected */\n _removeOldContent() {\n if (!this.content || !this._contentNodes) {\n return;\n }\n\n this._observer.disconnect();\n\n this._contentNodes.forEach(node => {\n if (node.parentNode === this.content) {\n this.content.removeChild(node);\n }\n });\n\n if (this._originalContentPart) {\n // Restore the original \n this.$.content.parentNode.replaceChild(this._originalContentPart, this.$.content);\n this.$.content = this._originalContentPart;\n this._originalContentPart = undefined;\n }\n\n this._observer.connect();\n\n this._contentNodes = undefined;\n this.content = undefined;\n }\n\n /**\n * @param {!HTMLTemplateElement} template\n * @param {object} instanceProps\n * @protected\n */\n _stampOverlayTemplate(template, instanceProps) {\n this._removeOldContent();\n\n if (!template._Templatizer) {\n template._Templatizer = templatize(template, this, {\n instanceProps: instanceProps,\n forwardHostProp: function(prop, value) {\n if (this._instance) {\n this._instance.forwardHostProp(prop, value);\n }\n }\n });\n }\n\n this._instance = new template._Templatizer({});\n this._contentNodes = Array.from(this._instance.root.childNodes);\n\n const templateRoot = template._templateRoot || (template._templateRoot = template.getRootNode());\n const _isScoped = templateRoot !== document;\n\n if (_isScoped) {\n const isShady = window.ShadyCSS && !window.ShadyCSS.nativeShadow;\n\n if (!this.$.content.shadowRoot) {\n this.$.content.attachShadow({mode: 'open'});\n }\n\n let scopeCssText = Array.from(templateRoot.querySelectorAll('style'))\n .reduce((result, style) => result + style.textContent, '');\n\n if (isShady) {\n // NOTE(platosha): ShadyCSS removes