@vonage/vwc-popup 2.25.8 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vwc-popup",
-	"version": "2.25.8",
+	"version": "2.26.0",
 	"description": "popup component",
 	"homepage": "https://github.com/Vonage/vivid/tree/master/components/popup#readme",
 	"license": "ISC",
@@ -29,19 +29,19 @@
 	"dependencies": {
 		"@floating-ui/core": "^0.2.1",
 		"@floating-ui/dom": "^0.1.7",
-		"@vonage/vvd-core": "2.25.8",
-		"@vonage/vvd-foundation": "2.25.8",
-		"@vonage/vwc-elevation": "2.25.8",
-		"@vonage/vwc-icon-button": "2.25.8",
+		"@vonage/vvd-core": "2.26.0",
+		"@vonage/vvd-foundation": "2.26.0",
+		"@vonage/vwc-elevation": "2.26.0",
+		"@vonage/vwc-icon-button": "2.26.0",
 		"lit-element": "^2.4.0",
 		"lit-html": "^1.3.0",
 		"tslib": "^2.3.0"
 	},
 	"devDependencies": {
-		"@vonage/vvd-design-tokens": "2.25.8",
-		"@vonage/vvd-typography": "2.25.8",
-		"@vonage/vvd-umbrella": "2.25.8",
+		"@vonage/vvd-design-tokens": "2.26.0",
+		"@vonage/vvd-typography": "2.26.0",
+		"@vonage/vvd-umbrella": "2.26.0",
 		"typescript": "^4.3.2"
 	},
-	"gitHead": "0b9f6e05f1ffbb6b31a11ad9e02fe4e54a2df341"
+	"gitHead": "1218e3c7fed82e113d00f79adff58524550d26b6"
 }

package/src/vwc-popup-base.ts

@@ -1,5 +1,5 @@
 import {
-	PropertyValues, html, LitElement, property, query, TemplateResult
+	html, LitElement, property, query, TemplateResult, PropertyValues
 } from 'lit-element';
 import { ClassInfo, classMap } from 'lit-html/directives/class-map.js';
 import { nothing } from 'lit-html';
