@aquera/nile-elements 0.0.49 → 0.0.51

package/package.json

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

package/src/index.ts

@@ -45,6 +45,14 @@ export { NileBreadcrumb } from './nile-breadcrumb';
 export { NileBreadcrumbItem } from './nile-breadcrumb-item';
 export { NileFormGroup } from './nile-form-group';
 export { NileCard } from './nile-card';
-export { NileAvatar } from './nile-avatar';
 export { NilePopover } from './nile-popover';
 export { NileButtonFilter } from './nile-button-filter';
+export { NileCircularProgressbar } from './nile-circular-progressbar';
+export { NileSidebarMenu } from './nile-sidebar-menu';
+export { NileSidebarMenuItems } from './nile-sidebar-menu-items';
+export { NileSidebarWrapper } from './nile-sidebar-wrapper';
+export { NileTableCellItem } from './nile-table-cell-item';
+export { NileTableRow } from './nile-table-row';
+export { NileTableBody } from './nile-table-body';
+export { NileTableHeaderItem } from './nile-table-header-item';
+export { NileAvatar } from './nile-avatar';

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

@@ -19,6 +19,7 @@ export const styles = css`
     font-family: var(--nile-font-family-serif);
     font-style: normal;
     font-weight: 500;
+    color:var(--nile-colors-white-base);
     text-transform: uppercase;
     display: flex;
     flex-direction: column;

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

@@ -41,6 +41,15 @@ export class NileAvatar extends NileElement {
   /** Gives the default Image Letters to the Avatar */
   @property({ type: String, reflect: true }) name = '';
 
+  /** Gives the default bg color  to the Avatar */
+  @property({ type: String, reflect: true }) color = '';
+
+    /** Gives the default text color  to the Avatar */
+  @property({ type: String, reflect: true ,attribute:'text-color' }) textColor = '#fff';
+
+  /** Gives the default bg color  to the Avatar */
+  @property({ type: String, reflect: true ,attribute:'border-color'}) borderColor = 'transparent';
+
   /** Size of the Avatar */
   @property({ reflect: true }) size:
     | 'small'
@@ -93,12 +102,14 @@ export class NileAvatar extends NileElement {
         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,
+        variant__yellow: variant__code === 0 && !this.color,
+        variant__blue: variant__code === 1 && !this.color ,
+        variant__red: variant__code === 2 && !this.color ,
+        variant__green: variant__code === 3 && !this.color,
+        variant__neutral: variant__code === 4 && !this.color,
       })}
+      style="background-color: ${this.color}; border-color: ${this
+        .borderColor}; color:${this.textColor}"
     >
       ${defaultInitials
         ? defaultInitials

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

@@ -73,70 +73,86 @@ export const styles = css`
     /* vertical-align: -2px; */
   }
 
-  .button--standard.button--secondary {
-    background-color: var(--nile-colors-button-secondary);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-hover);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-pressed);
-    border-color: var(--nile-colors-button-secondary-pressed-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
-    cursor: not-allowed;
-  }
-
-  .button--standard.button--secondary.button--disabled:hover,
-  .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
-    cursor: not-allowed;
-  }
-
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
+    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-border);
+    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-hover);
+    background-color: #005291; /*for v2 */
     border-color: var(--nile-colors-button-primary-hover);
+    border-color: #005291; /*for v2 */
     color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
