@fluid-topics/ft-button 2.0.37 → 2.1.0

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

@@ -1,8 +1,26 @@
-import { FtBaseButtonProperties } from "./ft-base-button";
-export interface FtButtonProperties extends FtBaseButtonProperties {
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { Position } from "@fluid-topics/ft-tooltip";
+export type HTMLAnchorElementTargetAttribute = "_self" | "_blank" | "_parent" | "_top";
+export type FtButtonType = "button" | "submit" | "reset";
+export interface FtButtonProperties {
     primary?: boolean;
     outlined?: boolean;
     dense?: boolean;
     round?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    iconVariant?: FtIconVariants;
+    trailingIcon?: boolean;
+    label?: string;
+    type: FtButtonType;
+    href?: string;
+    target?: HTMLAnchorElementTargetAttribute;
+    loading?: boolean;
+    ariaLabel?: string | null;
+    ariaHasPopup?: string | null;
+    ariaPressed?: string | null;
+    tooltipPosition?: Position;
+    hideTooltip?: boolean;
+    forceTooltip?: boolean;
     activated?: boolean;
 }

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

@@ -1,24 +1,24 @@
 export declare const FtButtonCssVariables: {
-    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    iconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    verticalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    horizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    iconPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    opacityDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    iconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    rippleColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    verticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    horizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    iconPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    opacityDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtButtonPrimaryCssVariables: {
-    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
+    rippleColor: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtButtonDenseCssVariables: {
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    verticalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    horizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    iconPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    verticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    horizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    iconPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
-export declare const classicStyles: import("lit").CSSResult[];
+export declare const buttonStyles: import("lit").CSSResult;

package/build/ft-button.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory, setVariable, } from "@fluid-topics/ft-wc-utils";
 import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
 import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
 import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.styles";
@@ -29,144 +29,141 @@ export const FtButtonDenseCssVariables = {
     horizontalPadding: FtCssVariableFactory.create("--ft-button-dense-horizontal-padding", "", "SIZE", "4px"),
     iconPadding: FtCssVariableFactory.create("--ft-button-dense-icon-padding", "", "SIZE", "4px"),
 };
-export const classicStyles = [
-    css `
-        :host {
-            display: inline-block;
-            max-width: 100%;
-            pointer-events: none;
-        }
-
-        .ft-button {
-            box-shadow: 0px 0px 0px transparent;
-            border: 0px solid transparent;
-            text-shadow: 0px 0px 0px transparent;
-            font-size: ${FtButtonCssVariables.fontSize};
-            text-decoration: none;
-        }
-
-        .ft-button:hover {
-            box-shadow: 0px 0px 0px transparent;
-            border: 0px solid transparent;
-            text-shadow: 0px 0px 0px transparent;
-        }
-
-        .ft-button:active {
-            outline: none;
-            border: none;
-        }
-
-        .ft-button:focus {
-            outline: 0;
-        }
-
-        .ft-button {
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            overflow: hidden;
-            box-sizing: border-box;
-            border: none;
-            pointer-events: auto;
-
-            --button-internal-line-height: max(calc(${FtButtonCssVariables.fontSize} + 2px), ${FtButtonCssVariables.iconSize});
-            --button-internal-color: ${FtButtonCssVariables.color};
-            ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
-            ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};
-
-            border-radius: ${FtButtonCssVariables.borderRadius};
-            padding: ${FtButtonCssVariables.verticalPadding} ${FtButtonCssVariables.horizontalPadding};
-            background-color: ${FtButtonCssVariables.backgroundColor};
-            color: var(--button-internal-color);
-            -webkit-mask-image: radial-gradient(white, black);
-        }
-
-        .ft-button.ft-button--outlined {
-            border: 1px solid var(--button-internal-color);
-            padding: calc(${FtButtonCssVariables.verticalPadding} - 1px) calc(${FtButtonCssVariables.horizontalPadding} - 1px);
-        }
-
-        .ft-button.ft-button--dense {
-            padding: ${FtButtonDenseCssVariables.verticalPadding} ${FtButtonDenseCssVariables.horizontalPadding};
-            border-radius: ${FtButtonDenseCssVariables.borderRadius};
-            gap: ${FtButtonDenseCssVariables.iconPadding};
-        }
-
-        .ft-button.ft-button--dense.ft-button--outlined {
-            padding: calc(${FtButtonDenseCssVariables.verticalPadding} - 1px) calc(${FtButtonDenseCssVariables.horizontalPadding} - 1px);
-        }
-
-        .ft-button:not([disabled]):hover {
-            cursor: pointer;
-        }
-
-        .ft-button--round {
-            border-radius: calc(var(--button-internal-line-height) / 2 + ${FtButtonCssVariables.verticalPadding});
-        }
-
-        .ft-button--round.ft-button--dense {
-            border-radius: calc(var(--button-internal-line-height) / 2 + ${FtButtonDenseCssVariables.verticalPadding});
-        }
-
-        .ft-button[disabled] {
-            filter: grayscale(1);
-            opacity: ${FtButtonCssVariables.opacityDisabled};
-        }
-
-        .ft-button.ft-button--primary {
-            background-color: ${FtButtonPrimaryCssVariables.backgroundColor};
-            --button-internal-color: ${FtButtonPrimaryCssVariables.color};
-            ${setVariable(FtRippleCssVariables.color, FtButtonPrimaryCssVariables.rippleColor)};
-        }
-
-        .ft-button:focus {
-            outline: none;
-        }
-
-        .ft-button--label {
-            position: relative;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            display: block;
-            margin: 0 ${FtButtonCssVariables.iconPadding};
-            ${setVariable(FtTypographyButtonCssVariables.fontSize, "1em")};
-            ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--button-internal-line-height)")};
-        }
-
-        .ft-button--dense .ft-button--label {
-            margin: 0 ${FtButtonDenseCssVariables.iconPadding};
-        }
-
-        .ft-button--label[hidden] {
-            display: none;
-        }
-
-        [part="icon"] {
-            flex-shrink: 0;
-            position: relative;
-        }
-
-        .ft-button--label[hidden] + [part="icon"] {
-            margin: 0 calc(${FtButtonCssVariables.horizontalPadding} * -1);
-            padding: 0 ${FtButtonCssVariables.verticalPadding};
-        }
-
-        .ft-button--dense .ft-button--label[hidden] + [part="icon"] {
-            margin: 0 calc(${FtButtonDenseCssVariables.horizontalPadding} * -1);
-            padding: 0 ${FtButtonDenseCssVariables.verticalPadding};
-        }
-
-        .ft-button:not(.ft-button--trailing-icon) [part="label"] {
-            order: 2;
-        }
-
-        ft-loader {
-            ${setVariable(FtLoaderCssVariables.size, FtButtonCssVariables.iconSize)};
-            ${setVariable(FtLoaderCssVariables.color, "var(--button-internal-color)")};
-        }
-    `,
-    noTextSelect,
-];
+export const buttonStyles = css `
+    :host {
+        display: inline-block;
+        max-width: 100%;
+        pointer-events: none;
+    }
+
+    .ft-button {
+        box-shadow: 0px 0px 0px transparent;
+        border: 0px solid transparent;
+        text-shadow: 0px 0px 0px transparent;
+        font-size: ${FtButtonCssVariables.fontSize};
+        text-decoration: none;
+    }
+
+    .ft-button:hover {
+        box-shadow: 0px 0px 0px transparent;
+        border: 0px solid transparent;
+        text-shadow: 0px 0px 0px transparent;
+    }
+
+    .ft-button:active {
+        outline: none;
+        border: none;
+    }
+
+    .ft-button:focus {
+        outline: 0;
+    }
+
+    .ft-button {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+        border: none;
+        pointer-events: auto;
+
+        --button-internal-line-height: max(calc(${FtButtonCssVariables.fontSize} + 2px), ${FtButtonCssVariables.iconSize});
+        --button-internal-color: ${FtButtonCssVariables.color};
+        ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
+        ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};
+
+        border-radius: ${FtButtonCssVariables.borderRadius};
+        padding: ${FtButtonCssVariables.verticalPadding} ${FtButtonCssVariables.horizontalPadding};
+        background-color: ${FtButtonCssVariables.backgroundColor};
+        color: var(--button-internal-color);
+        -webkit-mask-image: radial-gradient(white, black);
+    }
+
+    .ft-button.ft-button--outlined {
+        border: 1px solid var(--button-internal-color);
+        padding: calc(${FtButtonCssVariables.verticalPadding} - 1px) calc(${FtButtonCssVariables.horizontalPadding} - 1px);
+    }
+
+    .ft-button.ft-button--dense {
+        padding: ${FtButtonDenseCssVariables.verticalPadding} ${FtButtonDenseCssVariables.horizontalPadding};
+        border-radius: ${FtButtonDenseCssVariables.borderRadius};
+        gap: ${FtButtonDenseCssVariables.iconPadding};
+    }
+
+    .ft-button.ft-button--dense.ft-button--outlined {
+        padding: calc(${FtButtonDenseCssVariables.verticalPadding} - 1px) calc(${FtButtonDenseCssVariables.horizontalPadding} - 1px);
+    }
+
+    .ft-button:not([disabled]):hover {
+        cursor: pointer;
+    }
+
+    .ft-button--round {
+        border-radius: calc(var(--button-internal-line-height) / 2 + ${FtButtonCssVariables.verticalPadding});
+    }
+
+    .ft-button--round.ft-button--dense {
+        border-radius: calc(var(--button-internal-line-height) / 2 + ${FtButtonDenseCssVariables.verticalPadding});
+    }
+
+    .ft-button[disabled] {
+        filter: grayscale(1);
+        opacity: ${FtButtonCssVariables.opacityDisabled};
+    }
+
+    .ft-button.ft-button--primary {
+        background-color: ${FtButtonPrimaryCssVariables.backgroundColor};
+        --button-internal-color: ${FtButtonPrimaryCssVariables.color};
+        ${setVariable(FtRippleCssVariables.color, FtButtonPrimaryCssVariables.rippleColor)};
+    }
+
+    .ft-button:focus {
+        outline: none;
+    }
+
+    .ft-button--label {
+        position: relative;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: block;
+        margin: 0 ${FtButtonCssVariables.iconPadding};
+        ${setVariable(FtTypographyButtonCssVariables.fontSize, "1em")};
+        ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--button-internal-line-height)")};
+    }
+
+    .ft-button--dense .ft-button--label {
+        margin: 0 ${FtButtonDenseCssVariables.iconPadding};
+    }
+
+    .ft-button--label[hidden] {
+        display: none;
+    }
+
+    [part="icon"] {
+        flex-shrink: 0;
+        position: relative;
+    }
+
+    .ft-button--label[hidden] + [part="icon"] {
+        margin: 0 calc(${FtButtonCssVariables.horizontalPadding} * -1);
+        padding: 0 ${FtButtonCssVariables.verticalPadding};
+    }
+
+    .ft-button--dense .ft-button--label[hidden] + [part="icon"] {
+        margin: 0 calc(${FtButtonDenseCssVariables.horizontalPadding} * -1);
+        padding: 0 ${FtButtonDenseCssVariables.verticalPadding};
+    }
+
+    .ft-button:not(.ft-button--trailing-icon) [part="label"] {
+        order: 2;
+    }
+
+    ft-loader {
+        ${setVariable(FtLoaderCssVariables.size, FtButtonCssVariables.iconSize)};
+        ${setVariable(FtLoaderCssVariables.color, "var(--button-internal-color)")};
+    }
+`;

package/build/index.d.ts

@@ -1,7 +1,4 @@
 export * from "./ft-button";
 export * from "./ft-button.styles";
 export * from "./ft-button.properties";
-export * from "./ftds-button";
-export * from "./ftds-button.styles";
-export * from "./ftds-button.properties";
 import "./define";

package/build/index.js

@@ -1,7 +1,4 @@
 export * from "./ft-button";
 export * from "./ft-button.styles";
 export * from "./ft-button.properties";
-export * from "./ftds-button";
-export * from "./ftds-button.styles";
-export * from "./ftds-button.properties";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-button",
-    "version": "2.0.37",
+    "version": "2.1.0",
     "description": "A generic Fluid Topics tag",
     "keywords": [
         "Lit"
@@ -19,14 +19,13 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/design-system-variables": "3.4.1",
-        "@fluid-topics/ft-icon": "2.0.37",
-        "@fluid-topics/ft-loader": "2.0.37",
-        "@fluid-topics/ft-ripple": "2.0.37",
-        "@fluid-topics/ft-tooltip": "2.0.37",
-        "@fluid-topics/ft-typography": "2.0.37",
-        "@fluid-topics/ft-wc-utils": "2.0.37",
+        "@fluid-topics/ft-icon": "2.1.0",
+        "@fluid-topics/ft-loader": "2.1.0",
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-tooltip": "2.1.0",
+        "@fluid-topics/ft-typography": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
-    "gitHead": "ef1f68e09e0331293931458a6479b551dcc4cecc"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

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

@@ -1,62 +0,0 @@
-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";
-type HTMLAnchorElementTargetAttribute = "_self" | "_blank" | "_parent" | "_top";
-export interface FtBaseButtonProperties {
-    disabled?: boolean;
-    label?: string;
-    href?: string;
-    target?: HTMLAnchorElementTargetAttribute;
-    icon?: string;
-    iconVariant?: FtIconVariants;
-    trailingIcon?: boolean;
-    loading?: boolean;
-    ariaLabel?: string | null;
-    tooltipPosition?: Position;
-    hideTooltip?: boolean;
-    forceTooltip?: boolean;
-    ariaHasPopup?: string | null;
-    ariaPressed?: string | null;
-}
-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?: HTMLAnchorElementTargetAttribute;
-    type: "button" | "submit" | "reset";
-    disabled: boolean;
-    label: string;
-    icon?: string;
-    iconVariant?: FtIconVariants;
-    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?;
-    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 {};