@aquera/nile-elements 0.0.48 → 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.48",
+  "version": "0.0.50",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -43,7 +43,16 @@ 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 { 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/index.ts

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

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

@@ -0,0 +1,104 @@
+/**
+ * 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;
+    color:var(--nile-colors-white-base);
+    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,154 @@
+/**
+ * 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 = '';
+
+  /** 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'
+    | '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 && !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
+        : 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-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-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-icon/icons/svg/bar-chart-square-03.ts

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

package/src/nile-icon/icons/svg/index.ts

@@ -32,6 +32,7 @@ export { default as attributemapanalysisicon } from './attribute-map-analysis-ic
 export { default as attributemap } from './attributemap';
 export { default as back } from './back';
 export { default as barchartsquare02 } from './bar-chart-square-02';
+export { default as barchartsquare03 } from './bar-chart-square-03';
 export { default as bargraph } from './bargraph';
 export { default as basic } from './basic';
 export { default as bellicon } from './bell-icon';
@@ -388,6 +389,7 @@ export { default as timezone } from './timezone';
 export { default as trash01 } from './trash-01';
 export { default as trashnofill } from './trash-no-fill';
 export { default as trash } from './trash';
+export { default as trendup02 } from './trend-up-02';
 export { default as trigger } from './trigger';
 export { default as undo1 } from './undo-1';
 export { default as undo } from './undo';

package/src/nile-icon/icons/svg/trend-up-02.ts

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