@aquera/nile-elements 0.0.48 → 0.0.50

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;
@@ -93,12 +93,14 @@ 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 {
-    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) {
@@ -128,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 {
@@ -142,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;
@@ -177,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;
@@ -233,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 {
@@ -261,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;
   }
 
@@ -294,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;
   }
 
@@ -448,6 +475,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 = '';
 
@@ -90,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;
 
@@ -218,6 +225,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 +353,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 +528,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,
@@ -494,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,
@@ -598,6 +655,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>
 
         ${

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];

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

@@ -0,0 +1,81 @@
+/**
+ * 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 { styles } from './nile-sidebar-menu-items.css';
+import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * Nile sidebar-menu-items component.
+ *
+ * @tag nile-sidebar-menu-items
+ *
+ */
+@customElement('nile-sidebar-menu-items')
+export class NileSidebarMenuItems extends NileElement {
+  /**
+   * The styles for nile-sidebar-menu-items
+   * @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() iconValue = ''; // name of the icon we are using
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  @state() collapsed = false;
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html`
+      <div
+        class=${classMap({
+          'nile__sidebar-menu-item': true,
+          'hide-sidebar-menu-items': this.collapsed,
+        })}
+      >
+        ${this.iconValue
+          ? html`<nile-icon
+              name="${this.iconValue}"
+              aria-label="${this.iconValue}"
+              size="24"
+            ></nile-icon>`
+          : ``}
+        <slot
+          class=${classMap({
+            'hide-items': this.collapsed,
+          })}
+        ></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileSidebarMenuItems;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-sidebar-menu-items': NileSidebarMenuItems;
+  }
+}

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

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

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

@@ -0,0 +1,116 @@
+/**
+ * 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';
+
+/**
+ * SidebarWrapper CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  .wrapper-box {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+  }
+
+  .wrapper-box--right {
+    flex-direction: row-reverse;
+  }
+
+  .sidebar-content {
+    display: flex;
+    height: 100%;
+  }
+
+  .body-content {
+    display: flex;
+    height: 100%;
+    background-color: red;
+  }
+
+  .sidebar__content--overlay {
+    position: absolute;
+    z-index: 1000;
+  }
+
+  .sidebar__content--overlay--right {
+    right: 0;
+  }
+
+  .sidebar__content--overlay--left {
+    left: 0;
+  }
+
+  .body__content--overlay {
+    position: absolute;
+    left: 0;
+    opacity:0.5;
+    background-color:var(--nile-sidebar-wrapper-overlay-background-color);
+  }
+
+  /* For left side  */
+  .sidebar__content--overlay-open-left {
+    animation: slide-in-left 0.3s ease-in-out forwards;
+  }
+
+  .sidebar__content--overlay-closed-left {
+    animation: slide-out-left 0.3s ease-in-out forwards;
+  }
+
+  @keyframes slide-in-left {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-left {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  /* For right side */
+  .sidebar__content--overlay-open-right {
+    animation: slide-in-right 0.3s ease-in-out forwards;
+  }
+
+  .sidebar__content--overlay-closed-right {
+    animation: slide-out-right 0.3s ease-in-out forwards;
+  }
+
+  @keyframes slide-in-right {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-right {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+
+export default [styles];