@ruc-lib/tour-guide 2.0.0

package/lib/ruclib-tour-guide/ruclib-tour-guide.component.d.ts

@@ -0,0 +1,148 @@
+import { EventEmitter, Renderer2, OnInit, OnDestroy, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { TourGuideConfig, TourGuideData } from '../model/tour-guide.model';
+import * as i0 from "@angular/core";
+export declare class RuclibTourGuideComponent implements OnInit, OnDestroy, OnChanges {
+    private renderer;
+    rucEvent: EventEmitter<any>;
+    rucInputData: TourGuideConfig;
+    customTheme: string | undefined;
+    showStartButton: boolean;
+    dataSource: Array<TourGuideData>;
+    overlayRef: ElementRef;
+    currentStepIndex: number;
+    private currentElement?;
+    popupStyle: {
+        top: string;
+        left: string;
+    };
+    private originalParent?;
+    showTour: boolean;
+    startTourButtonLabel: string;
+    private resizeListener;
+    config: TourGuideConfig;
+    /**
+     * class constructor
+     * @param tourGuideService
+     * @param renderer
+     */
+    constructor(renderer: Renderer2);
+    /**
+      * handling input data changes
+      * updating default config with user provided config
+      * @param changes
+      */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * handling change on component initilization
+     */
+    ngOnInit(): void;
+    /**
+     * this method handle the start of tour guide fetaure
+     */
+    startTour(): void;
+    /**
+     * this method handle the navigation to next tour guide feature
+     */
+    nextStep(): void;
+    /**
+     * this method allow us to navigate back to previous tour guide feature
+     */
+    previousStep(): void;
+    /**
+     * method to skip the tour guide thats in progress
+     */
+    skip(): void;
+    /**
+     * method to highlight feature area and changin details popup based on provide config
+     * @returns
+     */
+    private highlightElement;
+    /**
+     * Finds an element by its selector, scrolls it into view, and waits for the scroll to complete.
+     * @param selector The CSS selector for the target element.
+     * @returns A promise that resolves to the HTMLElement or undefined if not found.
+     */
+    private findElementAndScroll;
+    /**
+     * Applies CSS classes and styles to visually highlight the target element.
+     * @param element The element to highlight.
+     */
+    private applyHighlightStyles;
+    /**
+     * Calculates the optimal position for the tour popup and applies it.
+     * @param element The highlighted element.
+     * @param position The desired position ('auto', 'top', 'bottom', 'left', 'right').
+     */
+    private calculateAndApplyPopupPosition;
+    /**
+     * Determines the best placement for the popup when position is 'auto'.
+     * @param position The configured position.
+     * @param rect The BoundingClientRect of the target element.
+     * @returns The calculated final position.
+     */
+    private determineAutoPosition;
+    /**
+     * Computes the top and left coordinates for the popup based on the target element and desired position.
+     * @param position The final position for the popup.
+     * @param offset The absolute offset of the target element.
+     * @param element The target element.
+     * @returns An object with top and left coordinates.
+     */
+    private computePopupCoordinates;
+    /**
+     * Clamps the popup's coordinates to ensure it stays within the visible viewport.
+     * @param coords The calculated top and left coordinates.
+     * @returns The adjusted coordinates.
+     */
+    private clampPopupCoordinates;
+    /**
+     * If the popup is rendered inside a scrollable container, this ensures it's scrolled into view.
+     */
+    private scrollPopupIntoView;
+    /**
+     * method to execute highlight process after scroll
+     * @returns
+     */
+    private waitForScroll;
+    /**
+     * method to create transparent hole in overlay for visibility of highlighted area
+     */
+    private createTransparentHole;
+    /**
+     * method to get absolute offset
+     * @param element
+     * @returns
+     */
+    private getAbsoluteOffset;
+    /**
+     * method to lock scroll when tour guide is active
+     */
+    private lockScroll;
+    /**
+     * method to unlock scroll when tour guide is not active
+     */
+    private unlockScroll;
+    /**
+     * method to remove highlight when tour is skipped or done
+     */
+    private removeHighlight;
+    /**
+     * method to navigate between tour slides or skip tour using left, right and skip key
+     * @param event
+     * @returns
+     */
+    private handleKey;
+    /**
+     * debounce method for smooth operation
+     * @param fn
+     * @param delay
+     * @returns
+     */
+    private debounce;
+    /**
+     * handling change on component destroy
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibTourGuideComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RuclibTourGuideComponent, "uxp-ruclib-tour-guide", never, { "rucInputData": "rucInputData"; "customTheme": "customTheme"; "showStartButton": "showStartButton"; "dataSource": "dataSource"; }, { "rucEvent": "rucEvent"; }, never, never, false, never>;
+}

package/lib/ruclib-tour-guide.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ruclib-tour-guide/ruclib-tour-guide.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/button";
+import * as i4 from "@angular/material/card";
+export declare class RuclibTourGuideModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibTourGuideModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RuclibTourGuideModule, [typeof i1.RuclibTourGuideComponent], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatCardModule], [typeof i1.RuclibTourGuideComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RuclibTourGuideModule>;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@ruc-lib/tour-guide",
+  "version": "2.0.0",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0",
+    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0",
+    "@angular/cdk": "^15.0.0 || ^16.0.0",
+    "@angular/material": "^15.0.0 || ^16.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "module": "fesm2015/ruc-lib-tour-guide.mjs",
+  "es2020": "fesm2020/ruc-lib-tour-guide.mjs",
+  "esm2020": "esm2020/ruc-lib-tour-guide.mjs",
+  "fesm2020": "fesm2020/ruc-lib-tour-guide.mjs",
+  "fesm2015": "fesm2015/ruc-lib-tour-guide.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/ruc-lib-tour-guide.mjs",
+      "es2020": "./fesm2020/ruc-lib-tour-guide.mjs",
+      "es2015": "./fesm2015/ruc-lib-tour-guide.mjs",
+      "node": "./fesm2015/ruc-lib-tour-guide.mjs",
+      "default": "./fesm2020/ruc-lib-tour-guide.mjs"
+    }
+  }
+}