@vonage/vwc-popup 2.32.0 → 2.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vwc-popup",
-	"version": "2.32.0",
+	"version": "2.34.0",
 	"description": "popup component",
 	"homepage": "https://github.com/Vonage/vivid/tree/master/components/popup#readme",
 	"license": "ISC",
@@ -28,19 +28,19 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^0.5.1",
-		"@vonage/vvd-core": "2.32.0",
-		"@vonage/vvd-foundation": "2.32.0",
-		"@vonage/vwc-elevation": "2.32.0",
-		"@vonage/vwc-icon-button": "2.32.0",
+		"@vonage/vvd-core": "2.34.0",
+		"@vonage/vvd-foundation": "2.34.0",
+		"@vonage/vwc-elevation": "2.34.0",
+		"@vonage/vwc-icon-button": "2.34.0",
 		"lit-element": "^2.4.0",
 		"lit-html": "^1.3.0",
 		"tslib": "^2.3.0"
 	},
 	"devDependencies": {
-		"@vonage/vvd-design-tokens": "2.32.0",
-		"@vonage/vvd-typography": "2.32.0",
-		"@vonage/vvd-umbrella": "2.32.0",
+		"@vonage/vvd-design-tokens": "2.34.0",
+		"@vonage/vvd-typography": "2.34.0",
+		"@vonage/vvd-umbrella": "2.34.0",
 		"typescript": "^4.3.2"
 	},
-	"gitHead": "eeb7694dfee9594e4388f50589dbf7f5de6c9f0c"
+	"gitHead": "e582f2efce9f76fba3cc893ffa005983c21e7d79"
 }

package/src/vwc-popup-base.ts

@@ -134,6 +134,7 @@ export class VWCPopupBase extends LitElement {
     		this.anchorEl = this.getAnchorById();
     	}
     	if (this.anchorEl && this.popupEl) {
+    		this.cleanup?.();
     		this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
     	}
     	else {

package/src/vwc-popup.css.ts

@@ -1,3 +1,3 @@
 // autogenerated module
 import {css} from 'lit-element';
-export const style = css`:host{z-index:7}.popup{width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:inherit;contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{position:absolute;border-radius:6px}.popup-content{display:grid}.popup-dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.popup-arrow{position:absolute;z-index:-1;width:8px;height:8px;background-color:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.popup-dismissible-button{align-self:flex-start;margin-block-start:.25rem;margin-inline-end:.25rem}`;
+export const style = css`:host{z-index:7}.popup{width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:inherit;contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{position:absolute;border-radius:6px}.popup-content{display:grid}.popup-dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.popup-arrow{position:absolute;z-index:-1;width:8px;height:8px;background-color:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.popup-dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}`;

package/src/vwc-popup.scss

@@ -42,7 +42,7 @@
 
 	&-dismissible-button {
 		align-self: flex-start;
-		margin-block-start: 0.25rem;
-		margin-inline-end: 0.25rem;
+		margin-block-start: 4px;
+		margin-inline-end: 4px;
 	}
 }

package/vwc-popup-base.js

@@ -41,16 +41,17 @@ export class VWCPopupBase extends LitElement {
         (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     updated(changes) {
-        var _a;
+        var _a, _b;
         super.updated(changes);
         if (changes.has('anchor')) {
             this.anchorEl = this.getAnchorById();
         }
         if (this.anchorEl && this.popupEl) {
+            (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
             this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
         }
         else {
-            (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_b = this.cleanup) === null || _b === void 0 ? void 0 : _b.call(this);
         }
     }
     async updatePosition() {

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\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"]}
+{"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?.();\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"]}

package/vwc-popup.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit-element';
-export const style = css `:host{z-index:7}.popup{width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:inherit;contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{position:absolute;border-radius:6px}.popup-content{display:grid}.popup-dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.popup-arrow{position:absolute;z-index:-1;width:8px;height:8px;background-color:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.popup-dismissible-button{align-self:flex-start;margin-block-start:.25rem;margin-inline-end:.25rem}`;
+export const style = css `:host{z-index:7}.popup{width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:inherit;contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{position:absolute;border-radius:6px}.popup-content{display:grid}.popup-dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.popup-arrow{position:absolute;z-index:-1;width:8px;height:8px;background-color:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.popup-dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}`;
 //# sourceMappingURL=vwc-popup.css.js.map

package/vwc-popup.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"vwc-popup.css.js","sourceRoot":"","sources":["src/vwc-popup.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,+iBAA+iB,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host{z-index:7}.popup{width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:inherit;contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{position:absolute;border-radius:6px}.popup-content{display:grid}.popup-dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.popup-arrow{position:absolute;z-index:-1;width:8px;height:8px;background-color:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.popup-dismissible-button{align-self:flex-start;margin-block-start:.25rem;margin-inline-end:.25rem}`;"]}
+{"version":3,"file":"vwc-popup.css.js","sourceRoot":"","sources":["src/vwc-popup.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,yiBAAyiB,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host{z-index:7}.popup{width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:inherit;contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{position:absolute;border-radius:6px}.popup-content{display:grid}.popup-dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.popup-arrow{position:absolute;z-index:-1;width:8px;height:8px;background-color:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.popup-dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}`;"]}