@aquera/nile-elements 0.0.47 → 0.0.49

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -43,7 +43,8 @@ export { NileCodeEditor } from './nile-code-editor';
 export { NileToast } from './nile-toast';
 export { NileBreadcrumb } from './nile-breadcrumb';
 export { NileBreadcrumbItem } from './nile-breadcrumb-item';
-export {NileFormGroup} from './nile-form-group';
+export { NileFormGroup } from './nile-form-group';
 export { NileCard } from './nile-card';
-export {NilePopover } from './nile-popover';
-export {NileButtonFilter} from './nile-button-filter';
+export { NileAvatar } from './nile-avatar';
+export { NilePopover } from './nile-popover';
+export { NileButtonFilter } from './nile-button-filter';

package/src/nile-avatar/index.ts

@@ -0,0 +1 @@
+export { NileAvatar } from './nile-avatar';

package/src/nile-avatar/nile-avatar.css.ts

@@ -0,0 +1,103 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * Avatar CSS
+ */
+export const styles = css`
+  :host {
+  }
+  .text__avatar {
+    box-sizing: border-box;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: var(--nile-font-family-serif);
+    font-style: normal;
+    font-weight: 500;
+    text-transform: uppercase;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    border: 1px solid;
+    border-color: var(--nile-colors-neutral-500);
+  }
+
+  .avatar {
+    box-sizing: border-box;
+    border: 1px solid var(--nile-colors-neutral-500);
+    background-position: 50% 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  .avatar__small {
+    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);
+    height: var(--nile-spacing-3-x);
+    font-size: var(--nile-type-scale-1);
+    line-height: var(--nile-type-scale-1);
+  }
+
+  .avatar__large {
+    width: 32px;
+    height: 32px;
+    font-size: 12.8px;
+    line-height: 12.8px;
+  }
+
+  .avatar__extralarge {
+    height: 40px;
+    width: 40px;
+    font-size: var(--nile-type-scale-3);
+    line-height: var(--nile-type-scale-3);
+  }
+
+  .avatar__rounded {
+    border-radius: 50%;
+  }
+
+  .variant__yellow {
+    color: var(--nile-colors-yellow-700);
+    border-color: var(--nile-colors-yellow-500);
+    background: var(--nile-colors-yellow-400);
+  }
+
+  .variant__blue {
+    color: var(--nile-colors-blue-700);
+    border-color: var(--nile-colors-blue-500);
+    background: var(--nile-colors-blue-400);
+  }
+
+  .variant__red {
+    color: var(--nile-colors-button-caution-pressed-border);
+    border-color: var(--nile-colors-red-500);
+    background: var(--nile-colors-red-400);
+  }
+
+  .variant__green {
+    color: var(--nile-colors-green-700);
+    border-color: var(--nile-colors-green-500);
+    background: var(--nile-colors-green-400);
+  }
+
+  .variant__neutral {
+    color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-500);
+    background: var(--nile-colors-dark-200);
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,143 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { styles } from './nile-avatar.css';
+import NileElement from '../internal/nile-element';
+import { string } from '../nile-icon/icons/svg';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-avatar
+ *
+ */
+@customElement('nile-avatar')
+export class NileAvatar extends NileElement {
+  /**
+   * The styles for Avatar
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /** Gives the url to the Avatar */
+  @property({ type: String, reflect: true }) src = '';
+
+  /** Gives the default Image Letters to the Avatar */
+  @property({ type: String, reflect: true }) name = '';
+
+  /** Size of the Avatar */
+  @property({ reflect: true }) size:
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'extralarge' = 'medium';
+
+  /** Gives a border radius of 50% to the Avatar */
+  @property({ type: Boolean, reflect: true }) isRounded = false;
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  @state() private isDefaultAvatar = true;
+
+  @state() private defaultAvatarContent = html``;
+
+  private generateInitials(name: String): string {
+    if (!name) {
+      return '';
+    }
+    const nameParts = name
+      .split(' ')
+      .filter(part => part.length > 0)
+      .map(part => part.charAt(0).toUpperCase())
+      .slice(0, 2);
+    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];
+  }
+
+  private generateVariantCode(initials: string): number {
+    const char1 = initials.charCodeAt(0);
+    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);
+    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);
+    return multifactor % 5;
+  }
+
+  private handleImageError(event: Event): void {
+    const defaultInitials = this.generateInitials(this.name);
+    const variant__code = this.generateVariantCode(defaultInitials);
+    this.defaultAvatarContent = html`<div
+      class=${classMap({
+        text__avatar: true,
+        avatar__small: this.size === 'small',
+        avatar__medium: this.size === 'medium',
+        avatar__large: this.size === 'large',
+        avatar__extralarge: this.size === 'extralarge',
+        avatar__rounded: this.isRounded,
+        variant__yellow: variant__code === 0,
+        variant__blue: variant__code === 1,
+        variant__red: variant__code === 2,
+        variant__green: variant__code === 3,
+        variant__neutral: variant__code === 4,
+      })}
+    >
+      ${defaultInitials
+        ? defaultInitials
+        : html`<nile-icon name="user" color="grey" size="14"></nile-icon>`}
+    </div>`;
+
+    this.isDefaultAvatar = false;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${this.isDefaultAvatar
+        ? html` <img
+            src="${this.src}"
+            class="avatar"
+            class=${classMap({
+              avatar: true,
+              avatar__small: this.size === 'small',
+              avatar__medium: this.size === 'medium',
+              avatar__large: this.size === 'large',
+              avatar__extralarge: this.size === 'extralarge',
+              avatar__rounded: this.isRounded,
+            })}
+            style="	background-image: url(${this
+              .src}), linear-gradient(lightgray, lightgray);"
+            @error="${this.handleImageError}"
+          />`
+        : html`${this.defaultAvatarContent}`}
+    `;
+  }
+
+  /* #endregion */
+}
+// onerror="this.onerror=null;this.src='${defaultimg}';"
+
+export default NileAvatar;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-avatar': NileAvatar;
+  }
+}

