@aquera/nile-elements 0.1.2 → 0.1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-code-editor/extensionSetup.ts

@@ -30,6 +30,14 @@ import {
 
 import { lintKeymap } from '@codemirror/lint';
 
+export interface MinimalSetupOptions {
+  highlightSpecialChars?: boolean;
+  history?: boolean;
+  drawSelection?: boolean;
+  syntaxHighlighting?: boolean;
+  defaultKeymap?: boolean;
+  historyKeymap?: boolean;
+}
 export interface BasicSetupOptions extends MinimalSetupOptions {
   lineNumbers?: boolean;
   highlightActiveLineGutter?: boolean;
@@ -91,27 +99,4 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
 };
 
-export interface MinimalSetupOptions {
-  highlightSpecialChars?: boolean;
-  history?: boolean;
-  drawSelection?: boolean;
-  syntaxHighlighting?: boolean;
-  defaultKeymap?: boolean;
-  historyKeymap?: boolean;
-}
 
-export const minimalSetup = (options: MinimalSetupOptions = {}) => {
-  let keymaps: KeyBinding[] = [];
-  isValidSetup(options.defaultKeymap) && keymaps.push(...defaultKeymap);
-  isValidSetup(options.historyKeymap) && keymaps.push(...historyKeymap);
-  const extensions: Extension[] = [];
-  isValidSetup(options.highlightSpecialChars) &&
-    extensions.push(highlightSpecialChars());
-  isValidSetup(options.history) && extensions.push(history());
-  isValidSetup(options.drawSelection) && extensions.push(drawSelection());
-  isValidSetup(options.syntaxHighlighting) &&
-    extensions.push(
-      syntaxHighlighting(defaultHighlightStyle, { fallback: true })
-    );
-  return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
-};

package/src/nile-code-editor/nile-code-editor.ts

@@ -36,7 +36,6 @@ import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
 import { Theme } from './theme';
 
-const TIME_OUT_DURATION=200;
 // Choose the appropriate mode for your use case
 
 /**
@@ -84,6 +83,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true}) debounce: boolean = false;
 
+  @property({ type: Number, reflect: true , attribute: true}) debounceTimeout: number = 200;
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -254,7 +255,11 @@ export class NileCodeEditor extends NileElement {
     });
     return this.viewState
   }
-
+  /**
+   * Custom autocomplete handler for code editor suggestions
+   * @param context CompletionContext from CodeMirror
+   * @returns CompletionResult with suggestions or null if no suggestions
+   */
   customAutocomplete = (context: CompletionContext): CompletionResult | null => {
     // Getting the valid last line, last text from the code editor
     const text = context.state.doc.sliceString(0, context.pos);
@@ -265,6 +270,13 @@ export class NileCodeEditor extends NileElement {
     || this.getTopLevelSuggestions(context, textBeforeCursor);
   };
 
+  /**
+   * Gets nested property suggestions based on the current path
+   * @param context CompletionContext from CodeMirror
+   * @param textBeforeCursor Text before cursor position
+   * @param baseTextAfterSeperation Text after the last separator (. or [)
+   * @returns CompletionResult with nested suggestions or null
+   */
   getNestedSuggestions(context: CompletionContext, textBeforeCursor: string, baseTextAfterSeperation: string) {
     // Return early if not a valid path or not ending with . or [
     if (!isValidPath(textBeforeCursor) || !['.', '['].includes(textBeforeCursor.at(-1)!)) {
@@ -307,6 +319,12 @@ export class NileCodeEditor extends NileElement {
     };
   }
 
+  /**
+   * Gets top level suggestions based on custom completions and paths
+   * @param context CompletionContext from CodeMirror
+   * @param textBeforeCursor Text before cursor position
+   * @returns CompletionResult with top level suggestions or null
+   */
   getTopLevelSuggestions(context: CompletionContext,textBeforeCursor:string){
     const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
     if (!baseMatch) return null;
@@ -342,7 +360,7 @@ export class NileCodeEditor extends NileElement {
 
   emitAfterTimeout(value:any){
     if(this.timeOut) clearTimeout(this.timeOut);
-    this.timeOut=setTimeout(()=> this.emit('nile-change', value, false), TIME_OUT_DURATION)
+    this.timeOut=setTimeout(()=> this.emit('nile-change', value, false), this.debounceTimeout)
   }
 
   public insertBetweenCode=(text: string) => {
@@ -413,6 +431,14 @@ declare global {
   }
 }
 
+/**
+ * Parses a string path into an array of keys representing nested object access
+ * @param text The path string to parse (e.g. "foo.bar[0].baz")
+ * @returns Array of keys if valid path, null otherwise
+ * @example
+ * parsePath("foo.bar[0]") // returns ["foo", "bar", "0"]
+ * parsePath("invalid") // returns null
+ */
 function parsePath(text: string) {
   const regex = /([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g;
   const matches = [...text.matchAll(regex)];
@@ -433,12 +459,27 @@ function parsePath(text: string) {
   return null;
 };
 
+/**
+ * Splits a path string at the last separator (. or [)
+ * @param input The path string to split
+ * @returns Array containing [path up to last separator, remainder after separator]
+ * @example
+ * splitStringAtLastSeparator("foo.bar[0]") // returns ["foo.bar[", "0"]
+ */
 function splitStringAtLastSeparator(input:string) {
   const lastSeparatorIndex = Math.max(input.lastIndexOf('.'), input.lastIndexOf('['));
   if (lastSeparatorIndex === -1) return [input, ''];
   return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1)];
 }
 
+/**
+ * Traverses an object using an array of keys to access nested properties
+ * @param obj The object to traverse
+ * @param keys Array of keys defining the path to the desired property
+ * @returns The value at the specified path, or null if path is invalid
+ * @example
+ * resolveNestedProperties({foo: {bar: 123}}, ["foo", "bar"]) // returns 123
+ */
 function resolveNestedProperties (obj:any, keys:any[]){
   return keys.reduce((acc, key) => {
     if (acc && typeof acc === 'object') {
@@ -448,6 +489,14 @@ function resolveNestedProperties (obj:any, keys:any[]){
   }, obj);
 };
 
+/**
+ * Validates if a string represents a valid object path format
+ * @param path The path string to validate
+ * @returns Boolean indicating if path format is valid
+ * @example
+ * isValidPath("foo.bar[0]") // returns true
+ * isValidPath("foo..bar") // returns false
+ */
 function isValidPath(path: string) {
   // Regex to validate the format of the string
   const regex = /^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/;
@@ -455,6 +504,13 @@ function isValidPath(path: string) {
   return regex.test(path);
 }
 
+/**
+ * Converts multi-line code into a single line by removing line breaks and extra whitespace
+ * @param code The code string to convert
+ * @returns Single line version of the code
+ * @example
+ * convertToSingleLine("foo\n  bar") // returns "foo bar"
+ */
 function convertToSingleLine(code: string) {
   if (!code) return '';
   // Remove line breaks and unnecessary whitespace

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

@@ -125,7 +125,7 @@ export const styles = css`
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
-    gap: 0.25rem;
+    gap: 0.5rem;
     padding: 0 var(--header-spacing);
   }
 

package/src/nile-form-help-text/nile-form-help-text.ts

@@ -58,8 +58,15 @@ export class NileFormHelpText extends LitElement {
     this.updateDisplayedText()
   }
 
-  updateDisplayedText(){
-    this.displayedText = this.isExpanded ? this.fullText : `${this.fullText.substring(0, this.textLimit)}...`;
+  updateDisplayedText() {
+    if (this.isExpanded) {
+      this.displayedText = this.fullText;
+    } else {
+      const validConcatNumber=concatSentence(this.fullText, this.textLimit)
+      const truncatedText = this.fullText.slice(0, validConcatNumber);
+      const ellipsis = this.fullText.length > validConcatNumber ? '...' : '';
+      this.displayedText = `${truncatedText}${ellipsis}`;
+    }
   }
 
   /* #endregion */
@@ -71,7 +78,7 @@ export class NileFormHelpText extends LitElement {
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const showMoreButton = this.fullText.length > this.textLimit+3;
+    const showMoreButton = this.fullText.length > this.textLimit;
     const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
 
     return html`
@@ -101,3 +108,30 @@ declare global {
     'nile-form-help-text': NileFormHelpText;
   }
 }
+
+function concatSentence(sentence:string, n:number) {
+  if (n < 0 || n > sentence.length) {
+    throw new Error("Invalid value of n. It must be between 0 and the sentence length.");
+  }
+
+  // Adjust n if it falls in the middle of a word
+  if (sentence[n] !== " " && n !== 0 && n !== sentence.length) {
+    // Move left until the start of the word or the beginning of the sentence
+    let left = n;
+    while (left > 0 && sentence[left - 1] !== " ") {
+      left--;
+    }
+
+    // Move right until the end of the word or the end of the sentence
+    let right = n;
+    while (right < sentence.length && sentence[right] !== " ") {
+      right++;
+    }
+
+    // Adjust n to the closer boundary
+    n = (n - left <= right - n) ? left : right;
+  }
+
+  // Return the substring from the start to the adjusted n
+  return n;
+}

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

@@ -15,34 +15,99 @@ export const styles = css`
   }
 
   .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #000);
+    background-color: var(--nile-tour-background-color, #fff);
     color: var(--nile-tour-text-color, #fff);
     width: 300px;
     max-width: 300px;
+    border-radius: 4px;
+    border: 1px solid var(--Neutral-30, #c7ced4);
+    background: var(--White-Normal, #fff);
+
+    /* Elevation/Lifted */
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
-  .introjs-arrow.bottom {
-    border-top-color: var(--nile-tour-background-color, #000);
+  .introjs-tooltip-title {
+    color: #000;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.2px;
+  }
+
+  .introjs-tooltip-header {
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 18px;
+  }
+
+  .introjs-tooltiptext {
+    color: #7f7f7f;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    padding: 15px 18px;
+  }
+
+  .introjs-arrow {
+    width: 15px;
+    height: 20px;
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="15" height="20" viewBox="0 0 15 20" fill="none"%3E%3Cpath d="M1.43333 11.2C0.633333 10.6 0.633333 9.4 1.43333 8.8L12.1 0.800001C13.0889 0.0583585 14.5 0.763931 14.5 2L14.5 18C14.5 19.2361 13.0889 19.9416 12.1 19.2L1.43333 11.2Z" fill="white" stroke="%23C7CED4"/%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    position: absolute;
+    border: none;
+    content: none;
   }
 
   .introjs-arrow.top {
-    border-bottom-color: var(--nile-tour-background-color, #000);
+    top: -14.5px;
+    transform: rotate(90deg);
+    clip-path: inset(0px 3px 0px 0px);
+  }
+
+  .introjs-arrow.bottom {
+    bottom: -14.5px;
+    transform: rotate(270deg);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-arrow.left {
-    border-right-color: var(--nile-tour-background-color, #000);
+    left: -11.5px;
+    transform: rotate(0);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-arrow.right {
-    border-left-color: var(--nile-tour-background-color, #000);
+    right: -12px;
+    transform: rotate(180deg);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-arrow.left-bottom {
-    border-right-color: var(--nile-tour-background-color, #000) !important;
+    transform: rotate(0);
+    clip-path: inset(0px 1px 0px 0px);
+    left: -13.5px;
+    border-right-color: var(--nile-tour-background-color, #fff) !important;
   }
 
   .introjs-arrow.right-bottom {
-    border-left-color: var(--nile-tour-background-color, #000) !important;
+    right: -12px;
+    transform: rotate(180deg);
+    clip-path: inset(0px 3px 0px 0px);
+    border-left-color: var(--nile-tour-background-color, #fff) !important;
+  }
+
+  .introjs-arrow.top-middle {
+    top: -14px;
+    left: 50%;
+    margin-left: -5px;
+    transform: rotate(90deg);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-button {
@@ -53,26 +118,46 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: transparent;
+    background: var(--Primary-Normal, #005ea6);
     border-color: transparent;
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 12px;
+    border-radius: 4px;
   }
 
   .introjs-button:hover {
-    outline: 0;
-    text-decoration: none;
+    background: none;
+    border: none;
+    color: var(--nile-tour-text-color, #fff);
+    font-size: 14px;
+    padding: 0;
+    cursor: pointer;
+    text-shadow: none;
+    background: var(--Primary-Normal, #005ea6);
     border-color: transparent;
-    background: transparent;
-    color: white;
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 12px;
   }
 
   .introjs-button:focus {
-    outline: 0;
-    text-decoration: none;
-    border-color: transparent;
-    background: transparent;
-    color: white;
+    background: none;
     border: none;
+    color: var(--nile-tour-text-color, #fff);
+    font-size: 14px;
+    padding: 0;
+    cursor: pointer;
+    text-shadow: none;
     box-shadow: none;
+    background: var(--Primary-Normal, #005ea6);
+    border-color: transparent;
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 12px;
   }
 
   .introjs-tooltipbuttons {
@@ -109,12 +194,16 @@ export const styles = css`
   }
 
   .introjs-step-counter {
-    margin-right: auto; /* Push buttons to the opposite side */
+    margin-right: auto;
     font-size: 14px;
-    color: #ffffff;
     padding: 0 10px;
     display: flex;
     align-items: center;
+    color: var(--Color-Text-Info, #1978B8);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   @keyframes shake {
@@ -136,7 +225,7 @@ export const styles = css`
   }
 
   .introjs-shake {
-    animation: shake 0.5s ease infinite; /* Repeats continuously */
+    animation: shake 0.5s ease infinite;
   }
 `;
 

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

@@ -28,7 +28,7 @@ export class NileTour extends LitElement {
     element: string;
     title: string;
     content: string;
-    position: "top" | "left" | "right" | "bottom";
+    position: any;
     beforeChange?: () => Promise<boolean> | boolean;
     afterChange?: () => Promise<void> | void;
   }> = [];
@@ -101,13 +101,13 @@ export class NileTour extends LitElement {
         position: step.position,
         beforeChange: step.beforeChange,
         afterChange: step.afterChange,
-      }))
-      .filter((step) => step.element !== null);
+      }));
+      // .filter((step) => step.element !== null);
 
     this.tourInstance = introJs().setOptions({
       steps: introSteps,
-      nextLabel: "<button class='introjs-button introjs-next-button'>Next</button>",
-      prevLabel: "<button class='introjs-button introjs-prev-button'>Prev</button>",
+      nextLabel: "Next",
+      prevLabel: "Prev",
       overlayOpacity: 0,
       disableInteraction: this.disableInteraction,
       showButtons: true,
@@ -157,7 +157,26 @@ export class NileTour extends LitElement {
       }
     });
 
-    this.tourInstance.start();
+
+
+    this.tourInstance.start().then(() => {
+      const currentStep = this.tourInstance?._currentStep ?? 0;
+      const totalSteps = this.steps.length;
+      const tooltip = document.querySelector('.introjs-tooltip');
+      if (tooltip) {
+        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
+        if (navBar) {
+          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;
+          if (!stepCounter) {
+            stepCounter = document.createElement('div');
+            stepCounter.className = 'introjs-step-counter';
+            navBar.insertBefore(stepCounter, navBar.firstChild);
+          }
+          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
+        }
+      }  }).catch(err => {
+      console.error('Error starting the tour:', err);
+  });
   }
 
   private shakeTooltip(): void {

package/vscode-html-custom-data.json

@@ -726,7 +726,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `customAutocomplete` - \n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -820,6 +820,10 @@
           "description": "`debounce` {`boolean`} - \n\nProperty: debounce\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "debounceTimeout",
+          "description": "`debounceTimeout` {`number`} - \n\nProperty: debounceTimeout\n\nDefault: 200"
+        },
         {
           "name": "onnile-focus",
           "description": "`nile-focus` {`Event`} - "
@@ -3762,11 +3766,11 @@
     },
     {
       "name": "nile-tour",
-      "description": "Nile tour component.\n\nAttributes:\n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\n  * `stepsJson` {`string`} - JSON string for steps.\n\n  * `showBackdrop` {`boolean`} - Whether to show the backdrop overlay.\n\n  * `disableInteraction` {`boolean`} - Whether to disable interaction during the tour.\n\nProperties:\n\n  * `tourInstance` - \n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\n  * `stepsJson` {`string`} - JSON string for steps.\n\n  * `showBackdrop` {`boolean`} - Whether to show the backdrop overlay.\n\n  * `disableInteraction` {`boolean`} - Whether to disable interaction during the tour.",
+      "description": "Nile tour component.\n\nAttributes:\n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: any; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<void>) | undefined; }[]`} - The steps for the tour.\n\n  * `stepsJson` {`string`} - JSON string for steps.\n\n  * `showBackdrop` {`boolean`} - Whether to show the backdrop overlay.\n\n  * `disableInteraction` {`boolean`} - Whether to disable interaction during the tour.\n\nProperties:\n\n  * `tourInstance` - \n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: any; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<void>) | undefined; }[]`} - The steps for the tour.\n\n  * `stepsJson` {`string`} - JSON string for steps.\n\n  * `showBackdrop` {`boolean`} - Whether to show the backdrop overlay.\n\n  * `disableInteraction` {`boolean`} - Whether to disable interaction during the tour.",
       "attributes": [
         {
           "name": "steps",
-          "description": "`steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\nProperty: steps\n\nDefault: "
+          "description": "`steps` {`{ stepNo: number; element: string; title: string; content: string; position: any; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<void>) | undefined; }[]`} - The steps for the tour.\n\nProperty: steps\n\nDefault: "
         },
         {
           "name": "stepsJson",