@fluid-topics/ft-chip 1.2.49 → 1.2.51

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

@@ -9,6 +9,7 @@ export interface FtChipProperties {
     multiLine?: boolean;
     label?: string;
     iconLabel?: string;
+    hideIconTooltip?: boolean;
     icon?: string;
     iconVariant?: FtIconVariants;
     trailingIcon?: boolean;

package/build/ftds-chip.d.ts

@@ -5,6 +5,7 @@ export declare class RemoveEvent extends CustomEvent<void> {
 }
 export declare class FtdsChip extends FtdsBase implements FtdsChipProperties {
     static elementDefinitions: ElementDefinitionsMap;
+    withAction: boolean;
     removable: boolean;
     removeButtonLabel: string;
     label: string;
@@ -13,7 +14,7 @@ export declare class FtdsChip extends FtdsBase implements FtdsChipProperties {
     static styles: import("lit").CSSResult[];
     protected render(): import("lit-html").TemplateResult<1>;
     private renderIcon;
-    private renderRemoveButton;
+    private renderAction;
     private resolveButtonSize;
     private getLabel;
     get textContent(): string;

package/build/ftds-chip.js

@@ -21,6 +21,7 @@ export class RemoveEvent extends CustomEvent {
 class FtdsChip extends FtdsBase {
     constructor() {
         super(...arguments);
+        this.withAction = false;
         this.removable = false;
         this.removeButtonLabel = "Remove";
         this.label = "";
@@ -28,7 +29,7 @@ class FtdsChip extends FtdsBase {
     render() {
         const classes = {
             "ftds-chip": true,
-            "ftds-chip--removable": this.removable,
+            "ftds-chip--with-action": this.removable || this.withAction,
             "ftds-chip--with-icon": !!this.icon,
             ...this.getDesignSystemBaseClasses()
         };
@@ -40,7 +41,7 @@ class FtdsChip extends FtdsBase {
                 <ft-typography variant=${this.typographyVariant()} element="span" class="ftds-chip--label" part="label">
                     <slot @slotchange=${this.onSlotchange}></slot>
                 </ft-typography>
-                ${this.renderRemoveButton()}
+                ${this.renderAction()}
             </div>
         `;
     }
@@ -52,19 +53,23 @@ class FtdsChip extends FtdsBase {
                    </div>
                ` : nothing;
     }
-    renderRemoveButton() {
-        return this.removable ?
-            html `
-                   <ftds-button round
-                                class="ftds-chip--remove-button"
-                                @click=${this.dispatchRemoveEvent}
-                                icon=${FtIcons.X_MARK}
-                                label=${this.removeButtonLabel}
-                                family=${DesignSystemFamily.neutral}
-                                size=${this.resolveButtonSize()}
-                                part="icon-button"
-                   ></ftds-button>
-               ` : nothing;
+    renderAction() {
+        if (this.removable) {
+            return html `
+                <ftds-button round
+                             class="ftds-chip--remove-button"
+                             @click=${this.dispatchRemoveEvent}
+                             icon=${FtIcons.X_MARK}
+                             label=${this.removeButtonLabel}
+                             family=${DesignSystemFamily.neutral}
+                             size=${this.resolveButtonSize()}
+                             part="icon-button"
+                ></ftds-button>
+            `;
+        }
+        return this.withAction ? html `
+            <slot name="action"></slot>
+        ` : nothing;
     }
     resolveButtonSize() {
         switch (this.size) {
@@ -105,6 +110,9 @@ FtdsChip.elementDefinitions = {
     "ftds-button": FtdsButton,
 };
 FtdsChip.styles = designSystemStyle;
+__decorate([
+    property({ type: Boolean })
+], FtdsChip.prototype, "withAction", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtdsChip.prototype, "removable", void 0);

package/build/ftds-chip.styles.js

@@ -31,7 +31,7 @@ export const designSystemStyle = [
             ${setVariable(FtIconCssVariables.size, chip.mediumIconSize)}
         }
 
-        .ftds--size-medium.ftds-chip--removable {
+        .ftds--size-medium.ftds-chip--with-action {
             padding-right: ${chip.mediumButtonRightPadding};
         }
 
@@ -47,7 +47,7 @@ export const designSystemStyle = [
             ${setVariable(FtIconCssVariables.size, chip.largeIconSize)}
         }
 
-        .ftds--size-large.ftds-chip--removable {
+        .ftds--size-large.ftds-chip--with-action {
             padding-right: ${chip.largeButtonRightPadding};
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-chip",
-    "version": "1.2.49",
+    "version": "1.2.51",
     "description": "A generic Fluid Topics chip",
     "keywords": [
         "Lit"
@@ -20,11 +20,11 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "0.1.92",
-        "@fluid-topics/ft-icon": "1.2.49",
-        "@fluid-topics/ft-ripple": "1.2.49",
-        "@fluid-topics/ft-typography": "1.2.49",
-        "@fluid-topics/ft-wc-utils": "1.2.49",
+        "@fluid-topics/ft-icon": "1.2.51",
+        "@fluid-topics/ft-ripple": "1.2.51",
+        "@fluid-topics/ft-typography": "1.2.51",
+        "@fluid-topics/ft-wc-utils": "1.2.51",
         "lit": "3.1.0"
     },
-    "gitHead": "eac6d1d34424e5f5ca7e20068e646caeba2e15a7"
+    "gitHead": "f37803963479545409bdddea3571d34dbad90413"
 }