@fluid-topics/ft-button 2.0.37 → 2.1.0

package/build/definitions.d.ts

@@ -1,7 +1,5 @@
 import { FtButton } from "./ft-button";
-import { FtdsButton } from "./ftds-button";
 declare const _default: {
     "ft-button": typeof FtButton;
-    "ftds-button": typeof FtdsButton;
 };
 export default _default;

package/build/definitions.js

@@ -1,6 +1,4 @@
 import { FtButton } from "./ft-button";
-import { FtdsButton } from "./ftds-button";
 export default {
     "ft-button": FtButton,
-    "ftds-button": FtdsButton,
 };

package/build/ft-button.d.ts

@@ -1,14 +1,50 @@
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { FtButtonProperties } from "./ft-button.properties";
-import { FtBaseButton } from "./ft-base-button";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { Position } from "@fluid-topics/ft-tooltip";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { HTMLTemplateResult } from "lit";
 import { ClassInfo } from "lit/directives/class-map.js";
-export declare class FtButton extends FtBaseButton implements FtButtonProperties {
+import { FtButtonProperties, HTMLAnchorElementTargetAttribute } from "./ft-button.properties";
+declare const FtButton_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
+export declare class FtButton extends FtButton_base implements FtButtonProperties {
     static elementDefinitions: ElementDefinitionsMap;
     primary: boolean;
     outlined: boolean;
     dense: boolean;
     round: boolean;
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    disabled: boolean;
+    icon?: string;
+    iconVariant?: FtIconVariants;
+    trailingIcon: boolean;
+    label: string;
+    type: "button" | "submit" | "reset";
+    href?: string;
+    target?: HTMLAnchorElementTargetAttribute;
+    loading: boolean;
+    ariaLabel: string | null;
+    ariaHasPopup: string | null;
+    ariaPressed: string | null;
+    tooltipPosition: Position;
+    hideTooltip: boolean;
+    forceTooltip: boolean;
+    activated: boolean;
+    private button?;
+    private slottedContent?;
+    private tooltip?;
+    static styles: import("lit").CSSResult[];
     get buttonClasses(): ClassInfo;
-    get typographyVariant(): string;
+    constructor();
+    protected render(): HTMLTemplateResult;
+    private addTooltipIfNeeded;
+    private resolveIcon;
+    focus(): void;
+    showTooltip(): void;
+    showTemporaryTooltip(text: string, duration: number): Promise<void> | undefined;
+    private setTooltipManual;
+    click(): void;
+    private getLabel;
+    getTextContent(): string;
+    protected hasTextContent(): boolean;
+    private onSlotchange;
+    private isDisabled;
 }
+export {};

package/build/ft-button.js

@@ -4,19 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { property } from "lit/decorators.js";
-import { safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
-import { classicStyles } from "./ft-button.styles";
-import { FtBaseButton } from "./ft-base-button";
-import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
-export class FtButton extends FtBaseButton {
-    constructor() {
-        super(...arguments);
-        this.primary = false;
-        this.outlined = false;
-        this.dense = false;
-        this.round = false;
-    }
+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,
@@ -29,17 +28,148 @@ export class FtButton extends FtBaseButton {
             "ft-no-text-select": true,
         };
     }
-    get typographyVariant() {
-        return FtTypographyVariants.button;
+    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 @slotchange=${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 = {
-    ...FtBaseButton.elementDefinitions,
-    "ft-or-ftds-typography": FtTypography,
+    "ft-ripple": FtRipple,
+    "ft-tooltip": FtTooltip,
+    "ft-icon": FtIcon,
+    "ft-loader": FtLoader,
+    "ft-typography": FtTypography,
 };
 FtButton.styles = [
     safariEllipsisFix,
-    classicStyles,
+    buttonStyles,
+    noTextSelect,
 ];
 __decorate([
     property({ type: Boolean })
@@ -53,3 +183,60 @@ __decorate([
 __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);