@aquera/nile-elements 0.1.7 → 0.1.8

package/README.md

@@ -79,6 +79,11 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 0.1.8
+- Nile Avatar - Design, documentation and variants updates, 
+- Nile Css Toolbar token update
+- Dependency nile 0.3.53
+
 #### Version 0.1.7
 - Nile Css tokens updates
 - Dependency nile 0.3.52

package/demo/variables.css

@@ -41,7 +41,7 @@
   --nile-tooltip-font-size-sm: 10.24px;
   --nile-tooltip-font-size-lg: 12px;
   --nile-tooltip-color-background: var(--nile-colors-dark-900);
-  --nile-toolbar-text-color: #43ff64d9;
+  --nile-toolbar-text-color: var(--nile-colors-dark-900);
   --nile-toolbar-line-height: 30px;
   --nile-toolbar-font-weight: 500;
   --nile-toolbar-font-size: 20px;

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

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","./nile-avatar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,r,a,e,i,s,l,o,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,n;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){r=_lit.html;},function(_litDecoratorsJs){a=_litDecoratorsJs.property;e=_litDecoratorsJs.state;i=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){s=_litDirectivesClassMapJs.classMap;},function(_nileAvatarCssCjsJs){l=_nileAvatarCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",n=/*#__PURE__*/function(_o){function n(){var _this;_classCallCheck(this,n);_this=_callSuper(this,n,arguments),_this.src="",_this.name="",_this.bgColor="",_this.textColor="#fff",_this.borderColor="rgba(0, 0, 0, 0.08)",_this.size="medium",_this.isRounded=!1,_this.isDefaultAvatar=!0,_this.defaultAvatarContent=r(_templateObject||(_templateObject=_taggedTemplateLiteral([""])));return _this;}_inherits(n,_o);return _createClass(n,[{key:"generateInitials",value:function generateInitials(t){if(!t)return"";var r=t.split(" ").filter(function(t){return t.length>0;}).map(function(t){return t.charAt(0).toUpperCase();}).slice(0,2);return r.length>1?r[0]+r[1]:r[0];}},{key:"generateVariantCode",value:function generateVariantCode(t){var r=t.charCodeAt(0),a=1==t.length?r:t.charCodeAt(1);return(r*a+r%23+a%23)%5;}},{key:"getDefaultIconSize",value:function getDefaultIconSize(){switch(this.size){case"small":return"10";case"medium":default:return"16";case"large":return"20";case"extralarge":return"24";case"2xl":return"28";}}},{key:"handleImageError",value:function handleImageError(t){var a=this.generateInitials(this.name),e=this.generateVariantCode(a);this.defaultAvatarContent=r(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div\n      class=","\n      style=\"background-color: ",";color:",";border: 0.5px solid ",";\n        border-color:","\"\n    >\n      ","\n    </div>"])),s({text__avatar:!0,avatar__small:"small"===this.size,avatar__medium:"medium"===this.size,avatar__large:"large"===this.size,avatar__extralarge:"extralarge"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded,variant__orange:0===e&&!this.bgColor,variant__pink:1===e&&!this.bgColor,variant__blue:2===e&&!this.bgColor,variant__light_blue:3===e&&!this.bgColor,variant__green:4===e&&!this.bgColor}),this.bgColor,this.textColor,this.borderColor,a?"rgba(0, 0, 0, 0.08)":"#C7CED4",a||r(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<nile-icon\n            name=\"user\"\n            color=\"grey\"\n            part=\"error__icon\"\n            size=\"","\"\n          ></nile-icon>"])),this.getDefaultIconSize())),this.isDefaultAvatar=!1;}},{key:"render",value:function render(){return r(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n      ","\n    "])),this.isDefaultAvatar?r(_templateObject5||(_templateObject5=_taggedTemplateLiteral([" <img\n            src=\"","\"\n            class=\"avatar\"\n            class=","\n            style=\"\tbackground-image: url(","), linear-gradient(lightgray, lightgray);\"\n            @error=\"","\"\n          />"])),this.src,s({avatar:!0,avatar__small:"small"===this.size,avatar__medium:"medium"===this.size,avatar__large:"large"===this.size,avatar__extralarge:"extralarge"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded}),this.src,this.handleImageError):r(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["",""])),this.defaultAvatarContent));}}],[{key:"styles",get:function get(){return[l];}}]);}(o));t([a({type:String,reflect:!0})],n.prototype,"src",void 0),t([a({type:String,reflect:!0})],n.prototype,"name",void 0),t([a({type:String,reflect:!0,attribute:"bg-color"})],n.prototype,"bgColor",void 0),t([a({type:String,reflect:!0,attribute:"text-color"})],n.prototype,"textColor",void 0),t([a({type:String,reflect:!0,attribute:"border-color"})],n.prototype,"borderColor",void 0),t([a({reflect:!0})],n.prototype,"size",void 0),t([a({type:Boolean,reflect:!0})],n.prototype,"isRounded",void 0),t([e()],n.prototype,"isDefaultAvatar",void 0),t([e()],n.prototype,"defaultAvatarContent",void 0),_export("N",n=t([i("nile-avatar")],n));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","./nile-avatar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,r,e,i,a,s,o,l,_templateObject,_templateObject2,_templateObject3,_templateObject4,n;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){r=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;i=_litDecoratorsJs.state;a=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){s=_litDirectivesClassMapJs.classMap;},function(_nileAvatarCssCjsJs){o=_nileAvatarCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",n=/*#__PURE__*/function(_l){function n(){var _this;_classCallCheck(this,n);_this=_callSuper(this,n,arguments),_this.src="",_this.variant="text",_this.icon="user",_this.name="",_this.bgColor="",_this.textColor="#fff",_this.borderColor="",_this.size="md",_this.isRounded=!0,_this.imageError=!1;return _this;}_inherits(n,_l);return _createClass(n,[{key:"generateInitials",value:function generateInitials(){if(!this.name)return"";var t=this.name.split(" ").filter(function(t){return t.length>0;}).map(function(t){return t.charAt(0).toUpperCase();}).slice(0,2);return t.length>1?t[0]+t[1]:t[0];}},{key:"generateVariantCode",value:function generateVariantCode(t){var r=t.charCodeAt(0),e=1==t.length?r:t.charCodeAt(1);return(r*e+r%23+e%23)%5;}},{key:"getDefaultIconSize",value:function getDefaultIconSize(){switch(this.size){case"sm":return"10";case"md":default:return"16";case"lg":return"20";case"xl":return"24";case"2xl":return"28";}}},{key:"render",value:function render(){if("image"!=this.variant||this.imageError){var _t=this.generateInitials();return"text"==this.variant&&_t?this.getContentWrapped(r(_templateObject||(_templateObject=_taggedTemplateLiteral(["",""])),_t),_t):this.getContentWrapped(this.getIconContent(),_t);}return this.getImageContent();}},{key:"getContentWrapped",value:function getContentWrapped(t,e){var i=this.generateVariantCode(e);return r(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n    <div\n      class=","\n      part=\"avatar__content\"\n      style=\"\n        background-color: ",";\n        color:",";\n        border: 1px solid ",";\n        border-color:","\"\n    >\n      ","\n    </div>"])),s({text__avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded,variant__orange:0===i&&!this.bgColor,variant__pink:1===i&&!this.bgColor,variant__blue:2===i&&!this.bgColor,variant__light_blue:3===i&&!this.bgColor,variant__green:4===i&&!this.bgColor}),this.bgColor,this.textColor,this.borderColor,e?"".concat(this.borderColor):"var(--nile-colors-neutral-500)",t);}},{key:"getIconContent",value:function getIconContent(){return r(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n    <nile-icon\n      name=\"","\"\n      color=\"","\"\n      size=\"","\"\n    ></nile-icon>"])),this.icon,this.textColor&&"#fff"!==this.textColor?this.textColor:"var(--nile-colors-dark-500)",this.getDefaultIconSize());}},{key:"getImageContent",value:function getImageContent(){var _this2=this;return r(_templateObject4||(_templateObject4=_taggedTemplateLiteral([" \n    <img\n      src=\"","\"\n      class=\"avatar\"\n      class=","\n      part=\"avatar__image\"\n      style=\"\tbackground-image: url(","), linear-gradient(lightgray, lightgray);\"\n      @error=\"","\"\n      @load=\"","\"\n    />"])),this.src,s({avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded}),this.src,function(){return _this2.imageError=!0;},function(){return _this2.imageError=!1;});}}],[{key:"styles",get:function get(){return[o];}}]);}(l));t([e({type:String,reflect:!0})],n.prototype,"src",void 0),t([e({type:String,reflect:!0})],n.prototype,"variant",void 0),t([e({type:String,reflect:!0})],n.prototype,"icon",void 0),t([e({type:String,reflect:!0})],n.prototype,"name",void 0),t([e({type:String,reflect:!0,attribute:"bg-color"})],n.prototype,"bgColor",void 0),t([e({type:String,reflect:!0,attribute:"text-color"})],n.prototype,"textColor",void 0),t([e({type:String,reflect:!0,attribute:"border-color"})],n.prototype,"borderColor",void 0),t([e({reflect:!0})],n.prototype,"size",void 0),t([e({type:Boolean,reflect:!0})],n.prototype,"isRounded",void 0),t([i()],n.prototype,"imageError",void 0),_export("N",n=t([a("nile-avatar")],n));}};});
 //# sourceMappingURL=nile-avatar.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.ts"],"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"],"names":["NileAvatar","n","this","src","name","bgColor","textColor","borderColor","size","isRounded","isDefaultAvatar","defaultAvatarContent","html","_templateObject","_taggedTemplateLiteral","_this","_inherits","_o","_createClass","key","value","generateInitials","nameParts","split","filter","part","length","map","charAt","toUpperCase","slice","generateVariantCode","initials","char1","charCodeAt","char2","getDefaultIconSize","handleImageError","event","defaultInitials","variant__code","_templateObject2","classMap","text__avatar","avatar__small","avatar__medium","avatar__large","avatar__extralarge","avatar__2xl","avatar__rounded","variant__orange","variant__pink","variant__blue","variant__light_blue","variant__green","_templateObject3","render","_templateObject4","_templateObject5","avatar","_templateObject6","__decorate","get","styles","NileElement","property","type","String","reflect","prototype","attribute","Boolean","state","_export","customElement"],"mappings":"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"}
+{"version":3,"file":"nile-avatar.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.ts"],"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"],"names":["NileAvatar","_l","n","constructor","this","src","variant","icon","name","bgColor","textColor","borderColor","size","isRounded","imageError","_this","_inherits","_createClass","key","value","generateInitials","nameParts","split","filter","part","length","map","charAt","toUpperCase","slice","generateVariantCode","initials","char1","charCodeAt","char2","getDefaultIconSize","render","defaultInitials","getContentWrapped","html","_templateObject","_taggedTemplateLiteral","getIconContent","getImageContent","content","variant__code","_templateObject2","classMap","text__avatar","avatar__small","avatar__medium","avatar__large","avatar__extralarge","avatar__2xl","avatar__rounded","variant__orange","variant__pink","variant__blue","variant__light_blue","variant__green","concat","_templateObject3","_this2","_templateObject4","avatar","get","styles","NileElement","__decorate","property","type","String","reflect","prototype","attribute","Boolean","state","customElement"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\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);\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    border-radius: 4px;\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);\n    border-radius: 4px;\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-avatar.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.css.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"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  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\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);\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-avatar.css.cjs.js","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"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  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    border-radius: 4px;\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);\n    border-radius: 4px;\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -8,6 +8,7 @@ import{css as a}from"lit";const r=a`
     font-style: normal;
     font-weight: 600;
     color: var(--nile-colors-white-base);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -19,6 +20,7 @@ import{css as a}from"lit";const r=a`
   .avatar {
     box-sizing: border-box;
     border: 0.5px solid var(--nile-colors-neutral-500);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;

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

@@ -1,20 +1,26 @@
-import{__decorate as t}from"tslib";import{html as r}from"lit";import{property as a,state as e,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{s as l}from"./nile-avatar.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";let n=class extends o{constructor(){super(...arguments),this.src="",this.name="",this.bgColor="",this.textColor="#fff",this.borderColor="rgba(0, 0, 0, 0.08)",this.size="medium",this.isRounded=!1,this.isDefaultAvatar=!0,this.defaultAvatarContent=r``}static get styles(){return[l]}generateInitials(t){if(!t)return"";const r=t.split(" ").filter((t=>t.length>0)).map((t=>t.charAt(0).toUpperCase())).slice(0,2);return r.length>1?r[0]+r[1]:r[0]}generateVariantCode(t){const r=t.charCodeAt(0),a=1==t.length?r:t.charCodeAt(1);return(r*a+r%23+a%23)%5}getDefaultIconSize(){switch(this.size){case"small":return"10";case"medium":default:return"16";case"large":return"20";case"extralarge":return"24";case"2xl":return"28"}}handleImageError(t){const a=this.generateInitials(this.name),e=this.generateVariantCode(a);this.defaultAvatarContent=r`<div
-      class=${s({text__avatar:!0,avatar__small:"small"===this.size,avatar__medium:"medium"===this.size,avatar__large:"large"===this.size,avatar__extralarge:"extralarge"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded,variant__orange:0===e&&!this.bgColor,variant__pink:1===e&&!this.bgColor,variant__blue:2===e&&!this.bgColor,variant__light_blue:3===e&&!this.bgColor,variant__green:4===e&&!this.bgColor})}
-      style="background-color: ${this.bgColor};color:${this.textColor};border: 0.5px solid ${this.borderColor};
-        border-color:${a?"rgba(0, 0, 0, 0.08)":"#C7CED4"}"
+import{__decorate as t}from"tslib";import{html as r}from"lit";import{property as e,state as i,customElement as a}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{s as o}from"./nile-avatar.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let n=class extends l{constructor(){super(...arguments),this.src="",this.variant="text",this.icon="user",this.name="",this.bgColor="",this.textColor="#fff",this.borderColor="",this.size="md",this.isRounded=!0,this.imageError=!1}static get styles(){return[o]}generateInitials(){if(!this.name)return"";const t=this.name.split(" ").filter((t=>t.length>0)).map((t=>t.charAt(0).toUpperCase())).slice(0,2);return t.length>1?t[0]+t[1]:t[0]}generateVariantCode(t){const r=t.charCodeAt(0),e=1==t.length?r:t.charCodeAt(1);return(r*e+r%23+e%23)%5}getDefaultIconSize(){switch(this.size){case"sm":return"10";case"md":default:return"16";case"lg":return"20";case"xl":return"24";case"2xl":return"28"}}render(){if("image"!=this.variant||this.imageError){const t=this.generateInitials();return"text"==this.variant&&t?this.getContentWrapped(r`${t}`,t):this.getContentWrapped(this.getIconContent(),t)}return this.getImageContent()}getContentWrapped(t,e){const i=this.generateVariantCode(e);return r`
+    <div
+      class=${s({text__avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded,variant__orange:0===i&&!this.bgColor,variant__pink:1===i&&!this.bgColor,variant__blue:2===i&&!this.bgColor,variant__light_blue:3===i&&!this.bgColor,variant__green:4===i&&!this.bgColor})}
+      part="avatar__content"
+      style="
+        background-color: ${this.bgColor};
+        color:${this.textColor};
+        border: 1px solid ${this.borderColor};
+        border-color:${e?`${this.borderColor}`:"var(--nile-colors-neutral-500)"}"
     >
-      ${a||r`<nile-icon
-            name="user"
-            color="grey"
-            part="error__icon"
-            size="${this.getDefaultIconSize()}"
-          ></nile-icon>`}
-    </div>`,this.isDefaultAvatar=!1}render(){return r`
-      ${this.isDefaultAvatar?r` <img
-            src="${this.src}"
-            class="avatar"
-            class=${s({avatar:!0,avatar__small:"small"===this.size,avatar__medium:"medium"===this.size,avatar__large:"large"===this.size,avatar__extralarge:"extralarge"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded})}
-            style="	background-image: url(${this.src}), linear-gradient(lightgray, lightgray);"
-            @error="${this.handleImageError}"
-          />`:r`${this.defaultAvatarContent}`}
-    `}};t([a({type:String,reflect:!0})],n.prototype,"src",void 0),t([a({type:String,reflect:!0})],n.prototype,"name",void 0),t([a({type:String,reflect:!0,attribute:"bg-color"})],n.prototype,"bgColor",void 0),t([a({type:String,reflect:!0,attribute:"text-color"})],n.prototype,"textColor",void 0),t([a({type:String,reflect:!0,attribute:"border-color"})],n.prototype,"borderColor",void 0),t([a({reflect:!0})],n.prototype,"size",void 0),t([a({type:Boolean,reflect:!0})],n.prototype,"isRounded",void 0),t([e()],n.prototype,"isDefaultAvatar",void 0),t([e()],n.prototype,"defaultAvatarContent",void 0),n=t([i("nile-avatar")],n);export{n as N};
+      ${t}
+    </div>`}getIconContent(){return r`
+    <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 r` 
+    <img
+      src="${this.src}"
+      class="avatar"
+      class=${s({avatar:!0,avatar__small:"sm"===this.size,avatar__medium:"md"===this.size,avatar__large:"lg"===this.size,avatar__extralarge:"xl"===this.size,avatar__2xl:"2xl"===this.size,avatar__rounded:this.isRounded})}
+      part="avatar__image"
+      style="	background-image: url(${this.src}), linear-gradient(lightgray, lightgray);"
+      @error="${()=>this.imageError=!0}"
+      @load="${()=>this.imageError=!1}"
+    />`}};t([e({type:String,reflect:!0})],n.prototype,"src",void 0),t([e({type:String,reflect:!0})],n.prototype,"variant",void 0),t([e({type:String,reflect:!0})],n.prototype,"icon",void 0),t([e({type:String,reflect:!0})],n.prototype,"name",void 0),t([e({type:String,reflect:!0,attribute:"bg-color"})],n.prototype,"bgColor",void 0),t([e({type:String,reflect:!0,attribute:"text-color"})],n.prototype,"textColor",void 0),t([e({type:String,reflect:!0,attribute:"border-color"})],n.prototype,"borderColor",void 0),t([e({reflect:!0})],n.prototype,"size",void 0),t([e({type:Boolean,reflect:!0})],n.prototype,"isRounded",void 0),t([i()],n.prototype,"imageError",void 0),n=t([a("nile-avatar")],n);export{n as N};

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

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

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFxB,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  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\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);\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,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  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    border-radius: 4px;\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);\n    border-radius: 4px;\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -20,8 +20,12 @@ export declare class NileAvatar extends NileElement {
     static get styles(): CSSResultArray;
     /** Gives the url to the Avatar */
     src: string;
+    /** Gives the icon to the Avatar */
+    variant: 'icon' | 'image' | 'text';
+    /** Gives the icon to the Avatar */
+    icon: string;
     /** Gives the default Image Letters to the Avatar */
-    name: string;
+    name: String;
     /** Gives the default bg color  to the Avatar */
     bgColor: string;
     /** Gives the default text color  to the Avatar */
@@ -29,20 +33,17 @@ export declare class NileAvatar extends NileElement {
     /** Gives the default border color  to the Avatar */
     borderColor: string;
     /** Size of the Avatar */
-    size: 'small' | 'medium' | 'large' | 'extralarge' | '2xl';
+    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     /** Gives a border radius of 50% to the Avatar */
     isRounded: boolean;
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
-    private isDefaultAvatar;
-    private defaultAvatarContent;
+    private imageError;
     private generateInitials;
     private generateVariantCode;
     private getDefaultIconSize;
-    private handleImageError;
     render(): TemplateResult;
+    getContentWrapped(content: TemplateResult, defaultInitials: string): TemplateResult<1>;
+    getIconContent(): TemplateResult<1>;
+    getImageContent(): TemplateResult<1>;
 }
 export default NileAvatar;
 declare global {

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"]}