@fluid-topics/ft-popover 1.3.31 → 1.3.32

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 (6) hide show
  1. package/build/ft-popover.light.js +172 -172
  2. package/build/ft-popover.min.js +158 -158
  3. package/build/ftds-popover.d.ts +11 -14
  4. package/build/ftds-popover.js +76 -66
  5. package/build/ftds-popover.styles.js +14 -14
  6. package/package.json +7 -7
package/build/ftds-popover.d.ts CHANGED
@@ -7,7 +7,6 @@ import { FtIcons } from "@fluid-topics/ft-icon";
7
7
  export declare class FtdsPopover extends FtLitElement implements FtdsPopoverProperties {
8
8
  static elementDefinitions: ElementDefinitionsMap;
9
9
  static styles: import("lit").CSSResult;
10
- private popoverOpenTriggeredWithKeyboard;
11
10
  heading: string;
12
11
  closeButtonLabel: string;
13
12
  openButtonIcon: FtIcons;
@@ -17,23 +16,21 @@ export declare class FtdsPopover extends FtLitElement implements FtdsPopoverProp
17
16
  hidden: boolean;
18
17
  openButtonSize: DesignSystemSize;
19
18
  openButtonFamily: DesignSystemFamily;
20
- private openingButton;
21
- private closingButton;
22
- private popoverWrapper;
23
- private popoverContentDiv;
24
- private popoverContentSlot;
25
- private slottedLinkContent;
26
- private popoverLinkTypography;
27
- private popoverSectionsDiv;
28
- private popoverSectionsSlot;
19
+ private openingButton?;
20
+ private closingButton?;
21
+ private popoverWrapper?;
22
+ private popoverContentDiv?;
23
+ private popoverContentSlot?;
24
+ private slottedLinkContent?;
25
+ private popoverLinkTypography?;
26
+ private popoverSectionsDiv?;
27
+ private popoverSectionsSlot?;
29
28
  protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
30
29
  renderPopover(): import("lit-html").TemplateResult<1> | typeof nothing;
31
- renderClosingButton(): import("lit-html").TemplateResult<1>;
32
- renderHeading(): import("lit-html").TemplateResult<1> | typeof nothing;
33
30
  updated(properties: PropertyValues<FtdsPopover>): void;
34
31
  close(): void;
35
- open(event: PointerEvent): void;
36
- hasEmptySlot(slot: HTMLSlotElement): boolean;
32
+ open(): void;
33
+ hasEmptySlot(slot?: HTMLSlotElement): boolean;
37
34
  private watchFocusIn;
38
35
  private watchEscapeKey;
39
36
  private closeAndFocusOpeningButton;
package/build/ftds-popover.js CHANGED
@@ -6,8 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { html, nothing } from "lit";
8
8
  import { property, query } from "lit/decorators.js";
9
+ import { ifDefined } from "lit/directives/if-defined.js";
9
10
  import { computeOffsetAutoPosition, FtLitElement, unslotText } from "@fluid-topics/ft-wc-utils";
10
- import { FtTypography } from "@fluid-topics/ft-typography";
11
+ import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
11
12
  import { FtdsButton } from "@fluid-topics/ft-button";
12
13
  import { styles } from "./ftds-popover.styles";
13
14
  import { classMap } from "lit/directives/class-map.js";
@@ -16,7 +17,6 @@ import { FtIcons } from "@fluid-topics/ft-icon";
16
17
  class FtdsPopover extends FtLitElement {
17
18
  constructor() {
18
19
  super(...arguments);
19
- this.popoverOpenTriggeredWithKeyboard = false;
20
20
  this.heading = "";
21
21
  this.closeButtonLabel = "close info";
22
22
  this.openButtonIcon = FtIcons.CIRCLE_QUESTION;
@@ -27,33 +27,30 @@ class FtdsPopover extends FtLitElement {
27
27
  this.openButtonSize = DesignSystemSize.medium;
28
28
  this.openButtonFamily = DesignSystemFamily.info;
29
29
  this.watchFocusIn = (event) => {
30
- if (!event.composedPath().includes(this.popoverWrapper)) {
30
+ if (this.popoverWrapper && !event.composedPath().includes(this.popoverWrapper)) {
31
31
  this.close();
32
32
  }
33
33
  };
34
34
  this.watchEscapeKey = (event) => {
35
+ var _a;
35
36
  if (event.key === "Escape") {
36
37
  this.close();
37
- this.openingButton.focus();
38
+ (_a = this.openingButton) === null || _a === void 0 ? void 0 : _a.focus();
38
39
  }
39
40
  };
40
- this.closeAndFocusOpeningButton = (event) => {
41
- this.close();
42
- !!event.pointerType ? this.openingButton.focusWithoutTooltip() : this.openingButton.focus();
43
- };
44
41
  }
45
42
  render() {
46
43
  const classes = {
47
- "ftds-popover": true,
48
- "ftds-popover--opened": this.opened
44
+ opened: this.opened,
49
45
  };
50
46
  return this.hidden ? nothing : html `
51
- <div part="container" class="${classMap(classes)}">
52
- <ftds-button @focusin="${this.close}"
47
+ <div part="root-container" class="${classMap(classes)}">
48
+ <ftds-button @focusin=${this.close}
53
49
  part="opening-button"
54
- size="${this.openButtonSize}" family="${this.openButtonFamily}" label="${this.openButtonLabel}"
55
- tooltipposition="${this.openButtonTooltipPosition}" icon="${this.openButtonIcon}"
56
- aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="ftds-popover-dialog"
50
+ icon="${this.openButtonIcon}"
51
+ size="${this.openButtonSize}" family="${this.openButtonFamily}"
52
+ label="${this.openButtonLabel}" tooltipposition="${this.openButtonTooltipPosition}"
53
+ aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="ftds-popover-wrapper"
57
54
  @click=${this.open}>
58
55
  </ftds-button>
59
56
  ${this.renderPopover()}
@@ -62,48 +59,46 @@ class FtdsPopover extends FtLitElement {
62
59
  }
63
60
  renderPopover() {
64
61
  return this.opened ? html `
65
- <div class="ftds-popover--container">
66
- <div class="ftds-popover--overlay" part="overlay" @click="${this.close}"></div>
67
- <div class="ftds-popover--wrapper" part="wrapper" role="dialog" id="ftds-popover-dialog"
68
- aria-labelledby="ftds-popover-heading" aria-describedby="ftds-popover-content">
69
- ${this.renderClosingButton()}
62
+ <div part="popover-container">
63
+ <div part="overlay" @click=${this.close}></div>
64
+ <div id="ftds-popover-wrapper" part="wrapper" role="dialog"
65
+ aria-labelledby="${ifDefined(this.heading ? "ftds-popover-heading" : undefined)}"
66
+ aria-describedby="ftds-popover-content">
67
+ <div part="closing-button-container">
68
+ <ftds-button part="closing-button"
69
+ icon="${FtIcons.CLOSE}"
70
+ size="${DesignSystemSize.small}"
71
+ family="${DesignSystemFamily.neutral}"
72
+ label="${this.closeButtonLabel}"
73
+ @click=${this.closeAndFocusOpeningButton}></ftds-button>
74
+ </div>
70
75
  <slot name="heading">
71
- ${this.renderHeading()}
76
+ ${this.heading ? html `
77
+ <div id="ftds-popover-heading" part="heading">
78
+ <ft-typography element="span" variant="${FtTypographyVariants.body2semibold}">
79
+ ${this.heading}
80
+ </ft-typography>
81
+ </div>
82
+ ` : nothing}
72
83
  </slot>
73
- <div class="ftds-popover--content" part="content" id="ftds-popover-content">
74
- <ft-typography variant="body-2-medium">
84
+ <div id="ftds-popover-content" part="content">
85
+ <ft-typography variant="${FtTypographyVariants.body2medium}">
75
86
  <slot part="popover-content-slot"></slot>
76
87
  </ft-typography>
77
88
  </div>
78
- <ft-typography variant="body-2-medium" part="popover-link-typography">
89
+ <ft-typography variant="${FtTypographyVariants.body2medium}" part="popover-link-typography">
79
90
  <slot name="link"
80
91
  part="popover-link"
81
- class="ftds-popover--link"
82
92
  @slotchange=${() => this.requestUpdate()}
83
93
  ></slot>
84
94
  </ft-typography>
85
- <div part="popover-sections" class="ftds-popover-sections">
86
- <slot name="sections" part="popover-sections-slot" class="ftds-popover--sections"></slot>
95
+ <div part="popover-sections">
96
+ <slot name="sections" part="popover-sections-slot"></slot>
87
97
  </div>
88
98
  </div>
89
99
  </div>
90
100
  ` : nothing;
91
101
  }
92
- renderClosingButton() {
93
- return html `
94
- <div class="ftds-popover--closing-button">
95
- <ftds-button icon="${FtIcons.CLOSE}" size="${DesignSystemSize.small}" family="${DesignSystemFamily.neutral}"
96
- part="closing-button" label="${this.closeButtonLabel}" @click=${this.closeAndFocusOpeningButton}></ftds-button>
97
- </div>
98
- `;
99
- }
100
- renderHeading() {
101
- return this.heading ? html `
102
- <div class="ftds-popover--heading" part="heading" id="ftds-popover-heading">
103
- <ft-typography element="span" variant="body-2-semibold">${this.heading}</ft-typography>
104
- </div>
105
- ` : nothing;
106
- }
107
102
  updated(properties) {
108
103
  super.updated(properties);
109
104
  if (properties.has("opened")) {
@@ -124,31 +119,46 @@ class FtdsPopover extends FtLitElement {
124
119
  this.opened = false;
125
120
  this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: false } }));
126
121
  }
127
- open(event) {
128
- this.popoverOpenTriggeredWithKeyboard = !event.pointerType;
122
+ open() {
129
123
  this.opened = true;
130
124
  this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: true } }));
131
125
  }
132
126
  hasEmptySlot(slot) {
133
127
  return unslotText(slot).trim().length === 0;
134
128
  }
129
+ closeAndFocusOpeningButton() {
130
+ var _a, _b;
131
+ this.close();
132
+ (_a = this.openingButton) === null || _a === void 0 ? void 0 : _a.focus();
133
+ if (window.FluidTopicsA11yHints.isKeyboardNavigation) {
134
+ (_b = this.openingButton) === null || _b === void 0 ? void 0 : _b.showTooltip();
135
+ }
136
+ }
135
137
  async positionWrapper() {
136
- this.popoverWrapper.classList.remove("ftds-popover--wrapper-positioned");
137
- this.popoverWrapper.style.left = "";
138
- this.popoverWrapper.style.top = "";
139
- const reference = this.openingButton;
140
- const fallbackPlacements = ["right-start", "bottom-end", "right-end", "left-start", "left-end", "top-start", "top-end"];
141
- const { x, y } = await computeOffsetAutoPosition(reference, this.popoverWrapper, "bottom-start", fallbackPlacements, "fixed");
142
- this.popoverWrapper.style.left = `${x}px`;
143
- this.popoverWrapper.style.top = `${y}px`;
144
- this.popoverWrapper.classList.add("ftds-popover--wrapper-positioned");
138
+ var _a, _b;
139
+ if (this.popoverWrapper) {
140
+ this.popoverWrapper.classList.remove("positioned");
141
+ this.popoverWrapper.style.left = "";
142
+ this.popoverWrapper.style.top = "";
143
+ if (this.openingButton) {
144
+ const fallbackPlacements = ["right-start", "bottom-end", "right-end", "left-start", "left-end", "top-start", "top-end"];
145
+ const { x, y } = await computeOffsetAutoPosition(this.openingButton, this.popoverWrapper, "bottom-start", fallbackPlacements, "fixed");
146
+ this.popoverWrapper.style.left = `${x}px`;
147
+ this.popoverWrapper.style.top = `${y}px`;
148
+ }
149
+ this.popoverWrapper.classList.add("positioned");
150
+ }
145
151
  this.hideUnusedSlots();
146
- this.popoverOpenTriggeredWithKeyboard ? this.closingButton.focus() : this.closingButton.focusWithoutTooltip();
152
+ (_a = this.closingButton) === null || _a === void 0 ? void 0 : _a.focus();
153
+ if (window.FluidTopicsA11yHints.isKeyboardNavigation) {
154
+ (_b = this.closingButton) === null || _b === void 0 ? void 0 : _b.showTooltip();
155
+ }
147
156
  }
148
157
  hideUnusedSlots() {
149
- this.hasEmptySlot(this.slottedLinkContent) ? this.popoverLinkTypography.classList.add("hidden") : this.popoverLinkTypography.classList.remove("hidden");
150
- this.hasEmptySlot(this.popoverContentSlot) ? this.popoverContentDiv.classList.add("hidden") : this.popoverContentDiv.classList.remove("hidden");
151
- this.hasEmptySlot(this.popoverSectionsSlot) ? this.popoverSectionsDiv.classList.add("hidden") : this.popoverSectionsDiv.classList.remove("hidden");
158
+ var _a, _b, _c;
159
+ (_a = this.popoverLinkTypography) === null || _a === void 0 ? void 0 : _a.classList.toggle("hidden", this.hasEmptySlot(this.slottedLinkContent));
160
+ (_b = this.popoverContentDiv) === null || _b === void 0 ? void 0 : _b.classList.toggle("hidden", this.hasEmptySlot(this.popoverContentSlot));
161
+ (_c = this.popoverSectionsDiv) === null || _c === void 0 ? void 0 : _c.classList.toggle("hidden", this.hasEmptySlot(this.popoverSectionsSlot));
152
162
  }
153
163
  }
154
164
  FtdsPopover.elementDefinitions = {
@@ -184,30 +194,30 @@ __decorate([
184
194
  property({ type: DesignSystemFamily })
185
195
  ], FtdsPopover.prototype, "openButtonFamily", void 0);
186
196
  __decorate([
187
- query("[part=opening-button]")
197
+ query(`[part="opening-button"]`)
188
198
  ], FtdsPopover.prototype, "openingButton", void 0);
189
199
  __decorate([
190
- query("[part=closing-button]")
200
+ query(`[part="closing-button"]`)
191
201
  ], FtdsPopover.prototype, "closingButton", void 0);
192
202
  __decorate([
193
- query("[part=wrapper]")
203
+ query(`[part="wrapper"]`)
194
204
  ], FtdsPopover.prototype, "popoverWrapper", void 0);
195
205
  __decorate([
196
- query("[part=content]")
206
+ query(`[part="content"]`)
197
207
  ], FtdsPopover.prototype, "popoverContentDiv", void 0);
198
208
  __decorate([
199
- query("[part=popover-content-slot]")
209
+ query(`[part="popover-content-slot"]`)
200
210
  ], FtdsPopover.prototype, "popoverContentSlot", void 0);
201
211
  __decorate([
202
- query("[part=popover-link]")
212
+ query(`[part="popover-link"]`)
203
213
  ], FtdsPopover.prototype, "slottedLinkContent", void 0);
204
214
  __decorate([
205
- query("[part=popover-link-typography]")
215
+ query(`[part="popover-link-typography"]`)
206
216
  ], FtdsPopover.prototype, "popoverLinkTypography", void 0);
207
217
  __decorate([
208
- query("[part=popover-sections]")
218
+ query(`[part="popover-sections"]`)
209
219
  ], FtdsPopover.prototype, "popoverSectionsDiv", void 0);
210
220
  __decorate([
211
- query("[part=popover-sections-slot]")
221
+ query(`[part="popover-sections-slot"]`)
212
222
  ], FtdsPopover.prototype, "popoverSectionsSlot", void 0);
213
223
  export { FtdsPopover };
package/build/ftds-popover.styles.js CHANGED
@@ -1,30 +1,30 @@
1
1
  import { css } from "lit";
2
2
  import { popover } from "@fluid-topics/design-system-variables";
3
- //language=css
3
+ // language=css
4
4
  export const styles = css `
5
5
  :host {
6
6
  position: relative;
7
7
  display: inline-block;
8
8
  }
9
9
 
10
- .ftds-popover {
10
+ [part="root-container"] {
11
11
  position: relative;
12
12
  }
13
13
 
14
- .ftds-popover--container {
14
+ [part="popover-container"] {
15
15
  position: absolute;
16
16
  z-index: 100;
17
17
  display: block;
18
18
  margin: auto;
19
19
  }
20
20
 
21
- .ftds-popover--closing-button {
21
+ [part="closing-button-container"] {
22
22
  position: absolute;
23
23
  top: 8px;
24
24
  right: 8px;
25
25
  }
26
26
 
27
- .ftds-popover--overlay {
27
+ [part="overlay"] {
28
28
  position: fixed;
29
29
  top: 0;
30
30
  right: 0;
@@ -35,7 +35,7 @@ export const styles = css `
35
35
  opacity: 0;
36
36
  }
37
37
 
38
- .ftds-popover--wrapper {
38
+ [part="wrapper"] {
39
39
  visibility: hidden;
40
40
  position: fixed;
41
41
  display: flex;
@@ -53,9 +53,13 @@ export const styles = css `
53
53
  background-color: ${popover.backgroundColor};
54
54
  border-radius: ${popover.borderRadius};
55
55
  box-shadow: ${popover.shadow};
56
+
57
+ &.positioned {
58
+ visibility: visible;
59
+ }
56
60
  }
57
61
 
58
- .ftds-popover--heading {
62
+ [part="heading"] {
59
63
  flex-shrink: 0;
60
64
 
61
65
  display: flex;
@@ -65,7 +69,7 @@ export const styles = css `
65
69
  color: ${popover.titleColor};
66
70
  }
67
71
 
68
- .ftds-popover--heading ft-typography {
72
+ [part="heading"] ft-typography {
69
73
  flex-grow: 1;
70
74
  flex-shrink: 1;
71
75
  text-overflow: ellipsis;
@@ -73,15 +77,11 @@ export const styles = css `
73
77
  white-space: nowrap;
74
78
  }
75
79
 
76
- .ftds-popover--content {
80
+ [part="content"] {
77
81
  color: ${popover.bodyColor};
78
82
  }
79
83
 
80
- .ftds-popover--wrapper-positioned {
81
- visibility: visible;
82
- }
83
-
84
- .ftds-popover-sections {
84
+ [part="popover-sections"] {
85
85
  display: flex;
86
86
  flex-direction: column;
87
87
  gap: ${popover.multiSectionVerticalGap};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-popover",
3
- "version": "1.3.31",
3
+ "version": "1.3.32",
4
4
  "description": "A simple popover component",
5
5
  "keywords": [
6
6
  "Lit"
@@ -20,12 +20,12 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@fluid-topics/design-system-variables": "2.53.0",
23
- "@fluid-topics/ft-button": "1.3.31",
24
- "@fluid-topics/ft-icon": "1.3.31",
25
- "@fluid-topics/ft-link": "1.3.31",
26
- "@fluid-topics/ft-typography": "1.3.31",
27
- "@fluid-topics/ft-wc-utils": "1.3.31",
23
+ "@fluid-topics/ft-button": "1.3.32",
24
+ "@fluid-topics/ft-icon": "1.3.32",
25
+ "@fluid-topics/ft-link": "1.3.32",
26
+ "@fluid-topics/ft-typography": "1.3.32",
27
+ "@fluid-topics/ft-wc-utils": "1.3.32",
28
28
  "lit": "3.1.0"
29
29
  },
30
- "gitHead": "21f607fc431d772e45fa35847dbf676e00665302"
30
+ "gitHead": "60fe73e7ae4d0815116abe89d2c4315cf454f626"
31
31
  }