@aquera/nile-elements 0.0.48 → 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.48",
+  "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-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-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=";

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

@@ -93,7 +93,8 @@ export const styles = css`
     font-size: 14px;
     font-style: normal;
     line-height: 14px;
-    letter-spacing: 0.2px;  }
+    letter-spacing: 0.2px;
+  }
 
   /* Standard inputs */
   .input--standard {
@@ -448,6 +449,22 @@ export const styles = css`
   .input__password {
     font-family: 'disc';
   }
+
+  .input__non-printable {
+    width: 280px;
+    height: 12px;
+    border-radius: 4px;
+    background-color: #ffffff;
+    border: 1px solid grey;
+    color: red;
+    padding: 10px;
+    font-size: 12px;
+  }
+
+  .input__remove-non-printable {
+    color: #035da6;
+    margin-left: 10px;
+  }
 `;
 
 export default [styles];

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

@@ -72,6 +72,9 @@ export class NileInput extends NileElement implements NileFormControl {
   /** The current value of the input, submitted as a name/value pair with form data. */
   @property() value = '';
 
+  @property({type: Boolean}) checkNonPrintableChar: boolean = false;
+
+
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
 
@@ -218,6 +221,7 @@ export class NileInput extends NileElement implements NileFormControl {
   // can be set before the component is rendered.
   //
 
+  @state() hasPrintableCharacters: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -345,15 +349,57 @@ export class NileInput extends NileElement implements NileFormControl {
     // If step changes, the value may become invalid so we need to recheck after the update. We set the new step
     // imperatively so we don't have to wait for the next render to report the updated validity.
     this.input.step = String(this.step);
-    this.formControlController.updateValidity();
   }
 
   @watch('value', { waitUntilFirstUpdate: true })
   async handleValueChange() {
     await this.updateComplete;
-    this.formControlController.updateValidity();
+
+    if(this.checkNonPrintableChar){
+      this.findNonPrintableChar();
+    }
+  }
+
+
+  /** checks non printable characters in the value. */
+  findNonPrintableChar() {
+    this.hasPrintableCharacters = false;
+
+    if (this.value) {
+      for (let i = 0, n = this.value.length; i < n; i++) {
+        const charCode = this.value.charCodeAt(i);
+
+        // Check if the character is non-printable
+        if ((charCode > 255 && charCode !== 9109) || [129, 143, 144, 157, 160].includes(charCode)) {
+          this.hasPrintableCharacters = true;
+          this.emit('nile-value', { value: this.value , hasPrintableCharacters: true });
+          break;
+        }
+      }
+    }
   }
 
+  /** Removes all non printable characters from the value. */
+  removeAllNonPrintableCharacters() {
+    let cleanedValue = '';
+
+    if (this.value) {
+      for (let i = 0, n = this.value.length; i < n; i++) {
+        const charCode = this.value.charCodeAt(i);
+
+        // Consider a character printable if it's not in the specified non-printable ranges
+        if (!(charCode > 255 && charCode !== 9109) && ![129, 143, 144, 157, 160].includes(charCode)) {
+          cleanedValue += this.value.charAt(i);
+        }
+      }
+    }
+
+    this.value = cleanedValue;
+    this.emit('nile-npchar-removed', { value: this.value });
+
+  }
+
+
   /** Sets focus on the input. */
   focus(options?: FocusOptions) {
     this.input.focus(options);
@@ -478,7 +524,13 @@ export class NileInput extends NileElement implements NileFormControl {
         ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
 
         <div part="form-control-input" class="form-control-input">
+        <nile-popup ?active=${this.hasPrintableCharacters}
+        placement="bottom-start"
+        distance="5"
+        strategy="fixed"
+        >
           <div
+            slot="anchor"
             part="base"
             class=${classMap({
               input: true,
@@ -598,6 +650,13 @@ export class NileInput extends NileElement implements NileFormControl {
 
             <slot name="suffix" part="suffix" class="input__suffix"></slot>
           </div>
+
+          <div class="input__non-printable">
+          Non-printable character detected.<span class="input__remove-non-printable" @click=${
+            this.removeAllNonPrintableCharacters
+          }> Remove All </span>
+          </div>
+          </nile-popup>
         </div>
 
         ${