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

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

@@ -1,3 +1,16 @@
-import { FtBaseFloatingMenuProperties } from "./ft-base-floating-menu.properties";
-export interface FtFloatingMenuProperties extends FtBaseFloatingMenuProperties {
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
+export type FtHorizontalAlignment = "left" | "right" | "center";
+export type FtVerticalAlignment = "bottom" | "top";
+export interface FtFloatingMenuProperties {
+    horizontalAlignment?: FtHorizontalAlignment;
+    verticalAlignment?: FtVerticalAlignment;
+    closeMenuMatchers?: string[];
+    primary?: boolean;
+    label?: string;
+    tooltipPosition?: Position;
+    icon?: string;
+    iconVariant?: FtIconVariants;
+    text?: string;
+    disabled?: boolean;
 }

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

@@ -1,10 +1,10 @@
 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;
-    borderRadiusS: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    zIndex: import("@fluid-topics/design-system-variables").FtCssVariable;
+    maxWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    maxHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorSurface: import("@fluid-topics/design-system-variables").FtCssVariable;
+    menuElevation: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadiusS: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
-export declare const styles: import("lit").CSSResult;
+export declare const floatingMenuStyles: import("lit").CSSResult;

package/build/ft-floating-menu.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 FtFloatingMenuCssVariables = {
     zIndex: FtCssVariableFactory.create("--ft-floating-menu-z-index", "", "NUMBER", "8"),
     maxWidth: FtCssVariableFactory.create("--ft-floating-menu-max-width", "", "SIZE", "300px"),
@@ -10,7 +10,7 @@ export const FtFloatingMenuCssVariables = {
     borderRadiusS: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design system"),
 };
 // language=CSS
-export const styles = css `
+export const floatingMenuStyles = css `
     .ft-floating-menu {
         color: ${FtFloatingMenuCssVariables.textColor};
         display: contents;

package/build/index.d.ts

@@ -1,10 +1,8 @@
-export * from "./ft-base-floating-menu.properties";
-export { FtFloatingMenuSelectEvent, FtFloatingMenuStatusChangeEvent, } from "./ft-base-floating-menu";
+export * from "./ft-floating-menu.properties";
+export { FtFloatingMenuSelectEvent, FtFloatingMenuStatusChangeEvent, } from "./ft-floating-menu";
 export * from "./ft-floating-menu.styles";
 export * from "./ft-floating-menu.properties";
 export * from "./ft-floating-menu";
-export * from "./ftds-floating-menu.properties";
-export * from "./ftds-floating-menu";
 export * from "./ft-floating-menu-item.styles";
 export * from "./ft-floating-menu-item.properties";
 export * from "./ft-floating-menu-item";

package/build/index.js

@@ -1,10 +1,8 @@
-export * from "./ft-base-floating-menu.properties";
-export { FtFloatingMenuSelectEvent, FtFloatingMenuStatusChangeEvent, } from "./ft-base-floating-menu";
+export * from "./ft-floating-menu.properties";
+export { FtFloatingMenuSelectEvent, FtFloatingMenuStatusChangeEvent, } from "./ft-floating-menu";
 export * from "./ft-floating-menu.styles";
 export * from "./ft-floating-menu.properties";
 export * from "./ft-floating-menu";
-export * from "./ftds-floating-menu.properties";
-export * from "./ftds-floating-menu";
 export * from "./ft-floating-menu-item.styles";
 export * from "./ft-floating-menu-item.properties";
 export * from "./ft-floating-menu-item";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-floating-menu",
-    "version": "2.0.38",
+    "version": "2.1.0",
     "description": "Floating menu component",
     "keywords": [
         "Lit"
@@ -19,12 +19,12 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-button": "2.0.38",
-        "@fluid-topics/ft-icon": "2.0.38",
-        "@fluid-topics/ft-ripple": "2.0.38",
-        "@fluid-topics/ft-typography": "2.0.38",
-        "@fluid-topics/ft-wc-utils": "2.0.38",
+        "@fluid-topics/ft-button": "2.1.0",
+        "@fluid-topics/ft-icon": "2.1.0",
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-typography": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

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

@@ -1,53 +0,0 @@
-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 { FtBaseFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignment } from "./ft-base-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 FtBaseFloatingMenu extends FtLitElement implements FtBaseFloatingMenuProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    private menuOpen;
-    forceMenuOpen: boolean;
-    private container;
-    private menuWrapper;
-    private actionButton?;
-    private customToggle;
-    primary: boolean;
-    secondary: boolean;
-    tertiary: boolean;
-    neutral: boolean;
-    small: boolean;
-    label?: string;
-    tooltipPosition?: Position;
-    iconVariant: FtIconVariants;
-    icon: string;
-    text?: string;
-    horizontalAlignment: FtHorizontalAlignment;
-    verticalAlignment: FtVerticalAlignment;
-    disabled: boolean;
-    closeMenuMatchers: string[];
-    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-base-floating-menu.js

@@ -1,227 +0,0 @@
-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 { 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";
-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 FtBaseFloatingMenu extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.menuOpen = false;
-        this.forceMenuOpen = false;
-        this.primary = false;
-        this.secondary = false;
-        this.tertiary = false;
-        this.neutral = false;
-        this.small = false;
-        this.iconVariant = FtIconVariants.fluid_topics;
-        this.icon = "SHORTCUT_MENU";
-        this.horizontalAlignment = "left";
-        this.verticalAlignment = "bottom";
-        this.disabled = false;
-        this.closeMenuMatchers = [];
-        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-or-ftds-button id="actions-button"
-                                       part="button"
-                                       ?primary=${this.primary}
-                                       ?secondary=${this.secondary}
-                                       ?tertiary=${this.tertiary}
-                                       ?neutral=${this.neutral}
-                                       ?small=${this.small}
-                                       dense round
-                                       icon="${this.icon}"
-                                       .iconVariant=${this.iconVariant}
-                                       .label=${this.label}
-                                       .tooltipPosition=${this.tooltipPosition}
-                                       ?disabled=${this.disabled}>
-                        ${this.text}
-                    </ft-or-ftds-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();
-        }
-    }
-}
-FtBaseFloatingMenu.elementDefinitions = {
-    "ft-floating-menu-item": FtFloatingMenuItem,
-};
-__decorate([
-    state()
-], FtBaseFloatingMenu.prototype, "menuOpen", void 0);
-__decorate([
-    state()
-], FtBaseFloatingMenu.prototype, "forceMenuOpen", void 0);
-__decorate([
-    query(".ft-floating-menu")
-], FtBaseFloatingMenu.prototype, "container", void 0);
-__decorate([
-    query(".ft-floating-menu--wrapper")
-], FtBaseFloatingMenu.prototype, "menuWrapper", void 0);
-__decorate([
-    query("#actions-button")
-], FtBaseFloatingMenu.prototype, "actionButton", void 0);
-__decorate([
-    queryAssignedElements({ slot: "toggle" })
-], FtBaseFloatingMenu.prototype, "customToggle", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseFloatingMenu.prototype, "primary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseFloatingMenu.prototype, "secondary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseFloatingMenu.prototype, "tertiary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseFloatingMenu.prototype, "neutral", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseFloatingMenu.prototype, "small", void 0);
-__decorate([
-    property()
-], FtBaseFloatingMenu.prototype, "label", void 0);
-__decorate([
-    property()
-], FtBaseFloatingMenu.prototype, "tooltipPosition", void 0);
-__decorate([
-    property()
-], FtBaseFloatingMenu.prototype, "iconVariant", void 0);
-__decorate([
-    property()
-], FtBaseFloatingMenu.prototype, "icon", void 0);
-__decorate([
-    property()
-], FtBaseFloatingMenu.prototype, "text", void 0);
-__decorate([
-    property()
-], FtBaseFloatingMenu.prototype, "horizontalAlignment", void 0);
-__decorate([
-    property()
-], FtBaseFloatingMenu.prototype, "verticalAlignment", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseFloatingMenu.prototype, "disabled", void 0);
-__decorate([
-    jsonProperty([])
-], FtBaseFloatingMenu.prototype, "closeMenuMatchers", void 0);

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

@@ -1,15 +0,0 @@
-import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
-import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
-export type FtHorizontalAlignment = "left" | "right" | "center";
-export type FtVerticalAlignment = "bottom" | "top";
-export interface FtBaseFloatingMenuProperties {
-    disabled?: boolean;
-    iconVariant?: FtIconVariants;
-    icon?: string;
-    label?: string;
-    tooltipPosition?: Position;
-    text?: string;
-    horizontalAlignment?: FtHorizontalAlignment;
-    verticalAlignment?: FtVerticalAlignment;
-    closeMenuMatchers?: string[];
-}

package/build/ft-base-floating-menu.properties.js

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

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

@@ -1,7 +0,0 @@
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
-import { FtdsFloatingMenuProperties } from "./ftds-floating-menu.properties";
-export declare class FtdsFloatingMenu extends FtBaseFloatingMenu implements FtdsFloatingMenuProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult[];
-}

package/build/ftds-floating-menu.js

@@ -1,11 +0,0 @@
-import { styles } from "./ft-floating-menu.styles";
-import { FtdsButton } from "@fluid-topics/ft-button";
-import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
-import { ftdsFloatingMenuStyles } from "./ftds-floating-menu.styles";
-export class FtdsFloatingMenu extends FtBaseFloatingMenu {
-}
-FtdsFloatingMenu.elementDefinitions = {
-    "ft-or-ftds-button": FtdsButton,
-};
-// same as normal one until a change is necessary
-FtdsFloatingMenu.styles = [styles, ftdsFloatingMenuStyles];

package/build/ftds-floating-menu.properties.d.ts

@@ -1,8 +0,0 @@
-import { FtBaseFloatingMenuProperties } from "./ft-base-floating-menu.properties";
-export interface FtdsFloatingMenuProperties extends FtBaseFloatingMenuProperties {
-    primary?: boolean;
-    secondary?: boolean;
-    tertiary?: boolean;
-    neutral?: boolean;
-    small?: boolean;
-}

package/build/ftds-floating-menu.properties.js

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

package/build/ftds-floating-menu.styles.d.ts

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

package/build/ftds-floating-menu.styles.js

@@ -1,8 +0,0 @@
-import { css } from "lit";
-// language=CSS
-export const ftdsFloatingMenuStyles = css `
-    .ft-floating-menu--wrapper {
-        position: fixed;
-        z-index: 10;
-    }
-`;