npm - @aquera/nile-elements - Versions diffs - 1.0.1 → 1.1.0-beta-1.0 - Mend

@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1922) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Avatar CSS\n */\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif ~~, var(--ng-font-family-body~~));\n font-style: normal;\n ~~aspect-ratio: 1 / 1;\n~~ font-weight: ~~var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold))~~;\n color: var(--nile-colors-white-base ~~, var(--ng-colors-text-quaternary-500~~));\n border-radius: ~~var(--nile-radius-radius-xs , var(--ng-radius-xs))~~;\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500 ~~, var(--ng-colors-border-secondary~~));\n border-radius: ~~var(--nile-radius-radius-xs , var(--ng-radius-xs))~~;\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .~~avatar__xs~~ {\n width: var(--nile-type-scale-4~~, var(--ng-height-24px~~));\n height: var(--nile-type-scale-4)~~, var(--ng-height-24px)~~;\n font-size: ~~var(--nile-font-size-~~6~~-7, var(--ng-font-size-text-xs))~~;\n line-height: ~~var(--nile-font-size-~~6~~-7, var(--ng-line-height-text-xs));\n }\n \n~~ .~~avatar__small {\n width: var(--nile-type-scale-4, var(--ng-height-32px))~~;\n height: var(--nile-type-scale-4, var(--ng-height-32px));\n font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));\n line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x~~, var(--ng-height-40px~~));\n height: var(--nile-spacing-3-x~~, var(--ng-height-40px~~));\n font-size: ~~var(--nile-spacing-2-x, var(--ng-font-size-text-md))~~;\n line-height: ~~var(--nile-type-scale-5, var(--ng-line-height-text-md))~~;\n }\n\n .avatar__large {\n width: ~~var(--nile-spacing-4xl, var(--ng-height-48px))~~;\n height: ~~var(--nile-spacing-4xl, var(--ng-height-48px))~~;\n font-size: ~~var(--nile-type-scale-3, var(--ng-font-size-text-lg))~~;\n line-height: ~~var(--nile-type-scale-6, var(--ng-line-height-text-lg))~~;\n }\n\n .avatar__extralarge {\n height: ~~var(--nile-spacing-5xl, 56px)~~;\n width: ~~var(--nile-spacing-5xl, 56px)~~;\n font-size: ~~var(--nile-spacing-xl, var(--ng-font-size-text-xl))~~;\n line-height: ~~var(--nile-spacing-3xl , var(--ng-line-height-text-xl))~~;\n }\n\n .avatar__2xl {\n height: ~~var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl))~~;\n width: ~~var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl))~~;\n font-size: ~~var(--nile-spacing-3xl, var(--ng-line-height-display-xs))~~;\n line-height: ~~var(--nile-spacing-4xl, var(--ng-line-height-display-xs))~~;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange ~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue ~~, var(--ng-colors-bg-tertiary~~));\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green~~, var(--ng-colors-bg-tertiary~~));\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Avatar CSS\n */\nexport const styles = css`\n :host {\n }\n\n .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif);\n font-style: normal;\n font-weight: 600;\n color: var(--nile-colors-white-base);\n border-radius: 4px;\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500);\n border-radius: 4px;\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__small {\n width: var(--nile-type-scale-4);\n height: var(--nile-type-scale-4);\n font-size: 6.516px;\n line-height: 6.516px;\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x);\n height: var(--nile-spacing-3-x);\n font-size: 12px;\n line-height: 18px;\n }\n\n .avatar__large {\n width: 32px;\n height: 32px;\n font-size: 14px;\n line-height: 20px;\n }\n\n .avatar__extralarge {\n height: 40px;\n width: 40px;\n font-size: 16px;\n line-height: 24px;\n }\n\n .avatar__2xl {\n height: 64px;\n width: 64px;\n font-size: 24px;\n line-height: 32px;\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange);\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink);\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue);\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue);\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green);\n }\n`;\n\nexport default [styles];\n"]}

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