@@ -7,196 +7,236 @@ import { computePosition, offset, shift, flip, arrow } from '@floating-ui/dom';
 import type { Placement, Strategy, Padding } from '@floating-ui/core';
 
 export class VWCPopupBase extends LitElement {
+	private get PADDING(): Padding { return 0; };
+	private get DISTANCE(): number { return 12; };
+
 	private onResizeWindow = this.updatePosition.bind(this);
-	@query('.popup-wrapper') protected popupEl!: HTMLElement;
-	@query('.popup-arrow') protected arrowEl!: HTMLElement;
-	protected padding: Padding = 0;
-	protected distance = 12;
-
-	/**
-	 * @prop open - indicates whether the popup is open
-	 * accepts boolean value
-	 * @public
-	 * */
-	@property({ type: Boolean, reflect: true })
-		open = false;
-
-	/**
-	 * @prop anchor - the anchor of the popup
-	 * accepts Element
-	 * @public
-	 * */
-	@property({ type: Object })
-		anchor: HTMLElement | null = null;
-
-	/**
-	 * @prop dismissible - adds close button to the popup
-	 * accepts boolean value
-	 * @public
-	 * */
-	@property({ type: Boolean, reflect: true })
-		dismissible?: boolean;
-
-	/**
-	 * @prop corner - the placement of the popup
-	 * accepts  | 'top'
-				| 'top-start'
-				| 'top-end'
-				| 'right'
-				| 'right-start'
-				| 'right-end'
-				| 'bottom'
-				| 'bottom-start'
-				| 'bottom-end'
-				| 'left'
-				| 'left-start'
-				| 'left-end';
-	 * @public
-	 * */
-	@property({ type: String, reflect: true })
-		corner: Placement = 'left';
-
-	/**
-	 * @prop strategy - the position of the popup
-	 * accepts 'absolute' | 'fixed';
-	* @public
-	* */
-	@property({ type: String, reflect: true })
-		strategy: Strategy = 'fixed';
-
-	/**
-	 * @prop arrow - adds small triangle to indicate the trigger element
-	 * accepts boolean value
-	 * @public
-	 * */
-	@property({ type: Boolean, reflect: true })
-		arrow?: boolean;
-
-	/**
-	 * @prop alternate - set the color-scheme to dark
-	 * accepts boolean value
-	 * @public
-	 * */
-	@property({ type: Boolean, reflect: true })
-		alternate?: boolean;
-
-	/**
-	* Opens the popup
-	* @public
-	*/
-	show(): void {
-		this.open = true;
-	}
-
-	/**
-	 * Closes the popup
-	 * @public
-	 */
-	hide(): void {
-		this.open = false;
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		document.addEventListener('scroll', this.updatePosition);
-		window.addEventListener('resize', this.onResizeWindow);
-	}
-
-	override disconnectedCallback(): void {
-		super.disconnectedCallback();
-		document.removeEventListener('scroll', this.updatePosition);
-		window.removeEventListener('resize', this.onResizeWindow);
-	}
-
-	protected override firstUpdated(changedProperties: PropertyValues): void {
-		super.firstUpdated(changedProperties);
-		this.updatePosition();
-	}
-
-	protected override updated(changes: Map<string, boolean>): void {
-		super.updated(changes);
-		this.updatePosition();
-	}
-
-	/**
-	 * Updates popup position, if succeeded returns - true, if not - false
-	 * @public
-	 */
-	async updatePosition() {
-		if (!this.open || !this.anchor) {
-			return;
-		}
-
-		const middleware = [flip(), shift({ padding: this.padding })];
-		this.arrow ? middleware.push(arrow({ element: this.arrowEl, padding: this.padding }), offset(this.distance)) : nothing;
-		const positionData = await computePosition(this.anchor, this.popupEl, {
-			placement: this.corner,
-			strategy: this.strategy,
-			middleware: middleware
-		});
-		this.assignPopupPosition(positionData);
-		this.arrow ? this.assignArrowPosition(positionData) : nothing;
-	}
-
-	private assignPopupPosition(data: any): void {
-		const { x: popupX, y: popupY } = data;
-		Object.assign(this.popupEl.style, {
-			left: `${popupX}px`,
-			top: `${popupY}px`,
-		});
-	}
-
-	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]];
-		Object.assign(this.arrowEl.style, {
-			left: arrowX != null ? `${arrowX}px` : '',
-			top: arrowY != null ? `${arrowY}px` : '',
-			right: '',
-			bottom: '',
-			[side]: '-4px',
-		});
-	}
-
-	private handleDismissClick(): void {
-		this.hide();
-	}
-
-	private renderDismissButton(): TemplateResult | unknown {
-		return this.dismissible
-			? html`<vwc-icon-button @click=${this.handleDismissClick} class="popup-dismissible-button" icon="close-small-solid"
-	shape="circled" dense></vwc-icon-button>`
-			: nothing;
-	}
-
-	private renderArrow(): TemplateResult | unknown {
-		return this.arrow ? html`<div class="popup-arrow"></div>` : nothing;
-	}
-
-	protected getRenderClasses(): ClassInfo {
-		return {
-			['popup-open']: !!this.open,
-			['popup-dismissible']: !!this.dismissible
-		};
-	}
-
-	protected override render(): TemplateResult {
-		const part = this.alternate ? 'vvd-scheme-alternate' : '';
-		const aria = this.open ? 'false' : 'true';
-
-		return html`
-			<div class="popup-wrapper">
-				<vwc-elevation dp="2" >
-					<div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${part}>
-						<div class="popup-content">
-							<slot></slot>
-							${this.renderDismissButton()}
-						</div>
-						${this.renderArrow()}
-					</div>
-				</vwc-elevation>
-			</div>
+    @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 })]);
+    };
+
+    /**
+     * @prop open - indicates whether the popup is open
+     * accepts boolean value
+     * @public
+     * */
+    @property({ type: Boolean, reflect: true })
+    	open = false;
+
+    /**
+     * @prop anchor - ID reference to element in the popup’s owner document.
+     * accepts string
+     * @public
+     * */
+    @property({ type: String, reflect: true })
+    	anchor = '';
+
+    /**
+     * @prop anchorEl - popup's anchor element
+     * accepts Element
+     * @private
+     * */
+    @property({ type: Element, reflect: true })
+    private anchorEl: Element | null | undefined;
+
+    /**
+     * @prop dismissible - adds close button to the popup
+     * accepts boolean value
+     * @public
+     * */
+    @property({ type: Boolean, reflect: true })
+    	dismissible?: boolean;
+
+    /**
+     * @prop corner - the placement of the popup
+     * accepts  | 'top'
+                | 'top-start'
+                | 'top-end'
+                | 'right'
+                | 'right-start'
+                | 'right-end'
+                | 'bottom'
+                | 'bottom-start'
+                | 'bottom-end'
+                | 'left'
+                | 'left-start'
+                | 'left-end';
+     * @public
+     * */
+    @property({ type: String, reflect: true })
+    	corner: Placement = 'left';
+
+    /**
+     * @prop strategy - the position of the popup
+     * accepts 'absolute' | 'fixed';
+    * @public
+    * */
+    @property({ type: String, reflect: true })
+    	strategy: Strategy = 'fixed';
+
+    /**
+     * @prop arrow - adds small triangle to indicate the trigger element
+     * accepts boolean value
+     * @public
+     * */
+    @property({ type: Boolean, reflect: true })
+    	arrow?: boolean;
+
+    /**
+     * @prop alternate - set the color-scheme to dark
+     * accepts boolean value
+     * @public
+     * */
+    @property({ type: Boolean, reflect: true })
+    	alternate?: boolean;
+
+    /**
+     * Gets the anchor element by id
+     */
+    private getAnchorById(): HTMLElement | null {
+    	return document.getElementById(this.anchor);
+    };
+
+    /**
+    * Opens the popup
+    * @public
+    */
+    show(): void {
+    	if (this.anchorEl) { // only if anchor element exists
+    		this.open = true;
+    	}
+    }
+
+    /**
+     * Closes the popup
+     * @public
+     */
+    hide(): void {
+    	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);
+    }
+
+    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();
+    }
+
+    /**
+     * Updates popup position, if succeeded returns - true, if not - false
+     * @public
+     */
+    async updatePosition() {
+    	if (!this.open) {
+    		return;
+    	}
+    	if (!this.anchorEl) {
+    		this.hide();
+    		console.error('Anchor is not defined');
+    		return;
+    	}
+    	const positionData = await computePosition(this.anchorEl, this.popupEl, {
+    		placement: this.corner,
+    		strategy: this.strategy,
+    		middleware: this.middleware
+    	});
+    	this.assignPopupPosition(positionData);
+    	if (this.arrow) { this.assignArrowPosition(positionData); }
+    }
+
+    private assignPopupPosition(data: any): void {
+    	const { x: popupX, y: popupY } = data;
+    	Object.assign(this.popupEl.style, {
+    		left: `${popupX}px`,
+    		top: `${popupY}px`,
+    	});
+    }
+
+    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]];
+    	Object.assign(this.arrowEl.style, {
+    		left: arrowX != null ? `${arrowX}px` : '',
+    		top: arrowY != null ? `${arrowY}px` : '',
+    		right: '',
+    		bottom: '',
+    		[side]: '-4px',
+    	});
+    }
+
+    private handleDismissClick(): void {
+    	this.hide();
+    }
+
+    private renderDismissButton(): TemplateResult | unknown {
+    	return this.dismissible
+    		? html`<vwc-icon-button @click=${this.handleDismissClick} class="popup-dismissible-button" icon="close-small-solid"
+    shape="circled" dense></vwc-icon-button>`
+    		: nothing;
+    }
+
+    private renderArrow(): TemplateResult | unknown {
+    	return this.arrow ? html`<div class="popup-arrow"></div>` : nothing;
+    }
+
+    protected getRenderClasses(): ClassInfo {
+    	return {
+    		['popup-open']: !!this.open,
+    		['popup-dismissible']: !!this.dismissible
+    	};
+    }
+
+    protected override render(): TemplateResult {
+    	const part = this.alternate ? 'vvd-scheme-alternate' : '';
+    	const aria = this.open ? 'false' : 'true';
+
+    	return html`
+            <div class="popup-wrapper">
+                <vwc-elevation dp="2">
+                    <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${part}>
+                        <div class="popup-content">
+                            <slot></slot>
+                            ${this.renderDismissButton()}
+                        </div>
+                        ${this.renderArrow()}
+                    </div>
+                </vwc-elevation>
+            </div>
 		`;
-	}
+    }
 }

package/vwc-popup-base.d.ts

@@ -1,24 +1,28 @@
-import { PropertyValues, LitElement, TemplateResult } from 'lit-element';
+import { LitElement, TemplateResult, PropertyValues } from 'lit-element';
 import { ClassInfo } from 'lit-html/directives/class-map.js';
-import type { Placement, Strategy, Padding } from '@floating-ui/core';
+import type { Placement, Strategy } from '@floating-ui/core';
 export declare class VWCPopupBase extends LitElement {
+    private get PADDING();
+    private get DISTANCE();
     private onResizeWindow;
-    protected popupEl: HTMLElement;
-    protected arrowEl: HTMLElement;
-    protected padding: Padding;
-    protected distance: number;
+    private popupEl;
+    private arrowEl;
+    private get middleware();
     open: boolean;
-    anchor: HTMLElement | null;
+    anchor: string;
+    private anchorEl;
     dismissible?: boolean;
     corner: Placement;
     strategy: Strategy;
     arrow?: boolean;
     alternate?: boolean;
+    private getAnchorById;
     show(): void;
     hide(): void;
+    private sizeObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected updated(changes: Map<string, boolean>): void;
     updatePosition(): Promise<void>;
     private assignPopupPosition;

package/vwc-popup-base.js

@@ -7,50 +7,80 @@ export class VWCPopupBase extends LitElement {
     constructor() {
         super(...arguments);
         this.onResizeWindow = this.updatePosition.bind(this);
-        this.padding = 0;
-        this.distance = 12;
         this.open = false;
-        this.anchor = null;
+        this.anchor = '';
         this.corner = 'left';
         this.strategy = 'fixed';
+        this.sizeObserver = new ResizeObserver(() => {
+            return this.updatePosition();
+        });
+    }
+    get PADDING() { return 0; }
+    ;
+    get DISTANCE() { return 12; }
+    ;
+    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 })]);
+    }
+    ;
+    getAnchorById() {
+        return document.getElementById(this.anchor);
     }
+    ;
     show() {
-        this.open = true;
+        if (this.anchorEl) {
+            this.open = true;
+        }
     }
     hide() {
         this.open = false;
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('scroll', this.updatePosition);
+        window.addEventListener('scroll', this.updatePosition);
         window.addEventListener('resize', this.onResizeWindow);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('scroll', this.updatePosition);
+        window.removeEventListener('scroll', this.updatePosition);
         window.removeEventListener('resize', this.onResizeWindow);
+        this.sizeObserver.disconnect();
     }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.updatePosition();
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.anchorEl = this.getAnchorById();
+        if (this.anchorEl)
+            this.sizeObserver.observe(this.anchorEl);
     }
     updated(changes) {
         super.updated(changes);
+        if (changes.has('anchor')) {
+            this.sizeObserver.disconnect();
+            this.anchorEl = this.getAnchorById();
+            if (this.anchorEl)
+                this.sizeObserver.observe(this.anchorEl);
+        }
         this.updatePosition();
     }
     async updatePosition() {
-        if (!this.open || !this.anchor) {
+        if (!this.open) {
             return;
         }
-        const middleware = [flip(), shift({ padding: this.padding })];
-        this.arrow ? middleware.push(arrow({ element: this.arrowEl, padding: this.padding }), offset(this.distance)) : nothing;
-        const positionData = await computePosition(this.anchor, this.popupEl, {
+        if (!this.anchorEl) {
+            this.hide();
+            console.error('Anchor is not defined');
+            return;
+        }
+        const positionData = await computePosition(this.anchorEl, this.popupEl, {
             placement: this.corner,
             strategy: this.strategy,
-            middleware: middleware
+            middleware: this.middleware
         });
         this.assignPopupPosition(positionData);
-        this.arrow ? this.assignArrowPosition(positionData) : nothing;
+        if (this.arrow) {
+            this.assignArrowPosition(positionData);
+        }
     }
     assignPopupPosition(data) {
         const { x: popupX, y: popupY } = data;
@@ -77,7 +107,7 @@ export class VWCPopupBase extends LitElement {
     renderDismissButton() {
         return this.dismissible
             ? html `<vwc-icon-button @click=${this.handleDismissClick} class="popup-dismissible-button" icon="close-small-solid"
-	shape="circled" dense></vwc-icon-button>`
+    shape="circled" dense></vwc-icon-button>`
             : nothing;
     }
     renderArrow() {
@@ -93,17 +123,17 @@ export class VWCPopupBase extends LitElement {
         const part = this.alternate ? 'vvd-scheme-alternate' : '';
         const aria = this.open ? 'false' : 'true';
         return html `
-			<div class="popup-wrapper">
-				<vwc-elevation dp="2" >
-					<div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${part}>
-						<div class="popup-content">
-							<slot></slot>
-							${this.renderDismissButton()}
-						</div>
-						${this.renderArrow()}
-					</div>
-				</vwc-elevation>
-			</div>
+            <div class="popup-wrapper">
+                <vwc-elevation dp="2">
+                    <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${part}>
+                        <div class="popup-content">
+                            <slot></slot>
+                            ${this.renderDismissButton()}
+                        </div>
+                        ${this.renderArrow()}
+                    </div>
+                </vwc-elevation>
+            </div>
 		`;
     }
 }
