@fluid-topics/ft-button 0.1.16 → 0.2.0

package/build/ft-button.js

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html, nothing, } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { customElement, designSystemVariables, FtCssVariable, FtLitElement, isSafari, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariable, FtLitElement, isSafari, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
 import { FtTypography, FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
-import { Icon } from "@material/mwc-icon";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtLoader, FtLoaderCssVariables } from "@fluid-topics/ft-loader";
 import "@fluid-topics/ft-loader";
+import { FtIcon, FtIconCssVariables } from "@fluid-topics/ft-icon";
 const buttonColor = FtCssVariable.extend("--ft-button-color", designSystemVariables.colorPrimary);
 export const FtButtonCssVariables = {
     backgroundColor: FtCssVariable.extend("--ft-button-background-color", designSystemVariables.colorSurface),
@@ -33,7 +33,7 @@ export const FtButtonPrimaryCssVariables = {
 export const FtButtonDenseCssVariables = {
     borderRadius: FtCssVariable.extend("--ft-button-dense-border-radius", FtCssVariable.extend("--ft-button-border-radius", designSystemVariables.borderRadiusM)),
 };
-let FtButton = class FtButton extends FtLitElement {
+export class FtButton extends FtLitElement {
     constructor() {
         super(...arguments);
         this.primary = false;
@@ -54,7 +54,7 @@ let FtButton = class FtButton extends FtLitElement {
             }
         };
     }
-    getStyles() {
+    static get styles() {
         //language=css
         return [
             noTextSelect,
@@ -62,6 +62,7 @@ let FtButton = class FtButton extends FtLitElement {
                 :host {
                     display: inline-block;
                     max-width: 100%;
+                    pointer-events: none;
                 }
 
                 button {
@@ -94,15 +95,16 @@ let FtButton = class FtButton extends FtLitElement {
                     overflow: hidden;
                     box-sizing: border-box;
                     border: none;
+                    pointer-events: auto;
 
                     --ft-button-internal-font-size: ${FtButtonCssVariables.fontSize};
                     --ft-button-internal-line-height: calc(var(--ft-button-internal-font-size) + 2px);
                     --ft-button-internal-color: ${FtButtonCssVariables.color};
-                    --mdc-icon-size: ${FtButtonCssVariables.iconSize};
+                    ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
                     --ft-button-internal-vertical-padding: 6px;
                     --ft-button-internal-horizontal-padding: 8px;
                     ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};
-                    --ft-button-internal-content-height: max(var(--ft-button-internal-line-height), var(--mdc-icon-size));
+                    --ft-button-internal-content-height: max(var(--ft-button-internal-line-height), ${FtButtonCssVariables.iconSize});
 
                     border-radius: ${FtButtonCssVariables.borderRadius};
                     padding: var(--ft-button-internal-vertical-padding) var(--ft-button-internal-horizontal-padding);
@@ -133,6 +135,7 @@ let FtButton = class FtButton extends FtLitElement {
                 .ft-button.ft-button--primary {
                     background-color: ${FtButtonPrimaryCssVariables.backgroundColor};
                     --ft-button-internal-color: ${FtButtonPrimaryCssVariables.color};
+                    ${setVariable(FtRippleCssVariables.color, FtButtonPrimaryCssVariables.rippleColor)};
                 }
 
                 .ft-button.ft-button--outlined {
@@ -168,17 +171,16 @@ let FtButton = class FtButton extends FtLitElement {
                     display: none;
                 }
 
-                mwc-icon {
+                ft-icon {
                     flex-shrink: 0;
-                    width: var(--mdc-icon-size);
                 }
 
-                .ft-button--label[hidden] + mwc-icon {
+                .ft-button--label[hidden] + ft-icon {
                     margin: 0 calc(var(--ft-button-internal-horizontal-padding) * -1);
                     padding: 0 var(--ft-button-internal-vertical-padding);
                 }
 
-                .ft-button:not(.ft-button--trailing-icon) mwc-icon,
+                .ft-button:not(.ft-button--trailing-icon) ft-icon,
                 .ft-button:not(.ft-button--trailing-icon) ft-loader {
                     order: -1;
                 }
@@ -190,7 +192,7 @@ let FtButton = class FtButton extends FtLitElement {
             `
         ];
     }
-    getTemplate() {
+    render() {
         const classes = {
             "ft-button": true,
             "ft-button--primary": this.primary,
@@ -235,7 +237,7 @@ let FtButton = class FtButton extends FtLitElement {
         else {
             return this.icon
                 ? html `
-                        <mwc-icon>${this.icon}</mwc-icon> `
+                        <ft-icon variant="material">${this.icon}</ft-icon> `
                 : nothing;
         }
     }
@@ -264,12 +266,12 @@ let FtButton = class FtButton extends FtLitElement {
     isDisabled() {
         return this.disabled || this.loading;
     }
-};
+}
 FtButton.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-tooltip": FtTooltip,
     "ft-typography": FtTypography,
-    "mwc-icon": Icon,
+    "ft-icon": FtIcon,
     "ft-loader": FtLoader,
 };
 __decorate([
@@ -308,8 +310,4 @@ __decorate([
 __decorate([
     query(".ft-button--label slot")
 ], FtButton.prototype, "slottedContent", void 0);
-FtButton = __decorate([
-    customElement("ft-button")
-], FtButton);
-export { FtButton };
 //# sourceMappingURL=ft-button.js.map