@aquera/nile-elements 0.1.25 → 0.1.27

package/dist/src/nile-tour/nile-tour.js

@@ -1,180 +0,0 @@
-/**
- * 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 { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import introJs from 'intro.js';
-import { styles } from './nile-tour.css';
-let NileTour = class NileTour extends LitElement {
-    static get styles() {
-        return [styles];
-    }
-    createRenderRoot() {
-        return this;
-    }
-    constructor() {
-        super();
-        this.tourInstance = null;
-        /**
-         * JSON string for steps.
-         */
-        this.stepsJson = '';
-        /**
-         * Whether to show the backdrop overlay.
-         */
-        this.showBackdrop = false;
-        /**
-         * Whether to disable interaction during the tour.
-         */
-        this.disableInteraction = false;
-    }
-    parseSteps() {
-        if (Array.isArray(this.stepsJson)) {
-            return this.stepsJson;
-        }
-        console.error('Invalid stepsJson format');
-        return [];
-    }
-    async getElementWhenNeeded(step) {
-        return {
-            element: () => document.querySelector(`[data-tour="${step.element}"]`),
-            intro: step.content,
-            title: step.title,
-            position: step.position,
-            beforeChange: step.beforeChange,
-            afterChange: step.afterChange,
-            disableNext: step.disableNext || false,
-            disablePrev: step.disablePrev || false
-        };
-    }
-    nextStep() {
-        this.tourInstance?.nextStep();
-    }
-    async startTour() {
-        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: steps,
-            disableInteraction: this.disableInteraction,
-            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 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 step = steps[currentStepIndex];
-            if (step?.afterChange) {
-                step.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');
-            }
-        });
-        this.tourInstance.onchange(() => {
-            const currentStep = this.tourInstance?._currentStep ?? 0;
-            const totalSteps = 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');
-                    if (!stepCounter) {
-                        stepCounter = document.createElement('div');
-                        stepCounter.className = 'introjs-step-counter';
-                        navBar.insertBefore(stepCounter, navBar.firstChild);
-                    }
-                    stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
-                }
-            }
-        });
-        this.tourInstance.start().then(() => {
-            const currentStep = this.tourInstance?._currentStep ?? 0;
-            const totalSteps = 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');
-                    if (!stepCounter) {
-                        stepCounter = document.createElement('div');
-                        stepCounter.className = 'introjs-step-counter';
-                        navBar.insertBefore(stepCounter, navBar.firstChild);
-                    }
-                    stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
-                }
-                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);
-        });
-    }
-    render() {
-        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>
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], NileTour.prototype, "stepsJson", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileTour.prototype, "showBackdrop", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileTour.prototype, "disableInteraction", void 0);
-NileTour = __decorate([
-    customElement('nile-tour')
-], NileTour);
-export { NileTour };
-//# sourceMappingURL=nile-tour.js.map

