@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

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

@@ -0,0 +1,111 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Avatar CSS
+ */
+export const styles = css `
+  :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .text__avatar {
+    box-sizing: border-box;
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    font-style: normal;
+    aspect-ratio: 1 / 1;
+    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));
+    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));
+    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    text-transform: uppercase;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .avatar {
+    box-sizing: border-box;
+    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    background-position: 50% 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    overflow: hidden;
+  }
+
+  .avatar__xs {
+    width: var(--nile-type-scale-4, var(--ng-height-24px));
+    height: var(--nile-type-scale-4), var(--ng-height-24px);
+    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));
+    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));
+  }
+  
+  .avatar__small {
+    width: var(--nile-type-scale-4, var(--ng-height-32px));
+    height: var(--nile-type-scale-4, var(--ng-height-32px));
+    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));
+    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));
+  }
+
+  .avatar__medium {
+    width: var(--nile-spacing-3-x, var(--ng-height-40px));
+    height: var(--nile-spacing-3-x, var(--ng-height-40px));
+    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));
+  }
+
+  .avatar__large {
+    width: var(--nile-spacing-4xl, var(--ng-height-48px));
+    height: var(--nile-spacing-4xl, var(--ng-height-48px));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
+    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));
+  }
+
+  .avatar__extralarge {
+    height: var(--nile-spacing-5xl, 56px);
+    width: var(--nile-spacing-5xl, 56px);
+    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));
+    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));
+  }
+
+  .avatar__2xl {
+    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
+    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
+    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));
+    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));
+  }
+
+  .avatar__rounded {
+    border-radius: 50%;
+  }
+
+  .variant__orange {
+    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));
+  }
+
+  .variant__pink {
+    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));
+  }
+
+  .variant__blue {
+    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));
+  }
+
+  .variant__light_blue {
+    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));
+  }
+
+  .variant__green {
+    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-avatar.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,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 * Avatar CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-style: normal;\n    aspect-ratio: 1 / 1;\n    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));\n    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));\n    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__xs {\n    width: var(--nile-type-scale-4, var(--ng-height-24px));\n    height: var(--nile-type-scale-4), var(--ng-height-24px);\n    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));\n    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));\n  }\n  \n  .avatar__small {\n    width: var(--nile-type-scale-4, var(--ng-height-32px));\n    height: var(--nile-type-scale-4, var(--ng-height-32px));\n    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));\n    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x, var(--ng-height-40px));\n    height: var(--nile-spacing-3-x, var(--ng-height-40px));\n    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));\n  }\n\n  .avatar__large {\n    width: var(--nile-spacing-4xl, var(--ng-height-48px));\n    height: var(--nile-spacing-4xl, var(--ng-height-48px));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));\n  }\n\n  .avatar__extralarge {\n    height: var(--nile-spacing-5xl, 56px);\n    width: var(--nile-spacing-5xl, 56px);\n    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));\n    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));\n  }\n\n  .avatar__2xl {\n    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));\n    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,196 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } 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';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-avatar
+ *
+ */
+let NileAvatar = class NileAvatar extends NileElement {
+    constructor() {
+        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 = 'var(--nile-icon-user, var(--ng-icon-user-01))';
+        /** Gives the default Image Letters to the Avatar */
+        this.name = '';
+        /** Gives the default bg color  to the Avatar */
+        this.bgColor = '';
+        /** Gives the default text color  to the Avatar */
+        this.textColor = '';
+        /** Gives the default border color  to the Avatar */
+        this.borderColor = '';
+        /** Size of the Avatar */
+        this.size = 'md';
+        /** Gives a border radius of 50% to the Avatar */
+        this.isRounded = true;
+        this.imageError = false;
+        /* #endregion */
+    }
+    /**
+     * The styles for Avatar
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    generateInitials() {
+        if (!this.name) {
+            return '';
+        }
+        const nameParts = this.name
+            .split(' ')
+            .filter(part => part.length > 0)
+            .map(part => part.charAt(0).toUpperCase())
+            .slice(0, 2);
+        return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];
+    }
+    generateVariantCode(initials) {
+        const char1 = initials.charCodeAt(0);
+        const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);
+        const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);
+        return multifactor % 5;
+    }
+    getDefaultIconSize() {
+        switch (this.size) {
+            case 'xs':
+                return '6';
+            case 'sm':
+                return '10';
+            case 'md':
+                return '16';
+            case 'lg':
+                return '20';
+            case 'xl':
+                return '24';
+            case '2xl':
+                return '28';
+            default:
+                return '16';
+        }
+    }
+    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);
+        return html `
+    <div
+      class=${classMap({
+            text__avatar: true,
+            avatar__xs: this.size === 'xs',
+            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,
+            variant__pink: variant__code === 1 && !this.bgColor,
+            variant__blue: variant__code === 2 && !this.bgColor,
+            variant__light_blue: variant__code === 3 && !this.bgColor,
+            variant__green: variant__code === 4 && !this.bgColor,
+        })}
+      part="avatar__content"
+      style="
+        background-color: ${this.bgColor};
+        color:${this.textColor ? this.textColor : "var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))"};
+        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};
+        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
+    >
+      ${content}
+    </div>`;
+    }
+    getIconContent() {
+        return html `
+    <nile-icon
+      name="${this.icon}"
+      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+      color="${this.textColor ? this.textColor : 'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}"
+      size="${this.getDefaultIconSize()}"
+    ></nile-icon>`;
+    }
+    getImageContent() {
+        return html ` 
+    <img
+      src="${this.src}"
+      class="avatar"
+      class=${classMap({
+            avatar: true,
+            avatar__xs: this.size === 'xs',
+            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);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'bg-color' })
+], NileAvatar.prototype, "bgColor", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'text-color' })
+], NileAvatar.prototype, "textColor", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'border-color' })
+], NileAvatar.prototype, "borderColor", void 0);
+__decorate([
+    property({ reflect: true })
+], NileAvatar.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAvatar.prototype, "isRounded", void 0);
+__decorate([
+    state()
+], NileAvatar.prototype, "imageError", void 0);
+NileAvatar = __decorate([
+    customElement('nile-avatar')
+], NileAvatar);
+export { NileAvatar };
+export default NileAvatar;
+//# sourceMappingURL=nile-avatar.js.map

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

