@vonage/vwc-popup 2.29.0 → 2.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vwc-popup",
-	"version": "2.29.0",
+	"version": "2.30.2",
 	"description": "popup component",
 	"homepage": "https://github.com/Vonage/vivid/tree/master/components/popup#readme",
 	"license": "ISC",
@@ -27,21 +27,20 @@
 		"url": "https://github.com/Vonage/vivid/issues"
 	},
 	"dependencies": {
-		"@floating-ui/core": "^0.2.1",
-		"@floating-ui/dom": "^0.1.7",
-		"@vonage/vvd-core": "2.29.0",
-		"@vonage/vvd-foundation": "2.29.0",
-		"@vonage/vwc-elevation": "2.29.0",
-		"@vonage/vwc-icon-button": "2.29.0",
+		"@floating-ui/dom": "^0.5.1",
+		"@vonage/vvd-core": "2.30.2",
+		"@vonage/vvd-foundation": "2.30.2",
+		"@vonage/vwc-elevation": "2.30.2",
+		"@vonage/vwc-icon-button": "2.30.2",
 		"lit-element": "^2.4.0",
 		"lit-html": "^1.3.0",
 		"tslib": "^2.3.0"
 	},
 	"devDependencies": {
-		"@vonage/vvd-design-tokens": "2.29.0",
-		"@vonage/vvd-typography": "2.29.0",
-		"@vonage/vvd-umbrella": "2.29.0",
+		"@vonage/vvd-design-tokens": "2.30.2",
+		"@vonage/vvd-typography": "2.30.2",
+		"@vonage/vvd-umbrella": "2.30.2",
 		"typescript": "^4.3.2"
 	},
-	"gitHead": "eff82e41e52088ccdf71bfb7fb296cec7cb95683"
+	"gitHead": "d73b307cb3204f1ccde5493947bde32815a3aa9d"
 }

package/src/vwc-popup-base.ts

@@ -1,26 +1,27 @@
 import {
-	html, LitElement, property, query, TemplateResult, PropertyValues
+	html, LitElement, property, query, TemplateResult
 } from 'lit-element';
 import { ClassInfo, classMap } from 'lit-html/directives/class-map.js';
 import { nothing } from 'lit-html';
