@aquera/nile-elements 0.0.49 → 0.0.50

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.50",
   "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-circular-progressbar/index.ts

@@ -0,0 +1 @@
+export { NileCircularProgressbar } from './nile-circular-progressbar';

package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts

@@ -0,0 +1,45 @@
+/**
+ * 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';
+
+/**
+ * Progressbar CSS
+ */
+export const styles = css`
+  :host{
+    
+  }
+  .track {
+    stroke-width: 2px;
+    stroke: var(--nile-colors-yellow-400);
+    opacity: 0.5;
+    fill: none;
+  }
+
+  .progress {
+    stroke-width: 2px;
+    stroke: #e5bf43;
+    stroke-linecap: round;
+    fill: none;
+    transform: rotate(270deg);
+    transform-origin: center;
+  }
+
+  .circle__text {
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    font-size: var(--nile-type-scale-1);
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular);
+    line-height: var(--nile-type-scale-1);
+    letter-spacing: 0.2px;
+    text-transform: uppercase;
+  }
+`;
+
+export default [styles];

package/src/nile-circular-progressbar/nile-circular-progressbar.ts

@@ -0,0 +1,95 @@
+/**
+ * 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, query } from 'lit/decorators.js';
+import { styles } from './nile-circular-progressbar.css';
+import NileElement from '../internal/nile-element';
+import logInfo from '../nile-icon/icons/svg/log-info';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-progressbar
+ *
+ */
+@customElement('nile-circular-progressbar')
+export class NileCircularProgressbar extends NileElement {
+  /**
+   * The styles for Progressbar
+   * @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];
+  }
+  @query('.progress') progressCircle: any;
+  @property({ type: Number, reflect: true }) progress = 50;
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  // make reactive to pass through
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      if (this.progress < 0) {
+        this.progress = 0;
+      }
+      if (this.progress > 100) {
+        this.progress = 100;
+      }
+      this.setProgress(this.progress);
+    });
+  }
+  private setProgress(percent: number) {
+    const circleRadius = this.progressCircle.r.baseVal.value;
+    let circumference = circleRadius * 2 * Math.PI;
+    this.progressCircle.style.strokeDasharray = circumference;
+    this.progressCircle.style.strokeDashoffset =
+      circumference - (percent / 100) * circumference;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <svg width="40" height="40">
+        <circle r="19" cx="20" cy="20" class="track"></circle>
+        <circle r="19" cx="20" cy="20" class="progress"></circle>
+        <text
+          x="50%"
+          y="50%"
+          text-anchor="middle"
+          alignment-baseline="middle"
+          class="circle__text"
+        >
+          ${this.progress} %
+        </text>
+      </svg>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileCircularProgressbar;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-circular-progressbar': NileCircularProgressbar;
+  }
+}

package/src/nile-form-error-message/nile-form-error-message.css.ts

@@ -17,12 +17,13 @@ export const styles = css`
   .nile-form-error-message {
     display: flex;
     align-items: center;
-    color: var(--nile-colors-red-700);
+    color: var(--nile-form-error-text-color);
     font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-size: var(--nile-form-error-text-font-size);
     font-style: normal;
     font-weight: 400;
     line-height: 12px;
+    line-height: var(--nile-form-error-text-line-height);
     letter-spacing: 0.2px;
     margin-top: 6px;
   }

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -1,29 +1,29 @@
 /**
-* 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';
 
 /**
  * FormHelpText CSS
  */
 export const styles = css`
-	:host {
-
-	}
+  :host {
+  }
 
   .nile-form-help-text {
     display: flex;
     align-items: center;
     color: var(--nile-colors-dark-500);
+    color: var(--nile-form-help-text-color);
     font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-size: var(--nile-form-help-text-font-size);
     font-style: normal;
     font-weight: 400;
-    line-height: 12px;
+    line-height: var(--nile-form-help-text-line-height);
     letter-spacing: 0.2px;
     margin-top: 6px;
     margin-right: 4px;
@@ -36,7 +36,7 @@ export const styles = css`
     color: var(--nile-colors-primary-600);
     cursor: pointer;
     white-space: nowrap;
-    align-items: center
+    align-items: center;
   }
 `;
 

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

@@ -44,20 +44,20 @@ export const styles = css`
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: #A4121C;
+    color: #a4121c;
   }
 
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: #7F7F7F;
+    color: #7f7f7f;
     margin-top: 6px;
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
-    color: #A4121C;
+    color: #a4121c;
     margin-top: 12px;
     font-size: 12px;
     font-style: normal;
@@ -98,8 +98,9 @@ export const styles = css`
 
   /* Standard inputs */
   .input--standard {
-    background-color: hsl(0, 0%, 100%);
-    border: solid 1px #c7ced4;
+    background-color: var(--nile-input-standard-background-color);
+    border: solid 1px var(--nile-input-standard-border-color);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /**for v2 */
   }
 
   .input--standard:hover:not(.input--disabled) {
@@ -129,6 +130,7 @@ export const styles = css`
 
   .input--standard.input--disabled .input__control::placeholder {
     color: hsl(240 5.2% 33.9%);
+    color: var(--nile-input-standard-disabled-placeholder-font-color);
   }
 
   .input--standard.input--warning {
@@ -143,6 +145,17 @@ export const styles = css`
     border-color: #43e5c0;
   }
 
+  .input--standard.input--destructive {
+    border-color: #fda29b;
+  }
+
+  .input--standard.input--destructive:focus {
+    border: 1px solid #fda29b;
+    /* Focus rings/ring-error-shadow-xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
   /* Filled inputs */
   .input--filled {
     border: none;
@@ -178,7 +191,7 @@ export const styles = css`
     cursor: inherit;
     -webkit-appearance: none;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-sans-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -234,12 +247,18 @@ export const styles = css`
   }
 
   .input__control::placeholder {
-    color: hsl(240 3.8% 46.1%);
+    color: #7f7f7f;
+    color: #667085; /**for v2 */
     user-select: none;
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: hsl(240 5.3% 26.1%);
+    color: #000;
+    font-size: 14px;
+    line-height: 14px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.2px;
   }
 
   .input__control:focus {
@@ -262,13 +281,20 @@ export const styles = css`
     color: hsl(240 3.8% 46.1%);
   }
 
