@aquera/nile-elements 0.1.7 → 0.1.9

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

@@ -1,4 +1,4 @@
-import{css as e}from"lit";const o=e`
+import{css as a}from"lit";const o=a`
 
   :host {
     box-sizing: border-box;
@@ -18,76 +18,107 @@ import{css as e}from"lit";const o=e`
     display: block;
   }
 
-  .details {
-    border: solid 1px hsl(240 5.9% 90%);
-    border-radius: 0.25rem;
+  .accordian {
+    border-top:solid 1px var(--nile-colors-neutral-500);
     background-color: #FFFFFF;
     overflow-anchor: none;
   }
 
-  .details--disabled {
+  .accordian--lg{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--md{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--sm{
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
+  }
+  
+  .accordian {
+    font-size: var(--accordian-text-size);
+  }
+
+  .accordian--disabled {
     opacity: 0.5;
   }
 
-  .details__header {
+  .accordian__header {
     display: flex;
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    padding: 1rem;
+    font-weight:500;
+    padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
-  .details__header:focus {
+  .accordian__header--dark{
+    background-color:var(--nile-colors-dark-200);
+  }
+
+  .accordian__header--arrow-left{
+    flex-direction: row-reverse;
+  }
+
+  .accordian__header:focus {
     outline: none;
   }
 
-  .details__header:focus-visible {
+  .accordian__header:focus-visible {
     outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
-  .details--disabled .details__header {
+  .accordian--disabled .accordian__header {
     cursor: not-allowed;
   }
 
-  .details--disabled .details__header:focus-visible {
+  .accordian--disabled .accordian__header:focus-visible {
     outline: none;
     box-shadow: none;
   }
 
-  .details__summary {
+  .accordian__summary {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
   }
 
-  .details__summary-icon {
+  .accordian__summary-icon {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     transition: 250ms rotate ease;
   }
 
-  .details--open .details__summary-icon {
+  .accordian--open .accordian__summary-icon {
     rotate: 90deg;
   }
 
-  .details--open.details--rtl .details__summary-icon {
-    rotate: -90deg;
-  }
-
-  .details--open slot[name='expand-icon'],
-  .details:not(.details--open) slot[name='collapse-icon'] {
+  .accordian--open slot[name='expand-icon'],
+  .accordian:not(.accordian--open) slot[name='collapse-icon'] {
     display: none;
   }
 
-  .details__body {
+  .accordian__body {
     overflow: hidden;
   }
 
-  .details__content {
+  .accordian__content {
     display: block;
-    padding: 1rem;
+    padding: var(--accordian-content-padding);
+  }
+
+  .accordian__content--arrow-left{
+   margin-left:28px;
   }
 `;export{o as s};

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

@@ -1,12 +1,12 @@
-import{__decorate as i}from"tslib";import{html as t}from"lit";import{s}from"./nile-accordion.css.esm.js";import{N as e}from"../internal/nile-element.esm.js";import{s as a,a as o,b as r}from"../internal/animate.esm.js";import{classMap as n}from"lit/directives/class-map.js";import{query as l,property as h,customElement as d}from"lit/decorators.js";import{s as m,g as c}from"../utilities/animation-registry.esm.js";import{w as p}from"../internal/event.esm.js";import{w as f}from"../internal/watch.esm.js";let y=class extends e{constructor(){super(...arguments),this.open=!1,this.disabled=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.disabled||(this.open?this.hide():this.show(),this.header.focus())}handleSummaryKeyDown(i){"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==i.key&&"ArrowLeft"!==i.key||(i.preventDefault(),this.hide()),"ArrowDown"!==i.key&&"ArrowRight"!==i.key||(i.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("nile-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await a(this.body),this.body.hidden=!1;const{keyframes:i,options:t}=c(this,"details.show",{dir:"ltr"});await o(this.body,r(i,this.body.scrollHeight),t),this.body.style.height="auto",this.emit("nile-after-show")}else{if(this.emit("nile-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await a(this.body);const{keyframes:i,options:t}=c(this,"details.hide",{dir:"ltr"});await o(this.body,r(i,this.body.scrollHeight),t),this.body.hidden=!0,this.body.style.height="auto",this.emit("nile-after-hide")}}async show(){if(!this.open&&!this.disabled)return this.open=!0,p(this,"nile-after-show")}async hide(){if(this.open&&!this.disabled)return this.open=!1,p(this,"nile-after-hide")}render(){return t`
+import{__decorate as i}from"tslib";import{html as a}from"lit";import{s as t}from"./nile-accordion.css.esm.js";import{N as s}from"../internal/nile-element.esm.js";import{s as e,a as r,b as o}from"../internal/animate.esm.js";import{classMap as n}from"lit/directives/class-map.js";import{query as c,property as h,customElement as d}from"lit/decorators.js";import{s as l,g as m}from"../utilities/animation-registry.esm.js";import{w as p}from"../internal/event.esm.js";import{w as f}from"../internal/watch.esm.js";let y=class extends s{constructor(){super(...arguments),this.open=!1,this.variant="light",this.expandIconPlacement="right",this.size="md",this.disabled=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.disabled||(this.open?this.hide():this.show(),this.header.focus())}handleSummaryKeyDown(i){"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==i.key&&"ArrowLeft"!==i.key||(i.preventDefault(),this.hide()),"ArrowDown"!==i.key&&"ArrowRight"!==i.key||(i.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("nile-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await e(this.body),this.body.hidden=!1;const{keyframes:i,options:a}=m(this,"accordian.show",{dir:"ltr"});await r(this.body,o(i,this.body.scrollHeight),a),this.body.style.height="auto",this.emit("nile-after-show")}else{if(this.emit("nile-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await e(this.body);const{keyframes:i,options:a}=m(this,"accordian.hide",{dir:"ltr"});await r(this.body,o(i,this.body.scrollHeight),a),this.body.hidden=!0,this.body.style.height="auto",this.emit("nile-after-hide")}}async show(){if(!this.open&&!this.disabled)return this.open=!0,p(this,"nile-after-show")}async hide(){if(this.open&&!this.disabled)return this.open=!1,p(this,"nile-after-hide")}render(){return a`
     <div
       part="base"
-      class=${n({details:!0,"details--open":this.open,"details--disabled":this.disabled,"details--rtl":!1})}
+      class=${n({accordian:!0,"accordian--open":this.open,"accordian--disabled":this.disabled,"accordian--sm":"sm"==this.size,"accordian--md":"md"==this.size,"accordian--lg":"lg"==this.size})}
     >
       <div
         part="header"
         id="header"
-        class="details__header"
+        class="${n({accordian__header:!0,"accordian__header--dark":"dark"==this.variant,"accordian__header--arrow-left":"left"==this.expandIconPlacement})}"
         role="button"
         aria-expanded=${this.open?"true":"false"}
         aria-controls="content"
@@ -15,9 +15,9 @@ import{__decorate as i}from"tslib";import{html as t}from"lit";import{s}from"./ni
         @click=${this.handleSummaryClick}
         @keydown=${this.handleSummaryKeyDown}
       >
-        <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+        <slot name="summary" part="summary" class="accordian__summary">${this.summary}</slot>
 
-        <span part="summary-icon" class="details__summary-icon">
+        <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
             <nile-icon name="arrowright"></nile-icon>
           </slot>
@@ -27,8 +27,9 @@ import{__decorate as i}from"tslib";import{html as t}from"lit";import{s}from"./ni
         </span>
       </div>
 
-      <div class="details__body" role="region" aria-labelledby="header">
-        <slot part="content" id="content" class="details__content"></slot>
+      <div class="accordian__body" role="region" aria-labelledby="header">
+        <slot part="content" id="content" 
+          class="${n({accordian__content:!0,"accordian__content--arrow-left":"left"==this.expandIconPlacement})}"></slot>
       </div>
     </div>
-  `}};y.styles=s,i([l(".details")],y.prototype,"details",void 0),i([l(".details__header")],y.prototype,"header",void 0),i([l(".details__body")],y.prototype,"body",void 0),i([l(".details__expand-icon-slot")],y.prototype,"expandIconSlot",void 0),i([h({type:Boolean,reflect:!0})],y.prototype,"open",void 0),i([h()],y.prototype,"summary",void 0),i([h({type:Boolean,reflect:!0})],y.prototype,"disabled",void 0),i([f("open",{waitUntilFirstUpdate:!0})],y.prototype,"handleOpenChange",null),y=i([d("nile-accordion")],y),m("details.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:250,easing:"linear"}}),m("details.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:250,easing:"linear"}});export{y as N};
+  `}};y.styles=t,i([c(".accordian")],y.prototype,"accordian",void 0),i([c(".accordian__header")],y.prototype,"header",void 0),i([c(".accordian__body")],y.prototype,"body",void 0),i([c(".accordian__expand-icon-slot")],y.prototype,"expandIconSlot",void 0),i([h({type:Boolean,reflect:!0})],y.prototype,"open",void 0),i([h({reflect:!0})],y.prototype,"variant",void 0),i([h({reflect:!0})],y.prototype,"expandIconPlacement",void 0),i([h({reflect:!0})],y.prototype,"size",void 0),i([h()],y.prototype,"summary",void 0),i([h({type:Boolean,reflect:!0})],y.prototype,"disabled",void 0),i([f("open",{waitUntilFirstUpdate:!0})],y.prototype,"handleOpenChange",null),y=i([d("nile-accordion")],y),l("accordian.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:250,easing:"linear"}}),l("accordian.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:250,easing:"linear"}});export{y as N};

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};