@fluid-topics/ft-floating-menu 0.3.45 → 0.3.47

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

@@ -12,20 +12,27 @@ export const itemStyles = css `
         align-items: center;
         justify-content: flex-start;
         overflow: hidden;
-        padding: 0 16px;
+        padding: 4px 16px;
         outline: none;
-        height: 48px;
-    }
-    
-    ft-typography {
-        white-space: nowrap;
+        min-height: 48px;
+        gap: 16px;
     }
 
     .ft-floating-menu-item ft-icon {
-        --ft-icon-font-size: 24px;
         color: ${FtFloatingMenuItemCssVariables.iconColor};
         margin-left: 0;
-        margin-right: 32px;
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    .ft-floating-menu-item ft-typography {
+        flex-shrink: 1;
+        flex-grow: 1;
+        width: max-content;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        word-break: break-word;
+        hyphens: auto;
     }
 `;
 //# sourceMappingURL=ft-floating-menu-item.css.js.map

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

@@ -1,11 +1,13 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtFloatingMenuItemProperties } from "./ft-floating-menu-item.properties";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
 export declare class FtFloatingMenuItemSelect extends CustomEvent<string> {
     constructor(value: string);
 }
 export declare class FtFloatingMenuItem extends FtLitElement implements FtFloatingMenuItemProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
+    iconVariant?: FtIconVariants;
     icon?: string;
     value: string;
     protected render(): import("lit-html").TemplateResult<1>;

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

@@ -22,11 +22,14 @@ export class FtFloatingMenuItem extends FtLitElement {
         this.value = "";
     }
     render() {
+        var _a;
         return html `
             <div class="ft-floating-menu-item"
                  @click=${this.onClick}>
                 <ft-ripple></ft-ripple>
-                ${this.icon ? html `<ft-icon variant="material">${this.icon}</ft-icon>` : nothing}
+                ${this.icon ? html `
+                            <ft-icon variant="${(_a = this.iconVariant) !== null && _a !== void 0 ? _a : "material"}">${this.icon}</ft-icon>
+                        ` : nothing}
                 <ft-typography variant="body2">
                     <slot></slot>
                 </ft-typography>
@@ -45,9 +48,12 @@ FtFloatingMenuItem.elementDefinitions = {
 // language=CSS
 FtFloatingMenuItem.styles = itemStyles;
 __decorate([
-    property({ type: String })
+    property()
+], FtFloatingMenuItem.prototype, "iconVariant", void 0);
+__decorate([
+    property()
 ], FtFloatingMenuItem.prototype, "icon", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], FtFloatingMenuItem.prototype, "value", void 0);
 //# sourceMappingURL=ft-floating-menu-item.js.map

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

@@ -1,4 +1,6 @@
+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.css.d.ts

@@ -1,4 +1,7 @@
 export declare const FtFloatingMenuCssVariables: {
+    zIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    maxWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    maxHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     menuElevation: import("@fluid-topics/ft-wc-utils").FtCssVariable;

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

@@ -1,6 +1,9 @@
 import { css } from "lit";
 import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
 export const FtFloatingMenuCssVariables = {
+    zIndex: FtCssVariableFactory.create("--ft-floating-menu-z-index", "NUMBER", "8"),
+    maxWidth: FtCssVariableFactory.create("--ft-floating-menu-max-width", "SIZE", "300px"),
+    maxHeight: FtCssVariableFactory.create("--ft-floating-menu-max-height", "SIZE", "500px"),
     textColor: FtCssVariableFactory.extend("--ft-floating-menu-text-color", designSystemVariables.colorOnSurfaceHigh),
     colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
     menuElevation: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
@@ -15,32 +18,22 @@ export const styles = css `
     }
 
     .ft-floating-menu--options {
+        display: none;
+        position: absolute;
+        overflow: auto;
+        max-width: ${FtFloatingMenuCssVariables.maxWidth};
+        max-height: ${FtFloatingMenuCssVariables.maxHeight};
         box-shadow: ${FtFloatingMenuCssVariables.menuElevation};
         background-color: ${FtFloatingMenuCssVariables.colorSurface};
         border-radius: ${FtFloatingMenuCssVariables.borderRadiusS};
         color: ${FtFloatingMenuCssVariables.textColor};
-        display: none;
-        list-style: none;
-        max-width: calc(100vw - 32px);
-        max-height: calc(100vh - 32px);
-        margin: 0;
-        padding-left: 0;
-        position: absolute;
-        transform: scale(1);
-        transform-origin: left top;
-        overflow: auto;
-        top: 0;
-        transition: opacity 0.03s linear 0s, transform 0.12s cubic-bezier(0, 0, 0.2, 1) 0s, height 250ms cubic-bezier(0, 0, 0.2, 1) 0s;
-        opacity: 0;
-        will-change: transform, opacity;
-        z-index: 8;
+        z-index: ${FtFloatingMenuCssVariables.zIndex};
     }
 
     .ft-floating-menu--open .ft-floating-menu--options {
-        display: inline-block;
-        opacity: 1;
+        display: block;
     }
-    
+
     .ft-floating-menu--left .ft-floating-menu--options {
         left: 0;
     }
