@aquera/nile-elements 0.1.17 → 0.1.19

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

@@ -36,10 +36,10 @@ export const styles = css`
    */
 
   .tag--primary {
-    background: #005EA6;
-    border-color: #005EA6;
-    border: 2px solid  #005EA6;
-    color: #FFF;
+    background: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    border: 2px solid  var(--nile-colors-primary-600);
+    color: var(--nile-colors-white-base);
   }
 
   .tag--primary:hover {
@@ -51,13 +51,13 @@ export const styles = css`
   }
 
   .tag--success {
-    background: #A5F3E1;
-    border: 2px solid #A5F3E1;
-    color: #000;
+    background: var(--nile-colors-green-400);
+    border: 2px solid var(--nile-colors-green-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid #43E5C0;
+    border: 2px solid var(--nile-colors-green-500);
   }
 
   .tag--success:active > nile-icon-button {
@@ -65,13 +65,13 @@ export const styles = css`
   }
 
   .tag--normal {
-    background: #E5E9EB;
-    border: 2px solid #E5E9EB;
-    color: #000;
+    background: var(--nile-colors-neutral-400);
+    border: 2px solid var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--normal:hover {
-    border: 2px solid #C7CED4;
+    border: 2px solid var(--nile-colors-neutral-500);
   }
 
 
@@ -80,13 +80,13 @@ export const styles = css`
   }
 
   .tag--warning {
-    background: #F3E0A5;
-    border: 2px solid #F3E0A5;
-    color: #000;
+    background: var(--nile-colors-yellow-400);
+    border: 2px solid var(--nile-colors-yellow-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid #E5BF43;
+    border: 2px solid var(--nile-colors-yellow-500);
   }
 
   .tag--warning:active > nile-icon-button {
@@ -95,13 +95,13 @@ export const styles = css`
 
 
   .tag--error {
-    background: #F3A5AA;
-    border: 2px solid #F3A5AA;
-    color: #000;
+    background: var(--nile-colors-red-400);
+    border: 2px solid var(--nile-colors-red-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid #E5434D;
+    border: 2px solid var(--nile-colors-red-500);
   }
 
   .tag--error:active > nile-icon-button {
@@ -109,13 +109,13 @@ export const styles = css`
   }
 
   .tag--info {
-    background: #A5D3F3;
-    border: 2px solid #A5D3F3;
-    color: #000000;
+    background: var(--nile-colors-blue-400);
+    border: 2px solid var(--nile-colors-blue-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid #42A3E5;
+    border: 2px solid var(--nile-colors-blue-500);
   }
 
   .tag--info:active > nile-icon-button {

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

@@ -39,7 +39,7 @@ export const styles = css`
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: #a4121c;
+    color: var( --nile-colors-red-700);
   }
 
   /* Help text */
@@ -110,7 +110,7 @@ export const styles = css`
 
   .textarea--standard.textarea--focused:not(.textarea--disabled)
     .textarea__control {
-    color: #000000;
+    color: var(--nile-colors-dark-900);
   }
 
   .textarea--standard.textarea--disabled {
@@ -196,12 +196,12 @@ export const styles = css`
   }
 
   .textarea--standard.textarea--destructive {
-    border-color: #fda29b;
+    border-color: var(--nile-colors-red-400);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .textarea--standard.textarea--destructive.textarea--focused {
-    border-color: #fda29b;
+    border-color: var(--nile-colors-red-400);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }

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

@@ -130,12 +130,12 @@ export const styles = css`
 
   .alert__message--title {
     font-weight: 600;
-    color:#344054;
+    color:var(--nile-colors-dark-900);
   }
 
   .alert__message--content {
     font-weight:400;
-    color:#475467;
+    color:var(--nile-colors-dark-500);
   }
 
   .alert__message--content-only {

package/src/nile-toast/nile-toast.ts

@@ -371,7 +371,7 @@ export class NileToast extends NileElement {
                 name="${this.closeIconName}"
                 label="close"
                 size="20"
-                color="#98A2B3"
+                color="var(--nile-colors-neutral-700)"
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `

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

@@ -27,7 +27,7 @@ export const styles = css`
     font-weight: var(--nile-toolbar-font-weight);
     font-family: var(--nile-font-family-sans-serif);
     font-size: var(--nile-toolbar-font-size);
-    background-color: var(--nile-toolbar-background-color, #FFFFFF);
+    background-color: var(--nile-toolbar-background-color, var(--nile-colors-white-base));
     color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
   }
 `;

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

@@ -55,7 +55,7 @@ export const styles = css`
     font-weight: var(--nile-tooltip-font-weight-sm);
     line-height: var(--nile-tooltip-line-height-sm);
     padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: #ffffff;
+    color: var(--nile-colors-white-base);
     pointer-events: none;
     word-break: break-word;
   }

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

@@ -15,20 +15,21 @@ export const styles = css`
   }
 
   .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #1978B8);
+    background-color: var(--nile-tour-background-color, #1978b8);
     color: var(--nile-tour-text-color, #fff);
     width: 300px;
     max-width: 300px;
-    border-radius: 4px;
-    border: 1px solid var(--Neutral-30, #1978B8);
-    background: var(--White-Normal, #1978B8);
+    border-radius: 12px;
+    border: 1px solid var(--Neutral-30, #1978b8);
+    background: var(--White-Normal, #1978b8);
+    /* border: 1px solid var(--Neutral-30, #C7CED4); */
 
     /* Elevation/Lifted */
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .introjs-tooltip-title {
-    color: #ffffff;
+    color: var(--nile-colors-white-base);
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
@@ -42,8 +43,12 @@ export const styles = css`
     padding-top: 18px;
   }
 
+  .introjs-progress {
+    display: none;
+  }
+
   .introjs-tooltiptext {
-    color: #ffffff;
+    color: #c7ced4;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -92,14 +97,14 @@ export const styles = css`
     transform: rotate(0);
     clip-path: inset(0px 1px 0px 0px);
     left: -13.5px;
-    border-right-color: var(--nile-tour-background-color, #fff) !important;
+    border-right-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.right-bottom {
     right: -12px;
     transform: rotate(180deg);
     clip-path: inset(0px 3px 0px 0px);
-    border-left-color: var(--nile-tour-background-color, #fff) !important;
+    border-left-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.top-middle {
@@ -113,12 +118,12 @@ export const styles = css`
   .introjs-button {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -131,12 +136,12 @@ export const styles = css`
   .introjs-button:hover {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -147,13 +152,13 @@ export const styles = css`
   .introjs-button:focus {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
     text-shadow: none;
     box-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -185,13 +190,8 @@ export const styles = css`
   }
 
   .introjs-helperLayer {
-    display: none;
-    pointer-events: none;
-  }
-
-  .introjs-overlay {
-    display: none;
-    pointer-events: none;
+    box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px,
+      rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
   }
 
   .introjs-step-counter {
@@ -200,7 +200,7 @@ export const styles = css`
     padding: 0 10px;
     display: flex;
     align-items: center;
-    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));
+    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.5));
     font-style: normal;
     font-weight: 500;
     line-height: 14px;
@@ -228,6 +228,20 @@ export const styles = css`
   .introjs-shake {
     animation: shake 0.5s ease infinite;
   }
+
+  .introjs-close-btn {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  a[disabled='true'] {
+    display: none;
+  }
 `;
 
 export default [styles];

package/src/nile-tour/nile-tour.ts

@@ -5,33 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult,  } from 'lit';
-import { customElement,property } from 'lit/decorators.js';
-import { styles } from './nile-tour.css';
+import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import introJs from 'intro.js';
+import { styles } from './nile-tour.css';
 
-/**
- * Nile tour component.
- *
- * @tag nile-tour
- */
 @customElement('nile-tour')
 export class NileTour extends LitElement {
-  private tourInstance: ReturnType<typeof introJs> | null = null;
-
-  /**
-   * The steps for the tour.
-   */
-  @property({ type: Array })
-  steps: Array<{
-    stepNo: number;
-    element: string;
-    title: string;
-    content: string;
-    position: any;
-    beforeChange?: () => Promise<boolean> | boolean;
-    afterChange?: () => Promise<void> | void;
-  }> = [];
+  tourInstance: ReturnType<typeof introJs> | null = null;
 
   /**
    * JSON string for steps.
@@ -50,7 +31,7 @@ export class NileTour extends LitElement {
    */
   @property({ type: Boolean })
   disableInteraction: boolean = false;
-
+  
   public static get styles(): CSSResultArray {
     return [styles];
   }
@@ -63,85 +44,90 @@ export class NileTour extends LitElement {
     super();
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>): void {
-    if (changedProperties.has('stepsJson')) {
-      this.parseStepsJson();
+  private parseSteps(): any[] {
+    if (Array.isArray(this.stepsJson)) {
+      return this.stepsJson;
     }
-    super.updated(changedProperties);
+    
+    console.error('Invalid stepsJson format');
+    return [];
   }
 
-  /**
-   * Parses the JSON string and updates the steps array.
-   */
-  private parseStepsJson(): void {
-    if (this.stepsJson) {
-      try {
-        const parsedSteps = JSON.parse(this.stepsJson);
-        if (Array.isArray(parsedSteps)) {
-          this.steps = parsedSteps;
-        } else {
-          console.error('Invalid JSON: Expected an array');
-        }
-      } catch (error) {
-        console.error('Failed to parse stepsJson:', error);
-      }
-    }
+  private async getElementWhenNeeded(step: any): Promise<any> {
+    return {
+      element: () => document.querySelector(`[data-tour="${step.element}"]`) as HTMLElement | null,
+      intro: step.content,
+      title: step.title,
+      position: step.position,
+      beforeChange: step.beforeChange,
+      afterChange: step.afterChange,
+      disableNext: step.disableNext || false,
+      disablePrev: step.disablePrev || false
+    };
   }
 
-  /**
-   * Initializes and starts the Intro.js tour.
-   */
-  public startTour(): void {
-    console.log('start of tour');
-    const introSteps = this.steps
-      .map((step) => ({
-        element: document.querySelector(`[data-tour="${step.element}"]`) as HTMLElement | null,
-        intro: step.content,
-        title: step.title,
-        position: step.position,
-        beforeChange: step.beforeChange,
-        afterChange: step.afterChange,
-      }));
-      // .filter((step) => step.element !== null);
+  public nextStep() {
+    this.tourInstance?.nextStep();
+  }
+  
+  public async startTour(): Promise<void> {
+    const steps = await Promise.all(this.parseSteps().map(step => this.getElementWhenNeeded(step)));
+
+    if (steps.length === 0) {
+      console.error('No valid steps found for the tour.');
+      return;
+    }
 
     this.tourInstance = introJs().setOptions({
-      steps: introSteps,
-      nextLabel: "Next",
-      prevLabel: "Prev",
-      overlayOpacity: 0,
+      steps: steps as any,
       disableInteraction: this.disableInteraction,
-      showButtons: true,
-      showStepNumbers: false,
+      nextLabel: 'Next',
+      prevLabel: 'Prev',
+      overlayOpacity: this.showBackdrop ? 0.5 : 0,
       exitOnOverlayClick: false,
+      showProgress: false,
+      showButtons: true
     });
 
     this.tourInstance.onbeforechange(async (targetElement) => {
       const currentStepIndex = this.tourInstance?._currentStep ?? 0;
-      const currentStep = this.steps[currentStepIndex];
-
-      if (currentStep?.beforeChange) {
-        const result = await currentStep.beforeChange();
-        if (!result) {
-          this.shakeTooltip();
-          return false;
+      const step = steps[currentStepIndex];
+      if (step && typeof step.element === 'function') {
+        const el = step.element();
+        if (el) {
+          if (this.tourInstance && this.tourInstance._introItems) {
+            this.tourInstance._introItems[currentStepIndex].element = el;
+          }
         }
       }
+      if (step.beforeChange) {
+        return await step.beforeChange();
+      }
       return true;
     });
 
     this.tourInstance.onafterchange((targetElement) => {
       const currentStepIndex = this.tourInstance?._currentStep ?? 0;
-      const currentStep = this.steps[currentStepIndex];
+      const step = steps[currentStepIndex];
+      if (step?.afterChange) {
+        step.afterChange();
+      }
 
-      if (currentStep?.afterChange) {
-        currentStep.afterChange();
+      
+      const nextBtn = document.querySelector('.introjs-nextbutton');
+      const prevBtn = document.querySelector('.introjs-prevbutton');
+
+      if (nextBtn) {
+        nextBtn.setAttribute('disabled', step.disableNext ? 'true' : 'false');
+      }
+      if (prevBtn) {
+        prevBtn.setAttribute('disabled', step.disablePrev ? 'true' : 'false');
       }
     });
 
-    // Update step counter on change
-    this.tourInstance.onchange((targetElement) => {
+    this.tourInstance.onchange(() => {
       const currentStep = this.tourInstance?._currentStep ?? 0;
-      const totalSteps = this.steps.length;
+      const totalSteps = steps.length;
       const tooltip = document.querySelector('.introjs-tooltip');
       if (tooltip) {
         const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -157,11 +143,9 @@ export class NileTour extends LitElement {
       }
     });
 
-
-
     this.tourInstance.start().then(() => {
       const currentStep = this.tourInstance?._currentStep ?? 0;
-      const totalSteps = this.steps.length;
+      const totalSteps = steps.length;
       const tooltip = document.querySelector('.introjs-tooltip');
       if (tooltip) {
         const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -174,33 +158,40 @@ export class NileTour extends LitElement {
           }
           stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
         }
-      }  }).catch(err => {
-      console.error('Error starting the tour:', err);
-  });
-  }
 
-  private shakeTooltip(): void {
-    const tooltip = document.querySelector('.introjs-tooltip');
-    if (tooltip) {
-      tooltip.classList.add('introjs-shake');
-      setTimeout(() => {
-        tooltip.classList.remove('introjs-shake');
-      }, 1500);
-    }
+        const closeButton = document.createElement('button');
+        closeButton.className = 'introjs-close-btn';
+        closeButton.innerHTML = `
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.33228 5.99996L0 11.3322L0.667759 12L6.00004 6.66772L11.3323 12L12.0001 11.3322L6.66779 5.99996L12 0.667759L11.3322 0L6.00004 5.3322L0.667842 5.96046e-08L8.40425e-05 0.667759L5.33228 5.99996Z" fill="white" fill-opacity="0.5"/>
+          </svg>`;
+        closeButton.onclick = () => this.tourInstance?.exit(true);
+        tooltip.appendChild(closeButton);
+      }
+    }).catch(err => {
+      console.error('Error starting the tour:', err);
+    });
   }
 
   public render(): TemplateResult {
     return html`
       <style>
         ${styles.cssText}
+        .introjs-close-btn {
+          position: absolute;
+          top: 5px;
+          right: 10px;
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0;
+        }
       </style>
       <slot></slot>
     `;
   }
 }
 
-export default NileTour;
-
 declare global {
   interface HTMLElementTagNameMap {
     'nile-tour': NileTour;

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

@@ -30,7 +30,7 @@ export const styles = css`
      * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
      * stay consistent.
      */
-    --indent-guide-color: #F5F7F7;
+    --indent-guide-color: var(--nile-colors-dark-200);
     --indent-guide-offset: 0;
     --indent-guide-style: solid;
     --indent-guide-width: 0;

package/src/nile-tree-item/nile-tree-item.css.ts

@@ -44,7 +44,7 @@ export const styles = css`
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
     cursor: pointer;
     user-select: none;
   }
@@ -77,7 +77,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    color: #C7CED4;
+    color: var(--nile-colors-neutral-500);
     padding: 0.5rem;
     width: 1rem;
     height: 1rem;
@@ -123,18 +123,18 @@ export const styles = css`
   }
 
   :host(:focus-visible) .tree-item__item {
-    outline: solid 3px #C7CED4;
+    outline: solid 3px var(--nile-colors-neutral-500);
     outline-offset: 1px;
     z-index: 2;
   }
 
   :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
-    background-color: #eaecf0;
-    border-inline-start-color: #035da6;
+    background-color: var(--nile-colors-neutral-700);
+    border-inline-start-color: var(--nile-colors-primary-700);
   }
 
   :host(:not([aria-disabled='true'])) .tree-item__expand-button {
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
   }
 
   .tree-item__label {