-import { computePosition, offset, shift, flip, arrow } from '@floating-ui/dom';
-import type { Placement, Strategy, Padding } from '@floating-ui/core';
+import { arrow, autoUpdate, computePosition, flip, hide, inline, offset, Strategy } from '@floating-ui/dom';
+import type { Placement, Padding } from '@floating-ui/dom';
 
 export class VWCPopupBase extends LitElement {
 	private get PADDING(): Padding { return 0; };
 	private get DISTANCE(): number { return 12; };
+	private get arrowPosition(): any { return { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }; }
+	private cleanup?: () => void; // cleans the autoupdate
 
-	private onResizeWindow = this.updatePosition.bind(this);
     @query('.popup-wrapper')
 	private popupEl!: HTMLElement;
     @query('.popup-arrow')
     private arrowEl!: HTMLElement;
 
     private get middleware(): Array<any> {
-    	return (
-    		this.arrow ? [flip(), shift({ padding: this.PADDING }), arrow({ element: this.arrowEl, padding: this.PADDING }), offset(this.DISTANCE)]
-    			: [flip(), shift({ padding: this.PADDING })]);
-    };
+    	const middleware = [flip(), hide(), inline()];
+    	if (this.arrow) { middleware.push(arrow({ element: this.arrowEl, padding: this.PADDING }), offset(this.DISTANCE)); }
+    	return middleware;
+    }
 
     /**
      * @prop open - indicates whether the popup is open
@@ -122,38 +123,22 @@ export class VWCPopupBase extends LitElement {
     	this.open = false;
     }
 
-    private sizeObserver = new ResizeObserver(() => {
-    	return this.updatePosition();
-    });
-
-    override connectedCallback(): void {
-    	super.connectedCallback();
-    	window.addEventListener('scroll', this.updatePosition);
-    	window.addEventListener('resize', this.onResizeWindow);
-    }
-
     override disconnectedCallback(): void {
     	super.disconnectedCallback();
-    	window.removeEventListener('scroll', this.updatePosition);
-    	window.removeEventListener('resize', this.onResizeWindow);
-    	// Disconnect the observer to stop from running in the background
-    	this.sizeObserver.disconnect();
-    }
-
-    protected override firstUpdated(_changedProperties: PropertyValues): void {
-    	super.firstUpdated(_changedProperties);
-    	this.anchorEl = this.getAnchorById();
-    	if(this.anchorEl) this.sizeObserver.observe(this.anchorEl);
+    	this.cleanup?.();
     }
 
     protected override updated(changes: Map<string, boolean>): void {
     	super.updated(changes);
     	if (changes.has('anchor')) {
-    		this.sizeObserver.disconnect();
     		this.anchorEl = this.getAnchorById();
-    		if(this.anchorEl) this.sizeObserver.observe(this.anchorEl);
     	}
-    	this.updatePosition();
+    	if (this.anchorEl && this.popupEl) {
+    		this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
+    	}
+    	else {
+    		this.cleanup?.();
+    	}
     }
 
     /**
@@ -161,14 +146,10 @@ export class VWCPopupBase extends LitElement {
      * @public
      */
     async updatePosition() {
-    	if (!this.open) {
-    		return;
-    	}
-    	if (!this.anchorEl) {
-    		this.hide();
-    		console.error('Anchor is not defined');
+    	if (!this.open || !this.anchorEl) {
     		return;
     	}
+
     	const positionData = await computePosition(this.anchorEl, this.popupEl, {
     		placement: this.corner,
     		strategy: this.strategy,
@@ -180,19 +161,20 @@ export class VWCPopupBase extends LitElement {
 
     private assignPopupPosition(data: any): void {
     	const { x: popupX, y: popupY } = data;
+    	const { referenceHidden } = data.middlewareData.hide;
     	Object.assign(this.popupEl.style, {
     		left: `${popupX}px`,
     		top: `${popupY}px`,
+    		visibility: referenceHidden ? 'hidden' : 'visible',
     	});
     }
 
     private assignArrowPosition(data: any): void {
     	const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
-    	const staticSide: any = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' };
-    	const side: string = staticSide[data.placement.split('-')[0]];
+    	const side: string = this.arrowPosition[data.placement.split('-')[0]];
     	Object.assign(this.arrowEl.style, {
-    		left: arrowX != null ? `${arrowX}px` : '',
-    		top: arrowY != null ? `${arrowY}px` : '',
+    		left: `${arrowX}px`,
+    		top: `${arrowY}px`,
     		right: '',
     		bottom: '',
     		[side]: '-4px',

package/vwc-popup-base.d.ts

@@ -1,10 +1,12 @@
-import { LitElement, TemplateResult, PropertyValues } from 'lit-element';
+import { LitElement, TemplateResult } from 'lit-element';
 import { ClassInfo } from 'lit-html/directives/class-map.js';
-import type { Placement, Strategy } from '@floating-ui/core';
+import { Strategy } from '@floating-ui/dom';
+import type { Placement } from '@floating-ui/dom';
 export declare class VWCPopupBase extends LitElement {
     private get PADDING();
     private get DISTANCE();
-    private onResizeWindow;
+    private get arrowPosition();
+    private cleanup?;
     private popupEl;
     private arrowEl;
     private get middleware();
@@ -19,10 +21,7 @@ export declare class VWCPopupBase extends LitElement {
     private getAnchorById;
     show(): void;
     hide(): void;
-    private sizeObserver;
-    connectedCallback(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected updated(changes: Map<string, boolean>): void;
     updatePosition(): Promise<void>;
     private assignPopupPosition;

package/vwc-popup-base.js

@@ -2,28 +2,27 @@ import { __decorate } from "tslib";
 import { html, LitElement, property, query } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { nothing } from 'lit-html';
-import { computePosition, offset, shift, flip, arrow } from '@floating-ui/dom';
+import { arrow, autoUpdate, computePosition, flip, hide, inline, offset } from '@floating-ui/dom';
 export class VWCPopupBase extends LitElement {
     constructor() {
         super(...arguments);
-        this.onResizeWindow = this.updatePosition.bind(this);
         this.open = false;
         this.anchor = '';
         this.corner = 'left';
         this.strategy = 'fixed';
-        this.sizeObserver = new ResizeObserver(() => {
-            return this.updatePosition();
-        });
     }
     get PADDING() { return 0; }
     ;
     get DISTANCE() { return 12; }
     ;
+    get arrowPosition() { return { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }; }
     get middleware() {
-        return (this.arrow ? [flip(), shift({ padding: this.PADDING }), arrow({ element: this.arrowEl, padding: this.PADDING }), offset(this.DISTANCE)]
-            : [flip(), shift({ padding: this.PADDING })]);
+        const middleware = [flip(), hide(), inline()];
+        if (this.arrow) {
+            middleware.push(arrow({ element: this.arrowEl, padding: this.PADDING }), offset(this.DISTANCE));
+        }
+        return middleware;
     }
-    ;
     getAnchorById() {
         return document.getElementById(this.anchor);
     }
@@ -36,40 +35,26 @@ export class VWCPopupBase extends LitElement {
     hide() {
         this.open = false;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener('scroll', this.updatePosition);
-        window.addEventListener('resize', this.onResizeWindow);
-    }
     disconnectedCallback() {
+        var _a;
         super.disconnectedCallback();
-        window.removeEventListener('scroll', this.updatePosition);
-        window.removeEventListener('resize', this.onResizeWindow);
-        this.sizeObserver.disconnect();
-    }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        this.anchorEl = this.getAnchorById();
-        if (this.anchorEl)
-            this.sizeObserver.observe(this.anchorEl);
+        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     updated(changes) {
+        var _a;
         super.updated(changes);
         if (changes.has('anchor')) {
-            this.sizeObserver.disconnect();
             this.anchorEl = this.getAnchorById();
-            if (this.anchorEl)
-                this.sizeObserver.observe(this.anchorEl);
         }
-        this.updatePosition();
+        if (this.anchorEl && this.popupEl) {
+            this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
+        }
+        else {
+            (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
     }
     async updatePosition() {
-        if (!this.open) {
-            return;
-        }
-        if (!this.anchorEl) {
-            this.hide();
-            console.error('Anchor is not defined');
+        if (!this.open || !this.anchorEl) {
             return;
         }
         const positionData = await computePosition(this.anchorEl, this.popupEl, {
@@ -84,18 +69,19 @@ export class VWCPopupBase extends LitElement {
     }
     assignPopupPosition(data) {
         const { x: popupX, y: popupY } = data;
+        const { referenceHidden } = data.middlewareData.hide;
         Object.assign(this.popupEl.style, {
             left: `${popupX}px`,
             top: `${popupY}px`,
+            visibility: referenceHidden ? 'hidden' : 'visible',
         });
     }
     assignArrowPosition(data) {
         const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
-        const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' };
-        const side = staticSide[data.placement.split('-')[0]];
+        const side = this.arrowPosition[data.placement.split('-')[0]];
         Object.assign(this.arrowEl.style, {
-            left: arrowX != null ? `${arrowX}px` : '',
-            top: arrowY != null ? `${arrowY}px` : '',
+            left: `${arrowX}px`,
+            top: `${arrowY}px`,
             right: '',
             bottom: '',
             [side]: '-4px',

package/vwc-popup-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"vwc-popup-base.js","sourceRoot":"","sources":["src/vwc-popup-base.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\thtml, LitElement, property, query, TemplateResult, PropertyValues\n} from 'lit-element';\nimport { ClassInfo, classMap } from 'lit-html/directives/class-map.js';\nimport { nothing } from 'lit-html';\nimport { computePosition, offset, shift, flip, arrow } from '@floating-ui/dom';\nimport type { Placement, Strategy, Padding } from '@floating-ui/core';\n\nexport class VWCPopupBase extends LitElement {\n\tprivate get PADDING(): Padding { return 0; };\n\tprivate get DISTANCE(): number { return 12; };\n\n\tprivate onResizeWindow = this.updatePosition.bind(this);\n    @query('.popup-wrapper')\n\tprivate popupEl!: HTMLElement;\n    @query('.popup-arrow')\n    private arrowEl!: HTMLElement;\n\n    private get middleware(): Array<any> {\n    \treturn (\n    \t\tthis.arrow ? [flip(), shift({ padding: this.PADDING }), arrow({ element: this.arrowEl, padding: this.PADDING }), offset(this.DISTANCE)]\n    \t\t\t: [flip(), shift({ padding: this.PADDING })]);\n    };\n\n    /**\n     * @prop open - indicates whether the popup is open\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \topen = false;\n\n    /**\n     * @prop anchor - ID reference to element in the popup’s owner document.\n     * accepts string\n     * @public\n     * */\n    @property({ type: String, reflect: true })\n    \tanchor = '';\n\n    /**\n     * @prop anchorEl - popup's anchor element\n     * accepts Element\n     * @private\n     * */\n    @property({ type: Element, reflect: true })\n    private anchorEl: Element | null | undefined;\n\n    /**\n     * @prop dismissible - adds close button to the popup\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \tdismissible?: boolean;\n\n    /**\n     * @prop corner - the placement of the popup\n     * accepts  | 'top'\n                | 'top-start'\n                | 'top-end'\n                | 'right'\n                | 'right-start'\n                | 'right-end'\n                | 'bottom'\n                | 'bottom-start'\n                | 'bottom-end'\n                | 'left'\n                | 'left-start'\n                | 'left-end';\n     * @public\n     * */\n    @property({ type: String, reflect: true })\n    \tcorner: Placement = 'left';\n\n    /**\n     * @prop strategy - the position of the popup\n     * accepts 'absolute' | 'fixed';\n    * @public\n    * */\n    @property({ type: String, reflect: true })\n    \tstrategy: Strategy = 'fixed';\n\n    /**\n     * @prop arrow - adds small triangle to indicate the trigger element\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \tarrow?: boolean;\n\n    /**\n     * @prop alternate - set the color-scheme to dark\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \talternate?: boolean;\n\n    /**\n     * Gets the anchor element by id\n     */\n    private getAnchorById(): HTMLElement | null {\n    \treturn document.getElementById(this.anchor);\n    };\n\n    /**\n    * Opens the popup\n    * @public\n    */\n    show(): void {\n    \tif (this.anchorEl) { // only if anchor element exists\n    \t\tthis.open = true;\n    \t}\n    }\n\n    /**\n     * Closes the popup\n     * @public\n     */\n    hide(): void {\n    \tthis.open = false;\n    }\n\n    private sizeObserver = new ResizeObserver(() => {\n    \treturn this.updatePosition();\n    });\n\n    override connectedCallback(): void {\n    \tsuper.connectedCallback();\n    \twindow.addEventListener('scroll', this.updatePosition);\n    \twindow.addEventListener('resize', this.onResizeWindow);\n    }\n\n    override disconnectedCallback(): void {\n    \tsuper.disconnectedCallback();\n    \twindow.removeEventListener('scroll', this.updatePosition);\n    \twindow.removeEventListener('resize', this.onResizeWindow);\n    \t// Disconnect the observer to stop from running in the background\n    \tthis.sizeObserver.disconnect();\n    }\n\n    protected override firstUpdated(_changedProperties: PropertyValues): void {\n    \tsuper.firstUpdated(_changedProperties);\n    \tthis.anchorEl = this.getAnchorById();\n    \tif(this.anchorEl) this.sizeObserver.observe(this.anchorEl);\n    }\n\n    protected override updated(changes: Map<string, boolean>): void {\n    \tsuper.updated(changes);\n    \tif (changes.has('anchor')) {\n    \t\tthis.sizeObserver.disconnect();\n    \t\tthis.anchorEl = this.getAnchorById();\n    \t\tif(this.anchorEl) this.sizeObserver.observe(this.anchorEl);\n    \t}\n    \tthis.updatePosition();\n    }\n\n    /**\n     * Updates popup position, if succeeded returns - true, if not - false\n     * @public\n     */\n    async updatePosition() {\n    \tif (!this.open) {\n    \t\treturn;\n    \t}\n    \tif (!this.anchorEl) {\n    \t\tthis.hide();\n    \t\tconsole.error('Anchor is not defined');\n    \t\treturn;\n    \t}\n    \tconst positionData = await computePosition(this.anchorEl, this.popupEl, {\n    \t\tplacement: this.corner,\n    \t\tstrategy: this.strategy,\n    \t\tmiddleware: this.middleware\n    \t});\n    \tthis.assignPopupPosition(positionData);\n    \tif (this.arrow) { this.assignArrowPosition(positionData); }\n    }\n\n    private assignPopupPosition(data: any): void {\n    \tconst { x: popupX, y: popupY } = data;\n    \tObject.assign(this.popupEl.style, {\n    \t\tleft: `${popupX}px`,\n    \t\ttop: `${popupY}px`,\n    \t});\n    }\n\n    private assignArrowPosition(data: any): void {\n    \tconst { x: arrowX, y: arrowY } = data.middlewareData.arrow;\n    \tconst staticSide: any = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' };\n    \tconst side: string = staticSide[data.placement.split('-')[0]];\n    \tObject.assign(this.arrowEl.style, {\n    \t\tleft: arrowX != null ? `${arrowX}px` : '',\n    \t\ttop: arrowY != null ? `${arrowY}px` : '',\n    \t\tright: '',\n    \t\tbottom: '',\n    \t\t[side]: '-4px',\n    \t});\n    }\n\n    private handleDismissClick(): void {\n    \tthis.hide();\n    }\n\n    private renderDismissButton(): TemplateResult | unknown {\n    \treturn this.dismissible\n    \t\t? html`<vwc-icon-button @click=${this.handleDismissClick} class=\"popup-dismissible-button\" icon=\"close-small-solid\"\n    shape=\"circled\" dense></vwc-icon-button>`\n    \t\t: nothing;\n    }\n\n    private renderArrow(): TemplateResult | unknown {\n    \treturn this.arrow ? html`<div class=\"popup-arrow\"></div>` : nothing;\n    }\n\n    protected getRenderClasses(): ClassInfo {\n    \treturn {\n    \t\t['popup-open']: !!this.open,\n    \t\t['popup-dismissible']: !!this.dismissible\n    \t};\n    }\n\n    protected override render(): TemplateResult {\n    \tconst alternate = this.alternate ? 'vvd-scheme-alternate' : '';\n    \tconst aria = this.open ? 'false' : 'true';\n\n    \treturn html`\n                <vwc-elevation dp=\"2\">\n\t\t\t\t\t\t\t\t\t<!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->\n\t\t\t\t\t\t\t\t\t<!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme\n\t\t\t\t\t\t\t\t\t\t\t\tand affect the shadow style surfacing contrast which should still in default scheme context -->\n\t\t\t\t\t\t\t\t\t<div class=\"popup-wrapper\">\n                    <div class=\"popup ${classMap(this.getRenderClasses())}\" aria-hidden=${aria} part=${alternate}>\n                        <div class=\"popup-content\" >\n                            <slot></slot>\n                            ${this.renderDismissButton()}\n                        </div>\n                        ${this.renderArrow()}\n                    </div>\n\t\t\t\t\t\t\t\t\t</div>\n                </vwc-elevation>\n\n\t\t`;\n    }\n}\n"]}
+{"version":3,"file":"vwc-popup-base.js","sourceRoot":"","sources":["src/vwc-popup-base.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\thtml, LitElement, property, query, TemplateResult\n} from 'lit-element';\nimport { ClassInfo, classMap } from 'lit-html/directives/class-map.js';\nimport { nothing } from 'lit-html';\nimport { arrow, autoUpdate, computePosition, flip, hide, inline, offset, Strategy } from '@floating-ui/dom';\nimport type { Placement, Padding } from '@floating-ui/dom';\n\nexport class VWCPopupBase extends LitElement {\n\tprivate get PADDING(): Padding { return 0; };\n\tprivate get DISTANCE(): number { return 12; };\n\tprivate get arrowPosition(): any { return { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }; }\n\tprivate cleanup?: () => void; // cleans the autoupdate\n\n    @query('.popup-wrapper')\n\tprivate popupEl!: HTMLElement;\n    @query('.popup-arrow')\n    private arrowEl!: HTMLElement;\n\n    private get middleware(): Array<any> {\n    \tconst middleware = [flip(), hide(), inline()];\n    \tif (this.arrow) { middleware.push(arrow({ element: this.arrowEl, padding: this.PADDING }), offset(this.DISTANCE)); }\n    \treturn middleware;\n    }\n\n    /**\n     * @prop open - indicates whether the popup is open\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \topen = false;\n\n    /**\n     * @prop anchor - ID reference to element in the popup’s owner document.\n     * accepts string\n     * @public\n     * */\n    @property({ type: String, reflect: true })\n    \tanchor = '';\n\n    /**\n     * @prop anchorEl - popup's anchor element\n     * accepts Element\n     * @private\n     * */\n    @property({ type: Element, reflect: true })\n    private anchorEl: Element | null | undefined;\n\n    /**\n     * @prop dismissible - adds close button to the popup\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \tdismissible?: boolean;\n\n    /**\n     * @prop corner - the placement of the popup\n     * accepts  | 'top'\n                | 'top-start'\n                | 'top-end'\n                | 'right'\n                | 'right-start'\n                | 'right-end'\n                | 'bottom'\n                | 'bottom-start'\n                | 'bottom-end'\n                | 'left'\n                | 'left-start'\n                | 'left-end';\n     * @public\n     * */\n    @property({ type: String, reflect: true })\n    \tcorner: Placement = 'left';\n\n    /**\n     * @prop strategy - the position of the popup\n     * accepts 'absolute' | 'fixed';\n    * @public\n    * */\n    @property({ type: String, reflect: true })\n    \tstrategy: Strategy = 'fixed';\n\n    /**\n     * @prop arrow - adds small triangle to indicate the trigger element\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \tarrow?: boolean;\n\n    /**\n     * @prop alternate - set the color-scheme to dark\n     * accepts boolean value\n     * @public\n     * */\n    @property({ type: Boolean, reflect: true })\n    \talternate?: boolean;\n\n    /**\n     * Gets the anchor element by id\n     */\n    private getAnchorById(): HTMLElement | null {\n    \treturn document.getElementById(this.anchor);\n    };\n\n    /**\n    * Opens the popup\n    * @public\n    */\n    show(): void {\n    \tif (this.anchorEl) { // only if anchor element exists\n    \t\tthis.open = true;\n    \t}\n    }\n\n    /**\n     * Closes the popup\n     * @public\n     */\n    hide(): void {\n    \tthis.open = false;\n    }\n\n    override disconnectedCallback(): void {\n    \tsuper.disconnectedCallback();\n    \tthis.cleanup?.();\n    }\n\n    protected override updated(changes: Map<string, boolean>): void {\n    \tsuper.updated(changes);\n    \tif (changes.has('anchor')) {\n    \t\tthis.anchorEl = this.getAnchorById();\n    \t}\n    \tif (this.anchorEl && this.popupEl) {\n    \t\tthis.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());\n    \t}\n    \telse {\n    \t\tthis.cleanup?.();\n    \t}\n    }\n\n    /**\n     * Updates popup position, if succeeded returns - true, if not - false\n     * @public\n     */\n    async updatePosition() {\n    \tif (!this.open || !this.anchorEl) {\n    \t\treturn;\n    \t}\n\n    \tconst positionData = await computePosition(this.anchorEl, this.popupEl, {\n    \t\tplacement: this.corner,\n    \t\tstrategy: this.strategy,\n    \t\tmiddleware: this.middleware\n    \t});\n    \tthis.assignPopupPosition(positionData);\n    \tif (this.arrow) { this.assignArrowPosition(positionData); }\n    }\n\n    private assignPopupPosition(data: any): void {\n    \tconst { x: popupX, y: popupY } = data;\n    \tconst { referenceHidden } = data.middlewareData.hide;\n    \tObject.assign(this.popupEl.style, {\n    \t\tleft: `${popupX}px`,\n    \t\ttop: `${popupY}px`,\n    \t\tvisibility: referenceHidden ? 'hidden' : 'visible',\n    \t});\n    }\n\n    private assignArrowPosition(data: any): void {\n    \tconst { x: arrowX, y: arrowY } = data.middlewareData.arrow;\n    \tconst side: string = this.arrowPosition[data.placement.split('-')[0]];\n    \tObject.assign(this.arrowEl.style, {\n    \t\tleft: `${arrowX}px`,\n    \t\ttop: `${arrowY}px`,\n    \t\tright: '',\n    \t\tbottom: '',\n    \t\t[side]: '-4px',\n    \t});\n    }\n\n    private handleDismissClick(): void {\n    \tthis.hide();\n    }\n\n    private renderDismissButton(): TemplateResult | unknown {\n    \treturn this.dismissible\n    \t\t? html`<vwc-icon-button @click=${this.handleDismissClick} class=\"popup-dismissible-button\" icon=\"close-small-solid\"\n    shape=\"circled\" dense></vwc-icon-button>`\n    \t\t: nothing;\n    }\n\n    private renderArrow(): TemplateResult | unknown {\n    \treturn this.arrow ? html`<div class=\"popup-arrow\"></div>` : nothing;\n    }\n\n    protected getRenderClasses(): ClassInfo {\n    \treturn {\n    \t\t['popup-open']: !!this.open,\n    \t\t['popup-dismissible']: !!this.dismissible\n    \t};\n    }\n\n    protected override render(): TemplateResult {\n    \tconst alternate = this.alternate ? 'vvd-scheme-alternate' : '';\n    \tconst aria = this.open ? 'false' : 'true';\n\n    \treturn html`\n                <vwc-elevation dp=\"2\">\n\t\t\t\t\t\t\t\t\t<!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->\n\t\t\t\t\t\t\t\t\t<!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme\n\t\t\t\t\t\t\t\t\t\t\t\tand affect the shadow style surfacing contrast which should still in default scheme context -->\n\t\t\t\t\t\t\t\t\t<div class=\"popup-wrapper\">\n                    <div class=\"popup ${classMap(this.getRenderClasses())}\" aria-hidden=${aria} part=${alternate}>\n                        <div class=\"popup-content\" >\n                            <slot></slot>\n                            ${this.renderDismissButton()}\n                        </div>\n                        ${this.renderArrow()}\n                    </div>\n\t\t\t\t\t\t\t\t\t</div>\n                </vwc-elevation>\n\n\t\t`;\n    }\n}\n"]}