@fluid-topics/ft-floating-menu 2.0.38 → 2.1.0

package/build/definitions.d.ts

@@ -1,10 +1,8 @@
 import { FtFloatingMenu } from "./ft-floating-menu";
 import { FtFloatingMenuItem } from "./ft-floating-menu-item";
-import { FtdsFloatingMenu } from "./ftds-floating-menu";
 import { FtFloatingMenuLabel } from "./ft-floating-menu-label";
 declare const _default: {
     "ft-floating-menu": typeof FtFloatingMenu;
-    "ftds-floating-menu": typeof FtdsFloatingMenu;
     "ft-floating-menu-item": typeof FtFloatingMenuItem;
     "ft-floating-menu-label": typeof FtFloatingMenuLabel;
 };

package/build/definitions.js

@@ -1,10 +1,8 @@
 import { FtFloatingMenu } from "./ft-floating-menu";
 import { FtFloatingMenuItem } from "./ft-floating-menu-item";
-import { FtdsFloatingMenu } from "./ftds-floating-menu";
 import { FtFloatingMenuLabel } from "./ft-floating-menu-label";
 export default {
     "ft-floating-menu": FtFloatingMenu,
-    "ftds-floating-menu": FtdsFloatingMenu,
     "ft-floating-menu-item": FtFloatingMenuItem,
     "ft-floating-menu-label": FtFloatingMenuLabel,
 };

package/build/ft-floating-menu-item.js

