@fluid-topics/ft-popover 2.0.37 → 2.1.0

package/README.md

@@ -12,8 +12,8 @@ yarn add @fluid-topics/ft-popover
 ### ft-popover
 
 ```typescript
-import { html } from "lit"
-import "@fluid-topics/ft-link"
+import {html} from "lit"
+import "@fluid-topics/ftds-link"
 import "@fluid-topics/ft-popover"
 
 function render() {
@@ -25,35 +25,3 @@ function render() {
 }
 
 ```
-
-### ftds-popover
-
-```typescript
-import { html } from "lit"
-import "@fluid-topics/ft-link"
-import "@fluid-topics/ft-popover"
-
-function render() {
-    return html`
-        <ftds-popover heading="Popover heading">
-            Exemple popover content
-            <ftds-link slot="link" href="" variant="body-2-medium" family="brand" underlined>Example popover link</ftds-link>
-        </ftds-popover>
-    `
-}
-
-function render() {
-    return html`
-        <ftds-popover>
-            <ftds-popover-section slot="sections" heading="Popover section heading">
-                Example popover section content
-                <ftds-link slot="link">Example popover section link</ftds-link>
-            </ftds-popover-section>
-            <ftds-popover-section slot="sections">
-                Other example popover section content
-            </ftds-popover-section>
-        </ftds-popover>
-    `
-}
-
-```

package/build/definitions.d.ts

@@ -1,9 +1,5 @@
-import { FtdsPopover } from "./ftds-popover";
-import { FtdsPopoverSection } from "./ftds-popover-section";
 import { FtPopover } from "./ft-popover";
 declare const _default: {
     "ft-popover": typeof FtPopover;
-    "ftds-popover": typeof FtdsPopover;
-    "ftds-popover-section": typeof FtdsPopoverSection;
 };
 export default _default;

package/build/definitions.js

@@ -1,8 +1,4 @@
-import { FtdsPopover } from "./ftds-popover";
-import { FtdsPopoverSection } from "./ftds-popover-section";
 import { FtPopover } from "./ft-popover";
 export default {
     "ft-popover": FtPopover,
-    "ftds-popover": FtdsPopover,
-    "ftds-popover-section": FtdsPopoverSection,
 };

package/build/ft-popover.d.ts

@@ -1,18 +1,40 @@
-import { FtBasePopover } from "./ft-base-popover";
+import { Position } from "@fluid-topics/ft-tooltip";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtIcons } from "@fluid-topics/ft-icon";
+import { nothing, PropertyValues } from "lit";
 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;
+export declare class FtPopover extends FtLitElement implements FtPopoverProperties {
     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;
+    static styles: import("lit").CSSResult;
+    heading: string;
+    opened: boolean;
+    hidden: boolean;
+    closeButtonLabel: string;
+    openButtonLabel: string;
+    openButtonIcon: FtIcons;
+    openButtonTooltipPosition: Position;
+    private isTriggerSlotAssigned;
+    private openingButton?;
+    private closingButton?;
+    private popoverWrapper?;
+    private triggerSlot?;
+    private wrapperId;
+    private headingId;
+    private contentId;
+    protected maxWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    private renderOpeningButton;
+    private renderClosingButton;
+    private renderFullContent;
+    get openingElement(): HTMLElement | undefined;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected renderPopover(): typeof nothing | import("lit-html").TemplateResult<1>;
+    updated(properties: PropertyValues<FtPopover>): void;
+    close(): void;
+    open(): void;
+    protected closeAndFocusOpeningButton(): void;
+    private onTriggerSlotChange;
+    private onTriggerKeydown;
+    private watchFocusIn;
+    private watchEscapeKey;
+    private positionWrapper;
 }

package/build/ft-popover.js