+    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-pressed-border);
+    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
+    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */
   }
 
   .button--standard.button--primary.button--disabled {
     background-color: var(--nile-colors-button-primary-disabled);
+    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
+    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
+    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
     background-color: var(--nile-colors-button-primary-disabled);
+    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
+    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
+    color: #98a2b3; /*for v2 */
+    cursor: not-allowed;
+  }
+
+  /*  Secondary */
+  .button--standard.button--secondary {
+    background-color: var(--nile-colors-button-secondary);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-button-secondary-hover);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-button-secondary-pressed);
+    border-color: var(--nile-colors-button-secondary-pressed-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary.button--disabled {
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary.button--disabled:hover,
+  .button--standard.button--secondary.button--disabled:active {
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
     cursor: not-allowed;
   }
 
@@ -170,7 +186,7 @@ export const styles = css`
   }
 
   /* ghost  */
-  .button--standard.button--ghost{
+  .button--standard.button--ghost {
     background-color: var(--nile-colors-button-tertiary);
     border-color: transparent;
     color: var(--nile-colors-button-tertiary-text);
@@ -184,14 +200,14 @@ export const styles = css`
 
   .button--standard.button--ghost:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-tertiary-pressed);
-    border-color:transparent;
+    border-color: transparent;
     color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--ghost.button--disabled,
   .button--standard.button--ghost.button--disabled:hover,
   .button--standard.button--ghost.button--disabled:active {
-    border-color:transparent;
+    border-color: transparent;
     background-color: var(--nile-colors-button-tertiary-disabled);
     color: var(--nile-colors-button-tertiary-disabled-text);
     cursor: not-allowed;
@@ -225,68 +241,217 @@ export const styles = css`
     color: var(--nile-colors-button-caution-disabled-text);
   }
 
+  /* destructive */
+  .button--standard.button--destructive {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 
-        /* Primary Variant - Nile Icon Fill */
-        .button--standard.button--primary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
-      }
-      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
-      }
-      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
-      }
-
-      /* Secondary Variant */
-      .button--standard.button--secondary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
-      }
-      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
-      }
-      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
-      }
-
-      /* Tertiary Variant */
-      .button--standard.button--tertiary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
-      }
-
-        /* Ghost Variant */
-      .button--standard.button--ghost ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--ghost ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
-      }
-
-      /* Caution Variant */
-      .button--standard.button--caution ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
-      }
-      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
-      }
-      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
-      }
-
-    /*
+  .button--standard.button--destructive:hover:not(.button--disabled) {
+    background-color: #b42318;
+    border-color: #b42318;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--destructive:active:not(.button--disabled) {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+  .button--standard.button--destructive:focus-visible:not(.button--disabled) {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  .button--standard.button--destructive.button--disabled {
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--destructive.button--disabled:hover,
+  .button--standard.button--destructive.button--disabled:active {
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* secondary-Grey */
+  .button--standard.button--secondary-grey {
+    background-color: #fff;
+    border-color: #d0d5dd;
+    color: #344054;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-grey:hover:not(.button--disabled) {
+    background-color: #f9fafb;
+    border-color: #d0d5dd;
+    color: #182230;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-grey:active:not(.button--disabled) {
+    background-color: #fff;
+    border-color: #d0d5dd;
+    color: #344054;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+  }
+
+  .button--standard.button--secondary-grey.button--disabled {
+    background-color: #eaecf0;
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary-grey.button--disabled:hover,
+  .button--standard.button--secondary-grey.button--disabled:active {
+    background-color: #eaecf0;
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* secondary-blue */
+  .button--standard.button--secondary-blue {
+    background-color: #fff;
+    border-color: #85aad1;
+    color: #005291;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-blue:hover:not(.button--disabled) {
+    background-color: #eaf0f8;
+    border-color: #85aad1;
+    color: #004678;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-blue:active:not(.button--disabled) {
+    background-color: #fff;
+    border-color: #85aad1;
+    color: #005291;
+    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
+  }
+
+  .button--standard.button--secondary-blue.button--disabled {
+    background-color: #fff;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary-blue.button--disabled:hover,
+  .button--standard.button--secondary-blue.button--disabled:active {
+    background-color: #fff;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* Primary Variant - Nile Icon Fill */
+  .button--standard.button--primary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+  }
+  .button--standard.button--primary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--primary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+  }
+  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
+  }
+
+  /* Secondary Variant */
+  .button--standard.button--secondary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+  }
+  .button--standard.button--secondary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--secondary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+  }
+  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-secondary-disabled-text
+    ) !important;
+  }
+
+  /* Tertiary Variant */
+  .button--standard.button--tertiary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--tertiary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--tertiary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-tertiary-disabled-text
+    ) !important;
+  }
+
+  /* Ghost Variant */
+  .button--standard.button--ghost ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--ghost:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--ghost:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--ghost ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-tertiary-disabled-text
+    ) !important;
+  }
+
+  /* Caution Variant */
+  .button--standard.button--caution ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+  }
+  .button--standard.button--caution:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--caution:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+  }
+  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
+  }
+
+  /* destructive */
+  .button--standard.button--destructive ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+  .button--standard.button--destructive:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--caution:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+
+  /*
    * Outline buttons
    */
 
@@ -388,12 +553,83 @@ export const styles = css`
     color: var(--nile-colors-white-base);
   }
 
- .button--outline.button--danger:active:not(.button--disabled) {
+  .button--outline.button--danger:active:not(.button--disabled) {
     border-color: var(--nile-colors-red-700);
     background-color: var(--nile-colors-red-700);
     color: var(--nile-colors-white-base);
   }
 
+  /* destructive  */
+  .button--outline.button--destructive {
+    border-color: #fda29b;
+    color: #b42318;
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--destructive:hover:not(.button--disabled),
+  .button--outline.button--destructive.button--checked:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #912018;
+    background-color: #fef3f2;
+  }
+
+  .button--outline.button--destructive:active:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #b42318;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  /* destructive - focus-visible */
+  .button--outline.button--destructive:focus-visible:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #b42318;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  /* secondary-grey  */
+  .button--outline.button--secondary-grey {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-grey:hover:not(.button--disabled),
+  .button--outline.button--secondary-grey.button--checked:not(
+      .button--disabled
+    ) {
+    color: #344054;
+    background-color: #f9fafb;
+  }
+
+  .button--outline.button--secondary-grey:active:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  /* secondary-blue  */
+  .button--outline.button--secondary-blue {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-blue:hover:not(.button--disabled),
+  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {
+    color: #004678;
+    background-color: #EAF0F8;
+  }
+
+  .button--outline.button--secondary-blue:active:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+  
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;
@@ -486,4 +722,8 @@ export const styles = css`
     pointer-events: none;
   }
 
+  /* outline with no border */
+  .button--outline.button--hideborder {
+    border: 0px;
+  }
 `;