@fluid-topics/ft-popover 2.0.6 → 2.0.7

package/README.md

@@ -3,12 +3,31 @@ A popover component.
 ## Install
 
 ```shell
-npm install @fluid-topics/ftds-popover
-yarn add @fluid-topics/ftds-popover
+npm install @fluid-topics/ft-popover
+yarn add @fluid-topics/ft-popover
 ```
 
 ## Usage
 
+### ft-popover
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-link"
+import "@fluid-topics/ft-popover"
+
+function render() {
+    return html`
+        <ft-popover>
+            Example popover content
+        </ft-popover>
+    `
+}
+
+```
+
+### ftds-popover
+
 ```typescript
 import { html } from "lit"
 import "@fluid-topics/ft-link"

package/build/define.js

@@ -1,5 +1,7 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtdsPopover } from "./ftds-popover";
 import { FtdsPopoverSection } from "./ftds-popover-section";
+import { FtPopover } from "./ft-popover";
+customElement("ft-popover")(FtPopover);
 customElement("ftds-popover")(FtdsPopover);
 customElement("ftds-popover-section")(FtdsPopoverSection);

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

@@ -0,0 +1,44 @@
+import { Position } from "@fluid-topics/ft-tooltip";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtIcons } from "@fluid-topics/ft-icon";
+import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { nothing, PropertyValues, TemplateResult } from "lit";
+import { FtBaseButton } from "@fluid-topics/ft-button/build/ft-base-button";
+export interface FtBasePopoverProperties {
+    opened?: boolean;
+    hidden?: boolean;
+    closeButtonLabel?: string;
+    openButtonLabel?: string;
+    openButtonTooltipPosition?: Position;
+}
+export declare abstract class FtBasePopover extends FtLitElement implements FtBasePopoverProperties {
+    heading: string;
+    closeButtonLabel: string;
+    openButtonIcon: FtIcons;
+    openButtonLabel: string;
+    openButtonTooltipPosition: Position;
+    opened: boolean;
+    hidden: boolean;
+    openButtonSize: DesignSystemSize;
+    openButtonFamily: DesignSystemFamily;
+    protected abstract openingButton?: FtBaseButton;
+    protected abstract closingButton?: FtBaseButton;
+    private popoverWrapper?;
+    protected abstract wrapperId: string;
+    protected abstract headingId: string;
+    protected abstract contentId: string;
+    protected maxWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    protected abstract renderOpeningButton(): TemplateResult;
+    protected abstract renderClosingButton(): TemplateResult;
+    protected abstract renderFullContent(): TemplateResult;
+    protected abstract hideUnusedSlots(): void;
+    protected render(): typeof nothing | TemplateResult<1>;
+    protected renderPopover(): typeof nothing | TemplateResult<1>;
+    updated(properties: PropertyValues<FtBasePopover>): void;
+    close(): void;
+    open(): void;
+    protected closeAndFocusOpeningButton(): void;
+    private watchFocusIn;
+    private watchEscapeKey;
+    private positionWrapper;
+}

package/build/ft-base-popover.js