+  .input--standard:focus {
+    border-radius: 4px;
+    border: 1px solid #85aad1; /**for v2 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(133, 170, 209, 0.24); /**for v2 */
+  }
+
   /*
    * Size modifiers
    */
 
   .input--small {
     border-radius: 0.25rem;
-    font-size: 0.875rem;
+    font-size: var(--nile-input-font-size-small);
     height: 1.875rem;
   }
 
@@ -295,7 +321,7 @@ export const styles = css`
 
   .input--medium {
     border-radius: 0.25rem;
-    font-size: 1rem;
+    font-size: var(--nile-input-font-size-medium);
     height: 38px;
   }
 

package/src/nile-input/nile-input.ts

@@ -93,6 +93,10 @@ export class NileInput extends NileElement implements NileFormControl {
   /** Sets the input to a success state, changing its visual appearance. */
   @property({ type: Boolean }) success = false;
 
+
+  /** Sets the input to a Destructive state, changing its visual appearance. */
+  @property({ type: Boolean }) destructive = false;
+
   /** Draws a pill-style input with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
@@ -546,6 +550,7 @@ export class NileInput extends NileElement implements NileFormControl {
               'input--warning': this.warning,
               'input--error': this.error,
               'input--success': this.success,
+              'input--destructive': this.destructive,
               'input--filled': this.filled,
               'input--disabled': this.disabled,
               'input--focused': this.hasFocus,

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

@@ -12,6 +12,7 @@ import {css} from 'lit-element';
  */
 export const styles = css`
 
+
 :host {
     --arrow-color: hsl(240 4.8% 95.9%);
     --arrow-size: 6px;

package/src/nile-sidebar-menu/index.ts

@@ -0,0 +1 @@
+export { NileSidebarMenu } from './nile-sidebar-menu';

package/src/nile-sidebar-menu/nile-sidebar-menu.css.ts

@@ -0,0 +1,49 @@
+/**
+ * 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';
+
+/**
+ * SidebarMenu CSS
+ */
+export const styles = css`
+  :host {
+    background-color: var(--nile-sidebar-menu-background-color);
+    --min-width: 80px;
+    min-width: var(--min-width);
+    width: max-content;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    padding: 0 16px;
+    flex-direction: column;
+  }
+
+  .submenu__box {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    padding:12px 0;
+  }
+
+  .sidemenu__items-list {
+    display:flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .footer {
+    display:flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+`;
+
+export default [styles];

package/src/nile-sidebar-menu/nile-sidebar-menu.ts

@@ -0,0 +1,98 @@
+/**
+ * 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, query } from 'lit/decorators.js';
+import { styles } from './nile-sidebar-menu.css';
+import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { foreach, log } from '../nile-icon/icons/svg';
+
+/**
+ * Nile sidebar-menu component.
+ *
+ * @tag nile-sidebar-menu
+ *
+ */
+@customElement('nile-sidebar-menu')
+export class NileSidebarMenu extends NileElement {
+  /**
+   * The styles for nile-sidebar-menu
+   * @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];
+  }
+
+  @property({ type: Boolean, reflect: true }) sidemenucollapsed = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleSidebarMenuCollapsed.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleSidebarMenuCollapsed);
+  }
+  firstUpdated() {
+    if (this.sidemenucollapsed) {
+      const items = this.querySelectorAll('nile-sidebar-menu-items');
+      items.forEach(curr_item => {
+        curr_item.collapsed = this.sidemenucollapsed;
+      });
+    }
+  }
+
+  handleSidebarMenuCollapsed() {
+    this.sidemenucollapsed = !this.sidemenucollapsed;
+    const items = this.querySelectorAll('nile-sidebar-menu-items');
+    items.forEach(curr_item => {
+      curr_item.collapsed = this.sidemenucollapsed;
+    });
+  }
+
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html`
+      <slot name="header" class="header"></slot>
+      <div class="submenu__box">
+        <slot
+          class=${classMap({
+            'sidemenu__items-list': true,
+          })}
+        >
+        </slot>
+        <slot name="footer" part="footer" class="footer"></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileSidebarMenu;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-sidebar-menu': NileSidebarMenu;
+  }
+}

package/src/nile-sidebar-menu-items/index.ts

@@ -0,0 +1 @@
+export { NileSidebarMenuItems } from './nile-sidebar-menu-items';

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts

@@ -0,0 +1,47 @@
+/**
+ * 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';
+
+/**
+ * SidebarMenuItems CSS
+ */
+export const styles = css`
+  :host {
+    --min-width: 280px;
+  }
+
+  .nile__sidebar-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    gap: 15px;
+    min-width: var(--min-width);
+    width: max-content;
+    box-sizing: border-box;
+
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-type-scale-4);
+    font-weight: 500;
+    line-height: var(--nile-line-height-medium);
+  }
+
+  .nile__sidebar-menu-item:hover {
+    background-color: #f9fafb;
+    border-radius: 6px;
+  }
+
+  .hide-sidebar-menu-items{
+    min-width:48px;
+  }
+
+  .hide-items {
+    display: none;
+  }
+`;
+
+export default [styles];