@fluid-topics/ft-button 1.0.59 → 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 -32
- package/build/ft-button.js +10 -141
- package/build/ft-button.light.js +444 -219
- package/build/ft-button.min.js +481 -261
- 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,40 +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
|
-
|
|
10
|
-
role: string;
|
|
11
|
-
type: "button" | "submit" | "reset";
|
|
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 {
|
|
12
5
|
primary: boolean;
|
|
13
6
|
outlined: boolean;
|
|
14
7
|
disabled: boolean;
|
|
15
8
|
dense: boolean;
|
|
16
9
|
round: boolean;
|
|
17
|
-
label: string;
|
|
18
|
-
icon?: string;
|
|
19
|
-
iconVariant?: FtIconVariants;
|
|
20
|
-
trailingIcon: boolean;
|
|
21
|
-
loading: boolean;
|
|
22
|
-
tooltipPosition: Position;
|
|
23
|
-
hideTooltip: boolean;
|
|
24
|
-
forceTooltip: boolean;
|
|
25
|
-
private button?;
|
|
26
|
-
private slottedContent?;
|
|
27
10
|
static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
private resolveIcon;
|
|
31
|
-
onclick: (e: MouseEvent) => void;
|
|
32
|
-
focus(): void;
|
|
33
|
-
private getLabel;
|
|
34
|
-
get textContent(): string;
|
|
35
|
-
private unslotText;
|
|
36
|
-
private hasTextContent;
|
|
37
|
-
private onSlotchange;
|
|
38
|
-
private isDisabled;
|
|
11
|
+
get buttonClasses(): ClassInfo;
|
|
12
|
+
get typographyVariant(): string;
|
|
39
13
|
}
|
|
40
|
-
export {};
|
package/build/ft-button.js
CHANGED
|
@@ -4,48 +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 toFtFormComponent(FtLitElement, "button") {
|
|
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
|
-
this.type = "button";
|
|
23
14
|
this.primary = false;
|
|
24
15
|
this.outlined = false;
|
|
25
16
|
this.disabled = false;
|
|
26
17
|
this.dense = false;
|
|
27
18
|
this.round = false;
|
|
28
|
-
this.label = "";
|
|
29
|
-
this.icon = undefined;
|
|
30
|
-
this.trailingIcon = false;
|
|
31
|
-
this.loading = false;
|
|
32
|
-
this.tooltipPosition = "bottom";
|
|
33
|
-
this.hideTooltip = false;
|
|
34
|
-
this.forceTooltip = false;
|
|
35
|
-
this.onclick = (e) => {
|
|
36
|
-
var _a;
|
|
37
|
-
if (this.isDisabled()) {
|
|
38
|
-
e.preventDefault();
|
|
39
|
-
e.stopPropagation();
|
|
40
|
-
e.stopImmediatePropagation();
|
|
41
|
-
}
|
|
42
|
-
else if (this.type == "submit") {
|
|
43
|
-
(_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
19
|
}
|
|
47
|
-
|
|
48
|
-
|
|
20
|
+
get buttonClasses() {
|
|
21
|
+
return {
|
|
49
22
|
"ft-button": true,
|
|
50
23
|
"ft-button--primary": this.primary,
|
|
51
24
|
"ft-button--outlined": this.outlined,
|
|
@@ -55,89 +28,15 @@ class FtButton extends toFtFormComponent(FtLitElement, "button") {
|
|
|
55
28
|
"ft-button--loading": this.trailingIcon,
|
|
56
29
|
"ft-no-text-select": true,
|
|
57
30
|
};
|
|
58
|
-
return this.addTooltipIfNeeded(html `
|
|
59
|
-
<button part="button"
|
|
60
|
-
class="${classMap(classes)}"
|
|
61
|
-
aria-label="${this.getLabel()}"
|
|
62
|
-
?disabled=${this.isDisabled()}>
|
|
63
|
-
<ft-ripple part="ripple" ?disabled=${this.isDisabled()}></ft-ripple>
|
|
64
|
-
<ft-typography part="label"
|
|
65
|
-
variant="button"
|
|
66
|
-
element="span"
|
|
67
|
-
class="ft-button--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}"
|
|
68
|
-
?hidden=${!this.hasTextContent()}>
|
|
69
|
-
<slot @slotchange=${this.onSlotchange}></slot>
|
|
70
|
-
</ft-typography>
|
|
71
|
-
${this.resolveIcon()}
|
|
72
|
-
</button>
|
|
73
|
-
`);
|
|
74
|
-
}
|
|
75
|
-
addTooltipIfNeeded(button) {
|
|
76
|
-
return this.getLabel().trim().length > 0 && (this.forceTooltip || (!this.hasTextContent() && !this.hideTooltip))
|
|
77
|
-
? html `
|
|
78
|
-
<ft-tooltip part="tooltip"
|
|
79
|
-
text="${this.getLabel()}"
|
|
80
|
-
position="${this.tooltipPosition}">
|
|
81
|
-
${button}
|
|
82
|
-
</ft-tooltip>
|
|
83
|
-
`
|
|
84
|
-
: button;
|
|
85
|
-
}
|
|
86
|
-
resolveIcon() {
|
|
87
|
-
if (this.loading) {
|
|
88
|
-
return html `
|
|
89
|
-
<ft-loader part="loader icon"></ft-loader> `;
|
|
90
|
-
}
|
|
91
|
-
else {
|
|
92
|
-
return this.icon
|
|
93
|
-
? html `
|
|
94
|
-
<ft-icon part="icon" .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon> `
|
|
95
|
-
: nothing;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
focus() {
|
|
99
|
-
var _a;
|
|
100
|
-
(_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
|
|
101
|
-
}
|
|
102
|
-
getLabel() {
|
|
103
|
-
return this.label || this.textContent;
|
|
104
|
-
}
|
|
105
|
-
get textContent() {
|
|
106
|
-
return this.unslotText(this.slottedContent).trim();
|
|
107
|
-
}
|
|
108
|
-
unslotText(node) {
|
|
109
|
-
if (node instanceof HTMLSlotElement) {
|
|
110
|
-
return node.assignedNodes().map(n => this.unslotText(n)).join("");
|
|
111
|
-
}
|
|
112
|
-
return (node === null || node === void 0 ? void 0 : node.textContent) || "";
|
|
113
31
|
}
|
|
114
|
-
|
|
115
|
-
return
|
|
116
|
-
}
|
|
117
|
-
onSlotchange() {
|
|
118
|
-
this.requestUpdate();
|
|
119
|
-
}
|
|
120
|
-
isDisabled() {
|
|
121
|
-
return this.disabled || this.loading;
|
|
32
|
+
get typographyVariant() {
|
|
33
|
+
return "button";
|
|
122
34
|
}
|
|
123
35
|
}
|
|
124
|
-
FtButton.elementDefinitions = {
|
|
125
|
-
"ft-ripple": FtRipple,
|
|
126
|
-
"ft-tooltip": FtTooltip,
|
|
127
|
-
"ft-typography": FtTypography,
|
|
128
|
-
"ft-icon": FtIcon,
|
|
129
|
-
"ft-loader": FtLoader,
|
|
130
|
-
};
|
|
131
36
|
FtButton.styles = [
|
|
132
37
|
safariEllipsisFix,
|
|
133
|
-
|
|
38
|
+
classicStyles
|
|
134
39
|
];
|
|
135
|
-
__decorate([
|
|
136
|
-
property({ type: String, reflect: true })
|
|
137
|
-
], FtButton.prototype, "role", void 0);
|
|
138
|
-
__decorate([
|
|
139
|
-
property()
|
|
140
|
-
], FtButton.prototype, "type", void 0);
|
|
141
40
|
__decorate([
|
|
142
41
|
property({ type: Boolean })
|
|
143
42
|
], FtButton.prototype, "primary", void 0);
|
|
@@ -153,34 +52,4 @@ __decorate([
|
|
|
153
52
|
__decorate([
|
|
154
53
|
property({ type: Boolean })
|
|
155
54
|
], FtButton.prototype, "round", void 0);
|
|
156
|
-
__decorate([
|
|
157
|
-
property()
|
|
158
|
-
], FtButton.prototype, "label", void 0);
|
|
159
|
-
__decorate([
|
|
160
|
-
property()
|
|
161
|
-
], FtButton.prototype, "icon", void 0);
|
|
162
|
-
__decorate([
|
|
163
|
-
property()
|
|
164
|
-
], FtButton.prototype, "iconVariant", void 0);
|
|
165
|
-
__decorate([
|
|
166
|
-
property({ type: Boolean })
|
|
167
|
-
], FtButton.prototype, "trailingIcon", void 0);
|
|
168
|
-
__decorate([
|
|
169
|
-
property({ type: Boolean })
|
|
170
|
-
], FtButton.prototype, "loading", void 0);
|
|
171
|
-
__decorate([
|
|
172
|
-
property()
|
|
173
|
-
], FtButton.prototype, "tooltipPosition", void 0);
|
|
174
|
-
__decorate([
|
|
175
|
-
property({ type: Boolean })
|
|
176
|
-
], FtButton.prototype, "hideTooltip", void 0);
|
|
177
|
-
__decorate([
|
|
178
|
-
property({ type: Boolean })
|
|
179
|
-
], FtButton.prototype, "forceTooltip", void 0);
|
|
180
|
-
__decorate([
|
|
181
|
-
query(".ft-button")
|
|
182
|
-
], FtButton.prototype, "button", void 0);
|
|
183
|
-
__decorate([
|
|
184
|
-
query(".ft-button--label slot")
|
|
185
|
-
], FtButton.prototype, "slottedContent", void 0);
|
|
186
55
|
export { FtButton };
|