@@ -33,7 +33,7 @@ export declare class NileAvatar extends NileElement {
     /** Gives the default border color  to the Avatar */
     borderColor: string;
     /** Size of the Avatar */
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     /** Gives a border radius of 50% to the Avatar */
     isRounded: boolean;
     private imageError;

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

@@ -24,13 +24,13 @@ let NileAvatar = class NileAvatar extends NileElement {
         /** Gives the icon to the Avatar */
         this.variant = 'text';
         /** Gives the icon to the Avatar */
-        this.icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';
+        this.icon = 'user';
         /** Gives the default Image Letters to the Avatar */
         this.name = '';
         /** Gives the default bg color  to the Avatar */
         this.bgColor = '';
         /** Gives the default text color  to the Avatar */
-        this.textColor = '';
+        this.textColor = '#fff';
         /** Gives the default border color  to the Avatar */
         this.borderColor = '';
         /** Size of the Avatar */
@@ -68,8 +68,6 @@ let NileAvatar = class NileAvatar extends NileElement {
     }
     getDefaultIconSize() {
         switch (this.size) {
-            case 'xs':
-                return '6';
             case 'sm':
                 return '10';
             case 'md':
@@ -104,7 +102,6 @@ let NileAvatar = class NileAvatar extends NileElement {
     <div
       class=${classMap({
             text__avatar: true,
-            avatar__xs: this.size === 'xs',
             avatar__small: this.size === 'sm',
             avatar__medium: this.size === 'md',
             avatar__large: this.size === 'lg',
@@ -120,9 +117,9 @@ let NileAvatar = class NileAvatar extends NileElement {
       part="avatar__content"
       style="
         background-color: ${this.bgColor};
-        color:${this.textColor ? this.textColor : "var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))"};
-        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};
-        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
+        color:${this.textColor};
+        border: 1px solid ${this.borderColor};
+        border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}"
     >
       ${content}
     </div>`;
@@ -131,8 +128,7 @@ let NileAvatar = class NileAvatar extends NileElement {
         return html `
     <nile-icon
       name="${this.icon}"
-      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-      color="${this.textColor ? this.textColor : 'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}"
+      color="${this.textColor && "#fff" !== this.textColor ? this.textColor : 'var(--nile-colors-dark-500)'}"
       size="${this.getDefaultIconSize()}"
     ></nile-icon>`;
     }
@@ -143,7 +139,6 @@ let NileAvatar = class NileAvatar extends NileElement {
       class="avatar"
       class=${classMap({
             avatar: true,
-            avatar__xs: this.size === 'xs',
             avatar__small: this.size === 'sm',
             avatar__medium: this.size === 'md',
             avatar__large: this.size === 'lg',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/\n Nile icon component.\n \n @tag nile-avatar\n \n /\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /*\n The styles for Avatar\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Gives the url to the Avatar /\n @property({ type: String, reflect: true }) src = '';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) variant:'icon' \| 'image' \| 'text' = 'text';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';\n\n /* Gives the default Image Letters to the Avatar /\n @property({ type: String, reflect: true }) name: String = '';\n\n /* Gives the default bg color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';\n\n /* Gives the default text color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '';\n\n /* Gives the default border color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n /* Size of the Avatar /\n @property({ reflect: true }) size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' = 'md';\n\n /* Gives a border radius of 50% to the Avatar /\n @property({ type: Boolean, reflect: true }) isRounded = true;\n\n @state() private imageError = false;\n\n / #endregion /\n\n / #region Methods /\n\n private generateInitials(): string {\n if (!this.name) {\n return '';\n }\n const nameParts = this.name\n .split(' ')\n .filter(part => part.length > 0)\n .map(part => part.charAt(0).toUpperCase())\n .slice(0, 2);\n return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n }\n\n private generateVariantCode(initials: string): number {\n const char1 = initials.charCodeAt(0);\n const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n const multifactor = char1 char2 + (char1 % 23) + (char2 % 23);\n return multifactor % 5;\n }\n\n private getDefaultIconSize() {\n switch (this.size) {\n case 'xs':\n return '6';\n case 'sm':\n return '10';\n case 'md':\n return '16';\n case 'lg':\n return '20';\n case 'xl':\n return '24';\n case '2xl':\n return '28';\n default:\n return '16';\n }\n }\n\n public render(): TemplateResult {\n if('image'==this.variant && !this.imageError){\n return this.getImageContent()\n }\n else{\n const defaultInitials = this.generateInitials();\n if('text'==this.variant && defaultInitials){\n return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n }\n else{\n return this.getContentWrapped(this.getIconContent(),defaultInitials)\n }\n }\n }\n\n getContentWrapped(content:TemplateResult,defaultInitials:string){\n const variant__code = this.generateVariantCode(defaultInitials);\n return html`\n <div\n class=${classMap({\n text__avatar: true,\n avatar__xs: this.size === 'xs',\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n variant__orange: variant__code === 0 && !this.bgColor,\n variant__pink: variant__code === 1 && !this.bgColor,\n variant__blue: variant__code === 2 && !this.bgColor,\n variant__light_blue: variant__code === 3 && !this.bgColor,\n variant__green: variant__code === 4 && !this.bgColor,\n })}\n part=\"avatar__content\"\n style=\"\n background-color: ${this.bgColor};\n color:${this.textColor?this.textColor:\"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))\"};\n border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};\n border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}\"\n >\n ${content}\n </div>`\n }\n\n getIconContent(){\n return html`\n <nile-icon\n name=\"${this.icon}\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n color=\"${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}\"\n size=\"${this.getDefaultIconSize()}\"\n ></nile-icon>`\n }\n\n getImageContent(){\n return html` \n <img\n src=\"${this.src}\"\n class=\"avatar\"\n class=${classMap({\n avatar: true,\n avatar__xs: this.size === 'xs',\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n })}\n part=\"avatar__image\"\n style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n @error=\"${()=>this.imageError=true}\"\n @load=\"${()=>this.imageError=false}\"\n />`\n }\n\n /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-avatar': NileAvatar;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/\n Nile icon component.\n \n @tag nile-avatar\n \n /\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /*\n The styles for Avatar\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Gives the url to the Avatar /\n @property({ type: String, reflect: true }) src = '';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) variant:'icon' \| 'image' \| 'text' = 'text';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) icon = '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"]}

package/dist/src/nile-badge/nile-badge.css.js CHANGED Viewed

@@ -10,195 +10,166 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   .badge {
-    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));
+    padding: 2px 6px;
+    border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: var(--nile-height-22px, var(--ng-height-24px));
+    height: 22px;
   }
   .badge__content {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-family: var(--nile-font-family-serif);
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
   }
   .badge--primary {
-    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));
-    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));
+    background: var(--nile-badge-color-background-primary);
+    color: var(--nile-badge-color-font-primary);
   }
   .badge--normal {
-    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));
+    background: var(--nile-badge-color-background-normal);
   }
   .badge--info {
-    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));
+    background: var(--nile-badge-color-background-info);
   }
   /* for v2 */
