@fluid-topics/ft-button
Version:
A generic Fluid Topics tag
200 lines (199 loc) • 7.03 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, toFtFormComponent, unslotText } from "@fluid-topics/ft-wc-utils";
import { FtRipple } from "@fluid-topics/ft-ripple";
import { FtTooltip } from "@fluid-topics/ft-tooltip";
import { FtTypography } from "@fluid-topics/ft-typography";
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";
class FtBaseButton extends toFtFormComponent(FtLitElement, "button") {
get buttonClasses() {
return {};
}
get typographyVariant() {
return "";
}
constructor() {
super();
this.href = undefined;
this.target = undefined;
this.role = "button";
this.type = "button";
this.disabled = false;
this.label = "";
this.icon = undefined;
this.trailingIcon = false;
this.loading = false;
this.ariaLabel = null;
this.tooltipPosition = "bottom";
this.hideTooltip = false;
this.forceTooltip = 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()}></ft-ripple>
<ft-typography part="label"
variant=${this.typographyVariant}
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()}"
?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();
}
focusWithoutTooltip() {
var _a;
this.setTooltipManual(true);
(_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
this.setTooltipManual(false);
}
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.textContent;
}
get textContent() {
return unslotText(this.slottedContent).trim();
}
hasTextContent() {
return this.textContent.length > 0;
}
onSlotchange() {
this.requestUpdate();
}
isDisabled() {
return this.disabled || this.loading;
}
}
FtBaseButton.elementDefinitions = {
"ft-ripple": FtRipple,
"ft-tooltip": FtTooltip,
"ft-typography": FtTypography,
"ft-icon": FtIcon,
"ft-loader": FtLoader,
};
__decorate([
property()
], FtBaseButton.prototype, "href", void 0);
__decorate([
property()
], FtBaseButton.prototype, "target", void 0);
__decorate([
property({ type: String, reflect: true })
], FtBaseButton.prototype, "role", void 0);
__decorate([
property()
], FtBaseButton.prototype, "type", void 0);
__decorate([
property({ type: Boolean })
], FtBaseButton.prototype, "disabled", void 0);
__decorate([
property()
], FtBaseButton.prototype, "label", void 0);
__decorate([
property()
], FtBaseButton.prototype, "icon", void 0);
__decorate([
property()
], FtBaseButton.prototype, "iconVariant", void 0);
__decorate([
property({ type: Boolean })
], FtBaseButton.prototype, "trailingIcon", void 0);
__decorate([
property({ type: Boolean })
], FtBaseButton.prototype, "loading", void 0);
__decorate([
property({ attribute: "aria-label" })
], FtBaseButton.prototype, "ariaLabel", void 0);
__decorate([
property()
], FtBaseButton.prototype, "tooltipPosition", void 0);
__decorate([
property({ type: Boolean })
], FtBaseButton.prototype, "hideTooltip", void 0);
__decorate([
property({ type: Boolean })
], FtBaseButton.prototype, "forceTooltip", void 0);
__decorate([
query(".ft-button")
], FtBaseButton.prototype, "button", void 0);
__decorate([
query(".ft-button--label slot")
], FtBaseButton.prototype, "slottedContent", void 0);
__decorate([
query("[part=tooltip]")
], FtBaseButton.prototype, "tooltip", void 0);
export { FtBaseButton };