@aquera/nile-elements 0.1.59 → 0.1.60-beta-1.1

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  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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"}
+{"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 = '';\n\n  /** Gives the default border color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /** Gives a border radius of 50% to the Avatar */\n  @property({ type: Boolean, reflect: true }) isRounded = true;\n\n  @state() private imageError = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private generateInitials(): string {\n    if (!this.name) {\n      return '';\n    }\n    const nameParts = this.name\n      .split(' ')\n      .filter(part => part.length > 0)\n      .map(part => part.charAt(0).toUpperCase())\n      .slice(0, 2);\n    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n  }\n\n  private generateVariantCode(initials: string): number {\n    const char1 = initials.charCodeAt(0);\n    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n    return multifactor % 5;\n  }\n\n  private getDefaultIconSize() {\n    switch (this.size) {\n      case 'xs':\n        return '6';\n      case 'sm':\n        return '10';\n      case 'md':\n        return '16';\n      case 'lg':\n        return '20';\n      case 'xl':\n        return '24';\n      case '2xl':\n        return '28';\n      default:\n        return '16';\n    }\n  }\n\n  public render(): TemplateResult {\n    if('image'==this.variant && !this.imageError){\n      return this.getImageContent()\n    }\n    else{\n      const defaultInitials = this.generateInitials();\n      if('text'==this.variant && defaultInitials){\n        return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n      }\n      else{\n        return this.getContentWrapped(this.getIconContent(),defaultInitials)\n      }\n    }\n  }\n\n  getContentWrapped(content:TemplateResult,defaultInitials:string){\n    const variant__code = this.generateVariantCode(defaultInitials);\n    return html`\n    <div\n      class=${classMap({\n        text__avatar: true,\n        avatar__xs: this.size === 'xs',\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n        variant__orange: variant__code === 0 && !this.bgColor,\n        variant__pink: variant__code === 1 && !this.bgColor,\n        variant__blue: variant__code === 2 && !this.bgColor,\n        variant__light_blue: variant__code === 3 && !this.bgColor,\n        variant__green: variant__code === 4 && !this.bgColor,\n      })}\n      part=\"avatar__content\"\n      style=\"\n        background-color: ${this.bgColor};\n        color:${this.textColor?this.textColor:\"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500) )\"};\n        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'};\n        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}\"\n    >\n      ${content}\n    </div>`\n  }\n\n  getIconContent(){\n    return html`\n    <nile-icon\n      name=\"${this.icon}\"\n      color=\"${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}\"\n      size=\"${this.getDefaultIconSize()}\"\n    ></nile-icon>`\n  }\n\n  getImageContent(){\n    return html` \n    <img\n      src=\"${this.src}\"\n      class=\"avatar\"\n      class=${classMap({\n        avatar: true,\n        avatar__xs: this.size === 'xs',\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n      })}\n      part=\"avatar__image\"\n      style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n      @error=\"${()=>this.imageError=true}\"\n      @load=\"${()=>this.imageError=false}\"\n    />`\n  }\n\n  /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-avatar': NileAvatar;\n  }\n}\n"],"names":["NileAvatar","_n","l","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__xs","avatar__small","avatar__medium","avatar__large","avatar__extralarge","avatar__2xl","avatar__rounded","variant__orange","variant__pink","variant__blue","variant__light_blue","variant__green","_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(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}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"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",e=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-style: normal;\n    aspect-ratio: 1 / 1;\n    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));\n    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));\n    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__xs {\n    width: var(--nile-type-scale-4, var(--ng-height-24px));\n    height: var(--nile-type-scale-4), var(--ng-height-24px);\n    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));\n    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));\n  }\n  \n  .avatar__small {\n    width: var(--nile-type-scale-4, var(--ng-height-32px));\n    height: var(--nile-type-scale-4, var(--ng-height-32px));\n    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));\n    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x, var(--ng-height-40px));\n    height: var(--nile-spacing-3-x, var(--ng-height-40px));\n    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));\n  }\n\n  .avatar__large {\n    width: var(--nile-spacing-4xl, var(--ng-height-48px));\n    height: var(--nile-spacing-4xl, var(--ng-height-48px));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));\n  }\n\n  .avatar__extralarge {\n    height: var(--nile-spacing-5xl, 56px);\n    width: var(--nile-spacing-5xl, 56px);\n    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));\n    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));\n  }\n\n  .avatar__2xl {\n    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));\n    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));\n  }\n"]))));}};});
 //# 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    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":"oTAYaA,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    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-style: normal;\n    aspect-ratio: 1 / 1;\n    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));\n    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));\n    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__xs {\n    width: var(--nile-type-scale-4, var(--ng-height-24px));\n    height: var(--nile-type-scale-4), var(--ng-height-24px);\n    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));\n    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));\n  }\n  \n  .avatar__small {\n    width: var(--nile-type-scale-4, var(--ng-height-32px));\n    height: var(--nile-type-scale-4, var(--ng-height-32px));\n    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));\n    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x, var(--ng-height-40px));\n    height: var(--nile-spacing-3-x, var(--ng-height-40px));\n    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));\n  }\n\n  .avatar__large {\n    width: var(--nile-spacing-4xl, var(--ng-height-48px));\n    height: var(--nile-spacing-4xl, var(--ng-height-48px));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));\n  }\n\n  .avatar__extralarge {\n    height: var(--nile-spacing-5xl, 56px);\n    width: var(--nile-spacing-5xl, 56px);\n    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));\n    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));\n  }\n\n  .avatar__2xl {\n    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));\n    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -1,14 +1,18 @@
