@aquera/nile-elements 0.1.7 → 0.1.9

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

@@ -1,65 +1,116 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import './nile-avatar';
-import {NileAvatar} from './nile-avatar';
+import '../nile-icon'
+import { NileAvatar } from './nile-avatar';
+const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
+
 
 describe('NileAvatar', () => {
-  it('should display an image when the src is provided', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar src="https://example.com/avatar.png"></nile-avatar>`);
+  it('should display an image when the src is provided and variant is "image"', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar src="https://example.com/avatar.png" variant="image"></nile-avatar>`
+    );
     const img = el.shadowRoot!.querySelector('img');
     expect(img).to.exist;
     expect(img!.getAttribute('src')).to.equal('https://example.com/avatar.png');
   });
 
-  it('should display initials when the image fails to load and name is provided', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar name="John Doe"></nile-avatar>`);
+  it('should fall back to text initials when image fails to load and variant is "text"', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar name="John Doe" variant="image" src="https://example.com/avatar.png"></nile-avatar>`
+    );
     const img = el.shadowRoot!.querySelector('img');
     img!.dispatchEvent(new Event('error'));
     await el.updateComplete;
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    expect(icon!.getAttribute('name')).to.equal('user');
+  });
+
+  it('should display initials when variant is "text" and name is provided', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar name="John Doe" variant="text"></nile-avatar>`
+    );
     const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
     expect(initialsDiv).to.exist;
     expect(initialsDiv!.textContent!.trim()).to.equal('JD');
   });
 
-  it('should use provided background and text colors when bg-color and text-color are set', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar name="John Doe" bg-color="#ff0000" text-color="#00ff00"></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    img!.dispatchEvent(new Event('error'));
-    await el.updateComplete;
-    const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
-    expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');
-    expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');
+  it('should display an icon when variant is "icon"', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar variant="icon" icon="user"></nile-avatar>`
+    );
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    expect(icon!.getAttribute('name')).to.equal('user');
   });
 
   it('should apply the appropriate size class based on the size property', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar size="large"></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    expect(img).to.have.class('avatar__large');
+    const el = await fixture<NileAvatar>(html`<nile-avatar size="lg"></nile-avatar>`);
+    const div = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('img');
+    expect(div).to.have.class('avatar__large');
   });
 
-  it('should have rounded class when isRounded is true', async () => {
+  it('should have the rounded class when isRounded is true', async () => {
     const el = await fixture<NileAvatar>(html`<nile-avatar isRounded></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    expect(img).to.have.class('avatar__rounded');
-  });
-
-  it('should display a default icon when image fails to load and no name is provided', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    img!.dispatchEvent(new Event('error'));
-    await el.updateComplete;
-    const defaultIcon = el.shadowRoot!.querySelector('nile-icon');
-    expect(defaultIcon).to.exist;
-    expect(defaultIcon!.getAttribute('name')).to.equal('user');
+    const div = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('img');
+    expect(div).to.have.class('avatar__rounded');
   });
 
-  it('should reflect properties to attributes', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar src="https://example.com/avatar.png" name="Jane Doe" bg-color="#123456" text-color="#654321" border-color="#abcdef" size="small" isRounded></nile-avatar>`);
+  it('should reflect properties to attributes correctly', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar
+        src="https://example.com/avatar.png"
+        name="Jane Doe"
+        bg-color="#123456"
+        text-color="#654321"
+        border-color="#abcdef"
+        size="sm"
+        isRounded
+        variant="image"
+        icon="user"
+      ></nile-avatar>`
+    );
     expect(el.getAttribute('src')).to.equal('https://example.com/avatar.png');
     expect(el.getAttribute('name')).to.equal('Jane Doe');
     expect(el.getAttribute('bg-color')).to.equal('#123456');
     expect(el.getAttribute('text-color')).to.equal('#654321');
     expect(el.getAttribute('border-color')).to.equal('#abcdef');
-    expect(el.getAttribute('size')).to.equal('small');
+    expect(el.getAttribute('size')).to.equal('sm');
+    expect(el.getAttribute('variant')).to.equal('image');
+    expect(el.getAttribute('icon')).to.equal('user');
     expect(el.hasAttribute('isRounded')).to.be.true;
   });
-});
+
+  it('should use provided background and text colors when bg-color and text-color are set', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar name="John Doe" bg-color="#ff0000" text-color="#00ff00"></nile-avatar>`
+    );
+    const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
+    expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');
+    expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');
+  });
+
+  it('should display a default icon when variant is "icon" and icon is not provided', async () => {
+    const el = await fixture<NileAvatar>(html`<nile-avatar variant="icon"></nile-avatar>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    expect(icon!.getAttribute('name')).to.equal('user');
+  });
+
+  it('should use the default initials if name is not provided and variant is "text"', async () => {
+    const el = await fixture<NileAvatar>(html`<nile-avatar variant="text"></nile-avatar>`);
+    const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
+    expect(initialsDiv).to.exist;
+    expect(initialsDiv!.textContent!.trim()).to.equal('');
+  });
+
+  it('should handle image error gracefully by switching to fallback content', async () => {
+    const el = await fixture<NileAvatar>(html`<nile-avatar variant="image" src="invalid_url"></nile-avatar>`);
+    const img = el.shadowRoot!.querySelector('img');
+    img!.dispatchEvent(new Event('error'));
+    await el.updateComplete;
+    const fallbackContent = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('nile-icon');
+    expect(fallbackContent).to.exist;
+  });
+});

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 */

package/src/nile-code-editor/nile-code-editor.css.ts

@@ -47,13 +47,13 @@ export const styles = css`
 
   .code-editor__icon__container {
     display: none;
+    cursor: pointer;
+    align-self: start;
+    padding: 5px 5px 0px 0px;
   }
   
   .code-mirror:hover > .code-editor__icon__container {
-    cursor: pointer;
     display: flex;
-    align-self: start;
-    padding: 5px 5px 0px 0px;
   }
 `;