@aquera/nile-elements 0.1.7 → 0.1.9

package/dist/src/nile-avatar/nile-avatar.js

@@ -21,6 +21,10 @@ let NileAvatar = class NileAvatar extends NileElement {
         super(...arguments);
         /** Gives the url to the Avatar */
         this.src = '';
+        /** Gives the icon to the Avatar */
+        this.variant = 'text';
+        /** Gives the icon to the Avatar */
+        this.icon = 'user';
         /** Gives the default Image Letters to the Avatar */
         this.name = '';
         /** Gives the default bg color  to the Avatar */
@@ -28,19 +32,12 @@ let NileAvatar = class NileAvatar extends NileElement {
         /** Gives the default text color  to the Avatar */
         this.textColor = '#fff';
         /** Gives the default border color  to the Avatar */
-        this.borderColor = 'rgba(0, 0, 0, 0.08)';
+        this.borderColor = '';
         /** Size of the Avatar */
-        this.size = 'medium';
+        this.size = 'md';
         /** Gives a border radius of 50% to the Avatar */
-        this.isRounded = false;
-        /* #endregion */
-        /* #region Methods */
-        /**
-         * Render method
-         * @slot This is a slot test
-         */
-        this.isDefaultAvatar = true;
-        this.defaultAvatarContent = html ``;
+        this.isRounded = true;
+        this.imageError = false;
         /* #endregion */
     }
     /**
@@ -50,11 +47,13 @@ let NileAvatar = class NileAvatar extends NileElement {
     static get styles() {
         return [styles];
     }
-    generateInitials(name) {
-        if (!name) {
+    /* #endregion */
+    /* #region Methods */
+    generateInitials() {
+        if (!this.name) {
             return '';
         }
-        const nameParts = name
+        const nameParts = this.name
             .split(' ')
             .filter(part => part.length > 0)
             .map(part => part.charAt(0).toUpperCase())
@@ -69,13 +68,13 @@ let NileAvatar = class NileAvatar extends NileElement {
     }
     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';
@@ -83,16 +82,30 @@ let NileAvatar = class NileAvatar extends NileElement {
                 return '16';
         }
     }
-    handleImageError(event) {
-        const defaultInitials = this.generateInitials(this.name);
+    render() {
+        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);
+            }
+        }
+    }
+    getContentWrapped(content, defaultInitials) {
         const variant__code = this.generateVariantCode(defaultInitials);
-        this.defaultAvatarContent = html `<div
+        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,
@@ -101,47 +114,54 @@ let NileAvatar = 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>`}
+      ${content}
     </div>`;
-        this.isDefaultAvatar = false;
     }
-    render() {
+    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}"
+    />`;
     }
 };
 __decorate([
     property({ type: String, reflect: true })
 ], NileAvatar.prototype, "src", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileAvatar.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileAvatar.prototype, "icon", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NileAvatar.prototype, "name", void 0);
@@ -162,10 +182,7 @@ __decorate([
 ], NileAvatar.prototype, "isRounded", void 0);
 __decorate([
     state()
-], NileAvatar.prototype, "isDefaultAvatar", void 0);
-__decorate([
-    state()
-], NileAvatar.prototype, "defaultAvatarContent", void 0);
+], NileAvatar.prototype, "imageError", void 0);
 NileAvatar = __decorate([
     customElement('nile-avatar')
 ], NileAvatar);

