@fluid-topics/ft-button 0.1.15 → 0.1.18

package/build/ft-button.js

@@ -7,7 +7,7 @@ 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";
@@ -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,6 +95,7 @@ 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);
@@ -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 {
@@ -190,7 +193,7 @@ let FtButton = class FtButton extends FtLitElement {
             `
         ];
     }
-    getTemplate() {
+    render() {
         const classes = {
             "ft-button": true,
             "ft-button--primary": this.primary,
@@ -264,7 +267,7 @@ let FtButton = class FtButton extends FtLitElement {
     isDisabled() {
         return this.disabled || this.loading;
     }
-};
+}
 FtButton.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-tooltip": FtTooltip,
@@ -308,8 +311,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