@aquera/nile-elements 0.1.24 → 0.1.26

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