@@ -10,7 +10,7 @@ import { FtLitElement, ignoreComposingEvents, } from "@fluid-topics/ft-wc-utils"
 import { itemStyles } from "./ft-floating-menu-item.styles";
 import { FtIcon, } from "@fluid-topics/ft-icon";
 import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { classMap, } from "lit/directives/class-map.js";
 export class FtFloatingMenuItemSelectEvent extends CustomEvent {
     constructor(value) {
@@ -43,7 +43,7 @@ export class FtFloatingMenuItem extends FtLitElement {
                 ${this.icon ? html `
                         <ft-icon .variant=${this.iconVariant} .value=${this.icon}></ft-icon>
                     ` : nothing}
-                <ft-typography variant="body2">
+                <ft-typography variant="${FtTypographyVariants.body2}">
                     <slot></slot>
                 </ft-typography>
             </div>

package/build/ft-floating-menu-item.properties.d.ts

@@ -1,6 +1,2 @@
-import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
 export interface FtFloatingMenuItemProperties {
-    iconVariant?: FtIconVariants;
-    icon?: string;
-    value: string;
 }

package/build/ft-floating-menu-item.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const FtFloatingMenuItemCssVariables: {
-    iconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    iconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const itemStyles: import("lit").CSSResult;

package/build/ft-floating-menu-label.js

@@ -1,12 +1,12 @@
 import { html } from "lit";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { labelStyles } from "./ft-floating-menu-label.styles";
 export class FtFloatingMenuLabel extends FtLitElement {
     render() {
         return html `
             <div class="ft-floating-menu-label">
-                <ft-typography variant="caption">
+                <ft-typography variant="${FtTypographyVariants.caption}">
                     <slot></slot>
                 </ft-typography>
             </div>

package/build/ft-floating-menu-label.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const FtFloatingMenuLabelCssVariables: {
-    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const labelStyles: import("lit").CSSResult;

package/build/ft-floating-menu-label.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
 export const FtFloatingMenuLabelCssVariables = {
     color: FtCssVariableFactory.extend("--ft-floating-menu-label-color", "", designSystemVariables.colorOnSurfaceMedium),
 };

package/build/ft-floating-menu.d.ts

@@ -1,7 +1,50 @@
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { FtFloatingMenuProperties } from "./ft-floating-menu.properties";
-import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
-export declare class FtFloatingMenu extends FtBaseFloatingMenu implements FtFloatingMenuProperties {
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
+import { FtFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignment } from "./ft-floating-menu.properties";
+export declare class FtFloatingMenuStatusChangeEvent extends CustomEvent<{
+    open: boolean;
+}> {
+    constructor(open: boolean);
+}
+export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
+    constructor();
+}
+export declare class FtFloatingMenuSelectEvent extends CustomEvent<string> {
+    constructor(detail: string);
+}
+export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMenuProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
+    horizontalAlignment: FtHorizontalAlignment;
+    verticalAlignment: FtVerticalAlignment;
+    closeMenuMatchers: string[];
+    primary: boolean;
+    label?: string;
+    tooltipPosition?: Position;
+    icon: string;
+    iconVariant: FtIconVariants;
+    text?: string;
+    disabled: boolean;
+    private menuOpen;
+    forceMenuOpen: boolean;
+    private container;
+    private menuWrapper;
+    private actionButton?;
+    private customToggle;
+    protected updated(props: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    toggleMenu(): void;
+    openMenu(): void;
+    closeMenu(): void;
+    private hideOptionsOnClickOutside;
+    private onCloseEvent;
+    private onItemSelect;
+    private onContentClick;
+    disconnectedCallback(): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private positionMenuWrapper;
+    private convertPlacement;
+    private onKeyDown;
 }

package/build/ft-floating-menu.js

@@ -1,9 +1,212 @@
-import { styles } from "./ft-floating-menu.styles";
+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 { html, } from "lit";
+import { property, query, queryAssignedElements, state, } from "lit/decorators.js";
+import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "@fluid-topics/ft-button";
-import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
-export class FtFloatingMenu extends FtBaseFloatingMenu {
+import { classMap } from "lit/directives/class-map.js";
+import { FtFloatingMenuItem, } from "./ft-floating-menu-item";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
+import { floatingMenuStyles } from "./ft-floating-menu.styles";
+export class FtFloatingMenuStatusChangeEvent extends CustomEvent {
+    constructor(open) {
+        super("change", { detail: { open } });
+    }
+}
+export class FloatingMenuCloseEvent extends CustomEvent {
+    constructor() {
+        super("close-ft-floating-menu");
+    }
+}
+export class FtFloatingMenuSelectEvent extends CustomEvent {
+    constructor(detail) {
+        super("select", { detail });
+    }
+}
+export class FtFloatingMenu extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.horizontalAlignment = "left";
+        this.verticalAlignment = "bottom";
+        this.closeMenuMatchers = [];
+        // Button properties
+        this.primary = false;
+        this.icon = "SHORTCUT_MENU";
+        this.iconVariant = FtIconVariants.fluid_topics;
+        this.disabled = false;
+        this.menuOpen = false;
+        this.forceMenuOpen = false;
+        this.hideOptionsOnClickOutside = (e) => {
+            this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
+        };
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has("menuOpen")) {
+            this.dispatchEvent(new FtFloatingMenuStatusChangeEvent(this.menuOpen));
+        }
+    }
+    render() {
+        const classes = {
+            "ft-floating-menu": true,
+            "ft-floating-menu--open": this.forceMenuOpen || this.menuOpen,
+            ["ft-floating-menu--" + this.horizontalAlignment.toLowerCase()]: true,
+            ["ft-floating-menu--" + this.verticalAlignment.toLowerCase()]: true,
+        };
+        return html `
+            <div part="container" class="${classMap(classes)}" @keydown=${this.onKeyDown}>
+                <slot name="toggle"
+                      part="toggle"
+                      @click=${this.toggleMenu}
+                      aria-controls="ft-floating-menu-options"
+                      aria-expanded="${this.forceMenuOpen || this.menuOpen}">
+                    <ft-button id="actions-button"
+                                       part="button"
+                                       ?primary=${this.primary}
+                                       dense round
+                                       icon="${this.icon}"
+                                       .iconVariant=${this.iconVariant}
+                                       .label=${this.label}
+                                       .tooltipPosition=${this.tooltipPosition}
+                                       ?disabled=${this.disabled}>
+                        ${this.text}
+                    </ft-button>
+                </slot>
+                <div part="options-wrapper" class="ft-floating-menu--wrapper">
+                    <div id="ft-floating-menu-options"
+                         class="ft-floating-menu--options"
+                         part="options"
+                         @ft-floating-menu-item-select=${this.onItemSelect}>
+                        <slot id="ft-floating-menu-content"
+                              @click=${this.onContentClick}
+                              @close-ft-floating-menu=${this.onCloseEvent}
+                        ></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    toggleMenu() {
+        this.menuOpen = !this.menuOpen;
+    }
+    openMenu() {
+        this.menuOpen = true;
+    }
+    closeMenu() {
+        this.menuOpen = false;
+    }
+    onCloseEvent(e) {
+        e.stopPropagation();
+        this.closeMenu();
+    }
+    onItemSelect(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new FtFloatingMenuSelectEvent(e.detail));
+        this.closeMenu();
+    }
+    onContentClick(e) {
+        if (eventPathContainsMatchingElement(e, this.closeMenuMatchers, this)) {
+            this.closeMenu();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("click", this.hideOptionsOnClickOutside);
+    }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (props.has("menuOpen")) {
+            if (this.menuOpen) {
+                this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned");
+                this.positionMenuWrapper();
+                document.addEventListener("click", this.hideOptionsOnClickOutside);
+            }
+            else {
+                document.removeEventListener("click", this.hideOptionsOnClickOutside);
+            }
+        }
+    }
+    async positionMenuWrapper() {
+        this.menuWrapper.style.left = "";
+        this.menuWrapper.style.top = "";
+        const reference = this.customToggle.length > 0 ? this.customToggle[0] : this.actionButton;
+        const { x, y } = await computeOffsetPosition(reference, this.menuWrapper, this.convertPlacement());
+        this.menuWrapper.style.left = `${x}px`;
+        this.menuWrapper.style.top = `${y}px`;
+        this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
+    }
+    convertPlacement() {
+        switch (this.horizontalAlignment) {
+            case "left":
+                return this.verticalAlignment + "-start";
+            case "right":
+                return this.verticalAlignment + "-end";
+            case "center":
+                return this.verticalAlignment + "-center";
+        }
+    }
+    onKeyDown(e) {
+        if (e.code == "Escape") {
+            this.closeMenu();
+            e.stopPropagation();
+        }
+    }
 }
 FtFloatingMenu.elementDefinitions = {
-    "ft-or-ftds-button": FtButton,
+    "ft-floating-menu-item": FtFloatingMenuItem,
+    "ft-button": FtButton,
 };
-FtFloatingMenu.styles = styles;
+FtFloatingMenu.styles = floatingMenuStyles;
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "horizontalAlignment", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "verticalAlignment", void 0);
+__decorate([
+    jsonProperty([])
+], FtFloatingMenu.prototype, "closeMenuMatchers", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFloatingMenu.prototype, "primary", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "label", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "tooltipPosition", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFloatingMenu.prototype, "disabled", void 0);
+__decorate([
+    state()
+], FtFloatingMenu.prototype, "menuOpen", void 0);
+__decorate([
+    state()
+], FtFloatingMenu.prototype, "forceMenuOpen", void 0);
+__decorate([
+    query(".ft-floating-menu")
+], FtFloatingMenu.prototype, "container", void 0);
+__decorate([
+    query(".ft-floating-menu--wrapper")
+], FtFloatingMenu.prototype, "menuWrapper", void 0);
+__decorate([
+    query("#actions-button")
+], FtFloatingMenu.prototype, "actionButton", void 0);
+__decorate([
+    queryAssignedElements({ slot: "toggle" })
+], FtFloatingMenu.prototype, "customToggle", void 0);