package/src/nile-badge/nile-badge.css.ts

@@ -33,32 +33,142 @@ export const styles = css`
   }
 
   .badge--primary {
-    background: #005EA6;
+    background: #005ea6;
   }
 
-  .badge--success {
-    background: #A5F3E1;
+  .badge--normal {
+    background: #e5e9eb;
   }
 
-  .badge--normal {
-    background: #E5E9EB;
+  .badge--info {
+    background: #a5d3f3;
+  }
+
+  /* for v2 */
+  .badge--pink {
+    color: #c11574;
+    border: 1px solid #fcceee;
+    background: #fdf2fa;
+  }
+
+  .badge--orange {
+    color: #b93815;
+    border: 1px solid #f9dbaf;
+    background: #fef6ee;
+  }
+
+  .badge--purple {
+    color: #5925dc;
+    border: 1px solid #d9d6fe;
+    background: #f4f3ff;
+  }
+
+  .badge--indigo {
+    color: #3538cd;
+    border: 1px solid #c7d7fe;
+    background: #eef4ff;
   }
 
+  .badge--blue {
+    color: #175cd3;
+    border: 1px solid #b2ddff;
+    background: #eff8ff;
+  }
+  .badge--blue-light {
+    color: #026aa2;
+    border: 1px solid #b9e6fe;
+    background: #f0f9ff;
+  }
+
+  .badge--gray-blue {
+    color: #363f72;
+    border: 1px solid #d5d9eb;
+    background: #f8f9fc;
+  }
+
+  .badge--success {
+    color: var(--nile-badge-color-font-success);
+    border: var(--nile-badge-color-border-width) solid #abefc6;
+    background: var(--nile-badge-color-background-success);
+  }
   .badge--warning {
-    background: #F3E0A5;
+    color: var(--nile-badge-color-font-warning);
+    border: var(--nile-badge-color-border-width) solid #fedf89;
+    background: var(--nile-badge-color-background-warning);
   }
 
   .badge--error {
-    background: #F3A5AA;
+    color: var(--nile-badge-color-font-error);
+    border: var(--nile-badge-color-border-width) solid #fecdca;
+    background: var(--nile-badge-color-background-error);
   }
 
-  .badge--info {
-    background: #A5D3F3;
+  .badge--brand {
+    color: #005291;
+    border: 1px solid #b5c9e0;
+    background: #eaf0f8;
+  }
+
+  .badge--gray {
+    color: #344054;
+    border: 1px solid #eaecf0;
+    background: #f9fafb;
+  }
+
+  .badge--pink.badge--pill-outline {
+    border: 1px solid #dd2590;
+  }
+
+  .badge--orange.badge--pill-outline {
+    border: 1px solid #e04f16;
+  }
+
+  .badge--purple.badge--pill-outline {
+    border: 1px solid #6938ef;
+  }
+
+  .badge--indigo.badge--pill-outline {
+    border: 1px solid #444ce7;
+  }
+
+  .badge--blue.badge--pill-outline {
+    border: 1px solid #1570ef;
+  }
+
+  .badge--blue-light.badge--pill-outline {
+    border: 1px solid #0086c9;
+  }
+
+  .badge--gray-blue.badge--pill-outline {
+    border: 1px solid #3e4784;
+  }
+
+  .badge--success.badge--pill-outline {
+    border: 1px solid #079455;
+  }
+
+  .badge--warning.badge--pill-outline {
+    border: 1px solid #dc6803;
+  }
+
+  .badge--error.badge--pill-outline {
+    border: 1px solid #d92d20;
+  }
+
+  .badge--brand.badge--pill-outline {
+    border: 1px solid #005ea6;
+  }
+
+  .badge--gray.badge--pill-outline {
+    border: 1px solid #475467;
+  }
+
+  .badge--pill-outline {
+    background: transparent;
   }
 
   .badge--rounded {
     border-radius: 100px;
-    padding: 0 6px;
   }
 `;
 export default [styles];

