@vonage/vwc-popup 2.27.0 → 2.28.1

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 (8) hide show
  1. package/package.json +9 -9
  2. package/src/vwc-popup-base.ts +9 -5
  3. package/src/vwc-popup.css.ts +1 -1
  4. package/src/vwc-popup.scss +2 -2
  5. package/vwc-popup-base.js +9 -5
  6. package/vwc-popup-base.js.map +1 -1
  7. package/vwc-popup.css.js +1 -1
  8. 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.27.0",
3
+ "version": "2.28.1",
4
4
  "description": "popup component",
5
5
  "homepage": "https://github.com/Vonage/vivid/tree/master/components/popup#readme",
6
6
  "license": "ISC",
@@ -29,19 +29,19 @@
29
29
  "dependencies": {
30
30
  "@floating-ui/core": "^0.2.1",
31
31
  "@floating-ui/dom": "^0.1.7",
32
- "@vonage/vvd-core": "2.27.0",
33
- "@vonage/vvd-foundation": "2.27.0",
34
- "@vonage/vwc-elevation": "2.27.0",
35
- "@vonage/vwc-icon-button": "2.27.0",
32
+ "@vonage/vvd-core": "2.28.1",
33
+ "@vonage/vvd-foundation": "2.28.1",
34
+ "@vonage/vwc-elevation": "2.28.1",
35
+ "@vonage/vwc-icon-button": "2.28.1",
36
36
  "lit-element": "^2.4.0",
37
37
  "lit-html": "^1.3.0",
38
38
  "tslib": "^2.3.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@vonage/vvd-design-tokens": "2.27.0",
42
- "@vonage/vvd-typography": "2.27.0",
43
- "@vonage/vvd-umbrella": "2.27.0",
41
+ "@vonage/vvd-design-tokens": "2.28.1",
42
+ "@vonage/vvd-typography": "2.28.1",
43
+ "@vonage/vvd-umbrella": "2.28.1",
44
44
  "typescript": "^4.3.2"
45
45
  },
46
- "gitHead": "85d8fd8a95005c39d800994bf28f768655f482fd"
46
+ "gitHead": "418f944f11670728833a1a38e5c89e0e6afb6ef7"
47
47
  }
package/src/vwc-popup-base.ts CHANGED
@@ -222,21 +222,25 @@ export class VWCPopupBase extends LitElement {
222
222
  }
223
223
 
224
224
  protected override render(): TemplateResult {
225
- const part = this.alternate ? 'vvd-scheme-alternate' : '';
225
+ const alternate = this.alternate ? 'vvd-scheme-alternate' : '';
226
226
  const aria = this.open ? 'false' : 'true';
227
227
 
228
228
  return html`
229
- <div class="popup-wrapper">
230
229
  <vwc-elevation dp="2">
231
- <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${part}>
232
- <div class="popup-content">
230
+ <!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->
231
+ <!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme
232
+ and affect the shadow style surfacing contrast which should still in default scheme context -->
233
+ <div class="popup-wrapper">
234
+ <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${alternate}>
235
+ <div class="popup-content" >
233
236
  <slot></slot>
234
237
  ${this.renderDismissButton()}
235
238
  </div>
236
239
  ${this.renderArrow()}
237
240
  </div>
241
+ </div>
238
242
  </vwc-elevation>
239
- </div>
243
+
240
244
  `;
241
245
  }
242
246
  }
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{--border-radius-size: 6px;width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:var(--border-radius-size);contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{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:.25rem;margin-inline-end:.25rem}`;
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{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}`;
package/src/vwc-popup.scss CHANGED
@@ -8,10 +8,9 @@
8
8
  }
9
9
 
10
10
  .popup {
11
- --border-radius-size: 6px;
12
11
  width: min-content;
13
12
  background-color: var(#{scheme-variables.$vvd-color-surface-4dp});
14
- border-radius: var(--border-radius-size);
13
+ border-radius: inherit;
15
14
  contain: layout;
16
15
  &:not(.popup-open) {
17
16
  display: none;
@@ -19,6 +18,7 @@
19
18
 
20
19
  &-wrapper {
21
20
  position: absolute;
21
+ border-radius: 6px;
22
22
  }
23
23
 
24
24
  &-content {
package/vwc-popup-base.js CHANGED
@@ -120,20 +120,24 @@ export class VWCPopupBase extends LitElement {
120
120
  };
121
121
  }
122
122
  render() {
123
- const part = this.alternate ? 'vvd-scheme-alternate' : '';
123
+ const alternate = this.alternate ? 'vvd-scheme-alternate' : '';
124
124
  const aria = this.open ? 'false' : 'true';
125
125
  return html `
126
- <div class="popup-wrapper">
127
126
  <vwc-elevation dp="2">
128
- <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${part}>
129
- <div class="popup-content">
127
+ <!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->
128
+ <!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme
129
+ and affect the shadow style surfacing contrast which should still in default scheme context -->
130
+ <div class="popup-wrapper">
131
+ <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${alternate}>
132
+ <div class="popup-content" >
130
133
  <slot></slot>
131
134
  ${this.renderDismissButton()}
132
135
  </div>
133
136
  ${this.renderArrow()}
134
137
  </div>
138
+ </div>
135
139
  </vwc-elevation>
136
- </div>
140
+
137
141
  `;
138
142
  }
139
143
  }
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, 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"]}
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"]}
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{--border-radius-size: 6px;width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:var(--border-radius-size);contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{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:.25rem;margin-inline-end:.25rem}`;
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{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}`;
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,ykBAAykB,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host{z-index:7}.popup{--border-radius-size: 6px;width:min-content;background-color:var(--vvd-color-surface-4dp);border-radius:var(--border-radius-size);contain:layout}.popup:not(.popup-open){display:none}.popup-wrapper{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:.25rem;margin-inline-end:.25rem}`;"]}
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}`;"]}