Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-avatar",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "tp-avatar.js",
   "scripts": {
@@ -13,6 +13,7 @@
   "author": "trading_peter",
   "license": "Apache-2.0",
   "dependencies": {
-    "lit": "^3.0.0"
+    "lit": "^3.0.0",
+    "@tp/helpers": "^1.0.0"
   }
 }

tp-avatar.js

@@ -7,8 +7,9 @@ This program is available under Apache License Version 2.0
 import '@tp/tp-icon/tp-icon.js';
 import { LitElement, html, css, svg } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { DomQuery } from '@tp/helpers/dom-query.js';
 
-class TpAvatar extends LitElement {
+class TpAvatar extends DomQuery(LitElement) {
   static get styles() {
     return [
       css`
@@ -16,6 +17,8 @@ class TpAvatar extends LitElement {
           display: inline-block;
           position: relative;
           border-radius: 50%;
+          width: var(--tp-avatar-size, 32px);
+          height: var(--tp-avatar-size, 32px);
         }
 
         :host [hidden] {
@@ -23,8 +26,8 @@ class TpAvatar extends LitElement {
         }
 
         #avatarImg {
-          width: var(--era-avatar-size, 32px);
-          height: var(--era-avatar-size, 32px);
+          width: var(--tp-avatar-size, 32px);
+          height: var(--tp-avatar-size, 32px);
           background-size: cover;
           background-position: center center;
           border-radius: 50%;
@@ -43,8 +46,8 @@ class TpAvatar extends LitElement {
 
           position: absolute;
           inset: 0;
-          --tp-icon-height: var(--ef-avatar-size, 32px);
-          --tp-icon-width: var(--ef-avatar-size, 32px);
+          --tp-icon-height: var(--tp-avatar-size, 32px);
+          --tp-icon-width: var(--tp-avatar-size, 32px);
         }
 
         tp-icon.hidden {
@@ -59,8 +62,8 @@ class TpAvatar extends LitElement {
     const { loaded, hasSrc } = this;
 
     return html`
-      <div id="avatarImg" class=${classMap({ visible: loaded, hidden: !loaded })}></div>
-      <tp-icon id="placeHolder" .icon=${TpAvatar.defaultAccountIcon} class=${classMap({ visible: !loaded || !hasSrc, hidden: loaded && hasSrc})}></tp-icon>
+      <div id="avatarImg" part="avatarImg" class=${classMap({ visible: loaded, hidden: !loaded })}></div>
+      <tp-icon id="placeHolder" part="placeholder" .icon=${TpAvatar.defaultAccountIcon} class=${classMap({ visible: !loaded || !hasSrc, hidden: loaded && hasSrc})}></tp-icon>
     `;
   }
 
@@ -88,13 +91,13 @@ class TpAvatar extends LitElement {
       if (this.src !== changes.get('src')) {
         this.hasSrc = true;
 
-        if (newSrc.indexOf(this.baseUrl) !== 0 && !this.hasSchema(newSrc)) {
+        if (this.src.indexOf(this.baseUrl) !== 0 && !this.hasSchema(this.src)) {
           this.src = this.baseUrl + this.src;
           return;
         }
 
         this.loaded = false;
-        if (Boolean(newSrc)) {
+        if (Boolean(this.src)) {
           this.loadImage();
         }
       }