package/dist/src/nile-avatar/nile-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n  /**\n   * The styles for Avatar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the url to the Avatar */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Gives the default Image Letters to the Avatar */\n  @property({ type: String, reflect: true }) name = '';\n\n  /** Gives the default bg color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor =\n    '';\n\n  /** Gives the default text color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'text-color' })\n  textColor = '#fff';\n\n  /** Gives the default border color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'border-color' })\n  borderColor = 'rgba(0, 0, 0, 0.08)';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size:\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'extralarge'\n    | '2xl' = 'medium';\n\n  /** Gives a border radius of 50% to the Avatar */\n  @property({ type: Boolean, reflect: true }) isRounded = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  @state() private isDefaultAvatar = true;\n\n  @state() private defaultAvatarContent = html``;\n\n  private generateInitials(name: String): string {\n    if (!name) {\n      return '';\n    }\n    const nameParts = name\n      .split(' ')\n      .filter(part => part.length > 0)\n      .map(part => part.charAt(0).toUpperCase())\n      .slice(0, 2);\n    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n  }\n\n  private generateVariantCode(initials: string): number {\n    const char1 = initials.charCodeAt(0);\n    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n    return multifactor % 5;\n  }\n\n  private getDefaultIconSize() {\n    switch (this.size) {\n      case 'small':\n        return '10';\n      case 'medium':\n        return '16';\n      case 'large':\n        return '20';\n      case 'extralarge':\n        return '24';\n      case '2xl':\n        return '28';\n      default:\n        return '16';\n    }\n  }\n\n  private handleImageError(event: Event): void {\n    const defaultInitials = this.generateInitials(this.name);\n    const variant__code = this.generateVariantCode(defaultInitials);\n\n    this.defaultAvatarContent = html`<div\n      class=${classMap({\n        text__avatar: true,\n        avatar__small: this.size === 'small',\n        avatar__medium: this.size === 'medium',\n        avatar__large: this.size === 'large',\n        avatar__extralarge: this.size === 'extralarge',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n        variant__orange: variant__code === 0 && !this.bgColor,\n        variant__pink: variant__code === 1 && !this.bgColor,\n        variant__blue: variant__code === 2 && !this.bgColor,\n        variant__light_blue: variant__code === 3 && !this.bgColor,\n        variant__green: variant__code === 4 && !this.bgColor,\n      })}\n      style=\"background-color: ${this.bgColor};color:${this\n        .textColor};border: 0.5px solid ${this.borderColor};\n        border-color:${defaultInitials ? 'rgba(0, 0, 0, 0.08)' : '#C7CED4'}\"\n    >\n      ${defaultInitials\n        ? defaultInitials\n        : html`<nile-icon\n            name=\"user\"\n            color=\"grey\"\n            part=\"error__icon\"\n            size=\"${this.getDefaultIconSize()}\"\n          ></nile-icon>`}\n    </div>`;\n\n    this.isDefaultAvatar = false;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.isDefaultAvatar\n        ? html` <img\n            src=\"${this.src}\"\n            class=\"avatar\"\n            class=${classMap({\n              avatar: true,\n              avatar__small: this.size === 'small',\n              avatar__medium: this.size === 'medium',\n              avatar__large: this.size === 'large',\n              avatar__extralarge: this.size === 'extralarge',\n              avatar__2xl: this.size === '2xl',\n              avatar__rounded: this.isRounded,\n            })}\n            style=\"\tbackground-image: url(${this\n              .src}), linear-gradient(lightgray, lightgray);\"\n            @error=\"${this.handleImageError}\"\n          />`\n        : html`${this.defaultAvatarContent}`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-avatar': NileAvatar;\n  }\n}\n"]}
+{"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n  /**\n   * The styles for Avatar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the url to the Avatar */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Gives the icon to the Avatar */\n  @property({ type: String, reflect: true }) variant:'icon' | 'image' | 'text' = 'text';\n\n  /** Gives the icon to the Avatar */\n  @property({ type: String, reflect: true }) icon = 'user';\n\n  /** Gives the default Image Letters to the Avatar */\n  @property({ type: String, reflect: true }) name: String = '';\n\n  /** Gives the default bg color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';\n\n  /** Gives the default text color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '#fff';\n\n  /** Gives the default border color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /** Gives a border radius of 50% to the Avatar */\n  @property({ type: Boolean, reflect: true }) isRounded = true;\n\n  @state() private imageError = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private generateInitials(): string {\n    if (!this.name) {\n      return '';\n    }\n    const nameParts = this.name\n      .split(' ')\n      .filter(part => part.length > 0)\n      .map(part => part.charAt(0).toUpperCase())\n      .slice(0, 2);\n    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n  }\n\n  private generateVariantCode(initials: string): number {\n    const char1 = initials.charCodeAt(0);\n    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n    return multifactor % 5;\n  }\n\n  private getDefaultIconSize() {\n    switch (this.size) {\n      case 'sm':\n        return '10';\n      case 'md':\n        return '16';\n      case 'lg':\n        return '20';\n      case 'xl':\n        return '24';\n      case '2xl':\n        return '28';\n      default:\n        return '16';\n    }\n  }\n\n  public render(): TemplateResult {\n    if('image'==this.variant && !this.imageError){\n      return this.getImageContent()\n    }\n    else{\n      const defaultInitials = this.generateInitials();\n      if('text'==this.variant && defaultInitials){\n        return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n      }\n      else{\n        return this.getContentWrapped(this.getIconContent(),defaultInitials)\n      }\n    }\n  }\n\n  getContentWrapped(content:TemplateResult,defaultInitials:string){\n    const variant__code = this.generateVariantCode(defaultInitials);\n    return html`\n    <div\n      class=${classMap({\n        text__avatar: true,\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n        variant__orange: variant__code === 0 && !this.bgColor,\n        variant__pink: variant__code === 1 && !this.bgColor,\n        variant__blue: variant__code === 2 && !this.bgColor,\n        variant__light_blue: variant__code === 3 && !this.bgColor,\n        variant__green: variant__code === 4 && !this.bgColor,\n      })}\n      part=\"avatar__content\"\n      style=\"\n        background-color: ${this.bgColor};\n        color:${this.textColor};\n        border: 1px solid ${this.borderColor};\n        border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}\"\n    >\n      ${content}\n    </div>`\n  }\n\n  getIconContent(){\n    return html`\n    <nile-icon\n      name=\"${this.icon}\"\n      color=\"${this.textColor && \"#fff\"!==this.textColor?this.textColor:'var(--nile-colors-dark-500)'}\"\n      size=\"${this.getDefaultIconSize()}\"\n    ></nile-icon>`\n  }\n\n  getImageContent(){\n    return html` \n    <img\n      src=\"${this.src}\"\n      class=\"avatar\"\n      class=${classMap({\n        avatar: true,\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n      })}\n      part=\"avatar__image\"\n      style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n      @error=\"${()=>this.imageError=true}\"\n      @load=\"${()=>this.imageError=false}\"\n    />`\n  }\n\n  /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-avatar': NileAvatar;\n  }\n}\n"]}

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

