@fluid-topics/ftds-button 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system button component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-button
+yarn add @fluid-topics/ftds-button
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-button"
+
+function render() {
+    return html` <ftds-button foo="bar"></ftds-button> `
+}
+```

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

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

package/build/definitions.js

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

package/build/ftds-button.d.ts

@@ -0,0 +1,53 @@
+import { HTMLTemplateResult } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsButtonProperties, HTMLAnchorElementTargetAttribute } from "./ftds-button.properties";
+import { Position } from "@fluid-topics/ft-tooltip";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { ClassInfo } from "lit/directives/class-map.js";
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon";
+declare const FtdsButton_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtLitElement>>;
+export declare class FtdsButton extends FtdsButton_base implements FtdsButtonProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    primary: boolean;
+    secondary: boolean;
+    tertiary: boolean;
+    round: boolean;
+    href?: string;
+    target?: HTMLAnchorElementTargetAttribute;
+    type: "button" | "submit" | "reset";
+    disabled: boolean;
+    label: string;
+    icon?: string;
+    iconVariant?: FtdsIconVariants;
+    trailingIcon: boolean;
+    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?;
+    family: DesignSystemFamily;
+    static styles: (import("lit").CSSResult | 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/ftds-button.js

@@ -0,0 +1,258 @@
+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 { html, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { FtLitElement, isSafari, safariEllipsisFix, toFtdsBase, toFtFormComponent, unslotText, } from "@fluid-topics/ft-wc-utils";
+import { FtLoader } from "@fluid-topics/ft-loader";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTooltip, } from "@fluid-topics/ft-tooltip";
+import { DesignSystemFamily, DesignSystemSize, } from "@fluid-topics/design-system-variables";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap, } from "lit/directives/class-map.js";
+import { style } from "./ftds-button.styles";
+import { FtdsIcon, } from "@fluid-topics/ftds-icon";
+export class FtdsButton extends toFtFormComponent(toFtdsBase(FtLitElement)) {
+    get buttonClasses() {
+        return {
+            "ftds-button": true,
+            "ftds-button--primary": this.primary,
+            "ftds-button--secondary": this.secondary,
+            "ftds-button--tertiary": this.tertiary || (!this.primary && !this.secondary),
+            "ftds-button--icon-only": !this.hasTextContent(),
+            "ftds-button--trailing-icon": this.trailingIcon,
+            "ftds-button--loading": this.trailingIcon,
+            "ft-no-text-select": true,
+            "ftds-button--no-icon": !this.icon,
+            "ftds-button--round": this.round,
+            ...this.getDesignSystemBaseClasses(),
+        };
+    }
+    get typographyVariant() {
+        switch (this.size) {
+            case DesignSystemSize.large:
+                return FtdsTypographyVariants.body2medium;
+            case DesignSystemSize.medium:
+                return FtdsTypographyVariants.caption1medium;
+            case DesignSystemSize.small:
+                return FtdsTypographyVariants.caption2medium;
+            default:
+                return FtdsTypographyVariants.caption1medium;
+        }
+    }
+    constructor() {
+        super();
+        this.primary = false;
+        this.secondary = false;
+        this.tertiary = false;
+        this.round = false;
+        this.href = undefined;
+        this.target = undefined;
+        this.type = "button";
+        this.disabled = false;
+        this.label = "";
+        this.icon = undefined;
+        this.trailingIcon = false;
+        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.family = DesignSystemFamily.brand;
+        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>
+            <ftds-typography part="label"
+                             variant="${this.typographyVariant}"
+                             element="span"
+                             class="ftds-button--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}"
+                             ?hidden=${!this.hasTextContent()}>
+                <slot @slotchange=${this.onSlotchange}></slot>
+            </ftds-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 `
+                <ftds-icon part="icon" .variant=${this.iconVariant} .icon=${this.icon}></ftds-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;
+    }
+}
+FtdsButton.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-tooltip": FtTooltip,
+    "ftds-icon": FtdsIcon,
+    "ft-loader": FtLoader,
+    "ftds-typography": FtdsTypography,
+};
+FtdsButton.styles = [
+    safariEllipsisFix,
+    style,
+];
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "primary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "secondary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "tertiary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "round", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "href", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "target", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "label", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "iconVariant", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: "aria-label" })
+], FtdsButton.prototype, "ariaLabel", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "ariaHasPopup", void 0);
+__decorate([
+    property({ attribute: "aria-pressed" })
+], FtdsButton.prototype, "ariaPressed", void 0);
+__decorate([
+    property()
+], FtdsButton.prototype, "tooltipPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "hideTooltip", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "forceTooltip", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsButton.prototype, "activated", void 0);
+__decorate([
+    query(".ftds-button")
+], FtdsButton.prototype, "button", void 0);
+__decorate([
+    query(".ftds-button--label slot")
+], FtdsButton.prototype, "slottedContent", void 0);
+__decorate([
+    query("[part=tooltip]")
+], FtdsButton.prototype, "tooltip", void 0);