@@ -0,0 +1,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { computeOffsetAutoPosition, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property, query } from "lit/decorators.js";
+import { FtIcons } from "@fluid-topics/ft-icon";
+import { DesignSystemFamily, DesignSystemSize, } from "@fluid-topics/design-system-variables";
+import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { FtCssVariableFactory } from "@fluid-topics/design-system-variables/build/FtCssVariables";
+export class FtBasePopover extends FtLitElement {
+    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.maxWidth = FtCssVariableFactory.create("--ft-popover-max-width", "", "SIZE", "464px");
+        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();
+            }
+        };
+    }
+    render() {
+        const classes = {
+            opened: this.opened,
+        };
+        return this.hidden ? nothing : html `
+            <div part="root-container" class="${classMap(classes)}">
+                ${this.renderOpeningButton()}
+                ${this.renderPopover()}
+            </div>
+        `;
+    }
+    renderPopover() {
+        return this.opened ? html `
+            <div part="popover-container">
+                <div part="overlay" @click=${this.close}></div>
+                <div id="${this.wrapperId}" part="wrapper" role="dialog"
+                     aria-labelledby="${ifDefined(this.heading ? `${this.headingId}` : undefined)}"
+                     aria-describedby="${this.contentId}">
+                    <div part="closing-button-container">
+                        ${this.renderClosingButton()}
+                    </div>
+                    ${this.renderFullContent()}
+                </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 } }));
+    }
+    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();
+        }
+    }
+    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 allowedPlacements = [
+                    "bottom-start",
+                    "right-start",
+                    "bottom-end",
+                    "right-end",
+                    "left-start",
+                    "left-end",
+                    "top-start",
+                    "top-end"
+                ];
+                const defaultPlacement = "bottom-start";
+                const options = { placement: defaultPlacement, allowedPlacements: allowedPlacements, maxWidthCssVariable: this.maxWidth };
+                const { x, y } = await computeOffsetAutoPosition(this.openingButton, this.popoverWrapper, options);
+                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();
+        }
+    }
+}
+__decorate([
+    property()
+], FtBasePopover.prototype, "closeButtonLabel", void 0);
+__decorate([
+    property()
+], FtBasePopover.prototype, "openButtonIcon", void 0);
+__decorate([
+    property()
+], FtBasePopover.prototype, "openButtonLabel", void 0);
+__decorate([
+    property()
+], FtBasePopover.prototype, "openButtonTooltipPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBasePopover.prototype, "opened", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBasePopover.prototype, "hidden", void 0);
+__decorate([
+    property({ type: DesignSystemSize })
+], FtBasePopover.prototype, "openButtonSize", void 0);
+__decorate([
+    property({ type: DesignSystemFamily })
+], FtBasePopover.prototype, "openButtonFamily", void 0);
+__decorate([
+    query(`[part="wrapper"]`)
+], FtBasePopover.prototype, "popoverWrapper", void 0);

package/build/ft-popover.d.ts

@@ -0,0 +1,18 @@
+import { FtBasePopover } from "./ft-base-popover";
+import { FtPopoverProperties } from "./ft-popover.properties";
+import { TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtButton } from "@fluid-topics/ft-button";
+export declare class FtPopover extends FtBasePopover implements FtPopoverProperties {
+    static styles: import("lit").CSSResult;
+    static elementDefinitions: ElementDefinitionsMap;
+    protected openingButton?: FtButton;
+    protected closingButton?: FtButton;
+    protected wrapperId: string;
+    protected headingId: string;
+    protected contentId: string;
+    protected renderOpeningButton(): TemplateResult;
+    protected renderClosingButton(): TemplateResult;
+    protected renderFullContent(): TemplateResult;
+    protected hideUnusedSlots(): void;
+}

package/build/ft-popover.js

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtBasePopover } from "./ft-base-popover";
+import { html } from "lit";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtButton } from "@fluid-topics/ft-button";
+import { query } from "lit/decorators.js";
+import { FtIcons } from "@fluid-topics/ft-icon";
+import { ftPopoverStyles } from "./ft-popover.styles";
+class FtPopover extends FtBasePopover {
+    constructor() {
+        super(...arguments);
+        this.wrapperId = "ft-popover-wrapper";
+        this.headingId = "ft-popover-heading";
+        this.contentId = "ft-popover-content";
+    }
+    renderOpeningButton() {
+        return html `
+            <ft-button @focusin=${this.close}
+                       part="opening-button"
+                       icon="${this.openButtonIcon}"
+                       size="${this.openButtonSize}"
+                       label="${this.openButtonLabel}"
+                       tooltipposition="${this.openButtonTooltipPosition}"
+                       aria-haspopup="true" aria-expanded="${this.opened}"
+                       aria-controls="${this.wrapperId}"
+                       @click=${this.open}>
+            </ft-button>
+        `;
+    }
+    renderClosingButton() {
+        return html `
+            <ft-button part="closing-button"
+                       icon="${FtIcons.CLOSE}"
+                       label="${this.closeButtonLabel}"
+                       @click=${this.closeAndFocusOpeningButton}>
+            </ft-button>
+        `;
+    }
+    renderFullContent() {
+        return html `
+            <div id="ft-popover-content" part="content">
+                <ft-typography variant="${FtTypographyVariants.body2}">
+                    <slot part="popover-content-slot"></slot>
+                </ft-typography>
+            </div>
+        `;
+    }
+    hideUnusedSlots() {
+    }
+}
+FtPopover.styles = ftPopoverStyles;
+FtPopover.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ft-button": FtButton,
+};
+__decorate([
+    query(`[part="opening-button"]`)
+], FtPopover.prototype, "openingButton", void 0);
+__decorate([
+    query(`[part="closing-button"]`)
+], FtPopover.prototype, "closingButton", void 0);
+export { FtPopover };