		{
		"name": "@vaadin/vaadin-overlay",
		"version": "20.0.0-alpha1",
		"description": "vaadin-overlay",
		"main": "vaadin-overlay.js",
		"module": "vaadin-overlay.js",
		"repository": "vaadin/vaadin-overlay",
		"keywords": [
		@@ -11,7 +16,2 @@ "Vaadin",
		],
		"repository": "vaadin/vaadin-overlay",
		"homepage": "https://vaadin.com/components",
		"name": "@vaadin/vaadin-overlay",
		"version": "3.5.1",
		"main": "vaadin-overlay.js",
		"author": "Vaadin Ltd",
		@@ -22,40 +22,38 @@ "license": "Apache-2.0",
		},
		"homepage": "https://vaadin.com/components",
		"files": [
		"vaadin-*.d.ts",
		"vaadin-*.js",
		"@types",
		"src",
		"theme"
		],
		"resolutions": {
		"@webcomponents/webcomponentsjs": "2.0.0",
		"@vaadin/vaadin-control-state-mixin": "2.1.2",
		"inherits": "2.0.3",
		"samsam": "1.1.3",
		"supports-color": "3.1.2",
		"type-detect": "1.0.0"
		"scripts": {
		"dist": "rimraf dist && polymer analyze vaadin-* > analysis.json && rollup -c rollup.config.js && cp analysis.json dist"
		},
		"dependencies": {
		"@polymer/polymer": "^3.0.0",
		"@vaadin/vaadin-element-mixin": "^2.4.0",
		"@vaadin/vaadin-themable-mixin": "^1.6.1",
		"@vaadin/vaadin-lumo-styles": "^1.3.0",
		"@vaadin/vaadin-material-styles": "^1.2.0"
		"@vaadin/vaadin-element-mixin": "^20.0.0-alpha1",
		"@vaadin/vaadin-lumo-styles": "^20.0.0-alpha1",
		"@vaadin/vaadin-material-styles": "^20.0.0-alpha1",
		"@vaadin/vaadin-themable-mixin": "^20.0.0-alpha1"
		},
		"scripts": {
		"generate-typings": "gen-typescript-declarations --outDir . --verify"
		},
		"devDependencies": {
		"@vaadin/vaadin-demo-helpers": "^3.0.0",
		"@esm-bundle/chai": "^4.1.5",
		"@open-wc/rollup-plugin-html": "^1.2.5",
		"@open-wc/testing-helpers": "^1.8.12",
		"@polymer/iron-component-page": "^4.0.0",
		"@polymer/iron-demo-helpers": "^3.0.0",
		"@polymer/iron-overlay-behavior": "^3.0.0",
		"@polymer/iron-test-helpers": "^3.0.0",
		"@vaadin/vaadin-button": "^2.1.0",
		"@vaadin/vaadin-control-state-mixin": "=2.1.2",
		"@vaadin/vaadin-text-field": "^2.1.1",
		"@vaadin/vaadin-radio-button": "^1.1.0",
		"@polymer/iron-overlay-behavior": "^3.0.0",
		"@webcomponents/webcomponentsjs": "^2.0.0",
		"wct-browser-legacy": "^1.0.1"
		}
		"@vaadin/vaadin-button": "^20.0.0-alpha1",
		"@vaadin/vaadin-radio-button": "^20.0.0-alpha1",
		"@vaadin/vaadin-text-field": "^20.0.0-alpha1",
		"rimraf": "^3.0.2",
		"rollup": "^2.34.1",
		"rollup-plugin-terser": "^7.0.2",
		"sinon": "^9.2.1"
		},
		"publishConfig": {
		"access": "public"
		},
		"gitHead": "93c8e0ec03a178c6d74261261f985bd07f7cc79c"
		}

