@fluid-topics/ft-button 1.0.58 → 1.0.60
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-button.d.ts +47 -0
- package/build/ft-base-button.js +154 -0
- package/build/ft-button.css.d.ts +1 -1
- package/build/ft-button.css.js +17 -17
- package/build/ft-button.d.ts +5 -29
- package/build/ft-button.js +10 -133
- package/build/ft-button.light.js +449 -224
- package/build/ft-button.min.js +486 -266
- package/build/ft-button.properties.d.ts +2 -11
- package/build/ftds-button.css.d.ts +2 -0
- package/build/ftds-button.css.js +230 -0
- package/build/ftds-button.d.ts +13 -0
- package/build/ftds-button.js +60 -0
- package/build/ftds-button.properties.d.ts +8 -0
- package/build/ftds-button.properties.js +1 -0
- package/build/index.d.ts +3 -0
- package/build/index.js +5 -0
- package/package.json +8 -8
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { Position } from "@fluid-topics/ft-tooltip";
|
|
3
|
+
import { FtIconVariants } from "@fluid-topics/ft-icon";
|
|
4
|
+
import { HTMLTemplateResult } from "lit";
|
|
5
|
+
import { ClassInfo } from "lit/directives/class-map.js";
|
|
6
|
+
export interface FtBaseButtonProperties {
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
label?: string;
|
|
9
|
+
icon?: string;
|
|
10
|
+
iconVariant?: FtIconVariants;
|
|
11
|
+
trailingIcon?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
tooltipPosition?: Position;
|
|
14
|
+
hideTooltip?: boolean;
|
|
15
|
+
forceTooltip?: boolean;
|
|
16
|
+
}
|
|
17
|
+
declare const FtBaseButton_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
|
|
18
|
+
export declare abstract class FtBaseButton extends FtBaseButton_base implements FtBaseButtonProperties {
|
|
19
|
+
static elementDefinitions: ElementDefinitionsMap;
|
|
20
|
+
role: string;
|
|
21
|
+
type: "button" | "submit" | "reset";
|
|
22
|
+
disabled: boolean;
|
|
23
|
+
label: string;
|
|
24
|
+
icon?: string;
|
|
25
|
+
iconVariant?: FtIconVariants;
|
|
26
|
+
trailingIcon: boolean;
|
|
27
|
+
loading: boolean;
|
|
28
|
+
tooltipPosition: Position;
|
|
29
|
+
hideTooltip: boolean;
|
|
30
|
+
forceTooltip: boolean;
|
|
31
|
+
private button?;
|
|
32
|
+
private slottedContent?;
|
|
33
|
+
abstract get buttonClasses(): ClassInfo;
|
|
34
|
+
abstract get typographyVariant(): string;
|
|
35
|
+
protected render(): HTMLTemplateResult;
|
|
36
|
+
private addTooltipIfNeeded;
|
|
37
|
+
private resolveIcon;
|
|
38
|
+
onclick: (e: MouseEvent) => void;
|
|
39
|
+
focus(): void;
|
|
40
|
+
private getLabel;
|
|
41
|
+
get textContent(): string;
|
|
42
|
+
private unslotText;
|
|
43
|
+
protected hasTextContent(): boolean;
|
|
44
|
+
private onSlotchange;
|
|
45
|
+
private isDisabled;
|
|
46
|
+
}
|
|
47
|
+
export {};
|
|
@@ -0,0 +1,154 @@
|
|
|
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 { FtLitElement, isSafari, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
|
|
8
|
+
import { FtRipple } from "@fluid-topics/ft-ripple";
|
|
9
|
+
import { FtTooltip } from "@fluid-topics/ft-tooltip";
|
|
10
|
+
import { FtTypography } from "@fluid-topics/ft-typography";
|
|
11
|
+
import { FtIcon } from "@fluid-topics/ft-icon";
|
|
12
|
+
import { FtLoader } from "@fluid-topics/ft-loader";
|
|
13
|
+
import { html, nothing } from "lit";
|
|
14
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
15
|
+
import { property, query } from "lit/decorators.js";
|
|
16
|
+
class FtBaseButton extends toFtFormComponent(FtLitElement, "button") {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
this.role = "button";
|
|
20
|
+
this.type = "button";
|
|
21
|
+
this.disabled = false;
|
|
22
|
+
this.label = "";
|
|
23
|
+
this.icon = undefined;
|
|
24
|
+
this.trailingIcon = false;
|
|
25
|
+
this.loading = false;
|
|
26
|
+
this.tooltipPosition = "bottom";
|
|
27
|
+
this.hideTooltip = false;
|
|
28
|
+
this.forceTooltip = false;
|
|
29
|
+
this.onclick = (e) => {
|
|
30
|
+
var _a;
|
|
31
|
+
if (this.isDisabled()) {
|
|
32
|
+
e.preventDefault();
|
|
33
|
+
e.stopPropagation();
|
|
34
|
+
e.stopImmediatePropagation();
|
|
35
|
+
}
|
|
36
|
+
else if (this.type == "submit") {
|
|
37
|
+
(_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
return this.addTooltipIfNeeded(html `
|
|
43
|
+
<button part="button"
|
|
44
|
+
class="${classMap(this.buttonClasses)}"
|
|
45
|
+
aria-label="${this.getLabel()}"
|
|
46
|
+
?disabled=${this.isDisabled()}>
|
|
47
|
+
<ft-ripple part="ripple" ?disabled=${this.isDisabled()}></ft-ripple>
|
|
48
|
+
<ft-typography part="label"
|
|
49
|
+
variant=${this.typographyVariant}
|
|
50
|
+
element="span"
|
|
51
|
+
class="ft-button--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}"
|
|
52
|
+
?hidden=${!this.hasTextContent()}>
|
|
53
|
+
<slot @slotchange=${this.onSlotchange}></slot>
|
|
54
|
+
</ft-typography>
|
|
55
|
+
${this.resolveIcon()}
|
|
56
|
+
</button>
|
|
57
|
+
`);
|
|
58
|
+
}
|
|
59
|
+
addTooltipIfNeeded(button) {
|
|
60
|
+
return this.getLabel().trim().length > 0 && (this.forceTooltip || (!this.hasTextContent() && !this.hideTooltip))
|
|
61
|
+
? html `
|
|
62
|
+
<ft-tooltip part="tooltip"
|
|
63
|
+
text="${this.getLabel()}"
|
|
64
|
+
position="${this.tooltipPosition}">
|
|
65
|
+
${button}
|
|
66
|
+
</ft-tooltip>
|
|
67
|
+
`
|
|
68
|
+
: button;
|
|
69
|
+
}
|
|
70
|
+
resolveIcon() {
|
|
71
|
+
if (this.loading) {
|
|
72
|
+
return html `
|
|
73
|
+
<ft-loader part="loader icon"></ft-loader> `;
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
return this.icon
|
|
77
|
+
? html `
|
|
78
|
+
<ft-icon part="icon" .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon> `
|
|
79
|
+
: nothing;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
focus() {
|
|
83
|
+
var _a;
|
|
84
|
+
(_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
|
|
85
|
+
}
|
|
86
|
+
getLabel() {
|
|
87
|
+
return this.label || this.textContent;
|
|
88
|
+
}
|
|
89
|
+
get textContent() {
|
|
90
|
+
return this.unslotText(this.slottedContent).trim();
|
|
91
|
+
}
|
|
92
|
+
unslotText(node) {
|
|
93
|
+
if (node instanceof HTMLSlotElement) {
|
|
94
|
+
return node.assignedNodes().map(n => this.unslotText(n)).join("");
|
|
95
|
+
}
|
|
96
|
+
return (node === null || node === void 0 ? void 0 : node.textContent) || "";
|
|
97
|
+
}
|
|
98
|
+
hasTextContent() {
|
|
99
|
+
return this.textContent.length > 0;
|
|
100
|
+
}
|
|
101
|
+
onSlotchange() {
|
|
102
|
+
this.requestUpdate();
|
|
103
|
+
}
|
|
104
|
+
isDisabled() {
|
|
105
|
+
return this.disabled || this.loading;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
FtBaseButton.elementDefinitions = {
|
|
109
|
+
"ft-ripple": FtRipple,
|
|
110
|
+
"ft-tooltip": FtTooltip,
|
|
111
|
+
"ft-typography": FtTypography,
|
|
112
|
+
"ft-icon": FtIcon,
|
|
113
|
+
"ft-loader": FtLoader,
|
|
114
|
+
};
|
|
115
|
+
__decorate([
|
|
116
|
+
property({ type: String, reflect: true })
|
|
117
|
+
], FtBaseButton.prototype, "role", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property()
|
|
120
|
+
], FtBaseButton.prototype, "type", void 0);
|
|
121
|
+
__decorate([
|
|
122
|
+
property({ type: Boolean })
|
|
123
|
+
], FtBaseButton.prototype, "disabled", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
property()
|
|
126
|
+
], FtBaseButton.prototype, "label", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property()
|
|
129
|
+
], FtBaseButton.prototype, "icon", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
property()
|
|
132
|
+
], FtBaseButton.prototype, "iconVariant", void 0);
|
|
133
|
+
__decorate([
|
|
134
|
+
property({ type: Boolean })
|
|
135
|
+
], FtBaseButton.prototype, "trailingIcon", void 0);
|
|
136
|
+
__decorate([
|
|
137
|
+
property({ type: Boolean })
|
|
138
|
+
], FtBaseButton.prototype, "loading", void 0);
|
|
139
|
+
__decorate([
|
|
140
|
+
property()
|
|
141
|
+
], FtBaseButton.prototype, "tooltipPosition", void 0);
|
|
142
|
+
__decorate([
|
|
143
|
+
property({ type: Boolean })
|
|
144
|
+
], FtBaseButton.prototype, "hideTooltip", void 0);
|
|
145
|
+
__decorate([
|
|
146
|
+
property({ type: Boolean })
|
|
147
|
+
], FtBaseButton.prototype, "forceTooltip", void 0);
|
|
148
|
+
__decorate([
|
|
149
|
+
query(".ft-button")
|
|
150
|
+
], FtBaseButton.prototype, "button", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
query(".ft-button--label slot")
|
|
153
|
+
], FtBaseButton.prototype, "slottedContent", void 0);
|
|
154
|
+
export { FtBaseButton };
|
package/build/ft-button.css.d.ts
CHANGED
|
@@ -21,4 +21,4 @@ export declare const FtButtonDenseCssVariables: {
|
|
|
21
21
|
horizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
22
22
|
iconPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
23
23
|
};
|
|
24
|
-
export declare const
|
|
24
|
+
export declare const classicStyles: import("lit").CSSResult[];
|
package/build/ft-button.css.js
CHANGED
|
@@ -4,33 +4,33 @@ import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.cs
|
|
|
4
4
|
import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
|
|
5
5
|
import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.css";
|
|
6
6
|
import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
|
|
7
|
-
const buttonColor = FtCssVariableFactory.extend("--ft-button-color", designSystemVariables.colorPrimary);
|
|
7
|
+
const buttonColor = FtCssVariableFactory.extend("--ft-button-color", "", designSystemVariables.colorPrimary);
|
|
8
8
|
export const FtButtonCssVariables = {
|
|
9
|
-
backgroundColor: FtCssVariableFactory.extend("--ft-button-background-color", designSystemVariables.colorSurface),
|
|
10
|
-
borderRadius: FtCssVariableFactory.extend("--ft-button-border-radius", designSystemVariables.borderRadiusL),
|
|
9
|
+
backgroundColor: FtCssVariableFactory.extend("--ft-button-background-color", "", designSystemVariables.colorSurface),
|
|
10
|
+
borderRadius: FtCssVariableFactory.extend("--ft-button-border-radius", "", designSystemVariables.borderRadiusL),
|
|
11
11
|
color: buttonColor,
|
|
12
|
-
fontSize: FtCssVariableFactory.extend("--ft-button-font-size", FtTypographyButtonCssVariables.fontSize),
|
|
13
|
-
iconSize: FtCssVariableFactory.create("--ft-button-icon-size", "SIZE", "24px"),
|
|
14
|
-
rippleColor: FtCssVariableFactory.extend("--ft-button-ripple-color", buttonColor),
|
|
15
|
-
verticalPadding: FtCssVariableFactory.create("--ft-button-vertical-padding", "SIZE", "6px"),
|
|
16
|
-
horizontalPadding: FtCssVariableFactory.create("--ft-button-horizontal-padding", "SIZE", "8px"),
|
|
17
|
-
iconPadding: FtCssVariableFactory.create("--ft-button-icon-padding", "SIZE", "8px"),
|
|
12
|
+
fontSize: FtCssVariableFactory.extend("--ft-button-font-size", "", FtTypographyButtonCssVariables.fontSize),
|
|
13
|
+
iconSize: FtCssVariableFactory.create("--ft-button-icon-size", "", "SIZE", "24px"),
|
|
14
|
+
rippleColor: FtCssVariableFactory.extend("--ft-button-ripple-color", "", buttonColor),
|
|
15
|
+
verticalPadding: FtCssVariableFactory.create("--ft-button-vertical-padding", "", "SIZE", "6px"),
|
|
16
|
+
horizontalPadding: FtCssVariableFactory.create("--ft-button-horizontal-padding", "", "SIZE", "8px"),
|
|
17
|
+
iconPadding: FtCssVariableFactory.create("--ft-button-icon-padding", "", "SIZE", "8px"),
|
|
18
18
|
opacityDisabled: FtCssVariableFactory.external(designSystemVariables.colorOpacityDisabled, "Design system")
|
|
19
19
|
};
|
|
20
|
-
const buttonPrimaryColor = FtCssVariableFactory.extend("--ft-button-primary-color", FtCssVariableFactory.extend("--ft-button-color", designSystemVariables.colorOnPrimary));
|
|
20
|
+
const buttonPrimaryColor = FtCssVariableFactory.extend("--ft-button-primary-color", "", FtCssVariableFactory.extend("--ft-button-color", "", designSystemVariables.colorOnPrimary));
|
|
21
21
|
export const FtButtonPrimaryCssVariables = {
|
|
22
|
-
backgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", FtCssVariableFactory.extend("--ft-button-background-color", designSystemVariables.colorPrimary)),
|
|
22
|
+
backgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", "", FtCssVariableFactory.extend("--ft-button-background-color", "", designSystemVariables.colorPrimary)),
|
|
23
23
|
color: buttonPrimaryColor,
|
|
24
|
-
rippleColor: FtCssVariableFactory.extend("--ft-button-primary-ripple-color", buttonPrimaryColor),
|
|
24
|
+
rippleColor: FtCssVariableFactory.extend("--ft-button-primary-ripple-color", "", buttonPrimaryColor),
|
|
25
25
|
};
|
|
26
26
|
export const FtButtonDenseCssVariables = {
|
|
27
|
-
borderRadius: FtCssVariableFactory.extend("--ft-button-dense-border-radius", FtCssVariableFactory.extend("--ft-button-border-radius", designSystemVariables.borderRadiusM)),
|
|
28
|
-
verticalPadding: FtCssVariableFactory.create("--ft-button-dense-vertical-padding", "SIZE", "2px"),
|
|
29
|
-
horizontalPadding: FtCssVariableFactory.create("--ft-button-dense-horizontal-padding", "SIZE", "4px"),
|
|
30
|
-
iconPadding: FtCssVariableFactory.create("--ft-button-dense-icon-padding", "SIZE", "4px"),
|
|
27
|
+
borderRadius: FtCssVariableFactory.extend("--ft-button-dense-border-radius", "", FtCssVariableFactory.extend("--ft-button-border-radius", "", designSystemVariables.borderRadiusM)),
|
|
28
|
+
verticalPadding: FtCssVariableFactory.create("--ft-button-dense-vertical-padding", "", "SIZE", "2px"),
|
|
29
|
+
horizontalPadding: FtCssVariableFactory.create("--ft-button-dense-horizontal-padding", "", "SIZE", "4px"),
|
|
30
|
+
iconPadding: FtCssVariableFactory.create("--ft-button-dense-icon-padding", "", "SIZE", "4px"),
|
|
31
31
|
};
|
|
32
32
|
//language=css
|
|
33
|
-
export const
|
|
33
|
+
export const classicStyles = [
|
|
34
34
|
css `
|
|
35
35
|
:host {
|
|
36
36
|
display: inline-block;
|
package/build/ft-button.d.ts
CHANGED
|
@@ -1,37 +1,13 @@
|
|
|
1
|
-
import { HTMLTemplateResult } from "lit";
|
|
2
|
-
import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
3
|
-
import { Position } from "@fluid-topics/ft-tooltip";
|
|
4
|
-
import "@fluid-topics/ft-loader";
|
|
5
|
-
import { FtIconVariants } from "@fluid-topics/ft-icon";
|
|
6
1
|
import { FtButtonProperties } from "./ft-button.properties";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
import { FtBaseButton } from "./ft-base-button";
|
|
3
|
+
import { ClassInfo } from "lit/directives/class-map.js";
|
|
4
|
+
export declare class FtButton extends FtBaseButton implements FtButtonProperties {
|
|
10
5
|
primary: boolean;
|
|
11
6
|
outlined: boolean;
|
|
12
7
|
disabled: boolean;
|
|
13
8
|
dense: boolean;
|
|
14
9
|
round: boolean;
|
|
15
|
-
label: string;
|
|
16
|
-
icon?: string;
|
|
17
|
-
iconVariant?: FtIconVariants;
|
|
18
|
-
trailingIcon: boolean;
|
|
19
|
-
loading: boolean;
|
|
20
|
-
tooltipPosition: Position;
|
|
21
|
-
hideTooltip: boolean;
|
|
22
|
-
forceTooltip: boolean;
|
|
23
|
-
private button?;
|
|
24
|
-
private slottedContent?;
|
|
25
10
|
static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
private resolveIcon;
|
|
29
|
-
onclick: (e: MouseEvent) => void;
|
|
30
|
-
focus(): void;
|
|
31
|
-
private getLabel;
|
|
32
|
-
get textContent(): string;
|
|
33
|
-
private unslotText;
|
|
34
|
-
private hasTextContent;
|
|
35
|
-
private onSlotchange;
|
|
36
|
-
private isDisabled;
|
|
11
|
+
get buttonClasses(): ClassInfo;
|
|
12
|
+
get typographyVariant(): string;
|
|
37
13
|
}
|
package/build/ft-button.js
CHANGED
|
@@ -4,43 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
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
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
import { FtTypography } from "@fluid-topics/ft-typography";
|
|
13
|
-
import { FtTooltip } from "@fluid-topics/ft-tooltip";
|
|
14
|
-
import { FtLoader } from "@fluid-topics/ft-loader";
|
|
15
|
-
import "@fluid-topics/ft-loader";
|
|
16
|
-
import { FtIcon } from "@fluid-topics/ft-icon";
|
|
17
|
-
import { styles } from "./ft-button.css";
|
|
18
|
-
class FtButton extends FtLitElement {
|
|
7
|
+
import { property } from "lit/decorators.js";
|
|
8
|
+
import { safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
|
|
9
|
+
import { classicStyles } from "./ft-button.css";
|
|
10
|
+
import { FtBaseButton } from "./ft-base-button";
|
|
11
|
+
class FtButton extends FtBaseButton {
|
|
19
12
|
constructor() {
|
|
20
13
|
super(...arguments);
|
|
21
|
-
this.role = "button";
|
|
22
14
|
this.primary = false;
|
|
23
15
|
this.outlined = false;
|
|
24
16
|
this.disabled = false;
|
|
25
17
|
this.dense = false;
|
|
26
18
|
this.round = false;
|
|
27
|
-
this.label = "";
|
|
28
|
-
this.icon = undefined;
|
|
29
|
-
this.trailingIcon = false;
|
|
30
|
-
this.loading = false;
|
|
31
|
-
this.tooltipPosition = "bottom";
|
|
32
|
-
this.hideTooltip = false;
|
|
33
|
-
this.forceTooltip = false;
|
|
34
|
-
this.onclick = (e) => {
|
|
35
|
-
if (this.isDisabled()) {
|
|
36
|
-
e.preventDefault();
|
|
37
|
-
e.stopPropagation();
|
|
38
|
-
e.stopImmediatePropagation();
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
19
|
}
|
|
42
|
-
|
|
43
|
-
|
|
20
|
+
get buttonClasses() {
|
|
21
|
+
return {
|
|
44
22
|
"ft-button": true,
|
|
45
23
|
"ft-button--primary": this.primary,
|
|
46
24
|
"ft-button--outlined": this.outlined,
|
|
@@ -50,86 +28,15 @@ class FtButton extends FtLitElement {
|
|
|
50
28
|
"ft-button--loading": this.trailingIcon,
|
|
51
29
|
"ft-no-text-select": true,
|
|
52
30
|
};
|
|
53
|
-
return this.addTooltipIfNeeded(html `
|
|
54
|
-
<button part="button"
|
|
55
|
-
class="${classMap(classes)}"
|
|
56
|
-
aria-label="${this.getLabel()}"
|
|
57
|
-
?disabled=${this.isDisabled()}>
|
|
58
|
-
<ft-ripple part="ripple" ?disabled=${this.isDisabled()}></ft-ripple>
|
|
59
|
-
<ft-typography part="label"
|
|
60
|
-
variant="button"
|
|
61
|
-
element="span"
|
|
62
|
-
class="ft-button--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}"
|
|
63
|
-
?hidden=${!this.hasTextContent()}>
|
|
64
|
-
<slot @slotchange=${this.onSlotchange}></slot>
|
|
65
|
-
</ft-typography>
|
|
66
|
-
${this.resolveIcon()}
|
|
67
|
-
</button>
|
|
68
|
-
`);
|
|
69
|
-
}
|
|
70
|
-
addTooltipIfNeeded(button) {
|
|
71
|
-
return this.getLabel().trim().length > 0 && (this.forceTooltip || (!this.hasTextContent() && !this.hideTooltip))
|
|
72
|
-
? html `
|
|
73
|
-
<ft-tooltip part="tooltip"
|
|
74
|
-
text="${this.getLabel()}"
|
|
75
|
-
position="${this.tooltipPosition}">
|
|
76
|
-
${button}
|
|
77
|
-
</ft-tooltip>
|
|
78
|
-
`
|
|
79
|
-
: button;
|
|
80
|
-
}
|
|
81
|
-
resolveIcon() {
|
|
82
|
-
if (this.loading) {
|
|
83
|
-
return html `
|
|
84
|
-
<ft-loader part="loader icon"></ft-loader> `;
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
return this.icon
|
|
88
|
-
? html `
|
|
89
|
-
<ft-icon part="icon" .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon> `
|
|
90
|
-
: nothing;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
focus() {
|
|
94
|
-
var _a;
|
|
95
|
-
(_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
|
|
96
|
-
}
|
|
97
|
-
getLabel() {
|
|
98
|
-
return this.label || this.textContent;
|
|
99
|
-
}
|
|
100
|
-
get textContent() {
|
|
101
|
-
return this.unslotText(this.slottedContent).trim();
|
|
102
|
-
}
|
|
103
|
-
unslotText(node) {
|
|
104
|
-
if (node instanceof HTMLSlotElement) {
|
|
105
|
-
return node.assignedNodes().map(n => this.unslotText(n)).join("");
|
|
106
|
-
}
|
|
107
|
-
return (node === null || node === void 0 ? void 0 : node.textContent) || "";
|
|
108
31
|
}
|
|
109
|
-
|
|
110
|
-
return
|
|
111
|
-
}
|
|
112
|
-
onSlotchange() {
|
|
113
|
-
this.requestUpdate();
|
|
114
|
-
}
|
|
115
|
-
isDisabled() {
|
|
116
|
-
return this.disabled || this.loading;
|
|
32
|
+
get typographyVariant() {
|
|
33
|
+
return "button";
|
|
117
34
|
}
|
|
118
35
|
}
|
|
119
|
-
FtButton.elementDefinitions = {
|
|
120
|
-
"ft-ripple": FtRipple,
|
|
121
|
-
"ft-tooltip": FtTooltip,
|
|
122
|
-
"ft-typography": FtTypography,
|
|
123
|
-
"ft-icon": FtIcon,
|
|
124
|
-
"ft-loader": FtLoader,
|
|
125
|
-
};
|
|
126
36
|
FtButton.styles = [
|
|
127
37
|
safariEllipsisFix,
|
|
128
|
-
|
|
38
|
+
classicStyles
|
|
129
39
|
];
|
|
130
|
-
__decorate([
|
|
131
|
-
property({ type: String, reflect: true })
|
|
132
|
-
], FtButton.prototype, "role", void 0);
|
|
133
40
|
__decorate([
|
|
134
41
|
property({ type: Boolean })
|
|
135
42
|
], FtButton.prototype, "primary", void 0);
|
|
@@ -145,34 +52,4 @@ __decorate([
|
|
|
145
52
|
__decorate([
|
|
146
53
|
property({ type: Boolean })
|
|
147
54
|
], FtButton.prototype, "round", void 0);
|
|
148
|
-
__decorate([
|
|
149
|
-
property()
|
|
150
|
-
], FtButton.prototype, "label", void 0);
|
|
151
|
-
__decorate([
|
|
152
|
-
property()
|
|
153
|
-
], FtButton.prototype, "icon", void 0);
|
|
154
|
-
__decorate([
|
|
155
|
-
property()
|
|
156
|
-
], FtButton.prototype, "iconVariant", void 0);
|
|
157
|
-
__decorate([
|
|
158
|
-
property({ type: Boolean })
|
|
159
|
-
], FtButton.prototype, "trailingIcon", void 0);
|
|
160
|
-
__decorate([
|
|
161
|
-
property({ type: Boolean })
|
|
162
|
-
], FtButton.prototype, "loading", void 0);
|
|
163
|
-
__decorate([
|
|
164
|
-
property()
|
|
165
|
-
], FtButton.prototype, "tooltipPosition", void 0);
|
|
166
|
-
__decorate([
|
|
167
|
-
property({ type: Boolean })
|
|
168
|
-
], FtButton.prototype, "hideTooltip", void 0);
|
|
169
|
-
__decorate([
|
|
170
|
-
property({ type: Boolean })
|
|
171
|
-
], FtButton.prototype, "forceTooltip", void 0);
|
|
172
|
-
__decorate([
|
|
173
|
-
query(".ft-button")
|
|
174
|
-
], FtButton.prototype, "button", void 0);
|
|
175
|
-
__decorate([
|
|
176
|
-
query(".ft-button--label slot")
|
|
177
|
-
], FtButton.prototype, "slottedContent", void 0);
|
|
178
55
|
export { FtButton };
|