npm - @vonage/vwc-popup - Versions diffs - 2.30.1 → 2.30.2 - Mend

@vonage/vwc-popup 2.30.1 → 2.30.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vwc-popup",
-	"version": "2.30.1",
+	"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.30.1",
-		"@vonage/vvd-foundation": "2.30.1",
-		"@vonage/vwc-elevation": "2.30.1",
-		"@vonage/vwc-icon-button": "2.30.1",
+		"@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.30.1",
-		"@vonage/vvd-typography": "2.30.1",
-		"@vonage/vvd-umbrella": "2.30.1",
+		"@vonage/vvd-design-tokens": "2.30.2",
+		"@vonage/vvd-typography": "2.30.2",
+		"@vonage/vvd-umbrella": "2.30.2",
 		"typescript": "^4.3.2"
 	},
-	"gitHead": "b33204e17adaf85866c337562d8e3dfade4105af"
+	"gitHead": "d73b307cb3204f1ccde5493947bde32815a3aa9d"
 }

package/src/vwc-popup-base.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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\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"]}