@@ -49,8 +42,17 @@ export const styles = css `
         right: 0;
     }
 
+    .ft-floating-menu--center .ft-floating-menu--options {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .ft-floating-menu--top .ft-floating-menu--options {
+        bottom: calc(100% + 4px);
+    }
+
     .ft-floating-menu--bottom .ft-floating-menu--options {
-        top: 100%;
+        top: calc(100% + 4px);
     }
 `;
 //# sourceMappingURL=ft-floating-menu.css.js.map

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

@@ -1,6 +1,7 @@
-import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignment } from "./ft-floating-menu.properties";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
 export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMenuProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
@@ -8,17 +9,18 @@ export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMe
     private container;
     private menuContainer;
     private button;
-    label: string;
+    label?: string;
+    tooltipPosition?: Position;
+    iconVariant?: FtIconVariants;
     icon: string;
     text?: string;
-    horizontalAlignment: FtHorizontalAlignment;
-    verticalAlignment: FtVerticalAlignment;
+    horizontalAlignment?: FtHorizontalAlignment;
+    verticalAlignment?: FtVerticalAlignment;
     disabled: boolean;
     protected render(): import("lit-html").TemplateResult<1>;
     private onClick;
     private onClickItem;
     private hideOptions;
     disconnectedCallback(): void;
-    protected contentAvailableCallback(props: PropertyValues): void;
 }
 //# sourceMappingURL=ft-floating-menu.d.ts.map

package/build/ft-floating-menu.js

@@ -4,9 +4,9 @@ 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 { html, nothing } from "lit";
+import { html } from "lit";
 import { property, query, state } from "lit/decorators.js";
-import { Aligner, FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-floating-menu.css";
 import { FtButton } from "@fluid-topics/ft-button";
 import { classMap } from "lit/directives/class-map.js";
@@ -15,11 +15,7 @@ export class FtFloatingMenu extends FtLitElement {
     constructor() {
         super(...arguments);
         this.menuOpen = false;
-        this.label = "";
-        this.icon = "more_vert";
-        this.text = undefined;
-        this.horizontalAlignment = "left";
-        this.verticalAlignment = "bottom";
+        this.icon = "SHORTCUT_MENU";
         this.disabled = false;
         this.hideOptions = (e) => {
             this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
@@ -29,25 +25,28 @@ export class FtFloatingMenu extends FtLitElement {
         };
     }
     render() {
+        var _a, _b;
         const classes = {
             "ft-floating-menu": true,
             "ft-floating-menu--open": this.menuOpen,
-            "ft-floating-menu--right": this.horizontalAlignment == "right",
-            "ft-floating-menu--left": this.horizontalAlignment == "left",
-            "ft-floating-menu--bottom": this.verticalAlignment == "bottom"
+            ["ft-floating-menu--" + ((_a = this.horizontalAlignment) !== null && _a !== void 0 ? _a : "left").toLowerCase()]: true,
+            ["ft-floating-menu--" + ((_b = this.verticalAlignment) !== null && _b !== void 0 ? _b : "bottom").toLowerCase()]: true,
         };
         return html `
             <div class="${classMap(classes)}">
-                <ft-button part="button"
+                <ft-button id="actions-button"
+                           part="button"
                            dense round
                            icon="${this.icon}"
-                           id="actions-button"
-                           @click=${this.onClick}
+                           .iconVariant=${this.iconVariant}
                            .label=${this.label}
-                           ?disabled=${this.disabled}>
-                    ${this.text ? html `<span>${this.text}</span>` : nothing}
+                           .tooltipPosition=${this.tooltipPosition}
+                           ?disabled=${this.disabled}
+                           @click=${this.onClick}>
+                    ${this.text}
                 </ft-button>
                 <div class="ft-floating-menu--options"
+                     part="options"
                      @select="${this.onClickItem}">
                     <slot></slot>
                 </div>
@@ -65,24 +64,6 @@ export class FtFloatingMenu extends FtLitElement {
         super.disconnectedCallback();
         document.removeEventListener("click", this.hideOptions);
     }
-    contentAvailableCallback(props) {
-        super.contentAvailableCallback(props);
-        if (this.menuOpen) {
-            if (this.horizontalAlignment == "center") {
-                const offset = Aligner.computeCenterLeftOffset(this.button, this.menuContainer);
-                this.menuContainer.style.left = `${offset}px`;
-            }
-            else {
-                this.menuContainer.style.removeProperty("left");
-            }
-            if (this.verticalAlignment == "top") {
-                this.menuContainer.style.top = `-${this.menuContainer.getBoundingClientRect().height}px`;
-            }
-            else {
-                this.menuContainer.style.removeProperty("top");
-            }
-        }
-    }
 }
 FtFloatingMenu.elementDefinitions = {
     "ft-button": FtButton,
@@ -105,6 +86,12 @@ __decorate([
 __decorate([
     property()
 ], FtFloatingMenu.prototype, "label", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "tooltipPosition", void 0);
+__decorate([
+    property()
+], FtFloatingMenu.prototype, "iconVariant", void 0);
 __decorate([
     property()
 ], FtFloatingMenu.prototype, "icon", void 0);