@fluid-topics/ft-button
Version:
A generic Fluid Topics tag
243 lines (242 loc) • 8.53 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { FtLitElement, isSafari, noTextSelect, safariEllipsisFix, toFtFormComponent, unslotText, } from "@fluid-topics/ft-wc-utils";
import { FtRipple } from "@fluid-topics/ft-ripple";
import { FtTooltip, } from "@fluid-topics/ft-tooltip";
import { FtIcon, } from "@fluid-topics/ft-icon";
import { FtLoader } from "@fluid-topics/ft-loader";
import { html, } from "lit";
import { classMap, } from "lit/directives/class-map.js";
import { property, query, } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
import { buttonStyles } from "./ft-button.styles";
export class FtButton extends toFtFormComponent(FtLitElement) {
get buttonClasses() {
return {
"ft-button": true,
"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": true,
};
}
constructor() {
super();
this.primary = false;
this.outlined = false;
this.dense = false;
this.round = false;
this.disabled = false;
this.icon = undefined;
this.trailingIcon = false;
this.label = "";
this.type = "button";
this.href = undefined;
this.target = undefined;
this.loading = false;
this.ariaLabel = null;
this.ariaHasPopup = null;
this.ariaPressed = null;
this.tooltipPosition = "bottom";
this.hideTooltip = false;
this.forceTooltip = false;
this.activated = false;
this.addEventListener("click", (e) => {
var _a;
if (this.isDisabled()) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
else if (this.type == "submit") {
(_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
}
});
}
render() {
var _a, _b, _c;
const content = html `
<ft-ripple part="ripple"
?disabled=${this.isDisabled()}
?activated=${this.activated}
></ft-ripple>
<ft-typography part="label"
variant="${FtTypographyVariants.button}"
element="span"
class="ft-button--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}"
?hidden=${!this.hasTextContent()}>
<slot =${this.onSlotchange}></slot>
</ft-typography>
${this.resolveIcon()}
`;
const href = this.href != null && this.href.trim().length > 0 ? this.href : undefined;
return this.addTooltipIfNeeded(href ? html `
<a href="${href}"
target="${(_a = this.target) !== null && _a !== void 0 ? _a : "_self"}"
part="button"
class="${classMap(this.buttonClasses)}"
aria-label="${(_b = this.ariaLabel) !== null && _b !== void 0 ? _b : this.getLabel()}"
?disabled=${this.isDisabled()}>
${content}
</a>
` : html `
<button part="button"
class="${classMap(this.buttonClasses)}"
aria-label="${(_c = this.ariaLabel) !== null && _c !== void 0 ? _c : this.getLabel()}"
aria-haspopup="${ifDefined(this.ariaHasPopup)}"
aria-pressed="${ifDefined(this.ariaPressed)}"
?disabled=${this.isDisabled()}>
${content}
</button>
`);
}
addTooltipIfNeeded(button) {
return this.getLabel().trim().length > 0 && (this.forceTooltip || (!this.hasTextContent() && !this.hideTooltip))
? html `
<ft-tooltip part="tooltip"
text="${this.getLabel()}"
position="${this.tooltipPosition}">
${button}
</ft-tooltip>
`
: button;
}
resolveIcon() {
if (this.loading) {
return html `
<ft-loader part="loader icon"></ft-loader> `;
}
else {
return this.icon ? html `
<ft-icon part="icon" .variant=${this.iconVariant} .value=${this.icon}></ft-icon>
` : html `
<slot part="icon" name="icon"></slot>
`;
}
}
focus() {
var _a;
(_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
}
showTooltip() {
var _a;
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.show();
}
showTemporaryTooltip(text, duration) {
var _a;
return (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTemporaryText(text, duration);
}
setTooltipManual(manualTooltip) {
if (this.tooltip) {
this.tooltip.manual = manualTooltip;
}
}
click() {
var _a;
(_a = this.button) === null || _a === void 0 ? void 0 : _a.click();
}
getLabel() {
return this.label || this.getTextContent();
}
getTextContent() {
return unslotText(this.slottedContent).trim();
}
hasTextContent() {
return this.getTextContent().length > 0;
}
onSlotchange() {
this.requestUpdate();
}
isDisabled() {
return this.disabled || this.loading;
}
}
FtButton.elementDefinitions = {
"ft-ripple": FtRipple,
"ft-tooltip": FtTooltip,
"ft-icon": FtIcon,
"ft-loader": FtLoader,
"ft-typography": FtTypography,
};
FtButton.styles = [
safariEllipsisFix,
buttonStyles,
noTextSelect,
];
__decorate([
property({ type: Boolean })
], FtButton.prototype, "primary", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "outlined", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "dense", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "round", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "disabled", void 0);
__decorate([
property()
], FtButton.prototype, "icon", void 0);
__decorate([
property()
], FtButton.prototype, "iconVariant", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "trailingIcon", void 0);
__decorate([
property()
], FtButton.prototype, "label", void 0);
__decorate([
property()
], FtButton.prototype, "type", void 0);
__decorate([
property()
], FtButton.prototype, "href", void 0);
__decorate([
property()
], FtButton.prototype, "target", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "loading", void 0);
__decorate([
property({ attribute: "aria-label" })
], FtButton.prototype, "ariaLabel", void 0);
__decorate([
property()
], FtButton.prototype, "ariaHasPopup", void 0);
__decorate([
property({ attribute: "aria-pressed" })
], FtButton.prototype, "ariaPressed", void 0);
__decorate([
property()
], FtButton.prototype, "tooltipPosition", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "hideTooltip", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "forceTooltip", void 0);
__decorate([
property({ type: Boolean })
], FtButton.prototype, "activated", void 0);
__decorate([
query(".ft-button")
], FtButton.prototype, "button", void 0);
__decorate([
query(".ft-button--label slot")
], FtButton.prototype, "slottedContent", void 0);
__decorate([
query("[part=tooltip]")
], FtButton.prototype, "tooltip", void 0);