@aquera/nile-elements 0.1.6 → 0.1.8

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":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;QASL,kCAAkC;QACS,QAAG,GAAG,EAAE,CAAC;QAEpD,mCAAmC;QACQ,YAAO,GAA6B,MAAM,CAAC;QAEtF,mCAAmC;QACQ,SAAI,GAAG,MAAM,CAAC;QAEzD,oDAAoD;QACT,SAAI,GAAW,EAAE,CAAC;QAE7D,gDAAgD;QACkB,YAAO,GAAG,EAAE,CAAC;QAE/E,kDAAkD;QACkB,cAAS,GAAG,MAAM,CAAC;QAEvF,oDAAoD;QACkB,gBAAW,GAAG,EAAE,CAAC;QAEvF,yBAAyB;QACI,SAAI,GAAwC,IAAI,CAAC;QAE9E,iDAAiD;QACL,cAAS,GAAG,IAAI,CAAC;QAE5C,eAAU,GAAG,KAAK,CAAC;QAoHpC,gBAAgB;IAClB,CAAC;IAxJC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IA+BD,gBAAgB;IAEhB,qBAAqB;IAEb,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI;aACxB,KAAK,CAAC,GAAG,CAAC;aACV,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;aAC/B,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;aACzC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACf,OAAO,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3E,CAAC;IAEO,mBAAmB,CAAC,QAAgB;QAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACpE,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;QAChE,OAAO,WAAW,GAAG,CAAC,CAAC;IACzB,CAAC;IAEO,kBAAkB;QACxB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd;gBACE,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,IAAG,OAAO,IAAE,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,EAAC,CAAC;YAC5C,OAAO,IAAI,CAAC,eAAe,EAAE,CAAA;QAC/B,CAAC;aACG,CAAC;YACH,MAAM,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAChD,IAAG,MAAM,IAAE,IAAI,CAAC,OAAO,IAAI,eAAe,EAAC,CAAC;gBAC1C,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAA,GAAG,eAAe,EAAE,EAAC,eAAe,CAAC,CAAC;YAC1E,CAAC;iBACG,CAAC;gBACH,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,EAAE,EAAC,eAAe,CAAC,CAAA;YACtE,CAAC;QACH,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,OAAsB,EAAC,eAAsB;QAC7D,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;QAChE,OAAO,IAAI,CAAA;;cAED,QAAQ,CAAC;YACf,YAAY,EAAE,IAAI;YAClB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAClC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACtC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;YAChC,eAAe,EAAE,IAAI,CAAC,SAAS;YAC/B,eAAe,EAAE,aAAa,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YACrD,aAAa,EAAE,aAAa,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YACnD,aAAa,EAAE,aAAa,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YACnD,mBAAmB,EAAE,aAAa,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YACzD,cAAc,EAAE,aAAa,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;SACrD,CAAC;;;4BAGoB,IAAI,CAAC,OAAO;gBACxB,IAAI,CAAC,SAAS;4BACF,IAAI,CAAC,WAAW;uBACrB,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,gCAAgC;;QAEzF,OAAO;WACJ,CAAA;IACT,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,IAAI;eACR,IAAI,CAAC,SAAS,IAAI,MAAM,KAAG,IAAI,CAAC,SAAS,CAAA,CAAC,CAAA,IAAI,CAAC,SAAS,CAAA,CAAC,CAAA,6BAA6B;cACvF,IAAI,CAAC,kBAAkB,EAAE;kBACrB,CAAA;IAChB,CAAC;IAED,eAAe;QACb,OAAO,IAAI,CAAA;;aAEF,IAAI,CAAC,GAAG;;cAEP,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAClC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACtC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;YAChC,eAAe,EAAE,IAAI,CAAC,SAAS;SAChC,CAAC;;sCAE8B,IAAI,CAAC,GAAG;gBAC9B,GAAE,EAAE,CAAA,IAAI,CAAC,UAAU,GAAC,IAAI;eACzB,GAAE,EAAE,CAAA,IAAI,CAAC,UAAU,GAAC,KAAK;OACjC,CAAA;IACL,CAAC;CAGF,CAAA;AA/I4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAU;AAGT;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA4C;AAG3C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAe;AAGd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAmB;AAGK;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;2CAAc;AAGX;IAAnE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CAAoB;AAGjB;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;+CAAkB;AAG1D;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkD;AAGlC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAE5C;IAAhB,KAAK,EAAE;8CAA4B;AApCzB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyJtB;;AAED,eAAe,UAAU,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 {\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"]}