@vonage/vwc-popup 2.41.0 → 2.43.0
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.
- package/package.json +9 -9
- package/src/vwc-popup-base.ts +2 -1
- package/src/vwc-popup.css.ts +1 -1
- package/src/vwc-popup.scss +7 -1
- package/vwc-popup-base.js +1 -1
- package/vwc-popup-base.js.map +1 -1
- package/vwc-popup.css.js +1 -1
- package/vwc-popup.css.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-popup",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.43.0",
|
|
4
4
|
"description": "popup component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/popup#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -28,19 +28,19 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@floating-ui/dom": "^0.5.1",
|
|
31
|
-
"@vonage/vvd-core": "2.
|
|
32
|
-
"@vonage/vvd-foundation": "2.
|
|
33
|
-
"@vonage/vwc-elevation": "2.
|
|
34
|
-
"@vonage/vwc-icon-button": "2.
|
|
31
|
+
"@vonage/vvd-core": "2.43.0",
|
|
32
|
+
"@vonage/vvd-foundation": "2.43.0",
|
|
33
|
+
"@vonage/vwc-elevation": "2.43.0",
|
|
34
|
+
"@vonage/vwc-icon-button": "2.43.0",
|
|
35
35
|
"lit-element": "^2.4.0",
|
|
36
36
|
"lit-html": "^1.3.0",
|
|
37
37
|
"tslib": "^2.3.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@vonage/vvd-design-tokens": "2.
|
|
41
|
-
"@vonage/vvd-typography": "2.
|
|
42
|
-
"@vonage/vvd-umbrella": "2.
|
|
40
|
+
"@vonage/vvd-design-tokens": "2.43.0",
|
|
41
|
+
"@vonage/vvd-typography": "2.43.0",
|
|
42
|
+
"@vonage/vvd-umbrella": "2.43.0",
|
|
43
43
|
"typescript": "^4.3.2"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "99300bc256652c595ce519d5a9e5c4e582a6f8fa"
|
|
46
46
|
}
|
package/src/vwc-popup-base.ts
CHANGED
|
@@ -205,7 +205,7 @@ export class VWCPopupBase extends LitElement {
|
|
|
205
205
|
<!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->
|
|
206
206
|
<!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme
|
|
207
207
|
and affect the shadow style surfacing contrast which should still in default scheme context -->
|
|
208
|
-
<div class="popup-wrapper">
|
|
208
|
+
<div class="popup-wrapper ${this.strategy}">
|
|
209
209
|
<div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${alternate}>
|
|
210
210
|
<div class="popup-content" >
|
|
211
211
|
<slot></slot>
|
|
@@ -219,3 +219,4 @@ export class VWCPopupBase extends LitElement {
|
|
|
219
219
|
`;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
+
|
package/src/vwc-popup.css.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// autogenerated module
|
|
2
2
|
import {css} from 'lit-element';
|
|
3
|
-
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{
|
|
3
|
+
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{border-radius:6px}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute}.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
CHANGED
package/vwc-popup-base.js
CHANGED
|
@@ -113,7 +113,7 @@ export class VWCPopupBase extends LitElement {
|
|
|
113
113
|
<!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->
|
|
114
114
|
<!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme
|
|
115
115
|
and affect the shadow style surfacing contrast which should still in default scheme context -->
|
|
116
|
-
<div class="popup-wrapper">
|
|
116
|
+
<div class="popup-wrapper ${this.strategy}">
|
|
117
117
|
<div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${alternate}>
|
|
118
118
|
<div class="popup-content" >
|
|
119
119
|
<slot></slot>
|
package/vwc-popup-base.js.map
CHANGED
|
@@ -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\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 private anchorEl: Element | null | undefined;\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 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\t[this.arrowPosition[side]]: '',\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 private anchorEl: Element | null | undefined;\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 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\t[this.arrowPosition[side]]: '',\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 ${this.strategy}\">\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\n"]}
|
package/vwc-popup.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
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{
|
|
2
|
+
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{border-radius:6px}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute}.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}`;
|
|
3
3
|
//# sourceMappingURL=vwc-popup.css.js.map
|
package/vwc-popup.css.js.map
CHANGED
|
@@ -1 +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,
|
|
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,8mBAA8mB,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{border-radius:6px}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute}.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}`;"]}
|