@aquera/nile-elements 0.1.7 → 0.1.8

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-avatar/nile-avatar.css.ts

@@ -20,6 +20,7 @@ export const styles = css`
     font-style: normal;
     font-weight: 600;
     color: var(--nile-colors-white-base);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -31,6 +32,7 @@ export const styles = css`
   .avatar {
     box-sizing: border-box;
     border: 0.5px solid var(--nile-colors-neutral-500);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;

package/src/nile-avatar/nile-avatar.ts

@@ -10,13 +10,13 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  nothing,
 } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { styles } from './nile-avatar.css';
 import NileElement from '../internal/nile-element';
-import { string } from '../nile-icon/icons/svg';
 
 /**
  * Nile icon component.
@@ -37,49 +37,41 @@ export class NileAvatar extends NileElement {
   /** Gives the url to the Avatar */
   @property({ type: String, reflect: true }) src = '';
 
+  /** Gives the icon to the Avatar */
+  @property({ type: String, reflect: true }) variant:'icon' | 'image' | 'text' = 'text';
+
+  /** Gives the icon to the Avatar */
+  @property({ type: String, reflect: true }) icon = 'user';
+
   /** Gives the default Image Letters to the Avatar */
-  @property({ type: String, reflect: true }) name = '';
+  @property({ type: String, reflect: true }) name: String = '';
 
   /** Gives the default bg color  to the Avatar */
-  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor =
-    '';
+  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';
 
   /** Gives the default text color  to the Avatar */
-  @property({ type: String, reflect: true, attribute: 'text-color' })
-  textColor = '#fff';
+  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '#fff';
 
   /** Gives the default border color  to the Avatar */
-  @property({ type: String, reflect: true, attribute: 'border-color' })
-  borderColor = 'rgba(0, 0, 0, 0.08)';
+  @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';
 
   /** Size of the Avatar */
-  @property({ reflect: true }) size:
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'extralarge'
-    | '2xl' = 'medium';
+  @property({ reflect: true }) size: | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
 
   /** Gives a border radius of 50% to the Avatar */
-  @property({ type: Boolean, reflect: true }) isRounded = false;
+  @property({ type: Boolean, reflect: true }) isRounded = true;
+
+  @state() private imageError = false;
 
   /* #endregion */
 
   /* #region Methods */
 
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  @state() private isDefaultAvatar = true;
-
-  @state() private defaultAvatarContent = html``;
-
-  private generateInitials(name: String): string {
-    if (!name) {
+  private generateInitials(): string {
+    if (!this.name) {
       return '';
     }
-    const nameParts = name
+    const nameParts = this.name
       .split(' ')
       .filter(part => part.length > 0)
       .map(part => part.charAt(0).toUpperCase())
@@ -96,13 +88,13 @@ export class NileAvatar extends NileElement {
 
   private getDefaultIconSize() {
     switch (this.size) {
-      case 'small':
+      case 'sm':
         return '10';
-      case 'medium':
+      case 'md':
         return '16';
-      case 'large':
+      case 'lg':
         return '20';
-      case 'extralarge':
+      case 'xl':
         return '24';
       case '2xl':
         return '28';
@@ -111,17 +103,31 @@ export class NileAvatar extends NileElement {
     }
   }
 
-  private handleImageError(event: Event): void {
-    const defaultInitials = this.generateInitials(this.name);
-    const variant__code = this.generateVariantCode(defaultInitials);
+  public render(): TemplateResult {
+    if('image'==this.variant && !this.imageError){
+      return this.getImageContent()
+    }
+    else{
+      const defaultInitials = this.generateInitials();
+      if('text'==this.variant && defaultInitials){
+        return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);
+      }
+      else{
+        return this.getContentWrapped(this.getIconContent(),defaultInitials)
+      }
+    }
+  }
 
-    this.defaultAvatarContent = html`<div
+  getContentWrapped(content:TemplateResult,defaultInitials:string){
+    const variant__code = this.generateVariantCode(defaultInitials);
+    return html`
+    <div
       class=${classMap({
         text__avatar: true,
-        avatar__small: this.size === 'small',
-        avatar__medium: this.size === 'medium',
-        avatar__large: this.size === 'large',
-        avatar__extralarge: this.size === 'extralarge',
+        avatar__small: this.size === 'sm',
+        avatar__medium: this.size === 'md',
+        avatar__large: this.size === 'lg',
+        avatar__extralarge: this.size === 'xl',
         avatar__2xl: this.size === '2xl',
         avatar__rounded: this.isRounded,
         variant__orange: variant__code === 0 && !this.bgColor,
@@ -130,44 +136,45 @@ export class NileAvatar extends NileElement {
         variant__light_blue: variant__code === 3 && !this.bgColor,
         variant__green: variant__code === 4 && !this.bgColor,
       })}
-      style="background-color: ${this.bgColor};color:${this
-        .textColor};border: 0.5px solid ${this.borderColor};
-        border-color:${defaultInitials ? 'rgba(0, 0, 0, 0.08)' : '#C7CED4'}"
+      part="avatar__content"
+      style="
+        background-color: ${this.bgColor};
+        color:${this.textColor};
+        border: 1px solid ${this.borderColor};
+        border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}"
     >
-      ${defaultInitials
-        ? defaultInitials
-        : html`<nile-icon
-            name="user"
-            color="grey"
-            part="error__icon"
-            size="${this.getDefaultIconSize()}"
-          ></nile-icon>`}
-    </div>`;
-
-    this.isDefaultAvatar = false;
+      ${content}
+    </div>`
   }
 
-  public render(): TemplateResult {
+  getIconContent(){
     return html`
-      ${this.isDefaultAvatar
-        ? html` <img
-            src="${this.src}"
-            class="avatar"
-            class=${classMap({
-              avatar: true,
-              avatar__small: this.size === 'small',
-              avatar__medium: this.size === 'medium',
-              avatar__large: this.size === 'large',
-              avatar__extralarge: this.size === 'extralarge',
-              avatar__2xl: this.size === '2xl',
-              avatar__rounded: this.isRounded,
-            })}
-            style="	background-image: url(${this
-              .src}), linear-gradient(lightgray, lightgray);"
-            @error="${this.handleImageError}"
-          />`
-        : html`${this.defaultAvatarContent}`}
-    `;
+    <nile-icon
+      name="${this.icon}"
+      color="${this.textColor && "#fff"!==this.textColor?this.textColor:'var(--nile-colors-dark-500)'}"
+      size="${this.getDefaultIconSize()}"
+    ></nile-icon>`
+  }
+
+  getImageContent(){
+    return html` 
+    <img
+      src="${this.src}"
+      class="avatar"
+      class=${classMap({
+        avatar: true,
+        avatar__small: this.size === 'sm',
+        avatar__medium: this.size === 'md',
+        avatar__large: this.size === 'lg',
+        avatar__extralarge: this.size === 'xl',
+        avatar__2xl: this.size === '2xl',
+        avatar__rounded: this.isRounded,
+      })}
+      part="avatar__image"
+      style="	background-image: url(${this.src}), linear-gradient(lightgray, lightgray);"
+      @error="${()=>this.imageError=true}"
+      @load="${()=>this.imageError=false}"
+    />`
   }
 
   /* #endregion */