package/src/nile-badge/nile-badge.ts

@@ -52,11 +52,26 @@ export class NileBadge extends NileElement {
     | 'normal'
     | 'warning'
     | 'error'
-    | 'info' = 'normal';
+    | 'info'
+    | 'gray'
+    | 'brand'
+    | 'blue-light'
+    | 'blue'
+    | 'indigo'
+    | 'purple'
+    | 'pink'
+    | 'orange'
+    | 'blue-gray'
+    | 'gray-blue' = 'normal';
 
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) rounded = false;
 
+  //  For setting pill type
+  @property({ reflect: true }) pilltype:
+    | 'pill-color'
+    | 'pill-outline'
+    | 'badge-color'='badge-color';
 
   render() {
     return html`
@@ -64,22 +79,30 @@ export class NileBadge extends NileElement {
         part="base"
         class=${classMap({
           badge: true,
-
-          // Types
           'badge--primary': this.variant === 'primary',
-          'badge--success': this.variant === 'success',
           'badge--normal': this.variant === 'normal',
+          'badge--info': this.variant === 'info',
+          'badge--pink': this.variant === 'pink',
+          'badge--orange': this.variant === 'orange',
+          'badge--purple': this.variant === 'purple',
+          'badge--indigo': this.variant === 'indigo',
+          'badge--blue': this.variant === 'blue',
+          'badge--blue-light': this.variant === 'blue-light',
+          'badge--gray-blue': this.variant === 'gray-blue',
+          'badge--success': this.variant === 'success',
           'badge--warning': this.variant === 'warning',
           'badge--error': this.variant === 'error',
-          'badge--info': this.variant === 'info',
-          'badge--rounded': this.rounded,
+          'badge--brand': this.variant === 'brand',
+          'badge--gray': this.variant === 'gray',
+          'badge--pill-outline': this.pilltype == 'pill-outline',
+          'badge--badge-color': this.pilltype == 'badge-color',
+          'badge--rounded':
+            this.rounded ||
+            this.pilltype == 'pill-outline' ||
+            this.pilltype == 'pill-color',
         })}
       >
-
-
-        <slot  part="content" class="badge__content"></slot>
-
-
+        <slot part="content" class="badge__content"></slot>
       </span>
     `;
   }

