@fluid-topics/ft-chip 0.3.71 → 1.0.0-alpha.1

package/build/ft-chip.css.d.ts

@@ -19,4 +19,3 @@ export declare const FtChipDenseCssVariables: {
     verticalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult[];
-//# sourceMappingURL=ft-chip.css.d.ts.map

package/build/ft-chip.css.js

@@ -3,6 +3,7 @@ import { designSystemVariables, FtCssVariableFactory, noTextSelect, setVariable
 import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
 import { FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button";
 const chipColor = FtCssVariableFactory.extend("--ft-chip-color", designSystemVariables.colorOnSurface);
 export const FtChipCssVariables = {
     backgroundColor: FtCssVariableFactory.extend("--ft-chip-background-color", designSystemVariables.colorSurface),
@@ -41,7 +42,6 @@ export const styles = [
             justify-content: center;
             align-items: center;
             width: 100%;
-            overflow: hidden;
             box-sizing: border-box;
             pointer-events: auto;
 
@@ -118,6 +118,13 @@ export const styles = [
             position: relative;
         }
 
+        .ft-chip--icon-button {
+            ${setVariable(FtButtonCssVariables.iconSize, FtChipCssVariables.iconSize)};
+            ${setVariable(FtButtonCssVariables.horizontalPadding, 'var(--ft-chip-internal-icon-padding)')};
+            ${setVariable(FtButtonCssVariables.verticalPadding, 'var(--ft-chip-internal-icon-padding)')};
+            margin: calc((-1) * var(--ft-chip-internal-icon-padding));
+        }
+
         .ft-chip--label {
             vertical-align: bottom;
             display: block;
@@ -155,9 +162,9 @@ export const styles = [
             outline: none;
         }
 
-        .ft-chip:not(.ft-chip--trailing-icon) .ft-chip--icon-container {
+        .ft-chip:not(.ft-chip--trailing-icon) .ft-chip--icon-container,
+        .ft-chip:not(.ft-chip--trailing-icon) .ft-chip--icon-button {
             order: -1;
         }
     `
 ];
-//# sourceMappingURL=ft-chip.css.js.map

package/build/ft-chip.d.ts

@@ -1,4 +1,5 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
 import { FtChipProperties } from "./ft-chip.property";
 export declare class IconClickEvent extends CustomEvent<void> {
     constructor();
@@ -13,7 +14,9 @@ export declare class FtChip extends FtLitElement implements FtChipProperties {
     dense: boolean;
     multiLine: boolean;
     label: string;
+    iconLabel: string;
     icon?: string;
+    iconVariant?: FtIconVariants;
     trailingIcon: boolean;
     private slottedContent?;
     static styles: import("lit").CSSResult[];
@@ -30,4 +33,3 @@ export declare class FtChip extends FtLitElement implements FtChipProperties {
     private onSlotchange;
     private get internalIcon();
 }
-//# sourceMappingURL=ft-chip.d.ts.map

package/build/ft-chip.js

@@ -12,12 +12,13 @@ import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { styles } from "./ft-chip.css";
+import { FtButton } from "@fluid-topics/ft-button";
 export class IconClickEvent extends CustomEvent {
     constructor() {
         super("icon-click");
     }
 }
-export class FtChip extends FtLitElement {
+class FtChip extends FtLitElement {
     constructor() {
         super(...arguments);
         this.highlighted = false;
@@ -28,6 +29,7 @@ export class FtChip extends FtLitElement {
         this.dense = false;
         this.multiLine = false;
         this.label = "";
+        this.iconLabel = "";
         this.icon = undefined;
         this.trailingIcon = false;
     }
@@ -63,15 +65,21 @@ export class FtChip extends FtLitElement {
         return (this.iconClickable || this.removable) && !this.disabled;
     }
     renderIcon() {
-        return html `
-            <div class="ft-chip--icon-container ft-no-text-select ${this.interactionsOnIcon ? "ft-chip--clickable" : ""}"
-                 tabindex="${this.interactionsOnIcon ? 0 : -1}"
-                 @click=${this.onIconClick}
-                 @keyup=${this.onIconKeyUp}>
-                <ft-ripple ?disabled=${!this.interactionsOnIcon}></ft-ripple>
-                <ft-icon variant="material">${this.internalIcon}</ft-icon>
-            </div>
-        `;
+        return this.interactionsOnIcon
+            ? html `
+                    <ft-button round
+                               class="ft-chip--icon-button"
+                               @click=${this.onIconClick}
+                               .iconVariant=${this.iconVariant}
+                               icon="${this.internalIcon}"
+                               label="${this.iconLabel}"
+                    ></ft-button>
+                `
+            : html `
+                    <div class="ft-chip--icon-container ft-no-text-select">
+                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
+                    </div>
+                `;
     }
     onKeyUp(e) {
         if (this.interactionsOnChip && ["Enter", " "].includes(e.key)) {
@@ -111,6 +119,7 @@ FtChip.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
+    "ft-button": FtButton,
 };
 FtChip.styles = styles;
 __decorate([
@@ -135,15 +144,21 @@ __decorate([
     property({ type: Boolean })
 ], FtChip.prototype, "multiLine", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], FtChip.prototype, "label", void 0);
 __decorate([
-    property({ type: String })
+    property()
+], FtChip.prototype, "iconLabel", void 0);
+__decorate([
+    property()
 ], FtChip.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtChip.prototype, "iconVariant", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtChip.prototype, "trailingIcon", void 0);
 __decorate([
     query("ft-typography slot")
 ], FtChip.prototype, "slottedContent", void 0);
-//# sourceMappingURL=ft-chip.js.map
+export { FtChip };