@@ -1 +1,2 @@
 import './nile-avatar';
+import '../nile-icon';

package/dist/src/nile-avatar/nile-avatar.test.js

@@ -1,58 +1,92 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import './nile-avatar';
+import '../nile-icon';
+const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
 describe('NileAvatar', () => {
-    it('should display an image when the src is provided', async () => {
-        const el = await fixture(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(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(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(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(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(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(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(html `<nile-avatar size="large"></nile-avatar>`);
-        const img = el.shadowRoot.querySelector('img');
-        expect(img).to.have.class('avatar__large');
+        const el = await fixture(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(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(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(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(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(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(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(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(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;
+    });
 });
 //# sourceMappingURL=nile-avatar.test.js.map

package/dist/src/nile-avatar/nile-avatar.test.js.map

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

package/dist/src/nile-code-editor/nile-code-editor.css.js

@@ -45,13 +45,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;
   }
 `;
 export default [styles];

package/dist/src/nile-code-editor/nile-code-editor.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CodeEditor CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .code-mirror {\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: row-reverse;\n    padding: 5px;\n    border-radius: 5px;\n    border: 1px solid rgb(204, 204, 204);\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width:none;\n  }\n\n  .error {\n    border-color: #e5434d;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .ͼ1.cm-focused {\n    outline: none;\n  }\n\n  .code-editor__icon__container {\n    display: none;\n  }\n  \n  .code-mirror:hover > .code-editor__icon__container {\n    cursor: pointer;\n    display: flex;\n    align-self: start;\n    padding: 5px 5px 0px 0px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CodeEditor CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .code-mirror {\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: row-reverse;\n    padding: 5px;\n    border-radius: 5px;\n    border: 1px solid rgb(204, 204, 204);\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width:none;\n  }\n\n  .error {\n    border-color: #e5434d;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .ͼ1.cm-focused {\n    outline: none;\n  }\n\n  .code-editor__icon__container {\n    display: none;\n    cursor: pointer;\n    align-self: start;\n    padding: 5px 5px 0px 0px;\n  }\n  \n  .code-mirror:hover > .code-editor__icon__container {\n    display: flex;\n  }\n`;\n\nexport default [styles];\n"]}