package/src/nile-button-toggle/nile-button-toggle.css.ts

@@ -17,7 +17,7 @@ export const styles = css`
   .nile-button-toggle {
     display: flex;
     padding: 12px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--nile-button-toggle-border-color);
     cursor: pointer;
     border-radius: 4px;
     color: #000;
@@ -32,11 +32,11 @@ export const styles = css`
   }
 
   .nile-button-toggle:hover {
-    background: var(--nile-colors-neutral-100);
+    background:var(--nile-button-toggle-color-background-non-active-hover);
   }
 
   .nile-button-toggle:active {
-    background: #E5E9EB;
+    background: #e5e9eb; 
   }
 
   .nile-button-toggle__initial {
@@ -56,11 +56,13 @@ export const styles = css`
   }
 
   .nile-button-toggle__active {
-    background-color: #c7ced4;
+    background-color:var(--nile-button-toggle-color-background-active-standard);
+    color: var(--nile-button-toggle-text-color-standard);
   }
 
   .nile-button-toggle__active:hover {
-    background-color: #c7ced4;
+    background-color:var(--nile-button-toggle-color-background-active-hover);
+    color: var(--nile-button-toggle-text-color-hover);
   }
 
   .nile-button-toggle__disabled {

package/src/nile-calendar/nile-calendar.ts

@@ -139,7 +139,6 @@ export class NileCalendar extends NileElement {
 
   @property({ type: Boolean,attribute:'hide-time-input' }) hideTimeInput: Boolean = false;
 
-
   @property({ type: Array, attribute: 'hide-duration-fields' })
   hideDurationFields: String[] = [];
   @property({ type: Boolean , attribute: 'hide-time-zone' }) hideTimeZone: Boolean = false;
@@ -722,7 +721,6 @@ export class NileCalendar extends NileElement {
     const nextYear =
       this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear;
     const nextMonthDaysArray = this.getDaysArray(nextYear, nextMonth);
-
     return html`
       <div
         class="base ${this.range ? 'base__range' : ''} ${this.type ===

package/src/nile-card/nile-card.css.ts

@@ -1,17 +1,16 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Card CSS
  */
 export const styles = css`
-
   :host {
     box-sizing: border-box;
   }
@@ -27,13 +26,11 @@ export const styles = css`
   }
 
   :host {
-    --border-color: var(--nile-colors-neutral-400);
+    --border-color: var(--nile-card-color-border); /* for v2 */
     --border-radius: 8px;
     --border-width: 1px;
     --padding: 18px;
-    --footer-padding: 9px 18px;
-;
-
+    --footer-padding: var(--nile-card-footer-padding); /*for v2 */
     display: inline-block;
   }
 
@@ -43,6 +40,7 @@ export const styles = css`
     background-color: var(--nile-colors-white-base);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
+    box-shadow: var(--nile-card-box-shadow) rgba(16, 24, 40, 0.05);
   }
 
   .card__body {
@@ -55,19 +53,18 @@ export const styles = css`
     border-bottom: none;
   }
 