@@ -4,26 +4,60 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { computeOffsetAutoPosition, FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { property, query, state, } from "lit/decorators.js";
 import { FtIcons } from "@fluid-topics/ft-icon";
+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";
+import { FtButton } from "@fluid-topics/ft-button";
 import { ftPopoverStyles } from "./ft-popover.styles";
-export class FtPopover extends FtBasePopover {
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+export class FtPopover extends FtLitElement {
     constructor() {
         super(...arguments);
+        this.heading = "";
+        this.opened = false;
+        this.hidden = false;
+        this.closeButtonLabel = "close info";
+        this.openButtonLabel = "more info";
+        this.openButtonIcon = FtIcons.CIRCLE_QUESTION;
+        this.openButtonTooltipPosition = "bottom";
+        this.isTriggerSlotAssigned = false;
         this.wrapperId = "ft-popover-wrapper";
         this.headingId = "ft-popover-heading";
         this.contentId = "ft-popover-content";
+        this.maxWidth = FtCssVariableFactory.create("--ft-popover-max-width", "", "SIZE", "464px");
+        this.onTriggerSlotChange = () => {
+            var _a, _b;
+            const assignedTrigger = (_b = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements()) !== null && _b !== void 0 ? _b : [];
+            this.isTriggerSlotAssigned = assignedTrigger.length > 0;
+        };
+        this.onTriggerKeydown = (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.open();
+            }
+        };
+        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.openingElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
     }
     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}"
@@ -50,17 +84,146 @@ export class FtPopover extends FtBasePopover {
             </div>
         `;
     }
-    hideUnusedSlots() {
+    get openingElement() {
+        var _a;
+        const assignedTrigger = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements();
+        if ((assignedTrigger === null || assignedTrigger === void 0 ? void 0 : assignedTrigger.length) && assignedTrigger[0] instanceof HTMLElement) {
+            return assignedTrigger[0];
+        }
+        return this.openingButton;
+    }
+    render() {
+        const classes = {
+            opened: this.opened,
+        };
+        return this.hidden ? nothing : html `
+            <div part="root-container" class="${classMap(classes)}">
+                <slot name="trigger"
+                      @slotchange=${this.onTriggerSlotChange}
+                      @click=${this.open}
+                      @keydown=${this.onTriggerKeydown}
+                      @focusin=${this.close}
+                ></slot>
+                ${this.isTriggerSlotAssigned ? nothing : 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;
+        this.close();
+        (_a = this.openingElement) === null || _a === void 0 ? void 0 : _a.focus();
+        if (window.FluidTopicsA11yHints.isKeyboardNavigation) {
+            if (this.openingElement instanceof FtButton) {
+                this.openingElement.showTooltip();
+            }
+        }
+    }
+    async positionWrapper() {
+        var _a, _b;
+        if (this.popoverWrapper) {
+            this.popoverWrapper.classList.remove("positioned");
+            this.popoverWrapper.style.left = "";
+            this.popoverWrapper.style.top = "";
+            if (this.openingElement) {
+                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.openingElement, this.popoverWrapper, options);
+                this.popoverWrapper.style.left = `${x}px`;
+                this.popoverWrapper.style.top = `${y}px`;
+            }
+            this.popoverWrapper.classList.add("positioned");
+        }
+        (_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();
+        }
     }
 }
-FtPopover.styles = ftPopoverStyles;
 FtPopover.elementDefinitions = {
     "ft-typography": FtTypography,
     "ft-button": FtButton,
 };
+FtPopover.styles = ftPopoverStyles;
+__decorate([
+    property({ type: Boolean })
+], FtPopover.prototype, "opened", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtPopover.prototype, "hidden", void 0);
+__decorate([
+    property()
+], FtPopover.prototype, "closeButtonLabel", void 0);
+__decorate([
+    property()
+], FtPopover.prototype, "openButtonLabel", void 0);
+__decorate([
+    property()
+], FtPopover.prototype, "openButtonIcon", void 0);
+__decorate([
+    property()
+], FtPopover.prototype, "openButtonTooltipPosition", void 0);
+__decorate([
+    state()
+], FtPopover.prototype, "isTriggerSlotAssigned", void 0);
 __decorate([
     query(`[part="opening-button"]`)
 ], FtPopover.prototype, "openingButton", void 0);
 __decorate([
     query(`[part="closing-button"]`)
 ], FtPopover.prototype, "closingButton", void 0);
+__decorate([
+    query(`[part="wrapper"]`)
+], FtPopover.prototype, "popoverWrapper", void 0);
+__decorate([
+    query(`slot[name="trigger"]`)
+], FtPopover.prototype, "triggerSlot", void 0);