-    .badge--pill-outline {
-    background: transparent ;
-  }
   .badge--pink {
-    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));
-    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));
+    color: var(--nile-badge-color-font-pink);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);
+    background: var(--nile-badge-color-background-pink);
   }
   .badge--orange {
-    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
-    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
+    color: var(--nile-badge-color-font-orange);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);
+    background: var(--nile-badge-color-background-orange);
   }
   .badge--purple {
-    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));
-    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));
+    color: var(--nile-badge-color-font-purple);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);
+    background: var(--nile-badge-color-background-purple);
   }
   .badge--indigo {
-    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));
-    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));
+    color: var(--nile-badge-color-font-indigo);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);
+    background: var(--nile-badge-color-background-indigo);
   }
   .badge--blue {
-    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));
-    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));
+    color: var(--nile-badge-color-font-blue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);
+    background: var(--nile-badge-color-background-blue);
   }
   .badge--blue-light {
-    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));
-    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));
+    color:var(--nile-badge-color-font-bluelight);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);
+    background: var(--nile-badge-color-background-bluelight);
   }
   .badge--gray-blue {
-    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));
-    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));
+    color: var(--nile-badge-color-font-grayblue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);
+    background: var(--nile-badge-color-background-grayblue);
   }
   .badge--success {
-    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));
-    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));
+    color: var(--nile-badge-color-font-success);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);
+    background: var(--nile-badge-color-background-success);
   }
   .badge--warning {
-    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
-    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
+    color: var(--nile-badge-color-font-warning);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);
+    background: var(--nile-badge-color-background-warning);
   }
   .badge--error {
-    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));
-    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));
+    color: var(--nile-badge-color-font-error);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);
+    background: var(--nile-badge-color-background-error);
   }
   .badge--brand {
-    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));
-    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));
+    color: var(--nile-badge-color-font-brand);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);
+    background: var(--nile-badge-color-background-brand);
   }
   .badge--gray {
-    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
-    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
+    color: var(--nile-badge-color-font-gray);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);
+    background: var(--nile-badge-color-background-gray);
   }
   .badge--pink.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);
   }
   .badge--orange.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);
   }
   .badge--purple.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);
   }
   .badge--indigo.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));
   }
   .badge--blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));
   }
   .badge--blue-light.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);
   }
   .badge--gray-blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
   }
   .badge--success.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);
   }
   .badge--warning.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);
   }
   .badge--error.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);
   }
   .badge--brand.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);
   }
   .badge--gray.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
   }