@@ -0,0 +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  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 = 'var(--nile-icon-user, var(--ng-icon-user-01))';\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 = '';\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: 'xs' | '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 'xs':\n        return '6';\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__xs: this.size === 'xs',\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?this.textColor:\"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))\"};\n        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};\n        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}\"\n    >\n      ${content}\n    </div>`\n  }\n\n  getIconContent(){\n    return html`\n    <nile-icon\n      name=\"${this.icon}\"\n      method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n      color=\"${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-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__xs: this.size === 'xs',\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.js

@@ -0,0 +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 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 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 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="lg"></nile-avatar>`);
+        const div = el.shadowRoot.querySelector('.text__avatar') || el.shadowRoot.querySelector('img');
+        expect(div).to.have.class('avatar__large');
+    });
+    it('should have the rounded class when isRounded is true', async () => {
+        const el = await fixture(html `<nile-avatar isRounded></nile-avatar>`);
+        const div = el.shadowRoot.querySelector('.text__avatar') || el.shadowRoot.querySelector('img');
+        expect(div).to.have.class('avatar__rounded');
+    });
+    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('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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-avatar.test.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAA;AAErB,MAAM,IAAI,GAAC,CAAC,KAAU,KAAK,EAAC,EAAE,CAAA,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;AAG7E,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,yEAAyE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,kFAAkF,CACvF,CAAC;QACF,MAAM,GAAG,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACrB,MAAM,CAAC,GAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kFAAkF,EAAE,KAAK,IAAI,EAAE;QAChG,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,kGAAkG,CACvG,CAAC;QACF,MAAM,GAAG,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,GAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACvC,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACvD,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACtB,MAAM,CAAC,IAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACnF,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,4DAA4D,CACjE,CAAC;QACF,MAAM,WAAW,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAClE,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAY,CAAC,WAAY,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,wDAAwD,CAC7D,CAAC;QACF,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACvD,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACtB,MAAM,CAAC,IAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,uCAAuC,CAAC,CAAC;QAClF,MAAM,GAAG,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,uCAAuC,CAAC,CAAC;QAClF,MAAM,GAAG,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;;;;;;;;;;sBAUY,CACjB,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;QAC1E,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACxD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1D,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC5D,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC/C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACjD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qFAAqF,EAAE,KAAK,IAAI,EAAE;QACnG,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,qFAAqF,CAC1F,CAAC;QACF,MAAM,WAAW,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAClE,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;QACxE,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;QAC7F,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,4CAA4C,CAAC,CAAC;QACvF,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACvD,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACtB,MAAM,CAAC,IAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;QAC7F,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,4CAA4C,CAAC,CAAC;QACvF,MAAM,WAAW,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAClE,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAY,CAAC,WAAY,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACrF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,+DAA+D,CAAC,CAAC;QAC1G,MAAM,GAAG,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,GAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACvC,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,eAAe,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACnH,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IACnC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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-badge/index.js

@@ -0,0 +1,2 @@
+export { NileBadge } from './nile-badge';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { NileBadge } from './nile-badge';\n"]}