@fluid-topics/ft-chip 0.1.16 → 0.2.0

package/build/ft-chip.js

@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html, } 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, FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography";
-import { Icon } from "@material/mwc-icon";
+import { FtIcon, FtIconCssVariables } from "@fluid-topics/ft-icon";
 const chipColor = FtCssVariable.extend("--ft-chip-color", designSystemVariables.colorOnSurface);
 export const FtChipCssVariables = {
     backgroundColor: FtCssVariable.extend("--ft-chip-background-color", designSystemVariables.colorSurface),
@@ -38,7 +38,7 @@ export class IconClickEvent extends CustomEvent {
         super("icon-click");
     }
 }
-let FtChip = class FtChip extends FtLitElement {
+export class FtChip extends FtLitElement {
     constructor() {
         super(...arguments);
         this.highlighted = false;
@@ -52,7 +52,7 @@ let FtChip = class FtChip extends FtLitElement {
         this.icon = undefined;
         this.trailingIcon = false;
     }
-    getStyles() {
+    static get styles() {
         //language=css
         return [
             noTextSelect,
@@ -60,6 +60,7 @@ let FtChip = class FtChip extends FtLitElement {
                 :host {
                     display: inline-block;
                     max-width: 100%;
+                    pointer-events: none;
                 }
 
                 .ft-chip {
@@ -70,14 +71,15 @@ let FtChip = class FtChip extends FtLitElement {
                     width: 100%;
                     overflow: hidden;
                     box-sizing: border-box;
+                    pointer-events: auto;
 
                     --ft-chip-internal-font-size: ${FtChipCssVariables.fontSize};
                     --ft-chip-internal-line-height: max(20px, calc(var(--ft-chip-internal-font-size) + 2px));
-                    --mdc-icon-size: ${FtChipCssVariables.iconSize};
+                    ${setVariable(FtIconCssVariables.size, FtChipCssVariables.iconSize)};
                     --ft-chip-internal-vertical-padding: ${FtChipCssVariables.verticalPadding};
                     --ft-chip-internal-horizontal-padding: ${FtChipCssVariables.horizontalPadding};
                     --ft-chip-internal-icon-padding: 3px;
-                    --ft-chip-internal-content-height: max(var(--ft-chip-internal-line-height), var(--mdc-icon-size));
+                    --ft-chip-internal-content-height: max(var(--ft-chip-internal-line-height), ${FtChipCssVariables.iconSize});
 
                     border: 1px solid ${FtChipCssVariables.colorOutline};
                     color: ${FtChipCssVariables.color};
@@ -179,7 +181,7 @@ let FtChip = class FtChip extends FtLitElement {
             `
         ];
     }
-    getTemplate() {
+    render() {
         const classes = {
             "ft-chip": true,
             "ft-chip--highlighted": this.highlighted,
@@ -217,7 +219,7 @@ let FtChip = class FtChip extends FtLitElement {
                  @click=${this.onIconClick}
                  @keyup=${this.onIconKeyUp}>
                 <ft-ripple ?disabled=${!this.interactionsOnIcon}></ft-ripple>
-                <mwc-icon>${this.internalIcon}</mwc-icon>
+                <ft-icon variant="material">${this.internalIcon}</ft-icon>
             </div>
         `;
     }
@@ -254,11 +256,11 @@ let FtChip = class FtChip extends FtLitElement {
     get internalIcon() {
         return this.icon || (this.removable ? "cancel" : undefined);
     }
-};
+}
 FtChip.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
-    "mwc-icon": Icon,
+    "ft-icon": FtIcon,
 };
 __decorate([
     property({ type: Boolean })
@@ -293,8 +295,4 @@ __decorate([
 __decorate([
     query("ft-typography slot")
 ], FtChip.prototype, "slottedContent", void 0);
-FtChip = __decorate([
-    customElement("ft-chip")
-], FtChip);
-export { FtChip };
 //# sourceMappingURL=ft-chip.js.map