@aquera/nile-elements 0.0.49 → 0.0.51

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

@@ -51,9 +51,14 @@ export class NileButton extends NileElement implements NileFormControl {
       // Fall back to the closest containing form
       return input.closest('form');
     },
-    assumeInteractionOn: ['click']
+    assumeInteractionOn: ['click'],
   });
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    '[default]',
+    'prefix',
+    'suffix'
+  );
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
 
@@ -62,10 +67,18 @@ export class NileButton extends NileElement implements NileFormControl {
   @property() title = ''; // make reactive to pass through
 
   /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' | 'caution'|'ghost'  = 'primary';
+  @property({ reflect: true }) variant:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'caution'
+    | 'ghost'
+    | 'destructive'
+    | 'secondary-grey'
+    | 'secondary-blue' = 'primary';
 
   /** The button's size. */
-  @property({ reflect: true }) size:  'medium' = 'medium';
+  @property({ reflect: true }) size: 'medium' = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   @property({ type: Boolean, reflect: true }) caret = false;
@@ -134,16 +147,28 @@ export class NileButton extends NileElement implements NileFormControl {
 
   /** Used to override the form owner's `enctype` attribute.  */
   @property({ attribute: 'formenctype' })
-  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+  formEnctype:
+    | 'application/x-www-form-urlencoded'
+    | 'multipart/form-data'
+    | 'text/plain';
 
   /** Used to override the form owner's `method` attribute.  */
   @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';
 
   /** Used to override the form owner's `novalidate` attribute. */
-  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;
+  @property({ attribute: 'formnovalidate', type: Boolean })
+  formNoValidate: boolean;
 
   /** Used to override the form owner's `target` attribute. */
-  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+  @property({ attribute: 'formtarget' }) formTarget:
+    | '_self'
+    | '_blank'
+    | '_parent'
+    | '_top'
+    | string;
+
+  @property({ type: Boolean, reflect: true, attribute: 'hide-border' })
+  hideBorder = false;
 
   /** Gets the validity state object */
   get validity() {
@@ -293,6 +318,10 @@ export class NileButton extends NileElement implements NileFormControl {
           'button--tertiary': this.variant === 'tertiary',
           'button--caution': this.variant === 'caution',
           'button--ghost': this.variant === 'ghost',
+          'button--destructive': this.variant === 'destructive',
+          'button--secondary-grey': this.variant === 'secondary-grey',
+          'button--secondary-blue': this.variant === 'secondary-blue',
+          'button--hideborder': this.hideBorder,
           'button--medium': this.size === 'medium',
           'button--caret': this.caret,
           'button--circle': this.circle,
@@ -304,11 +333,14 @@ export class NileButton extends NileElement implements NileFormControl {
           'button--pill': this.pill,
           'button--has-label': this.hasSlotController.test('[default]'),
           'button--has-prefix': this.hasSlotController.test('prefix'),
-          'button--has-suffix': this.hasSlotController.test('suffix')
+          'button--has-suffix': this.hasSlotController.test('suffix'),
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}
-        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+        title=${
+          this
+            .title /* An empty title prevents browser validation tooltips from appearing on hover */
+        }
         name=${ifDefined(isLink ? undefined : this.name)}
         value=${ifDefined(isLink ? undefined : this.value)}
         href=${ifDefined(isLink ? this.href : undefined)}
@@ -327,7 +359,16 @@ export class NileButton extends NileElement implements NileFormControl {
         <slot part="label" class="button__label"></slot>
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${
-          this.caret ? html` <nile-icon part="caret" class="button__caret" color="white" name="arrowdown"></nile-icon> ` : ''
+          this.caret
+            ? html`
+                <nile-icon
+                  part="caret"
+                  class="button__caret"
+                  color="white"
+                  name="arrowdown"
+                ></nile-icon>
+              `
+            : ''
         }
         ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}
       </${tag}>
@@ -338,7 +379,7 @@ export class NileButton extends NileElement implements NileFormControl {
 export default NileButton;
 
 declare global {
- interface HTMLElementTagNameMap {
+  interface HTMLElementTagNameMap {
     'nile-button': NileButton;
   }
 }

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

@@ -15,7 +15,7 @@ export const styles = css`
   }
 
   .calendar-container {
-    font-family:var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif);
     width: 290px;
     height: auto;
     text-align: center;
@@ -125,6 +125,12 @@ export const styles = css`
     color: white;
   }
 
+  .selected-date:hover,
+  .range-start:hover,
+  .range-end:hover {
+    background: #a5d3f3;
+  }
+
   .range-start {
     background: #a5d3f3;
     border-radius: 4px 0 0 4px;
@@ -174,9 +180,9 @@ export const styles = css`
     margin-top: 6px;
     padding: 0 16px;
     width: 290px;
-    display:flex;
-    flex-wrap:wrap;
-    gap:8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
   }
 
   .calender-input--relative {
@@ -189,11 +195,11 @@ export const styles = css`
     justify-content: space-between;
     gap: 8px;
     margin-top: 12px;
-    width:auto;
+    width: auto;
   }
 
   .manual-input {
-    width:125px;
+    width: 125px;
   }
 
   .manual-input-label {
@@ -239,7 +245,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     width: 352px;
-    gap:10px;
+    gap: 10px;
     padding: 24px 24px 0 24px;
   }
 
@@ -247,7 +253,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     align-items: start;
-    justify-content:center;
+    justify-content: center;
     gap: 12px;
   }
 
@@ -347,7 +353,7 @@ export const styles = css`
 
   .not-allowed {
     pointer-events: none;
-    color:var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500);
   }
 `;
 

package/src/nile-calendar/nile-calendar.ts

@@ -92,7 +92,7 @@ export class NileCalendar extends NileElement {
 
   firstUpdated() {
     const allowedDatesAttribute = this.getAttribute('allowed-dates');
-    
+
     if (allowedDatesAttribute !== null ) {
       try {
         this.allowedDates = JSON.parse(allowedDatesAttribute);
@@ -145,6 +145,11 @@ export class NileCalendar extends NileElement {
 
   @watch('value')
   valueChanged() {
+
+    if (typeof this.value === 'object' && this.value !== null) {
+      this.value = JSON.stringify(this.value);
+    }
+
     if (this.range && this.value) {
       this.rangeValue = this.value;
       this.value = null;
@@ -879,8 +884,8 @@ export class NileCalendar extends NileElement {
                       }"> </nile-input>
                   </div>
             </div>
-              
-            <div> 
+
+            <div>
                   <span class="manual-input-label">To </span>
                   <div class="from">
                       <nile-input class="manual-input" value="${this.formatDate(
@@ -895,7 +900,7 @@ export class NileCalendar extends NileElement {
                       }"> </nile-input>
                   </div>
             </div>
-            
+
         </div>
         <div class="button-container">
             <nile-button class="apply-button"  ?disabled="${
@@ -916,4 +921,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-calendar': NileCalendar;
   }
-}
+}

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

@@ -58,8 +58,9 @@ export const styles = css`
     border-top: solid var(--border-width) var(--border-color);
     padding: var(--footer-padding);
     border:1px solid var(--nile-card-footer-border-color);
-    background-color:var(--nile-card-footer-background-color);
+    border-width: var(--nile-card-footer-border-width);
     border-radius:var(--nile-card-footer-border-radius);
+    background-color:var(--nile-card-footer-background-color);
   }
 
   .card:not(.card--has-footer) .card__footer {

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