-   .card__footer {
+  .card__footer {
     display: block;
     border-top: solid var(--border-width) var(--border-color);
     padding: var(--footer-padding);
-    border: 1px solid var(--nile-colors-neutral-500);
-    background: var(--nile-colors-neutral-100);
-    border-radius:  0 0 4px 4px;
+    border:1px solid var(--nile-card-footer-border-color);
+    background-color:var(--nile-card-footer-background-color);
+    border-radius:var(--nile-card-footer-border-radius);
   }
 
   .card:not(.card--has-footer) .card__footer {
     display: none;
   }
-
 `;
 
 export default [styles];

package/src/nile-checkbox/nile-checkbox.css.ts

@@ -42,8 +42,8 @@ export const styles = css`
     justify-content: center;
     width: var(--nile-type-scale-3);
     height: var(--nile-type-scale-3);
-    border: solid 1px var(--nile-colors-neutral-700);
-    background-color: var(--nile-colors-white-base);
+    border: solid 1px var(--nile-checkbox-color-border-standard);
+    background-color: var(--nile-checkbox-color-background-standard);
     border-radius: 4px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
@@ -66,8 +66,8 @@ export const styles = css`
   /* Hover */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__control:hover {
-    background: var(--nile-colors-primary-100);
-    border: 1px solid var(--nile-colors-primary-600);
+    background: var(--nile-checkbox-color-background-hover);
+    border: 1px solid var(--nile-checkbox-color-border-hover);
     border-radius: 4px;
   }
 
@@ -82,16 +82,16 @@ export const styles = css`
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    border-color: var(--nile-colors-primary-600);
-    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-checkbox-color-border-checked-standard);
+    background-color: var(--nile-checkbox-color-background-checked-standard);
   }
 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__control:hover {
-    background: var(--nile-colors-primary-900);
-    border: 1px solid var(--nile-colors-primary-900);
+    background: var(--nile-checkbox-color-background-checked-hover);
+    border: 1px solid var(--nile-checkbox-color-border-checked-hover);
   }
 
   /* Checked/indeterminate + focus */
@@ -101,15 +101,16 @@ export const styles = css`
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__input:focus-visible
     ~ .checkbox__control {
-    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
+    outline: solid 3px var(--nile-checkbox-color-outline-standard);
     outline-offset: 1px;
   }
 
   /* Disabled */
   .checkbox--disabled {
-    opacity: 0.5;
+    opacity: 0.3;
     cursor: not-allowed;
   }
+  
 
   .checkbox__label {
     display: inline-block;

package/src/nile-icon/icons/svg/bar-chart-square-03.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS4zMzMzMyAxMFYxMS4zMzMzTTggNy4zMzMzM1YxMS4zMzMzTTEwLjY2NjcgNC42NjY2N1YxMS4zMzMzTTUuMiAxNEgxMC44QzExLjkyMDEgMTQgMTIuNDgwMiAxNCAxMi45MDggMTMuNzgyQzEzLjI4NDMgMTMuNTkwMyAxMy41OTAzIDEzLjI4NDMgMTMuNzgyIDEyLjkwOEMxNCAxMi40ODAyIDE0IDExLjkyMDEgMTQgMTAuOFY1LjJDMTQgNC4wNzk5IDE0IDMuNTE5ODQgMTMuNzgyIDMuMDkyMDJDMTMuNTkwMyAyLjcxNTY5IDEzLjI4NDMgMi40MDk3MyAxMi45MDggMi4yMTc5OUMxMi40ODAyIDIgMTEuOTIwMSAyIDEwLjggMkg1LjJDNC4wNzk5IDIgMy41MTk4NCAyIDMuMDkyMDIgMi4yMTc5OUMyLjcxNTY5IDIuNDA5NzMgMi40MDk3MyAyLjcxNTY5IDIuMjE3OTkgMy4wOTIwMkMyIDMuNTE5ODQgMiA0LjA3OTkgMiA1LjJWMTAuOEMyIDExLjkyMDEgMiAxMi40ODAyIDIuMjE3OTkgMTIuOTA4QzIuNDA5NzMgMTMuMjg0MyAyLjcxNTY5IDEzLjU5MDMgMy4wOTIwMiAxMy43ODJDMy41MTk4NCAxNCA0LjA3OTkgMTQgNS4yIDE0WiIgc3Ryb2tlPSIjMzQ0MDU0IiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";