From eacb5dc25f213dc6f38ee9f4aca12c6fcc0980cd Mon Sep 17 00:00:00 2001
From: piitaya <paul.bottein@gmail.com>
Date: Tue, 10 May 2022 21:33:24 +0200
Subject: [PATCH] fix(chip): add avatar only support

---
 .hass_dev/views/chips-view.yaml           |  9 +++++++++
 src/cards/chips-card/chips/entity-chip.ts |  3 ++-
 src/shared/chip.ts                        | 14 ++++++++++----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/.hass_dev/views/chips-view.yaml b/.hass_dev/views/chips-view.yaml
index a3424789c..6fb495f7c 100644
--- a/.hass_dev/views/chips-view.yaml
+++ b/.hass_dev/views/chips-view.yaml
@@ -70,6 +70,15 @@ cards:
             entity: sensor.outside_temperature
             icon: mdi:tree
             icon_color: green
+      - type: custom:mushroom-chips-card
+        chips:
+          - type: entity
+            entity: person.anne_therese
+            use_entity_picture: true
+          - type: entity
+            entity: person.anne_therese
+            use_entity_picture: true
+            content_info: none
   - type: vertical-stack
     title: Light chips
     cards:
diff --git a/src/cards/chips-card/chips/entity-chip.ts b/src/cards/chips-card/chips/entity-chip.ts
index b8b1d0b77..7cbe24d5a 100644
--- a/src/cards/chips-card/chips/entity-chip.ts
+++ b/src/cards/chips-card/chips/entity-chip.ts
@@ -93,7 +93,8 @@ export class EntityChip extends LitElement implements LovelaceChip {
                     hasHold: hasAction(this._config.hold_action),
                     hasDoubleClick: hasAction(this._config.double_tap_action),
                 })}
-                avatar=${picture}
+                .avatar=${picture}
+                .avatarOnly=${picture && !content}
             >
                 ${!picture ? this.renderIcon(icon, iconColor, active) : null}
                 ${content ? html`<span>${content}</span>` : null}
diff --git a/src/shared/chip.ts b/src/shared/chip.ts
index 0d1241d0e..5598e0b43 100644
--- a/src/shared/chip.ts
+++ b/src/shared/chip.ts
@@ -1,6 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { animations } from "../utils/entity-styles";
 
 @customElement("mushroom-chip")
 export class BadgeIcon extends LitElement {
@@ -10,13 +9,19 @@ export class BadgeIcon extends LitElement {
 
     @property() public avatar: string = "";
 
+    @property() public avatarOnly: boolean = false;
+
     protected render(): TemplateResult {
         return html`
             <ha-card class="chip">
                 ${this.avatar ? html` <img class="avatar" src=${this.avatar} /> ` : null}
-                <div class="content">
-                    <slot></slot>
-                </div>
+                ${!this.avatarOnly
+                    ? html`
+                          <div class="content">
+                              <slot></slot>
+                          </div>
+                      `
+                    : null}
             </ha-card>
         `;
     }
@@ -30,6 +35,7 @@ export class BadgeIcon extends LitElement {
             .chip {
                 box-sizing: border-box;
                 height: var(--chip-height);
+                min-width: var(--chip-height);
                 font-size: var(--chip-height);
                 width: auto;
                 border-radius: var(--chip-border-radius);