@@ -117,8 +147,11 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], VWCPopupBase.prototype, "open", void 0);
 __decorate([
-    property({ type: Object })
+    property({ type: String, reflect: true })
 ], VWCPopupBase.prototype, "anchor", void 0);
+__decorate([
+    property({ type: Element, reflect: true })
+], VWCPopupBase.prototype, "anchorEl", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], VWCPopupBase.prototype, "dismissible", void 0);

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\tPropertyValues, html, LitElement, property, query, TemplateResult\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 onResizeWindow = this.updatePosition.bind(this);\n\t@query('.popup-wrapper') protected popupEl!: HTMLElement;\n\t@query('.popup-arrow') protected arrowEl!: HTMLElement;\n\tprotected padding: Padding = 0;\n\tprotected distance = 12;\n\n\t/**\n\t * @prop open - indicates whether the popup is open\n\t * accepts boolean value\n\t * @public\n\t * */\n\t@property({ type: Boolean, reflect: true })\n\t\topen = false;\n\n\t/**\n\t * @prop anchor - the anchor of the popup\n\t * accepts Element\n\t * @public\n\t * */\n\t@property({ type: Object })\n\t\tanchor: HTMLElement | null = null;\n\n\t/**\n\t * @prop dismissible - adds close button to the popup\n\t * accepts boolean value\n\t * @public\n\t * */\n\t@property({ type: Boolean, reflect: true })\n\t\tdismissible?: boolean;\n\n\t/**\n\t * @prop corner - the placement of the popup\n\t * accepts  | 'top'\n\t\t\t\t| 'top-start'\n\t\t\t\t| 'top-end'\n\t\t\t\t| 'right'\n\t\t\t\t| 'right-start'\n\t\t\t\t| 'right-end'\n\t\t\t\t| 'bottom'\n\t\t\t\t| 'bottom-start'\n\t\t\t\t| 'bottom-end'\n\t\t\t\t| 'left'\n\t\t\t\t| 'left-start'\n\t\t\t\t| 'left-end';\n\t * @public\n\t * */\n\t@property({ type: String, reflect: true })\n\t\tcorner: Placement = 'left';\n\n\t/**\n\t * @prop strategy - the position of the popup\n\t * accepts 'absolute' | 'fixed';\n\t* @public\n\t* */\n\t@property({ type: String, reflect: true })\n\t\tstrategy: Strategy = 'fixed';\n\n\t/**\n\t * @prop arrow - adds small triangle to indicate the trigger element\n\t * accepts boolean value\n\t * @public\n\t * */\n\t@property({ type: Boolean, reflect: true })\n\t\tarrow?: boolean;\n\n\t/**\n\t * @prop alternate - set the color-scheme to dark\n\t * accepts boolean value\n\t * @public\n\t * */\n\t@property({ type: Boolean, reflect: true })\n\t\talternate?: boolean;\n\n\t/**\n\t* Opens the popup\n\t* @public\n\t*/\n\tshow(): void {\n\t\tthis.open = true;\n\t}\n\n\t/**\n\t * Closes the popup\n\t * @public\n\t */\n\thide(): void {\n\t\tthis.open = false;\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tdocument.addEventListener('scroll', this.updatePosition);\n\t\twindow.addEventListener('resize', this.onResizeWindow);\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tdocument.removeEventListener('scroll', this.updatePosition);\n\t\twindow.removeEventListener('resize', this.onResizeWindow);\n\t}\n\n\tprotected override firstUpdated(changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(changedProperties);\n\t\tthis.updatePosition();\n\t}\n\n\tprotected override updated(changes: Map<string, boolean>): void {\n\t\tsuper.updated(changes);\n\t\tthis.updatePosition();\n\t}\n\n\t/**\n\t * Updates popup position, if succeeded returns - true, if not - false\n\t * @public\n\t */\n\tasync updatePosition() {\n\t\tif (!this.open || !this.anchor) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst middleware = [flip(), shift({ padding: this.padding })];\n\t\tthis.arrow ? middleware.push(arrow({ element: this.arrowEl, padding: this.padding }), offset(this.distance)) : nothing;\n\t\tconst positionData = await computePosition(this.anchor, this.popupEl, {\n\t\t\tplacement: this.corner,\n\t\t\tstrategy: this.strategy,\n\t\t\tmiddleware: middleware\n\t\t});\n\t\tthis.assignPopupPosition(positionData);\n\t\tthis.arrow ? this.assignArrowPosition(positionData) : nothing;\n\t}\n\n\tprivate assignPopupPosition(data: any): void {\n\t\tconst { x: popupX, y: popupY } = data;\n\t\tObject.assign(this.popupEl.style, {\n\t\t\tleft: `${popupX}px`,\n\t\t\ttop: `${popupY}px`,\n\t\t});\n\t}\n\n\tprivate assignArrowPosition(data: any): void {\n\t\tconst { x: arrowX, y: arrowY } = data.middlewareData.arrow;\n\t\tconst staticSide: any = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' };\n\t\tconst side: string = staticSide[data.placement.split('-')[0]];\n\t\tObject.assign(this.arrowEl.style, {\n\t\t\tleft: arrowX != null ? `${arrowX}px` : '',\n\t\t\ttop: arrowY != null ? `${arrowY}px` : '',\n\t\t\tright: '',\n\t\t\tbottom: '',\n\t\t\t[side]: '-4px',\n\t\t});\n\t}\n\n\tprivate handleDismissClick(): void {\n\t\tthis.hide();\n\t}\n\n\tprivate renderDismissButton(): TemplateResult | unknown {\n\t\treturn this.dismissible\n\t\t\t? html`<vwc-icon-button @click=${this.handleDismissClick} class=\"popup-dismissible-button\" icon=\"close-small-solid\"\n\tshape=\"circled\" dense></vwc-icon-button>`\n\t\t\t: nothing;\n\t}\n\n\tprivate renderArrow(): TemplateResult | unknown {\n\t\treturn this.arrow ? html`<div class=\"popup-arrow\"></div>` : nothing;\n\t}\n\n\tprotected getRenderClasses(): ClassInfo {\n\t\treturn {\n\t\t\t['popup-open']: !!this.open,\n\t\t\t['popup-dismissible']: !!this.dismissible\n\t\t};\n\t}\n\n\tprotected override render(): TemplateResult {\n\t\tconst part = this.alternate ? 'vvd-scheme-alternate' : '';\n\t\tconst aria = this.open ? 'false' : 'true';\n\n\t\treturn html`\n\t\t\t<div class=\"popup-wrapper\">\n\t\t\t\t<vwc-elevation dp=\"2\" >\n\t\t\t\t\t<div class=\"popup ${classMap(this.getRenderClasses())}\" aria-hidden=${aria} part=${part}>\n\t\t\t\t\t\t<div class=\"popup-content\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t${this.renderDismissButton()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t${this.renderArrow()}\n\t\t\t\t\t</div>\n\t\t\t\t</vwc-elevation>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n"]}
+{"version":3,"file":"vwc-popup-base.js","sourceRoot":"","sources":["src/vwc-popup-base.ts"],"names":[],"mappings":";AAAA,OAAO,EACN,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EACjC,MAAM,aAAa,CAAC;AACrB,OAAO,EAAa,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/E,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAIS,mBAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAkBpD,SAAI,GAAG,KAAK,CAAC;QAQb,WAAM,GAAG,EAAE,CAAC;QAmCZ,WAAM,GAAc,MAAM,CAAC;QAQ3B,aAAQ,GAAa,OAAO,CAAC;QA2CtB,iBAAY,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC9C,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;IAmHP,CAAC;IAxOA,IAAY,OAAO,KAAc,OAAO,CAAC,CAAC,CAAC,CAAC;IAAA,CAAC;IAC7C,IAAY,QAAQ,KAAa,OAAO,EAAE,CAAC,CAAC,CAAC;IAAA,CAAC;IAQ3C,IAAY,UAAU;QACrB,OAAO,CACN,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACtI,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IAAA,CAAC;IAgFM,aAAa;QACpB,OAAO,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7C,CAAC;IAAA,CAAC;IAMF,IAAI;QACH,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SACjB;IACF,CAAC;IAMD,IAAI;QACH,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACnB,CAAC;IAMQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACvD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACxD,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAE1D,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;IAChC,CAAC;IAEkB,YAAY,CAAC,kBAAkC;QACjE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACrC,IAAG,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5D,CAAC;IAEkB,OAAO,CAAC,OAA6B;QACvD,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;YAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACrC,IAAG,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC3D;QACD,IAAI,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC;IAMD,KAAK,CAAC,cAAc;QACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACf,OAAO;SACP;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;YACvC,OAAO;SACP;QACD,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE;YACvE,SAAS,EAAE,IAAI,CAAC,MAAM;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,KAAK,EAAE;YAAE,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;SAAE;IAC5D,CAAC;IAEO,mBAAmB,CAAC,IAAS;QACpC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACtC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YACjC,IAAI,EAAE,GAAG,MAAM,IAAI;YACnB,GAAG,EAAE,GAAG,MAAM,IAAI;SAClB,CAAC,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,IAAS;QACpC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QAC3D,MAAM,UAAU,GAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;QACvF,MAAM,IAAI,GAAW,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YACjC,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;YACzC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;YACxC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,CAAC,IAAI,CAAC,EAAE,MAAM;SACd,CAAC,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACzB,IAAI,CAAC,IAAI,EAAE,CAAC;IACb,CAAC;IAEO,mBAAmB;QAC1B,OAAO,IAAI,CAAC,WAAW;YACtB,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,kBAAkB;6CACjB;YACvC,CAAC,CAAC,OAAO,CAAC;IACZ,CAAC;IAEO,WAAW;QAClB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAC,CAAC,OAAO,CAAC;IACrE,CAAC;IAES,gBAAgB;QACzB,OAAO;YACN,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;YAC3B,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW;SACzC,CAAC;IACH,CAAC;IAEkB,MAAM;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QAE1C,OAAO,IAAI,CAAA;;;wCAGwB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,iBAAiB,IAAI,SAAS,IAAI;;;8BAG7E,IAAI,CAAC,mBAAmB,EAAE;;0BAE9B,IAAI,CAAC,WAAW,EAAE;;;;GAIzC,CAAC;IACA,CAAC;CACJ;AAnOA;IADI,KAAK,CAAC,gBAAgB,CAAC;6CACG;AAE3B;IADC,KAAK,CAAC,cAAc,CAAC;6CACQ;AAc7B;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC7B;AAQb;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC7B;AAQb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACE;AAQ5C;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACpB;AAmBtB;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACd;AAQ3B;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACZ;AAQ7B;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAQhB;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACtB","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 part = this.alternate ? 'vvd-scheme-alternate' : '';\n    \tconst aria = this.open ? 'false' : 'true';\n\n    \treturn html`\n            <div class=\"popup-wrapper\">\n                <vwc-elevation dp=\"2\">\n                    <div class=\"popup ${classMap(this.getRenderClasses())}\" aria-hidden=${aria} part=${part}>\n                        <div class=\"popup-content\">\n                            <slot></slot>\n                            ${this.renderDismissButton()}\n                        </div>\n                        ${this.renderArrow()}\n                    </div>\n                </vwc-elevation>\n            </div>\n\t\t`;\n    }\n}\n"]}