@fluid-topics/ft-popover 2.0.5 → 2.0.7

package/build/ft-popover.properties.d.ts

@@ -0,0 +1,3 @@
+import { FtBasePopoverProperties } from "./ft-base-popover";
+export interface FtPopoverProperties extends FtBasePopoverProperties {
+}

package/build/ft-popover.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ft-popover.styles.d.ts

@@ -0,0 +1 @@
+export declare const ftPopoverStyles: import("lit").CSSResult;

package/build/ft-popover.styles.js

@@ -0,0 +1,65 @@
+import { css } from "lit";
+// language=css
+export const ftPopoverStyles = css `
+    :host {
+        position: relative;
+        display: inline-block;
+    }
+
+    [part="root-container"] {
+        position: relative;
+    }
+
+    [part="popover-container"] {
+        position: absolute;
+        z-index: 100;
+        display: block;
+        margin: auto;
+    }
+
+    [part="closing-button-container"] {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+
+        ft-button {
+            --ft-button-icon-size: 12px;
+            --ft-button-background-color: #fff;
+        }
+    }
+
+    [part="overlay"] {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        opacity: 0;
+    }
+
+    [part="wrapper"] {
+        visibility: hidden;
+        position: fixed;
+        display: flex;
+        flex-direction: column;
+
+        max-width: 464px;
+        width: max-content;
+
+        padding: 24px;
+
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 0 1px 0 #0000000F, 0 2px 5px 0 #00000024, 0 4px 10px 0 #0000000F;;
+
+        &.positioned {
+            visibility: visible;
+        }
+    }
+
+    .hidden {
+        display: none;
+    }
+`;

package/build/ftds-popover.d.ts

@@ -1,39 +1,27 @@
-import { nothing, PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtdsButton } from "@fluid-topics/ft-button";
 import { FtdsPopoverProperties } from "./ftds-popover.properties";