package/dist/src/nile-tour/nile-tour.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport introJs from 'intro.js';\nimport { styles } from './nile-tour.css';\n\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n  tourInstance: ReturnType<typeof introJs> | null = null;\n\n  /**\n   * JSON string for steps.\n   */\n  @property({ type: String })\n  stepsJson: string = '';\n\n  /**\n   * Whether to show the backdrop overlay.\n   */\n  @property({ type: Boolean })\n  showBackdrop: boolean = false;\n\n  /**\n   * Whether to disable interaction during the tour.\n   */\n  @property({ type: Boolean })\n  disableInteraction: boolean = false;\n  \n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private parseSteps(): any[] {\n    if (Array.isArray(this.stepsJson)) {\n      return this.stepsJson;\n    }\n    \n    console.error('Invalid stepsJson format');\n    return [];\n  }\n\n  private async getElementWhenNeeded(step: any): Promise<any> {\n    return {\n      element: () => document.querySelector(`[data-tour=\"${step.element}\"]`) as HTMLElement | null,\n      intro: step.content,\n      title: step.title,\n      position: step.position,\n      beforeChange: step.beforeChange,\n      afterChange: step.afterChange,\n      disableNext: step.disableNext || false,\n      disablePrev: step.disablePrev || false\n    };\n  }\n\n  public nextStep() {\n    this.tourInstance?.nextStep();\n  }\n  \n  public async startTour(): Promise<void> {\n    const steps = await Promise.all(this.parseSteps().map(step => this.getElementWhenNeeded(step)));\n\n    if (steps.length === 0) {\n      console.error('No valid steps found for the tour.');\n      return;\n    }\n\n    this.tourInstance = introJs().setOptions({\n      steps: steps as any,\n      disableInteraction: this.disableInteraction,\n      nextLabel: 'Next',\n      prevLabel: 'Prev',\n      overlayOpacity: this.showBackdrop ? 0.5 : 0,\n      exitOnOverlayClick: false,\n      showProgress: false,\n      showButtons: true\n    });\n\n    this.tourInstance.onbeforechange(async (targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const step = steps[currentStepIndex];\n      if (step && typeof step.element === 'function') {\n        const el = step.element();\n        if (el) {\n          if (this.tourInstance && this.tourInstance._introItems) {\n            this.tourInstance._introItems[currentStepIndex].element = el;\n          }\n        }\n      }\n      if (step.beforeChange) {\n        return await step.beforeChange();\n      }\n      return true;\n    });\n\n    this.tourInstance.onafterchange((targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const step = steps[currentStepIndex];\n      if (step?.afterChange) {\n        step.afterChange();\n      }\n\n      \n      const nextBtn = document.querySelector('.introjs-nextbutton');\n      const prevBtn = document.querySelector('.introjs-prevbutton');\n\n      if (nextBtn) {\n        nextBtn.setAttribute('disabled', step.disableNext ? 'true' : 'false');\n      }\n      if (prevBtn) {\n        prevBtn.setAttribute('disabled', step.disablePrev ? 'true' : 'false');\n      }\n    });\n\n    this.tourInstance.onchange(() => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n      }\n    });\n\n    this.tourInstance.start().then(() => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n\n        const closeButton = document.createElement('button');\n        closeButton.className = 'introjs-close-btn';\n        closeButton.innerHTML = `\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <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\"/>\n          </svg>`;\n        closeButton.onclick = () => this.tourInstance?.exit(true);\n        tooltip.appendChild(closeButton);\n      }\n    }).catch(err => {\n      console.error('Error starting the tour:', err);\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <style>\n        ${styles.cssText}\n        .introjs-close-btn {\n          position: absolute;\n          top: 5px;\n          right: 10px;\n          background: none;\n          border: none;\n          cursor: pointer;\n          padding: 0;\n        }\n      </style>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tour': NileTour;\n  }\n}\n"]}

package/src/nile-tour/index.ts

@@ -1 +0,0 @@
-export { NileTour } from './nile-tour';

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

@@ -1,247 +0,0 @@
-/**
- * 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';
-
-/**
- * Tour CSS
- */
-export const styles = css`
-  :host {
-  }
-
-  .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #1978b8);
-    color: var(--nile-tour-text-color, #fff);
-    width: 300px;
-    max-width: 300px;
-    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: var(--nile-colors-white-base);
-    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-progress {
-    display: none;
-  }
-
-  .introjs-tooltiptext {
-    color: #c7ced4;
-    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 width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z" fill="%231978B8"/%3E%3C/svg%3E');
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    position: absolute;
-    border: none;
-    content: none;
-  }
-
-  .introjs-arrow.top {
-    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 {
-    left: -11.5px;
-    transform: rotate(0);
-    clip-path: inset(0px 3px 0px 0px);
-  }
-
-  .introjs-arrow.right {
-    right: -12px;
-    transform: rotate(180deg);
-    clip-path: inset(0px 3px 0px 0px);
-  }
-
-  .introjs-arrow.left-bottom {
-    transform: rotate(0);
-    clip-path: inset(0px 1px 0px 0px);
-    left: -13.5px;
-    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, var(--nile-colors-white-base)) !important;
-  }
-
-  .introjs-arrow.top-middle {
-    top: -14px;
-    left: 50%;
-    margin-left: -5px;
-    transform: rotate(90deg);
-    clip-path: inset(0px 3px 0px 0px);
-  }
-
-  .introjs-button {
-    background: none;
-    border: none;
-    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);
-    border-color: transparent;
-    display: flex;
-    padding: 12px;
-    align-items: center;
-    gap: 12px;
-    border-radius: 4px;
-    font-weight: 500;
-  }
-
-  .introjs-button:hover {
-    background: none;
-    border: none;
-    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);
-    border-color: transparent;
-    display: flex;
-    padding: 12px;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .introjs-button:focus {
-    background: none;
-    border: none;
-    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);
-    border-color: transparent;
-    display: flex;
-    padding: 12px;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .introjs-tooltipbuttons {
-    border-top: none;
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-  }
-
-  .introjs-helperNumberLayer {
-    display: none;
-  }
-
-  .introjs-bullets {
-    display: none;
-  }
-
-  .introjs-skipbutton {
-    display: none;
-  }
-
-  .introjs-prev-button {
-    color: #c7ced4;
-  }
-
-  .introjs-helperLayer {
-    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 {
-    margin-right: auto;
-    font-size: 14px;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.5));
-    font-style: normal;
-    font-weight: 500;
-    line-height: 14px;
-    letter-spacing: 0.2px;
-  }
-
-  @keyframes shake {
-    0% {
-      transform: translateX(0);
-    }
-    25% {
-      transform: translateX(-5px);
-    }
-    50% {
-      transform: translateX(5px);
-    }
-    75% {
-      transform: translateX(-5px);
-    }
-    100% {
-      transform: translateX(0);
-    }
-  }
-
-  .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

@@ -1,199 +0,0 @@
-/**
- * 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, css, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import introJs from 'intro.js';
-import { styles } from './nile-tour.css';
-
-@customElement('nile-tour')
-export class NileTour extends LitElement {
-  tourInstance: ReturnType<typeof introJs> | null = null;
-
-  /**
-   * JSON string for steps.
-   */
-  @property({ type: String })
-  stepsJson: string = '';
-
-  /**
-   * Whether to show the backdrop overlay.
-   */
-  @property({ type: Boolean })
-  showBackdrop: boolean = false;
-
-  /**
-   * Whether to disable interaction during the tour.
-   */
-  @property({ type: Boolean })
-  disableInteraction: boolean = false;
-  
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  createRenderRoot() {
-    return this;
-  }
-
-  constructor() {
-    super();
-  }
-
-  private parseSteps(): any[] {
-    if (Array.isArray(this.stepsJson)) {
-      return this.stepsJson;
-    }
-    
-    console.error('Invalid stepsJson format');
-    return [];
-  }
-
-  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
-    };
-  }
-
-  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: steps as any,
-      disableInteraction: this.disableInteraction,
-      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 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 step = steps[currentStepIndex];
-      if (step?.afterChange) {
-        step.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');
-      }
-    });
-
-    this.tourInstance.onchange(() => {
-      const currentStep = this.tourInstance?._currentStep ?? 0;
-      const totalSteps = 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}`;
-        }
-      }
-    });
-
-    this.tourInstance.start().then(() => {
-      const currentStep = this.tourInstance?._currentStep ?? 0;
-      const totalSteps = 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}`;
-        }
-
-        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>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-tour': NileTour;
-  }
-}