@fluid-topics/ft-button 1.2.2 → 1.2.3

package/build/ft-base-button.d.ts

@@ -3,9 +3,12 @@ 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";
+import { HTMLAttributeAnchorTarget } from "react";
 export interface FtBaseButtonProperties {
     disabled?: boolean;
     label?: string;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
     icon?: string;
     iconVariant?: FtIconVariants;
     trailingIcon?: boolean;
@@ -18,6 +21,8 @@ export interface FtBaseButtonProperties {
 declare const FtBaseButton_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
 export declare class FtBaseButton extends FtBaseButton_base implements FtBaseButtonProperties {
     static elementDefinitions: ElementDefinitionsMap;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
     role: string;
     type: "button" | "submit" | "reset";
     disabled: boolean;
@@ -39,6 +44,7 @@ export declare class FtBaseButton extends FtBaseButton_base implements FtBaseBut
     private addTooltipIfNeeded;
     private resolveIcon;
     focus(): void;
+    click(): void;
     private getLabel;
     get textContent(): string;
     protected hasTextContent(): boolean;

package/build/ft-base-button.js

@@ -22,6 +22,8 @@ class FtBaseButton extends toFtFormComponent(FtLitElement, "button") {
     }
     constructor() {
         super();
+        this.href = undefined;
+        this.target = undefined;
         this.role = "button";
         this.type = "button";
         this.disabled = false;
@@ -46,21 +48,34 @@ class FtBaseButton extends toFtFormComponent(FtLitElement, "button") {
         });
     }
     render() {
-        var _a;
-        return this.addTooltipIfNeeded(html `
+        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 @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="${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : this.getLabel()}"
+                    aria-label="${(_c = this.ariaLabel) !== null && _c !== void 0 ? _c : this.getLabel()}"
                     ?disabled=${this.isDisabled()}>
-                <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 @slotchange=${this.onSlotchange}></slot>
-                </ft-typography>
-                ${this.resolveIcon()}
+                ${content}
             </button>
         `);
     }
@@ -92,6 +107,10 @@ class FtBaseButton extends toFtFormComponent(FtLitElement, "button") {
         var _a;
         (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    click() {
+        var _a;
+        (_a = this.button) === null || _a === void 0 ? void 0 : _a.click();
+    }
     getLabel() {
         return this.label || this.textContent;
     }
@@ -115,6 +134,12 @@ FtBaseButton.elementDefinitions = {
     "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);