-import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
-import { Position } from "@fluid-topics/ft-tooltip";
-import { FtIcons } from "@fluid-topics/ft-icon";
-export declare class FtdsPopover extends FtLitElement implements FtdsPopoverProperties {
-    static elementDefinitions: ElementDefinitionsMap;
+import { FtBasePopover } from "./ft-base-popover";
+export declare class FtdsPopover extends FtBasePopover implements FtdsPopoverProperties {
     static styles: import("lit").CSSResult;
+    static elementDefinitions: ElementDefinitionsMap;
     heading: string;
-    closeButtonLabel: string;
-    openButtonIcon: FtIcons;
-    openButtonLabel: string;
-    openButtonTooltipPosition: Position;
-    opened: boolean;
-    hidden: boolean;
-    openButtonSize: DesignSystemSize;
-    openButtonFamily: DesignSystemFamily;
-    private openingButton?;
-    private closingButton?;
-    private popoverWrapper?;
+    protected openingButton?: FtdsButton;
+    protected closingButton?: FtdsButton;
     private popoverContentDiv?;
     private popoverContentSlot?;
     private slottedLinkContent?;
     private popoverLinkTypography?;
     private popoverSectionsDiv?;
     private popoverSectionsSlot?;
-    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    renderPopover(): typeof nothing | import("lit-html").TemplateResult<1>;
-    updated(properties: PropertyValues<FtdsPopover>): void;
-    close(): void;
-    open(): void;
-    hasEmptySlot(slot?: HTMLSlotElement): boolean;
-    private watchFocusIn;
-    private watchEscapeKey;
-    private closeAndFocusOpeningButton;
-    private positionWrapper;
-    private hideUnusedSlots;
+    protected wrapperId: string;
+    protected headingId: string;
+    protected contentId: string;
+    maxWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    protected renderOpeningButton(): TemplateResult;
+    protected renderClosingButton(): TemplateResult;
+    protected renderFullContent(): TemplateResult;
+    protected hideUnusedSlots(): void;
+    private hasEmptySlot;
 }

package/build/ftds-popover.js

@@ -5,154 +5,73 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from "lit";
-import { property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { computeOffsetAutoPosition, FtLitElement, unslotText } from "@fluid-topics/ft-wc-utils";
+import { query } from "lit/decorators.js";
+import { unslotText } from "@fluid-topics/ft-wc-utils";
 import { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtdsButton } from "@fluid-topics/ft-button";
-import { styles } from "./ftds-popover.styles";
-import { classMap } from "lit/directives/class-map.js";
-import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { DesignSystemFamily, DesignSystemSize, popover } from "@fluid-topics/design-system-variables";
 import { FtIcons } from "@fluid-topics/ft-icon";
-class FtdsPopover extends FtLitElement {
+import { FtBasePopover } from "./ft-base-popover";
+import { property } from "lit/decorators.js";
+import { styles } from "./ftds-popover.styles";
+class FtdsPopover extends FtBasePopover {
     constructor() {
         super(...arguments);
         this.heading = "";
-        this.closeButtonLabel = "close info";
-        this.openButtonIcon = FtIcons.CIRCLE_QUESTION;
-        this.openButtonLabel = "more info";
-        this.openButtonTooltipPosition = "bottom";
-        this.opened = false;
-        this.hidden = false;
-        this.openButtonSize = DesignSystemSize.medium;
-        this.openButtonFamily = DesignSystemFamily.info;
-        this.watchFocusIn = (event) => {
-            if (this.popoverWrapper && !event.composedPath().includes(this.popoverWrapper)) {
-                this.close();
-            }
-        };
-        this.watchEscapeKey = (event) => {
-            var _a;
-            if (event.key === "Escape") {
-                this.close();
-                (_a = this.openingButton) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        };
+        this.wrapperId = "ftds-popover-wrapper";
+        this.headingId = "ftds-popover-heading";
+        this.contentId = "ftds-popover-content";
+        this.maxWidth = popover.maxWidth;
     }
-    render() {
-        const classes = {
-            opened: this.opened,
-        };
-        return this.hidden ? nothing : html `
-            <div part="root-container" class="${classMap(classes)}">
-                <ftds-button @focusin=${this.close}
-                             part="opening-button"
-                             icon="${this.openButtonIcon}"
-                             size="${this.openButtonSize}" family="${this.openButtonFamily}"
-                             label="${this.openButtonLabel}" tooltipposition="${this.openButtonTooltipPosition}"
-                             aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="ftds-popover-wrapper"
-                             @click=${this.open}>
-                </ftds-button>
-                ${this.renderPopover()}
-            </div>
+    renderOpeningButton() {
+        return html `
+            <ftds-button @focusin=${this.close}
+                         part="opening-button"
+                         icon="${this.openButtonIcon}"
+                         size="${this.openButtonSize}" family="${this.openButtonFamily}"
+                         label="${this.openButtonLabel}" tooltipposition="${this.openButtonTooltipPosition}"
+                         aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="${this.wrapperId}"
+                         @click=${this.open}>
+            </ftds-button>
         `;
     }
-    renderPopover() {
-        return this.opened ? html `
-            <div part="popover-container">
-                <div part="overlay" @click=${this.close}></div>
-                <div id="ftds-popover-wrapper" part="wrapper" role="dialog"
-                     aria-labelledby="${ifDefined(this.heading ? "ftds-popover-heading" : undefined)}"
-                     aria-describedby="ftds-popover-content">
-                    <div part="closing-button-container">
-                        <ftds-button part="closing-button"
-                                     icon="${FtIcons.CLOSE}"
-                                     size="${DesignSystemSize.small}"
-                                     family="${DesignSystemFamily.neutral}"
-                                     label="${this.closeButtonLabel}"
-                                     @click=${this.closeAndFocusOpeningButton}></ftds-button>
-                    </div>
-                    <slot name="heading">
-                        ${this.heading ? html `
-                                <div id="ftds-popover-heading" part="heading">
-                                    <ftds-typography element="span" variant="${FtdsTypographyVariants.body2semibold}">
-                                        ${this.heading}
-                                    </ftds-typography>
-                                </div>
-                            ` : nothing}
-                    </slot>
-                    <div id="ftds-popover-content" part="content">
-                        <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
-                            <slot part="popover-content-slot"></slot>
-                        </ftds-typography>
-                    </div>
-                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}" part="popover-link-typography">
-                        <slot name="link"
-                              part="popover-link"
-                              @slotchange=${() => this.requestUpdate()}
-                        ></slot>
-                    </ftds-typography>
-                    <div part="popover-sections">
-                        <slot name="sections" part="popover-sections-slot"></slot>
-                    </div>
-                </div>
-            </div>
-        ` : nothing;
-    }
-    updated(properties) {
-        super.updated(properties);
-        if (properties.has("opened")) {
-            if (this.opened) {
-                setTimeout(() => {
-                    this.positionWrapper();
-                    document.addEventListener("keydown", this.watchEscapeKey);
-                    document.addEventListener("focusin", this.watchFocusIn);
-                }, 0);
-            }
-            else {
-                document.removeEventListener("keydown", this.watchEscapeKey);
-                document.removeEventListener("focusin", this.watchFocusIn);
-            }
-        }
-    }
-    close() {
-        this.opened = false;
-        this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: false } }));
-    }
-    open() {
-        this.opened = true;
-        this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: true } }));
-    }
-    hasEmptySlot(slot) {
-        return unslotText(slot).trim().length === 0;
-    }
-    closeAndFocusOpeningButton() {
-        var _a, _b;
-        this.close();
-        (_a = this.openingButton) === null || _a === void 0 ? void 0 : _a.focus();
-        if (window.FluidTopicsA11yHints.isKeyboardNavigation) {
-            (_b = this.openingButton) === null || _b === void 0 ? void 0 : _b.showTooltip();
-        }
+    renderClosingButton() {
+        return html `
+            <ftds-button part="closing-button"
+                         icon="${FtIcons.CLOSE}"
+                         size="${DesignSystemSize.small}"
+                         family="${DesignSystemFamily.neutral}"
+                         label="${this.closeButtonLabel}"
+                         @click=${this.closeAndFocusOpeningButton}>
+            </ftds-button>
+        `;
     }
-    async positionWrapper() {
-        var _a, _b;
-        if (this.popoverWrapper) {
-            this.popoverWrapper.classList.remove("positioned");
-            this.popoverWrapper.style.left = "";
-            this.popoverWrapper.style.top = "";
-            if (this.openingButton) {
-                const fallbackPlacements = ["right-start", "bottom-end", "right-end", "left-start", "left-end", "top-start", "top-end"];
-                const { x, y } = await computeOffsetAutoPosition(this.openingButton, this.popoverWrapper, "bottom-start", fallbackPlacements, "fixed");
-                this.popoverWrapper.style.left = `${x}px`;
-                this.popoverWrapper.style.top = `${y}px`;
-            }
-            this.popoverWrapper.classList.add("positioned");
-        }
-        this.hideUnusedSlots();
-        (_a = this.closingButton) === null || _a === void 0 ? void 0 : _a.focus();
-        if (window.FluidTopicsA11yHints.isKeyboardNavigation) {
-            (_b = this.closingButton) === null || _b === void 0 ? void 0 : _b.showTooltip();
-        }
+    renderFullContent() {
+        return html `
+            <slot name="heading">
+                ${this.heading ? html `
+                        <div id="ftds-popover-heading" part="heading">
+                            <ftds-typography element="span" variant="${FtdsTypographyVariants.body2semibold}">
+                                ${this.heading}
+                            </ftds-typography>
+                        </div>
+                    ` : nothing}
+            </slot>
+            <div id="ftds-popover-content" part="content">
+                <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
+                    <slot part="popover-content-slot"></slot>
+                </ftds-typography>
+            </div>
+            <ftds-typography variant="${FtdsTypographyVariants.body2medium}" part="popover-link-typography">
+                <slot name="link"
+                      part="popover-link"
+                      @slotchange=${() => this.requestUpdate()}
+                ></slot>
+            </ftds-typography>
+            <div part="popover-sections">
+                <slot name="sections" part="popover-sections-slot"></slot>
+            </div>
+        `;
     }
     hideUnusedSlots() {
         var _a, _b, _c;
@@ -160,48 +79,24 @@ class FtdsPopover extends FtLitElement {
         (_b = this.popoverContentDiv) === null || _b === void 0 ? void 0 : _b.classList.toggle("hidden", this.hasEmptySlot(this.popoverContentSlot));
         (_c = this.popoverSectionsDiv) === null || _c === void 0 ? void 0 : _c.classList.toggle("hidden", this.hasEmptySlot(this.popoverSectionsSlot));
     }
+    hasEmptySlot(slot) {
+        return unslotText(slot).trim().length === 0;
+    }
 }
+FtdsPopover.styles = styles;
 FtdsPopover.elementDefinitions = {
     "ftds-typography": FtdsTypography,
     "ftds-button": FtdsButton,
 };
-FtdsPopover.styles = styles;
 __decorate([
     property()
 ], FtdsPopover.prototype, "heading", void 0);
-__decorate([
-    property()
-], FtdsPopover.prototype, "closeButtonLabel", void 0);
-__decorate([
-    property()
-], FtdsPopover.prototype, "openButtonIcon", void 0);
-__decorate([
-    property()
-], FtdsPopover.prototype, "openButtonLabel", void 0);
-__decorate([
-    property()
-], FtdsPopover.prototype, "openButtonTooltipPosition", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsPopover.prototype, "opened", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsPopover.prototype, "hidden", void 0);
-__decorate([
-    property({ type: DesignSystemSize })
-], FtdsPopover.prototype, "openButtonSize", void 0);
-__decorate([
-    property({ type: DesignSystemFamily })
-], FtdsPopover.prototype, "openButtonFamily", void 0);
 __decorate([
     query(`[part="opening-button"]`)
 ], FtdsPopover.prototype, "openingButton", void 0);
 __decorate([
     query(`[part="closing-button"]`)
 ], FtdsPopover.prototype, "closingButton", void 0);
-__decorate([
-    query(`[part="wrapper"]`)
-], FtdsPopover.prototype, "popoverWrapper", void 0);
 __decorate([
     query(`[part="content"]`)
 ], FtdsPopover.prototype, "popoverContentDiv", void 0);

package/build/ftds-popover.properties.d.ts

@@ -1,9 +1,4 @@
-import { Position } from "@fluid-topics/ft-tooltip";
-export interface FtdsPopoverProperties {
-    opened?: boolean;
-    hidden?: boolean;
+import { FtBasePopoverProperties } from "./ft-base-popover";
+export interface FtdsPopoverProperties extends FtBasePopoverProperties {
     heading?: string;
-    closeButtonLabel?: string;
-    openButtonLabel?: string;
-    openButtonTooltipPosition?: Position;
 }

package/build/index.d.ts

@@ -1,3 +1,6 @@
+export * from "./ft-popover.styles";
+export * from "./ft-popover";
+export * from "./ft-popover.properties";
 export * from "./ftds-popover";
 export * from "./ftds-popover.styles";
 export * from "./ftds-popover.properties";

package/build/index.js

@@ -1,3 +1,6 @@
+export * from "./ft-popover.styles";
+export * from "./ft-popover";
+export * from "./ft-popover.properties";
 export * from "./ftds-popover";
 export * from "./ftds-popover.styles";
 export * from "./ftds-popover.properties";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-popover",
-    "version": "2.0.5",
+    "version": "2.0.7",
     "description": "A simple popover component",
     "keywords": [
         "Lit"
@@ -20,12 +20,12 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.1.0",
-        "@fluid-topics/ft-button": "2.0.5",
-        "@fluid-topics/ft-icon": "2.0.5",
-        "@fluid-topics/ft-link": "2.0.5",
-        "@fluid-topics/ft-typography": "2.0.5",
-        "@fluid-topics/ft-wc-utils": "2.0.5",
+        "@fluid-topics/ft-button": "2.0.7",
+        "@fluid-topics/ft-icon": "2.0.7",
+        "@fluid-topics/ft-link": "2.0.7",
+        "@fluid-topics/ft-typography": "2.0.7",
+        "@fluid-topics/ft-wc-utils": "2.0.7",
         "lit": "3.1.0"
     },
-    "gitHead": "f9831ad1a52539200cd4ff62c8a31275613713c8"
+    "gitHead": "8555f88ae4858c380daee8311a887142043c46a9"
 }