-import{css as a}from"lit";const r=a`
+import{css as a}from"lit";const e=a`
   :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .text__avatar {
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
     font-style: normal;
-    font-weight: 600;
-    color: var(--nile-colors-white-base);
-    border-radius: 4px;
+    aspect-ratio: 1 / 1;
+    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));
+    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));
+    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -19,47 +23,54 @@ 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;
+    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
     overflow: hidden;
   }
 
+  .avatar__xs {
+    width: var(--nile-type-scale-4, var(--ng-height-24px));
+    height: var(--nile-type-scale-4), var(--ng-height-24px);
+    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));
+    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));
+  }
+  
   .avatar__small {
-    width: var(--nile-type-scale-4);
-    height: var(--nile-type-scale-4);
-    font-size: 6.516px;
-    line-height: 6.516px;
+    width: var(--nile-type-scale-4, var(--ng-height-32px));
+    height: var(--nile-type-scale-4, var(--ng-height-32px));
+    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));
+    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));
   }
 
   .avatar__medium {
-    width: var(--nile-spacing-3-x);
-    height: var(--nile-spacing-3-x);
-    font-size: 12px;
-    line-height: 18px;
+    width: var(--nile-spacing-3-x, var(--ng-height-40px));
+    height: var(--nile-spacing-3-x, var(--ng-height-40px));
+    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));
   }
 
   .avatar__large {
-    width: 32px;
-    height: 32px;
-    font-size: 14px;
-    line-height: 20px;
+    width: var(--nile-spacing-4xl, var(--ng-height-48px));
+    height: var(--nile-spacing-4xl, var(--ng-height-48px));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
+    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));
   }
 
   .avatar__extralarge {
-    height: 40px;
-    width: 40px;
-    font-size: 16px;
-    line-height: 24px;
+    height: var(--nile-spacing-5xl, 56px);
+    width: var(--nile-spacing-5xl, 56px);
+    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));
+    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));
   }
 
   .avatar__2xl {
-    height: 64px;
-    width: 64px;
-    font-size: 24px;
-    line-height: 32px;
+    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
+    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
+    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));
+    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));
   }
 
   .avatar__rounded {
@@ -67,22 +78,22 @@ import{css as a}from"lit";const r=a`
   }
 
   .variant__orange {
-    background:var(--nile-avatar-background-color-orange);
+    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));
   }
 
   .variant__pink {
-    background: var(--nile-avatar-background-color-pink);
+    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));
   }
 
   .variant__blue {
-    background: var(--nile-avatar-background-color-blue);
+    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));
   }
 
   .variant__light_blue {
-    background: var(--nile-avatar-background-color-lightblue);
+    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));
   }
 
   .variant__green {
-    background: var(--nile-avatar-background-color-green);
+    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));
   }
-`;export{r as s};
+`;export{e as s};

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

@@ -1,26 +1,26 @@
-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`
+import{__decorate as t}from"tslib";import{html as r}from"lit";import{property as e,state as a,customElement as i}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 n}from"../internal/nile-element.esm.js";let l=class extends n{constructor(){super(...arguments),this.src="",this.variant="text",this.icon="user",this.name="",this.bgColor="",this.textColor="",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"xs":return"6";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 a=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})}
+      class=${s({text__avatar:!0,avatar__xs:"xs"===this.size,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===a&&!this.bgColor,variant__pink:1===a&&!this.bgColor,variant__blue:2===a&&!this.bgColor,variant__light_blue:3===a&&!this.bgColor,variant__green:4===a&&!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)"}"
+        color:${this.textColor?this.textColor:"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500) )"};
+        border: 1px solid ${this.borderColor?this.borderColor:"var(--ng-colors-border-secondary)"};
+        border-color:${e?`${this.borderColor?this.borderColor:"var(--ng-colors-border-secondary)"}`:"var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))"}"
     >
       ${t}
     </div>`}getIconContent(){return r`
     <nile-icon
       name="${this.icon}"
-      color="${this.textColor&&"#fff"!==this.textColor?this.textColor:"var(--nile-colors-dark-500)"}"
+      color="${this.textColor?this.textColor:"var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-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})}
+      class=${s({avatar:!0,avatar__xs:"xs"===this.size,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};
+    />`}};t([e({type:String,reflect:!0})],l.prototype,"src",void 0),t([e({type:String,reflect:!0})],l.prototype,"variant",void 0),t([e({type:String,reflect:!0})],l.prototype,"icon",void 0),t([e({type:String,reflect:!0})],l.prototype,"name",void 0),t([e({type:String,reflect:!0,attribute:"bg-color"})],l.prototype,"bgColor",void 0),t([e({type:String,reflect:!0,attribute:"text-color"})],l.prototype,"textColor",void 0),t([e({type:String,reflect:!0,attribute:"border-color"})],l.prototype,"borderColor",void 0),t([e({reflect:!0})],l.prototype,"size",void 0),t([e({type:Boolean,reflect:!0})],l.prototype,"isRounded",void 0),t([a()],l.prototype,"imageError",void 0),l=t([i("nile-avatar")],l);export{l as N};