+  .badge--pill-outline {
+    background: transparent;
+  }
   .badge--rounded {
-    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    padding: 2px 8px;
+    border-radius: 100px;
   }
 `;
 export default [styles];

package/dist/src/nile-badge/nile-badge.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Tag 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 .badge {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--nile-height-22px, var(--ng-height-24px));\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n }\n\n .badge--normal {\n background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--info {\n background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n / for v2 */\n\n .badge--pill-outline {\n background: transparent ;\n }\n .badge--pink {\n color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n }\n\n .badge--orange {\n color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n }\n\n .badge--purple {\n color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n }\n\n .badge--indigo {\n color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n }\n\n .badge--blue {\n color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n }\n .badge--blue-light {\n color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n }\n\n .badge--gray-blue {\n color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));\n background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n }\n\n .badge--brand {\n color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n }\n\n .badge--gray {\n color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n border-style: solid;\n border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));\n background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n }\n\n .badge--pink.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n }\n\n .badge--orange.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n }\n\n .badge--purple.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n }\n\n .badge--indigo.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n }\n\n .badge--blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n }\n\n .badge--blue-light.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n }\n\n .badge--success.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n }\n\n .badge--warning.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n }\n\n .badge--error.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n }\n\n .badge--brand.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n }\n\n .badge--gray.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));\n }\n\n\n\n .badge--rounded {\n padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n }\n`;\nexport default [styles];\n\n"]}
1	+ {"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Tag CSS\n /\nexport const styles = css`\n :host {\n }\n\n .badge {\n padding: 2px 6px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 22px;\n }\n\n .badge__content {\n font-family: var(--nile-font-family-serif);\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 18px;\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: var(--nile-badge-color-background-primary);\n color: var(--nile-badge-color-font-primary);\n }\n\n .badge--normal {\n background: var(--nile-badge-color-background-normal);\n }\n\n .badge--info {\n background: var(--nile-badge-color-background-info);\n }\n\n / for v2 */\n .badge--pink {\n color: var(--nile-badge-color-font-pink);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);\n background: var(--nile-badge-color-background-pink);\n }\n\n .badge--orange {\n color: var(--nile-badge-color-font-orange);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);\n background: var(--nile-badge-color-background-orange);\n }\n\n .badge--purple {\n color: var(--nile-badge-color-font-purple);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);\n background: var(--nile-badge-color-background-purple);\n }\n\n .badge--indigo {\n color: var(--nile-badge-color-font-indigo);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);\n background: var(--nile-badge-color-background-indigo);\n }\n\n .badge--blue {\n color: var(--nile-badge-color-font-blue);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);\n background: var(--nile-badge-color-background-blue);\n }\n .badge--blue-light {\n color:var(--nile-badge-color-font-bluelight);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);\n background: var(--nile-badge-color-background-bluelight);\n }\n\n .badge--gray-blue {\n color: var(--nile-badge-color-font-grayblue);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);\n background: var(--nile-badge-color-background-grayblue);\n }\n\n .badge--success {\n color: var(--nile-badge-color-font-success);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);\n background: var(--nile-badge-color-background-success);\n }\n .badge--warning {\n color: var(--nile-badge-color-font-warning);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);\n background: var(--nile-badge-color-background-warning);\n }\n\n .badge--error {\n color: var(--nile-badge-color-font-error);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);\n background: var(--nile-badge-color-background-error);\n }\n\n .badge--brand {\n color: var(--nile-badge-color-font-brand);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);\n background: var(--nile-badge-color-background-brand);\n }\n\n .badge--gray {\n color: var(--nile-badge-color-font-gray);\n border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);\n background: var(--nile-badge-color-background-gray);\n }\n\n .badge--pink.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);\n }\n\n .badge--orange.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);\n }\n\n .badge--purple.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);\n }\n\n .badge--indigo.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));\n }\n\n .badge--blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));\n }\n\n .badge--blue-light.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);\n }\n\n .badge--gray-blue.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n }\n\n .badge--success.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);\n }\n\n .badge--warning.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);\n }\n\n .badge--error.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);\n }\n\n .badge--brand.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);\n }\n\n .badge--gray.badge--pill-outline {\n border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n }\n\n .badge--pill-outline {\n background: transparent;\n }\n\n .badge--rounded {\n padding: 2px 8px;\n border-radius: 100px;\n }\n`;\nexport default [styles];\n"]}

package/dist/src/nile-breadcrumb/nile-breadcrumb.css.js CHANGED Viewed

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     display: flex;
     align-items: center;
-    -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));
   }
 `;
 export default [styles];

package/dist/src/nile-breadcrumb/nile-breadcrumb.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-breadcrumb.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/nile-breadcrumb.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;CAQxB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Breadcrumb CSS\n */\nexport const styles = css`\n :host {\n display: flex;\n align-items: center;\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\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-breadcrumb.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/nile-breadcrumb.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Breadcrumb CSS\n */\nexport const styles = css`\n :host {\n display: flex;\n align-items: center;\n }\n`;\n\nexport default [styles];\n"]}