src/vaadin-focusables-helper.d.ts

		/**
		* DO NOT EDIT
		*
		* This file was automatically generated by
		* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
		*
		* To modify these typings, edit the source file(s):
		* src/vaadin-focusables-helper.js
		*/


		// tslint:disable:variable-name Describing an API that's defined elsewhere.

		/**
		* `Polymer.IronFocusablesHelper` relies on some Polymer-specific legacy API,
		@@ -21,3 +8,2 @@ * especially the `root` property which does not exist for native shadow DOM.
		declare class FocusablesHelper {

		/**
		@@ -42,2 +28,2 @@ * Returns a sorted array of tabbable nodes, including the root node.

		export {FocusablesHelper};
		export { FocusablesHelper };

src/vaadin-focusables-helper.js

		@@ -1,4 +0,6 @@
		const p = Element.prototype;
		const matches = p.matches \|\| p.matchesSelector \|\| p.mozMatchesSelector \|\|
		p.msMatchesSelector \|\| p.oMatchesSelector \|\| p.webkitMatchesSelector;
		/**
		* @license
		* Copyright (c) 2021 Vaadin Ltd.
		* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/

		@@ -12,3 +14,2 @@ /**
		class FocusablesHelper {

		/**
		@@ -49,7 +50,7 @@ * Returns a sorted array of tabbable nodes, including the root node.
		// Elements that cannot be focused if they have [disabled] attribute.
		if (matches.call(element, 'input, select, textarea, button, object')) {
		return matches.call(element, ':not([disabled])');
		if (element.matches('input, select, textarea, button, object')) {
		return element.matches(':not([disabled])');
		}
		// Elements that can be focused even if they have [disabled] attribute.
		return matches.call(element, 'a[href], area[href], iframe, [tabindex], [contentEditable]');
		return element.matches('a[href], area[href], iframe, [tabindex], [contentEditable]');
		}
		@@ -64,5 +65,3 @@
		static isTabbable(element) {
		return this.isFocusable(element) &&
		matches.call(element, ':not([tabindex="-1"])') &&
		this._isVisible(element);
		return this.isFocusable(element) && element.matches(':not([tabindex="-1"])') && this._isVisible(element);
		}
		@@ -121,3 +120,3 @@
		if (element.localName === 'slot') {
		children = element.assignedNodes({flatten: true});
		children = element.assignedNodes({ flatten: true });
		} else {
		@@ -148,3 +147,3 @@ // Use shadow root if possible, will check for distributed nodes.
		style = window.getComputedStyle(element);
		return (style.visibility !== 'hidden' && style.display !== 'none');
		return style.visibility !== 'hidden' && style.display !== 'none';
		}
		@@ -182,3 +181,3 @@ return false;
		const result = [];
		while ((left.length > 0) && (right.length > 0)) {
		while (left.length > 0 && right.length > 0) {
		if (this._hasLowerTabOrder(left[0], right[0])) {
		@@ -210,3 +209,3 @@ result.push(right.shift());
		const bti = Math.max(b.tabIndex, 0);
		return (ati === 0 \|\| bti === 0) ? bti > ati : ati > bti;
		return ati === 0 \|\| bti === 0 ? bti > ati : ati > bti;
		}
		@@ -213,0 +212,0 @@ }

349

src/vaadin-overlay-position-mixin.js

		/**
		@license
		Copyright (c) 2019 Vaadin Ltd.
		This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		* @license
		* Copyright (c) 2021 Vaadin Ltd.
		* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		/**
		* @polymerMixin
		*/
		export const _PositionMixin = superClass => class PositionMixin extends superClass {
		export const _PositionMixin = (superClass) =>
		class PositionMixin extends superClass {
		static get properties() {
		return {
		/**
		* The element next to which this overlay should be aligned.
		* The position of the overlay relative to the positionTarget can be adjusted
		* with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
		* and `noVerticalOverlap`.
		*/
		positionTarget: {
		type: Object,
		value: null
		},

		static get properties() {
		return {
		/**
		* When `positionTarget` is set, this property defines whether to align the overlay's
		* left or right side to the target element by default.
		* Possible values are `start` and `end`.
		* RTL is taken into account when interpreting the value.
		* The overlay is automatically flipped to the opposite side when it doesn't fit into
		* the default side defined by this property.
		*/
		horizontalAlign: {
		type: String,
		value: 'start'
		},

		/**
		* The element next to which this overlay should be aligned.
		* The position of the overlay relative to the positionTarget can be adjusted
		* with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
		* and `noVerticalOverlap`.
		*/
		positionTarget: {
		type: Object,
		value: null
		},
		/**
		* When `positionTarget` is set, this property defines whether to align the overlay's
		* top or bottom side to the target element by default.
		* Possible values are `top` and `bottom`.
		* The overlay is automatically flipped to the opposite side when it doesn't fit into
		* the default side defined by this property.
		*/
		verticalAlign: {
		type: String,
		value: 'top'
		},

		/**
		* When `positionTarget` is set, this property defines whether to align the overlay's
		* left or right side to the target element by default.
		* Possible values are `start` and `end`.
		* RTL is taken into account when interpreting the value.
		* The overlay is automatically flipped to the opposite side when it doesn't fit into
		* the default side defined by this property.
		*/
		horizontalAlign: {
		type: String,
		value: 'start'
		},
		/**
		* When `positionTarget` is set, this property defines whether the overlay should overlap
		* the target element in the x-axis, or be positioned right next to it.
		*/
		noHorizontalOverlap: {
		type: Boolean,
		value: false
		},

		/**
		* When `positionTarget` is set, this property defines whether to align the overlay's
		* top or bottom side to the target element by default.
		* Possible values are `top` and `bottom`.
		* The overlay is automatically flipped to the opposite side when it doesn't fit into
		* the default side defined by this property.
		*/
		verticalAlign: {
		type: String,
		value: 'top'
		},
		/**
		* When `positionTarget` is set, this property defines whether the overlay should overlap
		* the target element in the y-axis, or be positioned right above/below it.
		*/
		noVerticalOverlap: {
		type: Boolean,
		value: false
		}
		};
		}
		static get observers() {
		return [
		`__positionSettingsChanged(positionTarget, horizontalAlign, verticalAlign,
		noHorizontalOverlap, noVerticalOverlap)`
		];
		}

		/**
		* When `positionTarget` is set, this property defines whether the overlay should overlap
		* the target element in the x-axis, or be positioned right next to it.
		*/
		noHorizontalOverlap: {
		type: Boolean,
		value: false
		},
		constructor() {
		super();

		/**
		* When `positionTarget` is set, this property defines whether the overlay should overlap
		* the target element in the y-axis, or be positioned right above/below it.
		*/
		noVerticalOverlap: {
		type: Boolean,
		value: false
		}
		};
		}
		static get observers() {
		return [`__positionSettingsChanged(positionTarget, horizontalAlign, verticalAlign,
		noHorizontalOverlap, noVerticalOverlap)`];
		}
		const boundUpdatePosition = this._updatePosition.bind(this);

		constructor() {
		super();
		this.addEventListener('opened-changed', (e) => {
		const func = e.detail.value ? 'addEventListener' : 'removeEventListener';
		window[func]('scroll', boundUpdatePosition);
		window[func]('resize', boundUpdatePosition);

		const boundUpdatePosition = this._updatePosition.bind(this);
		if (e.detail.value) {
		this._updatePosition();
		}
		});
		}

		this.addEventListener('opened-changed', e => {
		const func = e.detail.value ? 'addEventListener' : 'removeEventListener';
		window[func]('scroll', boundUpdatePosition);
		window[func]('resize', boundUpdatePosition);
		ready() {
		super.ready();

		if (e.detail.value) {
		this._updatePosition();
		}
		});
		}
		console.warn('PositionMixin is not considered stable and might change any time');
		}

		ready() {
		super.ready();

		console.warn('PositionMixin is not considered stable and might change any time');
		}

		__positionSettingsChanged() {
		this._updatePosition();
		}

		_updatePosition() {
		if (!this.positionTarget) {
		return;
		__positionSettingsChanged() {
		this._updatePosition();
		}
		const computedStyle = getComputedStyle(this);
		if (!this.__margins) {
		this.__margins = {};
		['top', 'bottom', 'left', 'right'].forEach(propName => {
		this.__margins[propName] = parseInt(computedStyle[propName], 10);
		});
		}
		const rtl = computedStyle.direction === 'rtl';

		const targetRect = this.positionTarget.getBoundingClientRect();
		_updatePosition() {
		if (!this.positionTarget) {
		return;
		}
		const computedStyle = getComputedStyle(this);
		if (!this.__margins) {
		this.__margins = {};
		['top', 'bottom', 'left', 'right'].forEach((propName) => {
		this.__margins[propName] = parseInt(computedStyle[propName], 10);
		});
		}
		const rtl = computedStyle.direction === 'rtl';

		const horizontalProps = this.__calculateHorizontalPosition(targetRect, rtl);
		const verticalProps = this.__calculateVerticalPosition(targetRect);
		const targetRect = this.positionTarget.getBoundingClientRect();

		const positionProps = Object.assign({}, horizontalProps, verticalProps);
		this.__doSetPosition(positionProps, rtl);
		}
		const horizontalProps = this.__calculateHorizontalPosition(targetRect, rtl);
		const verticalProps = this.__calculateVerticalPosition(targetRect);

		__calculateHorizontalPosition(targetRect, rtl) {
		const propNames = {
		start: 'left',
		end: 'right'
		};
		const positionProps = Object.assign({}, horizontalProps, verticalProps);
		this.__doSetPosition(positionProps, rtl);
		}

		// Using previous size to fix a case where window resize may cause the overlay to be squeezed
		// smaller than its current space before the fit-calculations.
		const contentWidth = Math.max((this.__oldContentWidth \|\| 0), this.$.overlay.offsetWidth);
		this.__oldContentWidth = this.$.overlay.offsetWidth;
		__calculateHorizontalPosition(targetRect, rtl) {
		const propNames = {
		start: 'left',
		end: 'right'
		};

		const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
		const defaultAlignLeft = (!rtl && this.horizontalAlign === 'start') \|\| (rtl && this.horizontalAlign === 'end');
		const currentAlignLeft = !!this.style.left;
		return PositionMixin.__calculatePositionInOneDimension(targetRect, contentWidth,
		viewportWidth, this.__margins, defaultAlignLeft, currentAlignLeft, this.noHorizontalOverlap, propNames);
		}
		// Using previous size to fix a case where window resize may cause the overlay to be squeezed
		// smaller than its current space before the fit-calculations.
		const contentWidth = Math.max(this.__oldContentWidth \|\| 0, this.$.overlay.offsetWidth);
		this.__oldContentWidth = this.$.overlay.offsetWidth;

		__calculateVerticalPosition(targetRect) {
		const propNames = {
		start: 'top',
		end: 'bottom'
		};
		const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
		const defaultAlignLeft = (!rtl && this.horizontalAlign === 'start') \|\| (rtl && this.horizontalAlign === 'end');
		const currentAlignLeft = !!this.style.left;
		return PositionMixin.__calculatePositionInOneDimension(
		targetRect,
		contentWidth,
		viewportWidth,
		this.__margins,
		defaultAlignLeft,
		currentAlignLeft,
		this.noHorizontalOverlap,
		propNames
		);
		}

		// Using previous size to fix a case where window resize may cause the overlay to be squeezed
		// smaller than its current space before the fit-calculations.
		const contentHeight = Math.max((this.__oldContentHeight \|\| 0), this.$.overlay.offsetHeight);
		this.__oldContentHeight = this.$.overlay.offsetHeight;
		__calculateVerticalPosition(targetRect) {
		const propNames = {
		start: 'top',
		end: 'bottom'
		};

		const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
		const defaultAlignTop = this.verticalAlign === 'top';
		const currentAlignTop = !!this.style.top;
		return PositionMixin.__calculatePositionInOneDimension(targetRect, contentHeight,
		viewportHeight, this.__margins, defaultAlignTop, currentAlignTop, this.noVerticalOverlap, propNames);
		}
		// Using previous size to fix a case where window resize may cause the overlay to be squeezed
		// smaller than its current space before the fit-calculations.
		const contentHeight = Math.max(this.__oldContentHeight \|\| 0, this.$.overlay.offsetHeight);
		this.__oldContentHeight = this.$.overlay.offsetHeight;

		/**
		* Returns an object with CSS position properties to set,
		* e.g. { top: "100px", bottom: "" }
		*/
		static __calculatePositionInOneDimension(targetRect, contentSize, viewportSize, margins,
		defaultAlignStart, currentAlignStart, noOverlap, propNames) {
		const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
		const defaultAlignTop = this.verticalAlign === 'top';
		const currentAlignTop = !!this.style.top;
		return PositionMixin.__calculatePositionInOneDimension(
		targetRect,
		contentHeight,
		viewportHeight,
		this.__margins,
		defaultAlignTop,
		currentAlignTop,
		this.noVerticalOverlap,
		propNames
		);
		}

		const spaceForStartAlignment = viewportSize - targetRect[noOverlap ? propNames.end : propNames.start] - margins[propNames.end];
		const spaceForEndAlignment = targetRect[noOverlap ? propNames.start : propNames.end] - margins[propNames.start];
		/**
		* Returns an object with CSS position properties to set,
		* e.g. { top: "100px", bottom: "" }
		*/
		static __calculatePositionInOneDimension(
		targetRect,
		contentSize,
		viewportSize,
		margins,
		defaultAlignStart,
		currentAlignStart,
		noOverlap,
		propNames
		) {
		const spaceForStartAlignment =
		viewportSize - targetRect[noOverlap ? propNames.end : propNames.start] - margins[propNames.end];
		const spaceForEndAlignment = targetRect[noOverlap ? propNames.start : propNames.end] - margins[propNames.start];

		const spaceForDefaultAlignment = defaultAlignStart ? spaceForStartAlignment : spaceForEndAlignment;
		const spaceForOtherAlignment = defaultAlignStart ? spaceForEndAlignment : spaceForStartAlignment;
		const spaceForDefaultAlignment = defaultAlignStart ? spaceForStartAlignment : spaceForEndAlignment;
		const spaceForOtherAlignment = defaultAlignStart ? spaceForEndAlignment : spaceForStartAlignment;

		const shouldGoToDefaultSide = spaceForDefaultAlignment > spaceForOtherAlignment \|\| spaceForDefaultAlignment > contentSize;
		const shouldGoToDefaultSide =
		spaceForDefaultAlignment > spaceForOtherAlignment \|\| spaceForDefaultAlignment > contentSize;

		const shouldAlignStart = defaultAlignStart === shouldGoToDefaultSide;
		const shouldAlignStart = defaultAlignStart === shouldGoToDefaultSide;

		const cssPropNameToSet = shouldAlignStart ? propNames.start : propNames.end;
		const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;
		const cssPropNameToSet = shouldAlignStart ? propNames.start : propNames.end;
		const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;

		const cssPropValueToSet = (shouldAlignStart ?
		targetRect[noOverlap ? propNames.end : propNames.start] :
		viewportSize - targetRect[noOverlap ? propNames.start : propNames.end]
		) + 'px';
		const cssPropValueToSet =
		(shouldAlignStart
		? targetRect[noOverlap ? propNames.end : propNames.start]
		: viewportSize - targetRect[noOverlap ? propNames.start : propNames.end]) + 'px';

		const props = {};
		props[cssPropNameToSet] = cssPropValueToSet;
		props[cssPropNameToClear] = '';
		return props;
		}
		const props = {};
		props[cssPropNameToSet] = cssPropValueToSet;
		props[cssPropNameToClear] = '';
		return props;
		}

		__doSetPosition(cssProps, rtl) {
		Object.assign(this.style, cssProps);
		__doSetPosition(cssProps, rtl) {
		Object.assign(this.style, cssProps);

		const alignStart = (!rtl && cssProps.left) \|\| (rtl && cssProps.right);
		this.style.alignItems = alignStart ? 'flex-start' : 'flex-end';
		const alignStart = (!rtl && cssProps.left) \|\| (rtl && cssProps.right);
		this.style.alignItems = alignStart ? 'flex-start' : 'flex-end';

		this.style.justifyContent = cssProps.top ? 'flex-start' : 'flex-end';
		}

		};
		this.style.justifyContent = cssProps.top ? 'flex-start' : 'flex-end';
		}
		};

104

src/vaadin-overlay.d.ts

		@@ -1,30 +0,9 @@
		/**
		* DO NOT EDIT
		*
		* This file was automatically generated by
		* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
		*
		* To modify these typings, edit the source file(s):
		* src/vaadin-overlay.js
		*/
		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

		import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';

		// tslint:disable:variable-name Describing an API that's defined elsewhere.

		import {PolymerElement} from '@polymer/polymer/polymer-element.js';
		import { OverlayEventMap, OverlayRenderer } from './interfaces';

		import {templatize} from '@polymer/polymer/lib/utils/templatize.js';

		import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';

		import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';

		import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

		import {DirMixin} from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';

		import {FocusablesHelper} from './vaadin-focusables-helper.js';

		import {html} from '@polymer/polymer/lib/utils/html-tag.js';

		/**
		@@ -118,7 +97,6 @@ * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
		* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
		*
		* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
		*/
		declare class OverlayElement extends
		ThemableMixin(
		PolymerElement) {

		declare class OverlayElement extends ThemableMixin(DirMixin(HTMLElement)) {
		/**
		@@ -132,3 +110,3 @@ * returns true if this is the last one in the opened overlays stack
		*/
		opened: boolean\|null\|undefined;
		opened: boolean \| null \| undefined;

		@@ -138,3 +116,3 @@ /**
		*/
		owner: HTMLElement\|null;
		owner: HTMLElement \| null;

		@@ -149,3 +127,3 @@ /**
		*/
		renderer: OverlayRenderer\|null\|undefined;
		renderer: OverlayRenderer \| null \| undefined;

		@@ -155,3 +133,3 @@ /**
		*/
		template: HTMLTemplateElement\|null\|undefined;
		template: HTMLTemplateElement \| null \| undefined;

		@@ -161,3 +139,3 @@ /**
		*/
		instanceProps: object\|null\|undefined;
		instanceProps: object \| null \| undefined;

		@@ -167,3 +145,3 @@ /**
		*/
		content: HTMLElement\|undefined;
		content: HTMLElement \| undefined;

		@@ -178,3 +156,3 @@ /**
		*/
		model: object\|null\|undefined;
		model: object \| null \| undefined;

		@@ -203,22 +181,35 @@ /**
		restoreFocusOnClose: boolean;
		ready(): void;
		connectedCallback(): void;
		disconnectedCallback(): void;

		_setTemplateFromNodes(nodes: Element[]): void;
		close(sourceEvent?: Event\|null): void;

		close(sourceEvent?: Event \| null): void;

		_ensureTemplatized(): void;

		_shouldAnimate(): boolean;
		_enqueueAnimation(type: string, callback: Function\|null): void;

		_enqueueAnimation(type: string, callback: Function \| null): void;

		_flushAnimation(type: string): void;

		_animatedOpening(): void;

		_attachOverlay(): void;

		_animatedClosing(): void;

		_detachOverlay(): void;

		_addGlobalListeners(): void;

		_enterModalState(): void;

		_removeGlobalListeners(): void;

		_exitModalState(): void;

		_removeOldContent(): void;
		_stampOverlayTemplate(template: HTMLTemplateElement, instanceProps: object\|null): void;

		_stampOverlayTemplate(template: HTMLTemplateElement, instanceProps: object \| null): void;

		/**
		@@ -228,7 +219,13 @@ * Manually invoke existing renderer.
		render(): void;
		_isFocused(element: Element\|null): boolean;
		_focusedIndex(elements: Array<Element\|null>\|null): number;
		_cycleTab(increment: number, index: number\|undefined): void;

		_isFocused(element: Element \| null): boolean;

		_focusedIndex(elements: Array<Element \| null> \| null): number;

		_cycleTab(increment: number, index: number \| undefined): void;

		_getFocusableElements(): HTMLElement[];

		_getActiveElement(): Element;

		_deepContains(node: Node): boolean;
		@@ -240,13 +237,22 @@
		bringToFront(): void;

		addEventListener<K extends keyof OverlayEventMap>(
		type: K,
		listener: (this: OverlayElement, ev: OverlayEventMap[K]) => void,
		options?: boolean \| AddEventListenerOptions
		): void;

		removeEventListener<K extends keyof OverlayEventMap>(
		type: K,
		listener: (this: OverlayElement, ev: OverlayEventMap[K]) => void,
		options?: boolean \| EventListenerOptions
		): void;
		}

		declare global {

		interface HTMLElementTagNameMap {
		"vaadin-overlay": OverlayElement;
		'vaadin-overlay': OverlayElement;
		}
		}

		export {OverlayElement};

		import {OverlayRenderer} from '../@types/interfaces';
		export { OverlayElement };

312

src/vaadin-overlay.js

		/**
		@license
		Copyright (c) 2017 Vaadin Ltd.
		This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		import { PolymerElement } from '@polymer/polymer/polymer-element.js';

		* @license
		* Copyright (c) 2021 Vaadin Ltd.
		* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
		import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
		@@ -14,53 +13,3 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
		import { FocusablesHelper } from './vaadin-focusables-helper.js';
		import { html } from '@polymer/polymer/lib/utils/html-tag.js';
		let overlayContentCounter = 0;
		const overlayContentCache = {};

		const createOverlayContent = (cssText) => {
		const is = overlayContentCache[cssText] \|\| processOverlayStyles(cssText);
		return document.createElement(is);
		};

		const processOverlayStyles = (cssText) => {
		overlayContentCounter++;
		const is = `vaadin-overlay-content-${overlayContentCounter}`;

		const styledTemplate = document.createElement('template');
		const style = document.createElement('style');
		style.textContent = ':host { display: block; }' + cssText;
		styledTemplate.content.appendChild(style);

		if (window.ShadyCSS) {
		window.ShadyCSS.prepareTemplate(styledTemplate, is);
		}

		// NOTE(platosha): Have to use an awkward IIFE returning class here
		// to prevent this class from showing up in analysis.json & API docs.
		const klass = (() => /** @private */ class extends HTMLElement {
		static get is() {
		return is;
		}

		constructor() {
		super();

		if (!this.shadowRoot) {
		this.attachShadow({mode: 'open'});
		this.shadowRoot.appendChild(document.importNode(styledTemplate.content, true));
		}
		}

		connectedCallback() {
		if (window.ShadyCSS) {
		window.ShadyCSS.styleElement(this);
		}
		}
		})();

		customElements.define(klass.is, klass);

		overlayContentCache[cssText] = is;
		return is;
		};

		/**
		@@ -156,5 +105,7 @@ *
		*
		* @extends PolymerElement
		* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
		*
		* @extends HTMLElement
		* @mixes ThemableMixin
		* @demo demo/index.html
		* @mixes DirMixin
		*/
		@@ -164,78 +115,74 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
		return html`
		<style>
		:host {
		z-index: 200;
		position: fixed;
		<style>
		:host {
		z-index: 200;
		position: fixed;

		/*
		Despite of what the names say, <vaadin-overlay> is just a container
		for position/sizing/alignment. The actual overlay is the overlay part.
		*/
		/* Despite of what the names say, <vaadin-overlay> is just a container
		for position/sizing/alignment. The actual overlay is the overlay part. */

		/*
		Default position constraints: the entire viewport. Note: themes can
		override this to introduce gaps between the overlay and the viewport.
		*/
		top: 0;
		right: 0;
		bottom: var(--vaadin-overlay-viewport-bottom);
		left: 0;
		/* Default position constraints: the entire viewport. Note: themes can
		override this to introduce gaps between the overlay and the viewport. */
		top: 0;
		right: 0;
		bottom: var(--vaadin-overlay-viewport-bottom);
		left: 0;

		/* Use flexbox alignment for the overlay part. */
		display: flex;
		flex-direction: column; /* makes dropdowns sizing easier */
		/* Align to center by default. */
		align-items: center;
		justify-content: center;
		/* Use flexbox alignment for the overlay part. */
		display: flex;
		flex-direction: column; /* makes dropdowns sizing easier */
		/* Align to center by default. */
		align-items: center;
		justify-content: center;

		/* Allow centering when max-width/max-height applies. */
		margin: auto;
		/* Allow centering when max-width/max-height applies. */
		margin: auto;

		/* The host is not clickable, only the overlay part is. */
		pointer-events: none;
		/* The host is not clickable, only the overlay part is. */
		pointer-events: none;

		/* Remove tap highlight on touch devices. */
		-webkit-tap-highlight-color: transparent;
		/* Remove tap highlight on touch devices. */
		-webkit-tap-highlight-color: transparent;

		/* CSS API for host */
		--vaadin-overlay-viewport-bottom: 0;
		}
		/* CSS API for host */
		--vaadin-overlay-viewport-bottom: 0;
		}

		:host([hidden]),
		:host(:not([opened]):not([closing])) {
		display: none !important;
		}
		:host([hidden]),
		:host(:not([opened]):not([closing])) {
		display: none !important;
		}

		[part="overlay"] {
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		pointer-events: auto;
		[part='overlay'] {
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		pointer-events: auto;

		/* Prevent overflowing the host in MSIE 11 */
		max-width: 100%;
		box-sizing: border-box;
		/* Prevent overflowing the host in MSIE 11 */
		max-width: 100%;
		box-sizing: border-box;

		-webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
		}
		-webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
		}

		[part="backdrop"] {
		z-index: -1;
		content: "";
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		pointer-events: auto;
		}
		</style>
		[part='backdrop'] {
		z-index: -1;
		content: '';
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		pointer-events: auto;
		}
		</style>

		<div id="backdrop" part="backdrop" hidden\$="{{!withBackdrop}}"></div>
		<div part="overlay" id="overlay" tabindex="0">
		<div part="content" id="content">
		<slot></slot>
		<div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
		<div part="overlay" id="overlay" tabindex="0">
		<div part="content" id="content">
		<slot></slot>
		</div>
		</div>
		</div>
		`;
		`;
		}
		@@ -355,3 +302,3 @@
		type: Boolean,
		value: false,
		value: false
		},
		@@ -401,5 +348,3 @@
		static get observers() {
		return [
		'_templateOrRendererChanged(template, renderer, owner, model, instanceProps, opened)'
		];
		return ['_templateOrRendererChanged(template, renderer, owner, model, instanceProps, opened)'];
		}
		@@ -414,3 +359,3 @@

		this._observer = new FlattenedNodesObserver(this, info => {
		this._observer = new FlattenedNodesObserver(this, (info) => {
		this._setTemplateFromNodes(info.addedNodes);
		@@ -422,2 +367,3 @@ });

		/* c8 ignore next 3 */
		if (/iPad\|iPhone\|iPod/.test(navigator.userAgent)) {
		@@ -428,2 +374,3 @@ this._boundIosResizeListener = () => this._detectIosNavbar();

		/** @protected */
		ready() {
		@@ -444,2 +391,3 @@ super.ready();
		_detectIosNavbar() {
		/* c8 ignore next 15 */
		if (!this.opened) {
		@@ -468,3 +416,3 @@ return;
		_setTemplateFromNodes(nodes) {
		this.template = nodes.filter(node => node.localName && node.localName === 'template')[0] \|\| this.template;
		this.template = nodes.filter((node) => node.localName && node.localName === 'template')[0] \|\| this.template;
		}
		@@ -478,3 +426,7 @@
		close(sourceEvent) {
		var evt = new CustomEvent('vaadin-overlay-close', {bubbles: true, cancelable: true, detail: {sourceEvent: sourceEvent}});
		var evt = new CustomEvent('vaadin-overlay-close', {
		bubbles: true,
		cancelable: true,
		detail: { sourceEvent: sourceEvent }
		});
		this.dispatchEvent(evt);
		@@ -486,5 +438,7 @@ if (!evt.defaultPrevented) {

		/** @protected */
		connectedCallback() {
		super.connectedCallback();

		/* c8 ignore next 3 */
		if (this._boundIosResizeListener) {
		@@ -496,6 +450,10 @@ this._detectIosNavbar();

		/** @protected */
		disconnectedCallback() {
		super.disconnectedCallback();

		this._boundIosResizeListener && window.removeEventListener('resize', this._boundIosResizeListener);
		/* c8 ignore next 3 */
		if (this._boundIosResizeListener) {
		window.removeEventListener('resize', this._boundIosResizeListener);
		}
		}
		@@ -529,4 +487,3 @@
		_outsideClickListener(event) {
		if (event.composedPath().indexOf(this.$.overlay) !== -1 \|\|
		this._mouseDownInside \|\| this._mouseUpInside) {
		if (event.composedPath().indexOf(this.$.overlay) !== -1 \|\| this._mouseDownInside \|\| this._mouseUpInside) {
		this._mouseDownInside = false;
		@@ -540,3 +497,7 @@ this._mouseUpInside = false;

		const evt = new CustomEvent('vaadin-overlay-outside-click', {bubbles: true, cancelable: true, detail: {sourceEvent: event}});
		const evt = new CustomEvent('vaadin-overlay-outside-click', {
		bubbles: true,
		cancelable: true,
		detail: { sourceEvent: event }
		});
		this.dispatchEvent(evt);
		@@ -567,5 +528,9 @@

		// ESC
		// ESC
		} else if (event.key === 'Escape' \|\| event.key === 'Esc') {
		const evt = new CustomEvent('vaadin-overlay-escape-press', {bubbles: true, cancelable: true, detail: {sourceEvent: event}});
		const evt = new CustomEvent('vaadin-overlay-escape-press', {
		bubbles: true,
		cancelable: true,
		detail: { sourceEvent: event }
		});
		this.dispatchEvent(evt);
		@@ -601,7 +566,7 @@
		afterNextRender(this, () => {
		if (this.focusTrap && !this.contains(document._activeElement \|\| document.activeElement)) {
		if (this.focusTrap && !this.contains(document.activeElement)) {
		this._cycleTab(0, 0);
		}

		const evt = new CustomEvent('vaadin-overlay-open', {bubbles: true});
		const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
		this.dispatchEvent(evt);
		@@ -646,3 +611,3 @@ });
		const handler = `__${type}Handler`;
		const listener = event => {
		const listener = (event) => {
		if (event && event.target !== this) {
		@@ -753,4 +718,4 @@ return;
		return Array.from(document.body.children)
		.filter(el => el instanceof OverlayElement && !el.hasAttribute('closing'))
		.sort((a, b) => (a.__zIndex - b.__zIndex) \|\| 0);
		.filter((el) => el instanceof OverlayElement && !el.hasAttribute('closing'))
		.sort((a, b) => a.__zIndex - b.__zIndex \|\| 0);
		}
		@@ -800,3 +765,3 @@
		// Disable pointer events in other attached overlays
		OverlayElement.__attachedInstances.forEach(el => {
		OverlayElement.__attachedInstances.forEach((el) => {
		if (el !== this) {
		@@ -828,3 +793,3 @@ el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
		// Use instances.pop() to ensure the reverse order
		while (el = instances.pop()) {
		while ((el = instances.pop())) {
		if (el === this) {
		@@ -850,3 +815,3 @@ // Skip the current instance

		this._contentNodes.forEach(node => {
		this._contentNodes.forEach((node) => {
		if (node.parentNode === this.content) {
		@@ -881,3 +846,3 @@ this.content.removeChild(node);
		instanceProps: instanceProps,
		forwardHostProp: function(prop, value) {
		forwardHostProp: function (prop, value) {
		if (this._instance) {
		@@ -894,25 +859,13 @@ this._instance.forwardHostProp(prop, value);
		const templateRoot = template._templateRoot \|\| (template._templateRoot = template.getRootNode());
		const _isScoped = templateRoot !== document;

		if (_isScoped) {
		const isShady = window.ShadyCSS && !window.ShadyCSS.nativeShadow;

		if (templateRoot !== document) {
		if (!this.$.content.shadowRoot) {
		this.$.content.attachShadow({mode: 'open'});
		this.$.content.attachShadow({ mode: 'open' });
		}

		let scopeCssText = Array.from(templateRoot.querySelectorAll('style'))
		.reduce((result, style) => result + style.textContent, '');
		let scopeCssText = Array.from(templateRoot.querySelectorAll('style')).reduce(
		(result, style) => result + style.textContent,
		''
		);

		if (isShady) {
		// NOTE(platosha): ShadyCSS removes <style>’s from templates, so
		// we have to use these protected APIs to get their contents back
		const styleInfo = window.ShadyCSS.ScopingShim
		._styleInfoForNode(templateRoot.host);
		if (styleInfo) {
		scopeCssText += styleInfo._getStyleRules().parsedCssText;
		scopeCssText += '}';
		}
		}

		// The overlay root’s :host styles should not apply inside the overlay
		@@ -922,20 +875,7 @@ scopeCssText = scopeCssText.replace(/:host/g, ':host-nomatch');
		if (scopeCssText) {
		if (isShady) {
		// ShadyDOM: replace the <div part="content"> with a generated
		// styled custom element
		const contentPart = createOverlayContent(scopeCssText);
		contentPart.id = 'content';
		contentPart.setAttribute('part', 'content');
		this.$.content.parentNode.replaceChild(contentPart, this.$.content);
		// NOTE(platosha): carry the style scope of the content part
		contentPart.className = this.$.content.className;
		this._originalContentPart = this.$.content;
		this.$.content = contentPart;
		} else {
		// Shadow DOM: append a style to the content shadowRoot
		const style = document.createElement('style');
		style.textContent = scopeCssText;
		this.$.content.shadowRoot.appendChild(style);
		this._contentNodes.unshift(style);
		}
		// Append a style to the content shadowRoot
		const style = document.createElement('style');
		style.textContent = scopeCssText;
		this.$.content.shadowRoot.appendChild(style);
		this._contentNodes.unshift(style);
		}
		@@ -976,7 +916,7 @@

		const ownerOrModelChanged = (this._oldOwner !== owner \|\| this._oldModel !== model);
		const ownerOrModelChanged = this._oldOwner !== owner \|\| this._oldModel !== model;
		this._oldModel = model;
		this._oldOwner = owner;

		const templateOrInstancePropsChanged = (this._oldInstanceProps !== instanceProps \|\| this._oldTemplate !== template);
		const templateOrInstancePropsChanged = this._oldInstanceProps !== instanceProps \|\| this._oldTemplate !== template;
		this._oldInstanceProps = instanceProps;
		@@ -1044,3 +984,3 @@ this._oldTemplate = template;
		index = 0;
		// go to last item
		// go to last item
		} else if (index < 0) {
		@@ -1067,11 +1007,5 @@ index = focusableElements.length - 1;
		_getActiveElement() {
		let active = document._activeElement \|\| document.activeElement;
		// document.activeElement can be null
		// https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
		// In IE 11, it can also be an object when operating in iframes
		// or document.documentElement (when overlay closed on outside click).
		// In these cases, default it to document.body.
		if (!active \|\| active === document.documentElement \|\| active instanceof Element === false) {
		active = document.body;
		}
		let active = document.activeElement \|\| document.body;
		while (active.shadowRoot && active.shadowRoot.activeElement) {
		@@ -1106,3 +1040,3 @@ active = active.shadowRoot.activeElement;
		let zIndex = '';
		const frontmost = OverlayElement.__attachedInstances.filter(o => o !== this).pop();
		const frontmost = OverlayElement.__attachedInstances.filter((o) => o !== this).pop();
		if (frontmost) {
		@@ -1109,0 +1043,0 @@ const frontmostZIndex = frontmost.__zIndex;

theme/lumo/vaadin-overlay-styles.js

		@@ -0,12 +1,4 @@
		import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
		import '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
		import { html } from '@polymer/polymer/lib/utils/html-tag.js';

		const $_documentContainer = html`<dom-module id="lumo-vaadin-overlay" theme-for="vaadin-overlay">
		<template>
		<style include="lumo-overlay">
		/* stylelint-disable no-empty-source */
		</style>
		</template>
		</dom-module>`;

		document.head.appendChild($_documentContainer.content);
		registerStyles('vaadin-overlay', css``, { include: ['lumo-overlay'], moduleId: 'lumo-vaadin-overlay' });

theme/material/vaadin-overlay-styles.js

		@@ -0,12 +1,4 @@
		import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
		import '@vaadin/vaadin-material-styles/mixins/overlay.js';
		import { html } from '@polymer/polymer/lib/utils/html-tag.js';

		const $_documentContainer = html`<dom-module id="material-vaadin-overlay" theme-for="vaadin-overlay">
		<template>
		<style include="material-overlay">
		/* stylelint-disable no-empty-source */
		</style>
		</template>
		</dom-module>`;

		document.head.appendChild($_documentContainer.content);
		registerStyles('vaadin-overlay', css``, { include: ['material-overlay'], moduleId: 'material-vaadin-overlay' });

vaadin-overlay.d.ts

		@@ -1,14 +0,2 @@
		/**
		* DO NOT EDIT
		*
		* This file was automatically generated by
		* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
		*
		* To modify these typings, edit the source file(s):
		* vaadin-overlay.js
		*/


		// tslint:disable:variable-name Describing an API that's defined elsewhere.

		export * from './src/vaadin-overlay.js';
		export * from './src/interfaces';

./@types/interfaces.d.ts

theme/lumo/vaadin-overlay-styles.d.ts

theme/lumo/vaadin-overlay.d.ts

theme/material/vaadin-overlay-styles.d.ts

theme/material/vaadin-overlay.d.ts

@vaadin/vaadin-overlay - npm Package Compare versions

New alerts

Worsened metrics

Dependency changes