@fluid-topics/ft-floating-menu 1.0.61 → 1.0.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-base-floating-menu.d.ts +42 -0
- package/build/ft-base-floating-menu.js +224 -0
- package/build/ft-base-floating-menu.properties.d.ts +15 -0
- package/build/ft-base-floating-menu.properties.js +1 -0
- package/build/ft-floating-menu.d.ts +4 -35
- package/build/ft-floating-menu.js +3 -192
- package/build/ft-floating-menu.light.js +27 -17
- package/build/ft-floating-menu.min.js +27 -17
- package/build/ft-floating-menu.properties.d.ts +2 -14
- package/build/ftds-floating-menu.d.ts +7 -0
- package/build/ftds-floating-menu.js +11 -0
- package/build/ftds-floating-menu.properties.d.ts +8 -0
- package/build/ftds-floating-menu.properties.js +1 -0
- package/build/index.d.ts +3 -0
- package/build/index.js +5 -0
- package/package.json +7 -7
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
3
|
+
import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
|
|
4
|
+
import { PropertyValues } from "lit/development";
|
|
5
|
+
import { FtBaseFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignment } from "./ft-base-floating-menu.properties";
|
|
6
|
+
export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
|
|
7
|
+
constructor();
|
|
8
|
+
}
|
|
9
|
+
export declare class FtBaseFloatingMenu extends FtLitElement implements FtBaseFloatingMenuProperties {
|
|
10
|
+
static elementDefinitions: ElementDefinitionsMap;
|
|
11
|
+
private menuOpen;
|
|
12
|
+
forceMenuOpen: boolean;
|
|
13
|
+
private container;
|
|
14
|
+
private menuWrapper;
|
|
15
|
+
private menuContent;
|
|
16
|
+
private actionButton;
|
|
17
|
+
primary: boolean;
|
|
18
|
+
secondary: boolean;
|
|
19
|
+
tertiary: boolean;
|
|
20
|
+
neutral: boolean;
|
|
21
|
+
small: boolean;
|
|
22
|
+
label?: string;
|
|
23
|
+
tooltipPosition?: Position;
|
|
24
|
+
iconVariant: FtIconVariants;
|
|
25
|
+
icon: string;
|
|
26
|
+
text?: string;
|
|
27
|
+
horizontalAlignment: FtHorizontalAlignment;
|
|
28
|
+
verticalAlignment: FtVerticalAlignment;
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
closeMenuMatchers: string[];
|
|
31
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
32
|
+
private onClick;
|
|
33
|
+
private onClickItem;
|
|
34
|
+
private hideOptions;
|
|
35
|
+
private closeMenu;
|
|
36
|
+
private onCloseEvent;
|
|
37
|
+
private onContentClick;
|
|
38
|
+
disconnectedCallback(): void;
|
|
39
|
+
protected contentAvailableCallback(props: PropertyValues): void;
|
|
40
|
+
private positionMenuWrapper;
|
|
41
|
+
private correctOutOfWindowPixels;
|
|
42
|
+
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
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;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from "lit";
|
|
8
|
+
import { property, query, state } from "lit/decorators.js";
|
|
9
|
+
import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
|
|
10
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
11
|
+
import { FtFloatingMenuItem } from "./ft-floating-menu-item";
|
|
12
|
+
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
13
|
+
export class FloatingMenuCloseEvent extends CustomEvent {
|
|
14
|
+
constructor() {
|
|
15
|
+
super("close-ft-floating-menu");
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
class FtBaseFloatingMenu extends FtLitElement {
|
|
19
|
+
constructor() {
|
|
20
|
+
super(...arguments);
|
|
21
|
+
this.menuOpen = false;
|
|
22
|
+
this.forceMenuOpen = false;
|
|
23
|
+
this.primary = false;
|
|
24
|
+
this.secondary = false;
|
|
25
|
+
this.tertiary = false;
|
|
26
|
+
this.neutral = false;
|
|
27
|
+
this.small = false;
|
|
28
|
+
this.iconVariant = FtIconVariants.fluid_topics;
|
|
29
|
+
this.icon = "SHORTCUT_MENU";
|
|
30
|
+
this.horizontalAlignment = "left";
|
|
31
|
+
this.verticalAlignment = "bottom";
|
|
32
|
+
this.disabled = false;
|
|
33
|
+
this.closeMenuMatchers = [];
|
|
34
|
+
this.hideOptions = (e) => {
|
|
35
|
+
this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
|
|
36
|
+
if (!this.menuOpen) {
|
|
37
|
+
document.removeEventListener("click", this.hideOptions);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
const classes = {
|
|
43
|
+
"ft-floating-menu": true,
|
|
44
|
+
"ft-floating-menu--open": this.forceMenuOpen || this.menuOpen,
|
|
45
|
+
["ft-floating-menu--" + this.horizontalAlignment.toLowerCase()]: true,
|
|
46
|
+
["ft-floating-menu--" + this.verticalAlignment.toLowerCase()]: true,
|
|
47
|
+
};
|
|
48
|
+
return html `
|
|
49
|
+
<div class="${classMap(classes)}">
|
|
50
|
+
|
|
51
|
+
<slot name="toggle"
|
|
52
|
+
part="toggle"
|
|
53
|
+
@click=${this.onClick}>
|
|
54
|
+
<ft-or-ftds-button id="actions-button"
|
|
55
|
+
part="button"
|
|
56
|
+
?primary=${this.primary}
|
|
57
|
+
?secondary=${this.secondary}
|
|
58
|
+
?tertiary=${this.tertiary}
|
|
59
|
+
?neutral=${this.neutral}
|
|
60
|
+
?small=${this.small}
|
|
61
|
+
dense round
|
|
62
|
+
icon="${this.icon}"
|
|
63
|
+
.iconVariant=${this.iconVariant}
|
|
64
|
+
.label=${this.label}
|
|
65
|
+
.tooltipPosition=${this.tooltipPosition}
|
|
66
|
+
?disabled=${this.disabled}
|
|
67
|
+
aria-controls="ft-floating-menu-options"
|
|
68
|
+
aria-expanded="${this.forceMenuOpen || this.menuOpen}">
|
|
69
|
+
${this.text}
|
|
70
|
+
</ft-or-ftds-button>
|
|
71
|
+
</slot>
|
|
72
|
+
<div class="ft-floating-menu--wrapper">
|
|
73
|
+
<div id="ft-floating-menu-options"
|
|
74
|
+
class="ft-floating-menu--options"
|
|
75
|
+
part="options"
|
|
76
|
+
@select="${this.onClickItem}">
|
|
77
|
+
<slot id="ft-floating-menu-content"
|
|
78
|
+
@click=${this.onContentClick}
|
|
79
|
+
@close-ft-floating-menu=${this.onCloseEvent}
|
|
80
|
+
></slot>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
`;
|
|
85
|
+
}
|
|
86
|
+
onClick() {
|
|
87
|
+
this.menuOpen = !this.menuOpen;
|
|
88
|
+
setTimeout(() => document.addEventListener("click", this.hideOptions));
|
|
89
|
+
}
|
|
90
|
+
onClickItem() {
|
|
91
|
+
this.closeMenu();
|
|
92
|
+
}
|
|
93
|
+
closeMenu() {
|
|
94
|
+
this.menuOpen = false;
|
|
95
|
+
}
|
|
96
|
+
onCloseEvent(e) {
|
|
97
|
+
e.stopPropagation();
|
|
98
|
+
this.closeMenu();
|
|
99
|
+
}
|
|
100
|
+
onContentClick(e) {
|
|
101
|
+
if (eventPathContainsMatchingElement(e, this.closeMenuMatchers, this)) {
|
|
102
|
+
this.closeMenu();
|
|
103
|
+
e.stopPropagation();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
disconnectedCallback() {
|
|
107
|
+
super.disconnectedCallback();
|
|
108
|
+
document.removeEventListener("click", this.hideOptions);
|
|
109
|
+
}
|
|
110
|
+
contentAvailableCallback(props) {
|
|
111
|
+
super.contentAvailableCallback(props);
|
|
112
|
+
if (["menuOpen"].some(p => props.has(p)) && this.menuOpen) {
|
|
113
|
+
this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned");
|
|
114
|
+
this.positionMenuWrapper();
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
positionMenuWrapper() {
|
|
118
|
+
const menuWidth = this.menuContent.offsetWidth;
|
|
119
|
+
const menuHeight = this.menuContent.offsetHeight;
|
|
120
|
+
const buttonWidth = this.actionButton.offsetWidth;
|
|
121
|
+
const buttonHeight = this.actionButton.offsetHeight;
|
|
122
|
+
let left = 0;
|
|
123
|
+
let top = 0;
|
|
124
|
+
this.menuWrapper.style.left = "0";
|
|
125
|
+
this.menuWrapper.style.top = "0";
|
|
126
|
+
switch (this.horizontalAlignment) {
|
|
127
|
+
case "left":
|
|
128
|
+
left = this.actionButton.offsetLeft - this.menuWrapper.offsetLeft;
|
|
129
|
+
break;
|
|
130
|
+
case "right":
|
|
131
|
+
left = this.actionButton.offsetLeft + buttonWidth - menuWidth - this.menuWrapper.offsetLeft;
|
|
132
|
+
break;
|
|
133
|
+
case "center":
|
|
134
|
+
left = this.actionButton.offsetLeft + (buttonWidth / 2) - (menuWidth / 2) - this.menuWrapper.offsetLeft;
|
|
135
|
+
break;
|
|
136
|
+
}
|
|
137
|
+
switch (this.verticalAlignment) {
|
|
138
|
+
case "bottom":
|
|
139
|
+
top = this.actionButton.offsetTop + buttonHeight + 4 - this.menuWrapper.offsetTop;
|
|
140
|
+
break;
|
|
141
|
+
case "top":
|
|
142
|
+
top = this.actionButton.offsetTop - menuHeight - 4 - this.menuWrapper.offsetTop;
|
|
143
|
+
break;
|
|
144
|
+
}
|
|
145
|
+
const style = this.menuWrapper.style;
|
|
146
|
+
style.left = left + "px";
|
|
147
|
+
style.top = top + "px";
|
|
148
|
+
const boundingClientRect = this.menuWrapper.getBoundingClientRect();
|
|
149
|
+
let leftOutOfWindowPixels = -boundingClientRect.x;
|
|
150
|
+
let rightOutOfWindowPixels = (boundingClientRect.x + boundingClientRect.width) - window.innerWidth;
|
|
151
|
+
style.left = (left + Math.round(this.correctOutOfWindowPixels(leftOutOfWindowPixels, rightOutOfWindowPixels))) + "px";
|
|
152
|
+
let topOutOfWindowPixels = -boundingClientRect.y;
|
|
153
|
+
let bottomOutOfWindowPixels = (boundingClientRect.y + boundingClientRect.height) - window.innerHeight;
|
|
154
|
+
style.top = (top + Math.round(this.correctOutOfWindowPixels(topOutOfWindowPixels, bottomOutOfWindowPixels))) + "px";
|
|
155
|
+
this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
|
|
156
|
+
}
|
|
157
|
+
correctOutOfWindowPixels(leftOrTopOutOfWindowPixels, rightOrBottomOutOfWindowPixels) {
|
|
158
|
+
return Math.max(leftOrTopOutOfWindowPixels, Math.min(0, -rightOrBottomOutOfWindowPixels));
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
FtBaseFloatingMenu.elementDefinitions = {
|
|
162
|
+
"ft-floating-menu-item": FtFloatingMenuItem,
|
|
163
|
+
};
|
|
164
|
+
__decorate([
|
|
165
|
+
state()
|
|
166
|
+
], FtBaseFloatingMenu.prototype, "menuOpen", void 0);
|
|
167
|
+
__decorate([
|
|
168
|
+
state()
|
|
169
|
+
], FtBaseFloatingMenu.prototype, "forceMenuOpen", void 0);
|
|
170
|
+
__decorate([
|
|
171
|
+
query(".ft-floating-menu")
|
|
172
|
+
], FtBaseFloatingMenu.prototype, "container", void 0);
|
|
173
|
+
__decorate([
|
|
174
|
+
query(".ft-floating-menu--wrapper")
|
|
175
|
+
], FtBaseFloatingMenu.prototype, "menuWrapper", void 0);
|
|
176
|
+
__decorate([
|
|
177
|
+
query("#ft-floating-menu-options")
|
|
178
|
+
], FtBaseFloatingMenu.prototype, "menuContent", void 0);
|
|
179
|
+
__decorate([
|
|
180
|
+
query("#actions-button")
|
|
181
|
+
], FtBaseFloatingMenu.prototype, "actionButton", void 0);
|
|
182
|
+
__decorate([
|
|
183
|
+
property({ type: Boolean })
|
|
184
|
+
], FtBaseFloatingMenu.prototype, "primary", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
property({ type: Boolean })
|
|
187
|
+
], FtBaseFloatingMenu.prototype, "secondary", void 0);
|
|
188
|
+
__decorate([
|
|
189
|
+
property({ type: Boolean })
|
|
190
|
+
], FtBaseFloatingMenu.prototype, "tertiary", void 0);
|
|
191
|
+
__decorate([
|
|
192
|
+
property({ type: Boolean })
|
|
193
|
+
], FtBaseFloatingMenu.prototype, "neutral", void 0);
|
|
194
|
+
__decorate([
|
|
195
|
+
property({ type: Boolean })
|
|
196
|
+
], FtBaseFloatingMenu.prototype, "small", void 0);
|
|
197
|
+
__decorate([
|
|
198
|
+
property()
|
|
199
|
+
], FtBaseFloatingMenu.prototype, "label", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property()
|
|
202
|
+
], FtBaseFloatingMenu.prototype, "tooltipPosition", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property()
|
|
205
|
+
], FtBaseFloatingMenu.prototype, "iconVariant", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property()
|
|
208
|
+
], FtBaseFloatingMenu.prototype, "icon", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property()
|
|
211
|
+
], FtBaseFloatingMenu.prototype, "text", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property()
|
|
214
|
+
], FtBaseFloatingMenu.prototype, "horizontalAlignment", void 0);
|
|
215
|
+
__decorate([
|
|
216
|
+
property()
|
|
217
|
+
], FtBaseFloatingMenu.prototype, "verticalAlignment", void 0);
|
|
218
|
+
__decorate([
|
|
219
|
+
property({ type: Boolean })
|
|
220
|
+
], FtBaseFloatingMenu.prototype, "disabled", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
jsonProperty([])
|
|
223
|
+
], FtBaseFloatingMenu.prototype, "closeMenuMatchers", void 0);
|
|
224
|
+
export { FtBaseFloatingMenu };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
2
|
+
import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
|
|
3
|
+
export type FtHorizontalAlignment = "left" | "right" | "center";
|
|
4
|
+
export type FtVerticalAlignment = "bottom" | "top";
|
|
5
|
+
export interface FtBaseFloatingMenuProperties {
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
iconVariant?: FtIconVariants;
|
|
8
|
+
icon?: string;
|
|
9
|
+
label?: string;
|
|
10
|
+
tooltipPosition?: Position;
|
|
11
|
+
text?: string;
|
|
12
|
+
horizontalAlignment?: FtHorizontalAlignment;
|
|
13
|
+
verticalAlignment?: FtVerticalAlignment;
|
|
14
|
+
closeMenuMatchers?: string[];
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,38 +1,7 @@
|
|
|
1
|
-
import { ElementDefinitionsMap
|
|
2
|
-
import { FtFloatingMenuProperties
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { PropertyValues } from "lit/development";
|
|
6
|
-
export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
|
|
7
|
-
constructor();
|
|
8
|
-
}
|
|
9
|
-
export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMenuProperties {
|
|
1
|
+
import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { FtFloatingMenuProperties } from "./ft-floating-menu.properties";
|
|
3
|
+
import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
|
|
4
|
+
export declare class FtFloatingMenu extends FtBaseFloatingMenu implements FtFloatingMenuProperties {
|
|
10
5
|
static elementDefinitions: ElementDefinitionsMap;
|
|
11
6
|
static styles: import("lit").CSSResult;
|
|
12
|
-
private menuOpen;
|
|
13
|
-
forceMenuOpen: boolean;
|
|
14
|
-
private container;
|
|
15
|
-
private menuWrapper;
|
|
16
|
-
private menuContent;
|
|
17
|
-
private actionButton;
|
|
18
|
-
label?: string;
|
|
19
|
-
tooltipPosition?: Position;
|
|
20
|
-
iconVariant: FtIconVariants;
|
|
21
|
-
icon: string;
|
|
22
|
-
text?: string;
|
|
23
|
-
horizontalAlignment: FtHorizontalAlignment;
|
|
24
|
-
verticalAlignment: FtVerticalAlignment;
|
|
25
|
-
disabled: boolean;
|
|
26
|
-
closeMenuMatchers: string[];
|
|
27
|
-
protected render(): import("lit-html").TemplateResult<1>;
|
|
28
|
-
private onClick;
|
|
29
|
-
private onClickItem;
|
|
30
|
-
private hideOptions;
|
|
31
|
-
private closeMenu;
|
|
32
|
-
private onCloseEvent;
|
|
33
|
-
private onContentClick;
|
|
34
|
-
disconnectedCallback(): void;
|
|
35
|
-
protected contentAvailableCallback(props: PropertyValues): void;
|
|
36
|
-
private positionMenuWrapper;
|
|
37
|
-
private correctOutOfWindowPixels;
|
|
38
7
|
}
|
|
@@ -1,199 +1,10 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
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;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { html } from "lit";
|
|
8
|
-
import { property, query, state } from "lit/decorators.js";
|
|
9
|
-
import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
|
|
10
1
|
import { styles } from "./ft-floating-menu.css";
|
|
11
2
|
import { FtButton } from "@fluid-topics/ft-button";
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
15
|
-
export class FloatingMenuCloseEvent extends CustomEvent {
|
|
16
|
-
constructor() {
|
|
17
|
-
super("close-ft-floating-menu");
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
class FtFloatingMenu extends FtLitElement {
|
|
21
|
-
constructor() {
|
|
22
|
-
super(...arguments);
|
|
23
|
-
this.menuOpen = false;
|
|
24
|
-
this.forceMenuOpen = false;
|
|
25
|
-
this.iconVariant = FtIconVariants.fluid_topics;
|
|
26
|
-
this.icon = "SHORTCUT_MENU";
|
|
27
|
-
this.horizontalAlignment = "left";
|
|
28
|
-
this.verticalAlignment = "bottom";
|
|
29
|
-
this.disabled = false;
|
|
30
|
-
this.closeMenuMatchers = [];
|
|
31
|
-
this.hideOptions = (e) => {
|
|
32
|
-
this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
|
|
33
|
-
if (!this.menuOpen) {
|
|
34
|
-
document.removeEventListener("click", this.hideOptions);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
render() {
|
|
39
|
-
const classes = {
|
|
40
|
-
"ft-floating-menu": true,
|
|
41
|
-
"ft-floating-menu--open": this.forceMenuOpen || this.menuOpen,
|
|
42
|
-
["ft-floating-menu--" + this.horizontalAlignment.toLowerCase()]: true,
|
|
43
|
-
["ft-floating-menu--" + this.verticalAlignment.toLowerCase()]: true,
|
|
44
|
-
};
|
|
45
|
-
return html `
|
|
46
|
-
<div class="${classMap(classes)}">
|
|
47
|
-
<ft-button id="actions-button"
|
|
48
|
-
part="button"
|
|
49
|
-
dense round
|
|
50
|
-
icon="${this.icon}"
|
|
51
|
-
.iconVariant=${this.iconVariant}
|
|
52
|
-
.label=${this.label}
|
|
53
|
-
.tooltipPosition=${this.tooltipPosition}
|
|
54
|
-
?disabled=${this.disabled}
|
|
55
|
-
@click=${this.onClick}
|
|
56
|
-
aria-controls="ft-floating-menu-options"
|
|
57
|
-
aria-expanded="${this.forceMenuOpen || this.menuOpen}">
|
|
58
|
-
${this.text}
|
|
59
|
-
</ft-button>
|
|
60
|
-
<div class="ft-floating-menu--wrapper">
|
|
61
|
-
<div id="ft-floating-menu-options"
|
|
62
|
-
class="ft-floating-menu--options"
|
|
63
|
-
part="options"
|
|
64
|
-
@select="${this.onClickItem}">
|
|
65
|
-
<slot @click=${this.onContentClick}
|
|
66
|
-
@close-ft-floating-menu=${this.onCloseEvent}
|
|
67
|
-
></slot>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
`;
|
|
72
|
-
}
|
|
73
|
-
onClick() {
|
|
74
|
-
this.menuOpen = !this.menuOpen;
|
|
75
|
-
setTimeout(() => document.addEventListener("click", this.hideOptions));
|
|
76
|
-
}
|
|
77
|
-
onClickItem() {
|
|
78
|
-
this.closeMenu();
|
|
79
|
-
}
|
|
80
|
-
closeMenu() {
|
|
81
|
-
this.menuOpen = false;
|
|
82
|
-
}
|
|
83
|
-
onCloseEvent(e) {
|
|
84
|
-
e.stopPropagation();
|
|
85
|
-
this.closeMenu();
|
|
86
|
-
}
|
|
87
|
-
onContentClick(e) {
|
|
88
|
-
if (eventPathContainsMatchingElement(e, this.closeMenuMatchers, this)) {
|
|
89
|
-
this.closeMenu();
|
|
90
|
-
e.stopPropagation();
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
disconnectedCallback() {
|
|
94
|
-
super.disconnectedCallback();
|
|
95
|
-
document.removeEventListener("click", this.hideOptions);
|
|
96
|
-
}
|
|
97
|
-
contentAvailableCallback(props) {
|
|
98
|
-
super.contentAvailableCallback(props);
|
|
99
|
-
if (["menuOpen"].some(p => props.has(p)) && this.menuOpen) {
|
|
100
|
-
this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned");
|
|
101
|
-
this.positionMenuWrapper();
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
positionMenuWrapper() {
|
|
105
|
-
const menuWidth = this.menuContent.offsetWidth;
|
|
106
|
-
const menuHeight = this.menuContent.offsetHeight;
|
|
107
|
-
const buttonWidth = this.actionButton.offsetWidth;
|
|
108
|
-
const buttonHeight = this.actionButton.offsetHeight;
|
|
109
|
-
let left = 0;
|
|
110
|
-
let top = 0;
|
|
111
|
-
this.menuWrapper.style.left = "0";
|
|
112
|
-
this.menuWrapper.style.top = "0";
|
|
113
|
-
switch (this.horizontalAlignment) {
|
|
114
|
-
case "left":
|
|
115
|
-
left = this.actionButton.offsetLeft - this.menuWrapper.offsetLeft;
|
|
116
|
-
break;
|
|
117
|
-
case "right":
|
|
118
|
-
left = this.actionButton.offsetLeft + buttonWidth - menuWidth - this.menuWrapper.offsetLeft;
|
|
119
|
-
break;
|
|
120
|
-
case "center":
|
|
121
|
-
left = this.actionButton.offsetLeft + (buttonWidth / 2) - (menuWidth / 2) - this.menuWrapper.offsetLeft;
|
|
122
|
-
break;
|
|
123
|
-
}
|
|
124
|
-
switch (this.verticalAlignment) {
|
|
125
|
-
case "bottom":
|
|
126
|
-
top = this.actionButton.offsetTop + buttonHeight + 4 - this.menuWrapper.offsetTop;
|
|
127
|
-
break;
|
|
128
|
-
case "top":
|
|
129
|
-
top = this.actionButton.offsetTop - menuHeight - 4 - this.menuWrapper.offsetTop;
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
const style = this.menuWrapper.style;
|
|
133
|
-
style.left = left + "px";
|
|
134
|
-
style.top = top + "px";
|
|
135
|
-
const boundingClientRect = this.menuWrapper.getBoundingClientRect();
|
|
136
|
-
let leftOutOfWindowPixels = -boundingClientRect.x;
|
|
137
|
-
let rightOutOfWindowPixels = (boundingClientRect.x + boundingClientRect.width) - window.innerWidth;
|
|
138
|
-
style.left = (left + Math.round(this.correctOutOfWindowPixels(leftOutOfWindowPixels, rightOutOfWindowPixels))) + "px";
|
|
139
|
-
let topOutOfWindowPixels = -boundingClientRect.y;
|
|
140
|
-
let bottomOutOfWindowPixels = (boundingClientRect.y + boundingClientRect.height) - window.innerHeight;
|
|
141
|
-
style.top = (top + Math.round(this.correctOutOfWindowPixels(topOutOfWindowPixels, bottomOutOfWindowPixels))) + "px";
|
|
142
|
-
this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
|
|
143
|
-
}
|
|
144
|
-
correctOutOfWindowPixels(leftOrTopOutOfWindowPixels, rightOrBottomOutOfWindowPixels) {
|
|
145
|
-
return Math.max(leftOrTopOutOfWindowPixels, Math.min(0, -rightOrBottomOutOfWindowPixels));
|
|
146
|
-
}
|
|
3
|
+
import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
|
|
4
|
+
class FtFloatingMenu extends FtBaseFloatingMenu {
|
|
147
5
|
}
|
|
148
6
|
FtFloatingMenu.elementDefinitions = {
|
|
149
|
-
"ft-button": FtButton,
|
|
150
|
-
"ft-floating-menu-item": FtFloatingMenuItem,
|
|
7
|
+
"ft-or-ftds-button": FtButton,
|
|
151
8
|
};
|
|
152
|
-
// language=CSS
|
|
153
9
|
FtFloatingMenu.styles = styles;
|
|
154
|
-
__decorate([
|
|
155
|
-
state()
|
|
156
|
-
], FtFloatingMenu.prototype, "menuOpen", void 0);
|
|
157
|
-
__decorate([
|
|
158
|
-
state()
|
|
159
|
-
], FtFloatingMenu.prototype, "forceMenuOpen", void 0);
|
|
160
|
-
__decorate([
|
|
161
|
-
query(".ft-floating-menu")
|
|
162
|
-
], FtFloatingMenu.prototype, "container", void 0);
|
|
163
|
-
__decorate([
|
|
164
|
-
query(".ft-floating-menu--wrapper")
|
|
165
|
-
], FtFloatingMenu.prototype, "menuWrapper", void 0);
|
|
166
|
-
__decorate([
|
|
167
|
-
query("#ft-floating-menu-options")
|
|
168
|
-
], FtFloatingMenu.prototype, "menuContent", void 0);
|
|
169
|
-
__decorate([
|
|
170
|
-
query("#actions-button")
|
|
171
|
-
], FtFloatingMenu.prototype, "actionButton", void 0);
|
|
172
|
-
__decorate([
|
|
173
|
-
property()
|
|
174
|
-
], FtFloatingMenu.prototype, "label", void 0);
|
|
175
|
-
__decorate([
|
|
176
|
-
property()
|
|
177
|
-
], FtFloatingMenu.prototype, "tooltipPosition", void 0);
|
|
178
|
-
__decorate([
|
|
179
|
-
property()
|
|
180
|
-
], FtFloatingMenu.prototype, "iconVariant", void 0);
|
|
181
|
-
__decorate([
|
|
182
|
-
property()
|
|
183
|
-
], FtFloatingMenu.prototype, "icon", void 0);
|
|
184
|
-
__decorate([
|
|
185
|
-
property()
|
|
186
|
-
], FtFloatingMenu.prototype, "text", void 0);
|
|
187
|
-
__decorate([
|
|
188
|
-
property()
|
|
189
|
-
], FtFloatingMenu.prototype, "horizontalAlignment", void 0);
|
|
190
|
-
__decorate([
|
|
191
|
-
property()
|
|
192
|
-
], FtFloatingMenu.prototype, "verticalAlignment", void 0);
|
|
193
|
-
__decorate([
|
|
194
|
-
property({ type: Boolean })
|
|
195
|
-
], FtFloatingMenu.prototype, "disabled", void 0);
|
|
196
|
-
__decorate([
|
|
197
|
-
jsonProperty([])
|
|
198
|
-
], FtFloatingMenu.prototype, "closeMenuMatchers", void 0);
|
|
199
10
|
export { FtFloatingMenu };
|
|
@@ -605,7 +605,7 @@ const Bo=Symbol.for(""),Do=t=>{if((null==t?void 0:t.r)===Bo)return null==t?void
|
|
|
605
605
|
</ft-tooltip>
|
|
606
606
|
`:t}resolveIcon(){return this.loading?e.html`
|
|
607
607
|
<ft-loader part="loader icon"></ft-loader> `:this.icon?e.html`
|
|
608
|
-
<ft-icon part="icon" .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon> `:e.nothing}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){return this.unslotText(this.slottedContent).trim()}unslotText(t){return t instanceof HTMLSlotElement?t.assignedNodes().map((t=>this.unslotText(t))).join(""):(null==t?void 0:t.textContent)||""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}}ce.elementDefinitions={"ft-ripple":to,"ft-tooltip":re,"ft-typography":Po,"ft-icon":ae,"ft-loader":ne},le([r.property({type:String,reflect:!0})],ce.prototype,"role",void 0),le([r.property()],ce.prototype,"type",void 0),le([r.property({type:Boolean})],ce.prototype,"disabled",void 0),le([r.property()],ce.prototype,"label",void 0),le([r.property()],ce.prototype,"icon",void 0),le([r.property()],ce.prototype,"iconVariant",void 0),le([r.property({type:Boolean})],ce.prototype,"trailingIcon",void 0),le([r.property({type:Boolean})],ce.prototype,"loading",void 0),le([r.property()],ce.prototype,"tooltipPosition",void 0),le([r.property({type:Boolean})],ce.prototype,"hideTooltip",void 0),le([r.property({type:Boolean})],ce.prototype,"forceTooltip",void 0),le([r.query(".ft-button")],ce.prototype,"button",void 0),le([r.query(".ft-button--label slot")],ce.prototype,"slottedContent",void 0);var pe=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class se extends ce{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.
|
|
608
|
+
<ft-icon part="icon" .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon> `:e.nothing}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){return this.unslotText(this.slottedContent).trim()}unslotText(t){return t instanceof HTMLSlotElement?t.assignedNodes().map((t=>this.unslotText(t))).join(""):(null==t?void 0:t.textContent)||""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}}ce.elementDefinitions={"ft-ripple":to,"ft-tooltip":re,"ft-typography":Po,"ft-icon":ae,"ft-loader":ne},le([r.property({type:String,reflect:!0})],ce.prototype,"role",void 0),le([r.property()],ce.prototype,"type",void 0),le([r.property({type:Boolean})],ce.prototype,"disabled",void 0),le([r.property()],ce.prototype,"label",void 0),le([r.property()],ce.prototype,"icon",void 0),le([r.property()],ce.prototype,"iconVariant",void 0),le([r.property({type:Boolean})],ce.prototype,"trailingIcon",void 0),le([r.property({type:Boolean})],ce.prototype,"loading",void 0),le([r.property()],ce.prototype,"tooltipPosition",void 0),le([r.property({type:Boolean})],ce.prototype,"hideTooltip",void 0),le([r.property({type:Boolean})],ce.prototype,"forceTooltip",void 0),le([r.query(".ft-button")],ce.prototype,"button",void 0),le([r.query(".ft-button--label slot")],ce.prototype,"slottedContent",void 0);var pe=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class se extends ce{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.dense=!1,this.round=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--outlined":this.outlined,"ft-button--dense":this.dense,"ft-button--round":this.round,"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0}}get typographyVariant(){return"button"}}se.styles=[o.safariEllipsisFix,Xt],pe([r.property({type:Boolean})],se.prototype,"primary",void 0),pe([r.property({type:Boolean})],se.prototype,"outlined",void 0),pe([r.property({type:Boolean})],se.prototype,"dense",void 0),pe([r.property({type:Boolean})],se.prototype,"round",void 0);const fe=[e.css`
|
|
609
609
|
:host {
|
|
610
610
|
display: inline-block;
|
|
611
611
|
max-width: 100%;
|
|
@@ -864,30 +864,40 @@ const Bo=Symbol.for(""),Do=t=>{if((null==t?void 0:t.r)===Bo)return null==t?void
|
|
|
864
864
|
<slot></slot>
|
|
865
865
|
</ft-typography>
|
|
866
866
|
</div>
|
|
867
|
-
`}onClick(t){this.dispatchEvent(new be(this.value))}}me.elementDefinitions={"ft-icon":ae,"ft-ripple":to,"ft-typography":Po},me.styles=ye,ue([r.property()],me.prototype,"iconVariant",void 0),ue([r.property()],me.prototype,"icon",void 0),ue([r.property()],me.prototype,"value",void 0);var xe=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Oe extends
|
|
867
|
+
`}onClick(t){this.dispatchEvent(new be(this.value))}}me.elementDefinitions={"ft-icon":ae,"ft-ripple":to,"ft-typography":Po},me.styles=ye,ue([r.property()],me.prototype,"iconVariant",void 0),ue([r.property()],me.prototype,"icon",void 0),ue([r.property()],me.prototype,"value",void 0);var xe=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Oe extends o.FtLitElement{constructor(){super(...arguments),this.menuOpen=!1,this.forceMenuOpen=!1,this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1,this.iconVariant=oe.fluid_topics,this.icon="SHORTCUT_MENU",this.horizontalAlignment="left",this.verticalAlignment="bottom",this.disabled=!1,this.closeMenuMatchers=[],this.hideOptions=t=>{this.menuOpen=this.menuOpen&&t.composedPath().includes(this.container),this.menuOpen||document.removeEventListener("click",this.hideOptions)}}render(){const t={"ft-floating-menu":!0,"ft-floating-menu--open":this.forceMenuOpen||this.menuOpen,["ft-floating-menu--"+this.horizontalAlignment.toLowerCase()]:!0,["ft-floating-menu--"+this.verticalAlignment.toLowerCase()]:!0};return e.html`
|
|
868
868
|
<div class="${i.classMap(t)}">
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
869
|
+
|
|
870
|
+
<slot name="toggle"
|
|
871
|
+
part="toggle"
|
|
872
|
+
@click=${this.onClick}>
|
|
873
|
+
<ft-or-ftds-button id="actions-button"
|
|
874
|
+
part="button"
|
|
875
|
+
?primary=${this.primary}
|
|
876
|
+
?secondary=${this.secondary}
|
|
877
|
+
?tertiary=${this.tertiary}
|
|
878
|
+
?neutral=${this.neutral}
|
|
879
|
+
?small=${this.small}
|
|
880
|
+
dense round
|
|
881
|
+
icon="${this.icon}"
|
|
882
|
+
.iconVariant=${this.iconVariant}
|
|
883
|
+
.label=${this.label}
|
|
884
|
+
.tooltipPosition=${this.tooltipPosition}
|
|
885
|
+
?disabled=${this.disabled}
|
|
886
|
+
aria-controls="ft-floating-menu-options"
|
|
887
|
+
aria-expanded="${this.forceMenuOpen||this.menuOpen}">
|
|
888
|
+
${this.text}
|
|
889
|
+
</ft-or-ftds-button>
|
|
890
|
+
</slot>
|
|
882
891
|
<div class="ft-floating-menu--wrapper">
|
|
883
892
|
<div id="ft-floating-menu-options"
|
|
884
893
|
class="ft-floating-menu--options"
|
|
885
894
|
part="options"
|
|
886
895
|
@select="${this.onClickItem}">
|
|
887
|
-
<slot
|
|
896
|
+
<slot id="ft-floating-menu-content"
|
|
897
|
+
@click=${this.onContentClick}
|
|
888
898
|
@close-ft-floating-menu=${this.onCloseEvent}
|
|
889
899
|
></slot>
|
|
890
900
|
</div>
|
|
891
901
|
</div>
|
|
892
902
|
</div>
|
|
893
|
-
`}onClick(){this.menuOpen=!this.menuOpen,setTimeout((()=>document.addEventListener("click",this.hideOptions)))}onClickItem(){this.closeMenu()}closeMenu(){this.menuOpen=!1}onCloseEvent(t){t.stopPropagation(),this.closeMenu()}onContentClick(t){o.eventPathContainsMatchingElement(t,this.closeMenuMatchers,this)&&(this.closeMenu(),t.stopPropagation())}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}contentAvailableCallback(t){super.contentAvailableCallback(t),["menuOpen"].some((o=>t.has(o)))&&this.menuOpen&&(this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned"),this.positionMenuWrapper())}positionMenuWrapper(){const t=this.menuContent.offsetWidth,o=this.menuContent.offsetHeight,e=this.actionButton.offsetWidth,r=this.actionButton.offsetHeight;let i=0,a=0;switch(this.menuWrapper.style.left="0",this.menuWrapper.style.top="0",this.horizontalAlignment){case"left":i=this.actionButton.offsetLeft-this.menuWrapper.offsetLeft;break;case"right":i=this.actionButton.offsetLeft+e-t-this.menuWrapper.offsetLeft;break;case"center":i=this.actionButton.offsetLeft+e/2-t/2-this.menuWrapper.offsetLeft}switch(this.verticalAlignment){case"bottom":a=this.actionButton.offsetTop+r+4-this.menuWrapper.offsetTop;break;case"top":a=this.actionButton.offsetTop-o-4-this.menuWrapper.offsetTop}const n=this.menuWrapper.style;n.left=i+"px",n.top=a+"px";const l=this.menuWrapper.getBoundingClientRect();let c=-l.x,p=l.x+l.width-window.innerWidth;n.left=i+Math.round(this.correctOutOfWindowPixels(c,p))+"px";let s=-l.y,f=l.y+l.height-window.innerHeight;n.top=a+Math.round(this.correctOutOfWindowPixels(s,f))+"px",this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned")}correctOutOfWindowPixels(t,o){return Math.max(t,Math.min(0,-o))}}
|
|
903
|
+
`}onClick(){this.menuOpen=!this.menuOpen,setTimeout((()=>document.addEventListener("click",this.hideOptions)))}onClickItem(){this.closeMenu()}closeMenu(){this.menuOpen=!1}onCloseEvent(t){t.stopPropagation(),this.closeMenu()}onContentClick(t){o.eventPathContainsMatchingElement(t,this.closeMenuMatchers,this)&&(this.closeMenu(),t.stopPropagation())}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}contentAvailableCallback(t){super.contentAvailableCallback(t),["menuOpen"].some((o=>t.has(o)))&&this.menuOpen&&(this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned"),this.positionMenuWrapper())}positionMenuWrapper(){const t=this.menuContent.offsetWidth,o=this.menuContent.offsetHeight,e=this.actionButton.offsetWidth,r=this.actionButton.offsetHeight;let i=0,a=0;switch(this.menuWrapper.style.left="0",this.menuWrapper.style.top="0",this.horizontalAlignment){case"left":i=this.actionButton.offsetLeft-this.menuWrapper.offsetLeft;break;case"right":i=this.actionButton.offsetLeft+e-t-this.menuWrapper.offsetLeft;break;case"center":i=this.actionButton.offsetLeft+e/2-t/2-this.menuWrapper.offsetLeft}switch(this.verticalAlignment){case"bottom":a=this.actionButton.offsetTop+r+4-this.menuWrapper.offsetTop;break;case"top":a=this.actionButton.offsetTop-o-4-this.menuWrapper.offsetTop}const n=this.menuWrapper.style;n.left=i+"px",n.top=a+"px";const l=this.menuWrapper.getBoundingClientRect();let c=-l.x,p=l.x+l.width-window.innerWidth;n.left=i+Math.round(this.correctOutOfWindowPixels(c,p))+"px";let s=-l.y,f=l.y+l.height-window.innerHeight;n.top=a+Math.round(this.correctOutOfWindowPixels(s,f))+"px",this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned")}correctOutOfWindowPixels(t,o){return Math.max(t,Math.min(0,-o))}}Oe.elementDefinitions={"ft-floating-menu-item":me},xe([r.state()],Oe.prototype,"menuOpen",void 0),xe([r.state()],Oe.prototype,"forceMenuOpen",void 0),xe([r.query(".ft-floating-menu")],Oe.prototype,"container",void 0),xe([r.query(".ft-floating-menu--wrapper")],Oe.prototype,"menuWrapper",void 0),xe([r.query("#ft-floating-menu-options")],Oe.prototype,"menuContent",void 0),xe([r.query("#actions-button")],Oe.prototype,"actionButton",void 0),xe([r.property({type:Boolean})],Oe.prototype,"primary",void 0),xe([r.property({type:Boolean})],Oe.prototype,"secondary",void 0),xe([r.property({type:Boolean})],Oe.prototype,"tertiary",void 0),xe([r.property({type:Boolean})],Oe.prototype,"neutral",void 0),xe([r.property({type:Boolean})],Oe.prototype,"small",void 0),xe([r.property()],Oe.prototype,"label",void 0),xe([r.property()],Oe.prototype,"tooltipPosition",void 0),xe([r.property()],Oe.prototype,"iconVariant",void 0),xe([r.property()],Oe.prototype,"icon",void 0),xe([r.property()],Oe.prototype,"text",void 0),xe([r.property()],Oe.prototype,"horizontalAlignment",void 0),xe([r.property()],Oe.prototype,"verticalAlignment",void 0),xe([r.property({type:Boolean})],Oe.prototype,"disabled",void 0),xe([o.jsonProperty([])],Oe.prototype,"closeMenuMatchers",void 0);class ve extends Oe{}ve.elementDefinitions={"ft-or-ftds-button":se},ve.styles=l;class Ne extends Oe{}Ne.elementDefinitions={"ft-or-ftds-button":he},Ne.styles=l,o.customElement("ft-floating-menu")(ve),o.customElement("ftds-floating-menu")(Ne),o.customElement("ft-floating-menu-item")(me),t.FtFloatingMenu=ve,t.FtFloatingMenuCssVariables=n,t.FtFloatingMenuItem=me,t.FtFloatingMenuItemCssVariables=ge,t.FtFloatingMenuItemSelect=be,t.FtdsFloatingMenu=Ne,t.itemStyles=ye,t.styles=l}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML);
|
|
@@ -717,7 +717,7 @@ class Je extends ke{constructor(t){if(super(t),this.et=X,t.type!==Re)throw Error
|
|
|
717
717
|
</ft-tooltip>
|
|
718
718
|
`:t}resolveIcon(){return this.loading?J`
|
|
719
719
|
<ft-loader part="loader icon"></ft-loader> `:this.icon?J`
|
|
720
|
-
<ft-icon part="icon" .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon> `:X}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){return this.unslotText(this.slottedContent).trim()}unslotText(t){return t instanceof HTMLSlotElement?t.assignedNodes().map((t=>this.unslotText(t))).join(""):(null==t?void 0:t.textContent)||""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}}nr.elementDefinitions={"ft-ripple":We,"ft-tooltip":Ve,"ft-typography":Me,"ft-icon":er,"ft-loader":rr},ir([r({type:String,reflect:!0})],nr.prototype,"role",void 0),ir([r()],nr.prototype,"type",void 0),ir([r({type:Boolean})],nr.prototype,"disabled",void 0),ir([r()],nr.prototype,"label",void 0),ir([r()],nr.prototype,"icon",void 0),ir([r()],nr.prototype,"iconVariant",void 0),ir([r({type:Boolean})],nr.prototype,"trailingIcon",void 0),ir([r({type:Boolean})],nr.prototype,"loading",void 0),ir([r()],nr.prototype,"tooltipPosition",void 0),ir([r({type:Boolean})],nr.prototype,"hideTooltip",void 0),ir([r({type:Boolean})],nr.prototype,"forceTooltip",void 0),ir([a(".ft-button")],nr.prototype,"button",void 0),ir([a(".ft-button--label slot")],nr.prototype,"slottedContent",void 0);var ar=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class lr extends nr{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.
|
|
720
|
+
<ft-icon part="icon" .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon> `:X}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){return this.unslotText(this.slottedContent).trim()}unslotText(t){return t instanceof HTMLSlotElement?t.assignedNodes().map((t=>this.unslotText(t))).join(""):(null==t?void 0:t.textContent)||""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}}nr.elementDefinitions={"ft-ripple":We,"ft-tooltip":Ve,"ft-typography":Me,"ft-icon":er,"ft-loader":rr},ir([r({type:String,reflect:!0})],nr.prototype,"role",void 0),ir([r()],nr.prototype,"type",void 0),ir([r({type:Boolean})],nr.prototype,"disabled",void 0),ir([r()],nr.prototype,"label",void 0),ir([r()],nr.prototype,"icon",void 0),ir([r()],nr.prototype,"iconVariant",void 0),ir([r({type:Boolean})],nr.prototype,"trailingIcon",void 0),ir([r({type:Boolean})],nr.prototype,"loading",void 0),ir([r()],nr.prototype,"tooltipPosition",void 0),ir([r({type:Boolean})],nr.prototype,"hideTooltip",void 0),ir([r({type:Boolean})],nr.prototype,"forceTooltip",void 0),ir([a(".ft-button")],nr.prototype,"button",void 0),ir([a(".ft-button--label slot")],nr.prototype,"slottedContent",void 0);var ar=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class lr extends nr{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.dense=!1,this.round=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--outlined":this.outlined,"ft-button--dense":this.dense,"ft-button--round":this.round,"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0}}get typographyVariant(){return"button"}}lr.styles=[Lt,Ce],ar([r({type:Boolean})],lr.prototype,"primary",void 0),ar([r({type:Boolean})],lr.prototype,"outlined",void 0),ar([r({type:Boolean})],lr.prototype,"dense",void 0),ar([r({type:Boolean})],lr.prototype,"round",void 0);const sr=[m`
|
|
721
721
|
:host {
|
|
722
722
|
display: inline-block;
|
|
723
723
|
max-width: 100%;
|
|
@@ -976,30 +976,40 @@ class Je extends ke{constructor(t){if(super(t),this.et=X,t.type!==Re)throw Error
|
|
|
976
976
|
<slot></slot>
|
|
977
977
|
</ft-typography>
|
|
978
978
|
</div>
|
|
979
|
-
`}onClick(t){this.dispatchEvent(new ur(this.value))}}yr.elementDefinitions={"ft-icon":er,"ft-ripple":We,"ft-typography":Me},yr.styles=dr,hr([r()],yr.prototype,"iconVariant",void 0),hr([r()],yr.prototype,"icon",void 0),hr([r()],yr.prototype,"value",void 0);var gr=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class br extends
|
|
979
|
+
`}onClick(t){this.dispatchEvent(new ur(this.value))}}yr.elementDefinitions={"ft-icon":er,"ft-ripple":We,"ft-typography":Me},yr.styles=dr,hr([r()],yr.prototype,"iconVariant",void 0),hr([r()],yr.prototype,"icon",void 0),hr([r()],yr.prototype,"value",void 0);var gr=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class br extends It{constructor(){super(...arguments),this.menuOpen=!1,this.forceMenuOpen=!1,this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1,this.iconVariant=tr.fluid_topics,this.icon="SHORTCUT_MENU",this.horizontalAlignment="left",this.verticalAlignment="bottom",this.disabled=!1,this.closeMenuMatchers=[],this.hideOptions=t=>{this.menuOpen=this.menuOpen&&t.composedPath().includes(this.container),this.menuOpen||document.removeEventListener("click",this.hideOptions)}}render(){const t={"ft-floating-menu":!0,"ft-floating-menu--open":this.forceMenuOpen||this.menuOpen,["ft-floating-menu--"+this.horizontalAlignment.toLowerCase()]:!0,["ft-floating-menu--"+this.verticalAlignment.toLowerCase()]:!0};return J`
|
|
980
980
|
<div class="${Ue(t)}">
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
981
|
+
|
|
982
|
+
<slot name="toggle"
|
|
983
|
+
part="toggle"
|
|
984
|
+
@click=${this.onClick}>
|
|
985
|
+
<ft-or-ftds-button id="actions-button"
|
|
986
|
+
part="button"
|
|
987
|
+
?primary=${this.primary}
|
|
988
|
+
?secondary=${this.secondary}
|
|
989
|
+
?tertiary=${this.tertiary}
|
|
990
|
+
?neutral=${this.neutral}
|
|
991
|
+
?small=${this.small}
|
|
992
|
+
dense round
|
|
993
|
+
icon="${this.icon}"
|
|
994
|
+
.iconVariant=${this.iconVariant}
|
|
995
|
+
.label=${this.label}
|
|
996
|
+
.tooltipPosition=${this.tooltipPosition}
|
|
997
|
+
?disabled=${this.disabled}
|
|
998
|
+
aria-controls="ft-floating-menu-options"
|
|
999
|
+
aria-expanded="${this.forceMenuOpen||this.menuOpen}">
|
|
1000
|
+
${this.text}
|
|
1001
|
+
</ft-or-ftds-button>
|
|
1002
|
+
</slot>
|
|
994
1003
|
<div class="ft-floating-menu--wrapper">
|
|
995
1004
|
<div id="ft-floating-menu-options"
|
|
996
1005
|
class="ft-floating-menu--options"
|
|
997
1006
|
part="options"
|
|
998
1007
|
@select="${this.onClickItem}">
|
|
999
|
-
<slot
|
|
1008
|
+
<slot id="ft-floating-menu-content"
|
|
1009
|
+
@click=${this.onContentClick}
|
|
1000
1010
|
@close-ft-floating-menu=${this.onCloseEvent}
|
|
1001
1011
|
></slot>
|
|
1002
1012
|
</div>
|
|
1003
1013
|
</div>
|
|
1004
1014
|
</div>
|
|
1005
|
-
`}onClick(){this.menuOpen=!this.menuOpen,setTimeout((()=>document.addEventListener("click",this.hideOptions)))}onClickItem(){this.closeMenu()}closeMenu(){this.menuOpen=!1}onCloseEvent(t){t.stopPropagation(),this.closeMenu()}onContentClick(t){(function(t,o,e){if(o.length>0){const r=t.composedPath();for(let t of r){if(t===e)return!1;if(t.matches&&o.some((o=>t.matches(o))))return!0}}return!1})(t,this.closeMenuMatchers,this)&&(this.closeMenu(),t.stopPropagation())}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}contentAvailableCallback(t){super.contentAvailableCallback(t),["menuOpen"].some((o=>t.has(o)))&&this.menuOpen&&(this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned"),this.positionMenuWrapper())}positionMenuWrapper(){const t=this.menuContent.offsetWidth,o=this.menuContent.offsetHeight,e=this.actionButton.offsetWidth,r=this.actionButton.offsetHeight;let i=0,n=0;switch(this.menuWrapper.style.left="0",this.menuWrapper.style.top="0",this.horizontalAlignment){case"left":i=this.actionButton.offsetLeft-this.menuWrapper.offsetLeft;break;case"right":i=this.actionButton.offsetLeft+e-t-this.menuWrapper.offsetLeft;break;case"center":i=this.actionButton.offsetLeft+e/2-t/2-this.menuWrapper.offsetLeft}switch(this.verticalAlignment){case"bottom":n=this.actionButton.offsetTop+r+4-this.menuWrapper.offsetTop;break;case"top":n=this.actionButton.offsetTop-o-4-this.menuWrapper.offsetTop}const a=this.menuWrapper.style;a.left=i+"px",a.top=n+"px";const l=this.menuWrapper.getBoundingClientRect();let s=-l.x,c=l.x+l.width-window.innerWidth;a.left=i+Math.round(this.correctOutOfWindowPixels(s,c))+"px";let p=-l.y,f=l.y+l.height-window.innerHeight;a.top=n+Math.round(this.correctOutOfWindowPixels(p,f))+"px",this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned")}correctOutOfWindowPixels(t,o){return Math.max(t,Math.min(0,-o))}}
|
|
1015
|
+
`}onClick(){this.menuOpen=!this.menuOpen,setTimeout((()=>document.addEventListener("click",this.hideOptions)))}onClickItem(){this.closeMenu()}closeMenu(){this.menuOpen=!1}onCloseEvent(t){t.stopPropagation(),this.closeMenu()}onContentClick(t){(function(t,o,e){if(o.length>0){const r=t.composedPath();for(let t of r){if(t===e)return!1;if(t.matches&&o.some((o=>t.matches(o))))return!0}}return!1})(t,this.closeMenuMatchers,this)&&(this.closeMenu(),t.stopPropagation())}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}contentAvailableCallback(t){super.contentAvailableCallback(t),["menuOpen"].some((o=>t.has(o)))&&this.menuOpen&&(this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned"),this.positionMenuWrapper())}positionMenuWrapper(){const t=this.menuContent.offsetWidth,o=this.menuContent.offsetHeight,e=this.actionButton.offsetWidth,r=this.actionButton.offsetHeight;let i=0,n=0;switch(this.menuWrapper.style.left="0",this.menuWrapper.style.top="0",this.horizontalAlignment){case"left":i=this.actionButton.offsetLeft-this.menuWrapper.offsetLeft;break;case"right":i=this.actionButton.offsetLeft+e-t-this.menuWrapper.offsetLeft;break;case"center":i=this.actionButton.offsetLeft+e/2-t/2-this.menuWrapper.offsetLeft}switch(this.verticalAlignment){case"bottom":n=this.actionButton.offsetTop+r+4-this.menuWrapper.offsetTop;break;case"top":n=this.actionButton.offsetTop-o-4-this.menuWrapper.offsetTop}const a=this.menuWrapper.style;a.left=i+"px",a.top=n+"px";const l=this.menuWrapper.getBoundingClientRect();let s=-l.x,c=l.x+l.width-window.innerWidth;a.left=i+Math.round(this.correctOutOfWindowPixels(s,c))+"px";let p=-l.y,f=l.y+l.height-window.innerHeight;a.top=n+Math.round(this.correctOutOfWindowPixels(p,f))+"px",this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned")}correctOutOfWindowPixels(t,o){return Math.max(t,Math.min(0,-o))}}br.elementDefinitions={"ft-floating-menu-item":yr},gr([i()],br.prototype,"menuOpen",void 0),gr([i()],br.prototype,"forceMenuOpen",void 0),gr([a(".ft-floating-menu")],br.prototype,"container",void 0),gr([a(".ft-floating-menu--wrapper")],br.prototype,"menuWrapper",void 0),gr([a("#ft-floating-menu-options")],br.prototype,"menuContent",void 0),gr([a("#actions-button")],br.prototype,"actionButton",void 0),gr([r({type:Boolean})],br.prototype,"primary",void 0),gr([r({type:Boolean})],br.prototype,"secondary",void 0),gr([r({type:Boolean})],br.prototype,"tertiary",void 0),gr([r({type:Boolean})],br.prototype,"neutral",void 0),gr([r({type:Boolean})],br.prototype,"small",void 0),gr([r()],br.prototype,"label",void 0),gr([r()],br.prototype,"tooltipPosition",void 0),gr([r()],br.prototype,"iconVariant",void 0),gr([r()],br.prototype,"icon",void 0),gr([r()],br.prototype,"text",void 0),gr([r()],br.prototype,"horizontalAlignment",void 0),gr([r()],br.prototype,"verticalAlignment",void 0),gr([r({type:Boolean})],br.prototype,"disabled",void 0),gr([f([])],br.prototype,"closeMenuMatchers",void 0);class mr extends br{}mr.elementDefinitions={"ft-or-ftds-button":lr},mr.styles=Mt;class xr extends br{}xr.elementDefinitions={"ft-or-ftds-button":pr},xr.styles=Mt,p("ft-floating-menu")(mr),p("ftds-floating-menu")(xr),p("ft-floating-menu-item")(yr),t.FtFloatingMenu=mr,t.FtFloatingMenuCssVariables=Dt,t.FtFloatingMenuItem=yr,t.FtFloatingMenuItemCssVariables=fr,t.FtFloatingMenuItemSelect=ur,t.FtdsFloatingMenu=xr,t.itemStyles=dr,t.styles=Mt}({});
|
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export type FtHorizontalAlignment = "left" | "right" | "center";
|
|
4
|
-
export type FtVerticalAlignment = "bottom" | "top";
|
|
5
|
-
export interface FtFloatingMenuProperties {
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
iconVariant?: FtIconVariants;
|
|
8
|
-
icon?: string;
|
|
9
|
-
label?: string;
|
|
10
|
-
tooltipPosition?: Position;
|
|
11
|
-
text?: string;
|
|
12
|
-
horizontalAlignment?: FtHorizontalAlignment;
|
|
13
|
-
verticalAlignment?: FtVerticalAlignment;
|
|
14
|
-
closeMenuMatchers?: string[];
|
|
1
|
+
import { FtBaseFloatingMenuProperties } from "./ft-base-floating-menu.properties";
|
|
2
|
+
export interface FtFloatingMenuProperties extends FtBaseFloatingMenuProperties {
|
|
15
3
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
|
|
3
|
+
import { FtdsFloatingMenuProperties } from "./ftds-floating-menu.properties";
|
|
4
|
+
export declare class FtdsFloatingMenu extends FtBaseFloatingMenu implements FtdsFloatingMenuProperties {
|
|
5
|
+
static elementDefinitions: ElementDefinitionsMap;
|
|
6
|
+
static styles: import("lit").CSSResult;
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { styles } from "./ft-floating-menu.css";
|
|
2
|
+
import { FtdsButton } from "@fluid-topics/ft-button";
|
|
3
|
+
import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
|
|
4
|
+
class FtdsFloatingMenu extends FtBaseFloatingMenu {
|
|
5
|
+
}
|
|
6
|
+
FtdsFloatingMenu.elementDefinitions = {
|
|
7
|
+
"ft-or-ftds-button": FtdsButton,
|
|
8
|
+
};
|
|
9
|
+
// same as normal one until a change is necessary
|
|
10
|
+
FtdsFloatingMenu.styles = styles;
|
|
11
|
+
export { FtdsFloatingMenu };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FtBaseFloatingMenuProperties } from "./ft-base-floating-menu.properties";
|
|
2
|
+
export interface FtdsFloatingMenuProperties extends FtBaseFloatingMenuProperties {
|
|
3
|
+
primary?: boolean;
|
|
4
|
+
secondary?: boolean;
|
|
5
|
+
tertiary?: boolean;
|
|
6
|
+
neutral?: boolean;
|
|
7
|
+
small?: boolean;
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/build/index.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
export * from "./ft-base-floating-menu.properties";
|
|
1
2
|
export * from "./ft-floating-menu.css";
|
|
2
3
|
export * from "./ft-floating-menu.properties";
|
|
3
4
|
export * from "./ft-floating-menu";
|
|
5
|
+
export * from "./ftds-floating-menu.properties";
|
|
6
|
+
export * from "./ftds-floating-menu";
|
|
4
7
|
export * from "./ft-floating-menu-item.css";
|
|
5
8
|
export * from "./ft-floating-menu-item.properties";
|
|
6
9
|
export * from "./ft-floating-menu-item";
|
package/build/index.js
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { customElement } from "@fluid-topics/ft-wc-utils";
|
|
2
2
|
import { FtFloatingMenu } from "./ft-floating-menu";
|
|
3
3
|
import { FtFloatingMenuItem } from "./ft-floating-menu-item";
|
|
4
|
+
import { FtdsFloatingMenu } from "./ftds-floating-menu";
|
|
5
|
+
export * from "./ft-base-floating-menu.properties";
|
|
4
6
|
export * from "./ft-floating-menu.css";
|
|
5
7
|
export * from "./ft-floating-menu.properties";
|
|
6
8
|
export * from "./ft-floating-menu";
|
|
9
|
+
export * from "./ftds-floating-menu.properties";
|
|
10
|
+
export * from "./ftds-floating-menu";
|
|
7
11
|
export * from "./ft-floating-menu-item.css";
|
|
8
12
|
export * from "./ft-floating-menu-item.properties";
|
|
9
13
|
export * from "./ft-floating-menu-item";
|
|
10
14
|
customElement("ft-floating-menu")(FtFloatingMenu);
|
|
15
|
+
customElement("ftds-floating-menu")(FtdsFloatingMenu);
|
|
11
16
|
customElement("ft-floating-menu-item")(FtFloatingMenuItem);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-floating-menu",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.63",
|
|
4
4
|
"description": "Floating menu component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-button": "1.0.
|
|
23
|
-
"@fluid-topics/ft-icon": "1.0.
|
|
24
|
-
"@fluid-topics/ft-ripple": "1.0.
|
|
25
|
-
"@fluid-topics/ft-typography": "1.0.
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "1.0.
|
|
22
|
+
"@fluid-topics/ft-button": "1.0.63",
|
|
23
|
+
"@fluid-topics/ft-icon": "1.0.63",
|
|
24
|
+
"@fluid-topics/ft-ripple": "1.0.63",
|
|
25
|
+
"@fluid-topics/ft-typography": "1.0.63",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "1.0.63",
|
|
27
27
|
"lit": "2.7.2"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "020d13bf82a28437f4d7a7395ad9b628bc4342f1"
|
|
30
30
|
}
|