@fluid-topics/ft-button 2.1.23 → 2.2.0

package/build/ft-button.d.ts

@@ -1,7 +1,7 @@
 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 { HTMLTemplateResult, PropertyValues } from "lit";
 import { ClassInfo } from "lit/directives/class-map.js";
 import { FtButtonProperties, HTMLAnchorElementTargetAttribute } from "./ft-button.properties";
 declare const FtButton_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
@@ -15,7 +15,7 @@ export declare class FtButton extends FtButton_base implements FtButtonPropertie
     icon?: string;
     iconVariant?: FtIconVariants;
     trailingIcon: boolean;
-    label: string;
+    label?: string;
     type: "button" | "submit" | "reset";
     href?: string;
     target?: HTMLAnchorElementTargetAttribute;
@@ -28,6 +28,8 @@ export declare class FtButton extends FtButton_base implements FtButtonPropertie
     forceTooltip: boolean;
     activated: boolean;
     private button?;
+    private labelContainer?;
+    hasTextContent: boolean;
     private slottedContent?;
     private tooltip?;
     static styles: import("lit").CSSResult[];
@@ -41,10 +43,9 @@ export declare class FtButton extends FtButton_base implements FtButtonPropertie
     showTemporaryTooltip(text: string, duration: number): Promise<void> | undefined;
     private setTooltipManual;
     click(): void;
-    private getLabel;
-    getTextContent(): string;
-    protected hasTextContent(): boolean;
-    private onSlotchange;
     private isDisabled;
+    private static readonly labelsObserver;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    disconnectedCallback(): void;
 }
 export {};

package/build/ft-button.js

@@ -4,14 +4,14 @@ 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 { FtLitElement, isSafari, noTextSelect, safariEllipsisFix, toFtFormComponent, unslotText, } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement, isSafari, noTextSelect, safariEllipsisFix, toFtFormComponent, } 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 { property, query, state, } 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";
@@ -37,7 +37,6 @@ export class FtButton extends toFtFormComponent(FtLitElement) {
         this.disabled = false;
         this.icon = undefined;
         this.trailingIcon = false;
-        this.label = "";
         this.type = "button";
         this.href = undefined;
         this.target = undefined;
@@ -49,6 +48,7 @@ export class FtButton extends toFtFormComponent(FtLitElement) {
         this.hideTooltip = false;
         this.forceTooltip = false;
         this.activated = false;
+        this.hasTextContent = false;
         this.addEventListener("click", (e) => {
             var _a;
             if (this.isDisabled()) {
@@ -63,6 +63,11 @@ export class FtButton extends toFtFormComponent(FtLitElement) {
     }
     render() {
         var _a, _b, _c;
+        const labelClasses = {
+            "ft-button--label": true,
+            "ft-safari-ellipsis-fix": isSafari,
+            "ft-button--label-no-text": !this.hasTextContent,
+        };
         const content = html `
             <ft-ripple part="ripple"
                        ?disabled=${this.isDisabled()}
@@ -71,9 +76,8 @@ export class FtButton extends toFtFormComponent(FtLitElement) {
             <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>
+                           class="${classMap(labelClasses)}">
+                <slot></slot>
             </ft-typography>
             ${this.resolveIcon()}
         `;
@@ -83,14 +87,14 @@ export class FtButton extends toFtFormComponent(FtLitElement) {
                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()}"
+               aria-label="${ifDefined((_b = this.ariaLabel) !== null && _b !== void 0 ? _b : this.label)}"
                ?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-label="${ifDefined((_c = this.ariaLabel) !== null && _c !== void 0 ? _c : this.label)}"
                     aria-haspopup="${ifDefined(this.ariaHasPopup)}"
                     aria-pressed="${ifDefined(this.ariaPressed)}"
                     ?disabled=${this.isDisabled()}>
@@ -99,10 +103,10 @@ export class FtButton extends toFtFormComponent(FtLitElement) {
         `);
     }
     addTooltipIfNeeded(button) {
-        return this.getLabel().trim().length > 0 && (this.forceTooltip || (!this.hasTextContent() && !this.hideTooltip))
+        return this.label && this.label.trim().length > 0 && (this.forceTooltip || (!this.hasTextContent && !this.hideTooltip))
             ? html `
                 <ft-tooltip part="tooltip"
-                            text="${this.getLabel()}"
+                            text="${this.label}"
                             position="${this.tooltipPosition}">
                     ${button}
                 </ft-tooltip>
@@ -143,21 +147,21 @@ export class FtButton extends toFtFormComponent(FtLitElement) {
         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;
     }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (this.labelContainer) {
+            FtButton.labelsObserver.observe(this.labelContainer);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.labelContainer) {
+            FtButton.labelsObserver.unobserve(this.labelContainer);
+        }
+    }
 }
 FtButton.elementDefinitions = {
     "ft-ripple": FtRipple,
@@ -171,6 +175,17 @@ FtButton.styles = [
     buttonStyles,
     noTextSelect,
 ];
+FtButton.labelsObserver = new IntersectionObserver((labels) => {
+    for (const label of labels) {
+        const root = label.target.getRootNode();
+        if (root.host) {
+            root.host.hasTextContent = label.boundingClientRect.width > 0;
+        }
+        else {
+            FtButton.labelsObserver.unobserve(label.target);
+        }
+    }
+});
 __decorate([
     property({ type: Boolean })
 ], FtButton.prototype, "primary", void 0);
@@ -234,6 +249,12 @@ __decorate([
 __decorate([
     query(".ft-button")
 ], FtButton.prototype, "button", void 0);
+__decorate([
+    query(".ft-button--label")
+], FtButton.prototype, "labelContainer", void 0);
+__decorate([
+    state()
+], FtButton.prototype, "hasTextContent", void 0);
 __decorate([
     query(".ft-button--label slot")
 ], FtButton.prototype, "slottedContent", void 0);