siteguide.js 0.1.2 → 0.2.0-alpha

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Borislav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Siteguide

package/dist/css/siteguide.css

@@ -1,70 +1 @@
-.overview {
-    width: 300px;
-    height: fit-content;
-    background: #fff;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 1000001;
-    transition: all 0.3s ease-out;
-}
-.overview-helper {
-    box-shadow:
-        0 0 #212121cc,
-        0 0 0 5000px #21212180;
-    border: 2px dashed rgba(33, 33, 33, 0.8);
-    border-radius: 4px;
-    opacity: 1;
-    z-index: 1000000;
-    box-sizing: border-box;
-    position: absolute;
-    transition: all 0.3s ease-out;
-}
-.overview-content {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
-.overview-title {
-    font-size: 20px;
-    font-weight: 700;
-    color: #1b1b1b;
-}
-.overview-description {
-    font-weight: 100;
-    color: #666;
-}
-.overview-button-list {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.overview-button {
-    width: 50%;
-    height: 35px;
-    border-radius: 10px;
-    border: none;
-    cursor: pointer;
-    font-weight: 600;
-}
-.exit-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background-color: transparent;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    cursor: pointer;
-}
-.exit-button:hover svg {
-    fill: #000;
-}
-.exit-button svg {
-    fill: #afafaf;
-}
+.siteguide{box-sizing:border-box;width:280px;background-color:snow;border-radius:8px;border:1px solid #e1dfdf;display:flex;flex-direction:column;position:relative;font-family:Arial,Helvetica,sans-serif;box-shadow:0 10px 10px #0001;z-index:1000001;transition:all .3s ease-out}.siteguide-helper{box-shadow:0 0 #212121cc,0 0 0 5000px #21212180;border:2px solid rgba(33,33,33,.8);border-radius:4px;opacity:1;z-index:1000000;box-sizing:border-box;position:absolute;transition:all .3s ease-out}.siteguide-header{display:flex;align-items:center;width:100%;padding:12px 20px 0}.siteguide-content{width:100%;padding:12px 20px}.siteguide-title{display:block;font-size:18px;font-weight:800;color:#222}.siteguide-description{font-size:14px;font-weight:400;color:#222}.siteguide-footer{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px;border-top:1px solid #e1dfdf;gap:16px}.siteguide-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;line-height:20px}.siteguide-button-secondary{background-color:#e1dfdf;color:#222}.siteguide-button-secondary:hover{background-color:#ddd}.siteguide-button-primary{background-color:#222;color:#fff}.siteguide-button-primary:hover{background-color:#000}.siteguide-close{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:4px;cursor:pointer;position:absolute;top:10px;right:10px}.siteguide-close:hover{background-color:#ddd;color:#fff}.siteguide-close-icon{height:10px}

package/dist/index.d.ts

@@ -1,106 +1,277 @@
-export declare type ButtonConfig = {
-    title: string;
-    className?: string;
-    action: () => void | (() => Promise<void>);
-};
-
-/**
- * Creates an HTML element with the specified tag name and applies the given class list.
- * @template T
- * @param {T} tagName - The name of the HTML tag to create.
- * @param {string[]} [classList] - An array of class names to add to the created element.
- * @returns {HTMLElementTagNameMap[T]} The created HTML element with the specified tag name and class list.
- */
-export declare function createElement<T extends keyof HTMLElementTagNameMap>(
-    tagName: T,
-    classList?: string[]
-): HTMLElementTagNameMap[T];
-
-export declare type CustomPopupData = SharedPopupData & {
-    type: Extract<PopupType, 'custom'>;
-    node: HTMLElement;
-};
-
-export declare type DefaultPopupData = SharedPopupData & {
-    type: Extract<PopupType, 'default'>;
-    title: string;
-    text: string;
-    buttonCollection: ButtonConfig[];
-};
-
-export declare type HostData = string | HTMLElement | (() => HTMLElement | string);
-
-declare interface IUpdatePopup {
-    updatePopupView(popupElement: HTMLElement, popupData: PopupData): void;
-}
-
-export declare type PopupData = DefaultPopupData | CustomPopupData;
-
-export declare type PopupPosition = 'top' | 'bottom' | 'left' | 'right';
-
-export declare type PopupType = 'default' | 'custom';
-
-export declare type SharedPopupData = {
-    className?: string;
-    position: PopupPosition;
-    buttonCollection: ButtonConfig[];
-};
-
-declare type StepId = string;
-
-export declare class Tour {
-    private readonly _config;
-    get stepList(): TourStep[];
-    get config(): TourConfig;
-    get popupElement(): HTMLElement | null;
-    get helperElement(): HTMLElement | null;
-    /**
-     * TODO remove
-     * @deprecated remove later
-     */
-    isStarted: boolean;
-    readonly updatePopupStrategies: Map<PopupType, IUpdatePopup>;
-    private _popupElement;
-    private _helperElement;
-    private readonly _stepMap;
-    private _stepList;
-    private _currentStep;
-    private _bodyResizeObserver;
-    constructor(_config: TourConfig);
-    addStep(config: TourStepConfig): void;
-    removeStep(stepId: StepId): void;
-    start(): void;
-    complete(): void;
-    prev(): void;
-    next(): void;
-    private setUpStrategies;
-    private setUpBodySizeObserver;
-}
-
-export declare type TourConfig = {
-    className?: string;
-    helperClassName?: string;
-};
-
-export declare class TourStep {
-    readonly id: StepId;
-    private readonly _hostData;
-    private readonly _popupData;
-    private readonly _tour;
-    private _hostElement;
-    constructor(tour: Tour, config: TourStepConfig);
-    show(): void;
-    hide(): void;
-    updatePopupPosition(): void;
-    private updatePopup;
-    private resolveHostElement;
-    private resolvePopupPosition;
-}
-
-export declare type TourStepConfig = {
-    id: StepId;
-    host: HostData;
-    popup: PopupData;
-};
-
-export {};
+/**
+ * Creates an HTML element with the specified tag name and applies the given class list.
+ * @template T
+ * @param {T} tagName - The name of the HTML tag to create.
+ * @param {string[]} [classList] - An array of class names to add to the created element.
+ * @returns {HTMLElementTagNameMap[T]} The created HTML element with the specified tag name and class list.
+ */
+export declare function createElement<T extends keyof HTMLElementTagNameMap>(tagName: T, classList?: string[]): HTMLElementTagNameMap[T];
+
+/**
+ * Represents the data for a custom popup
+ */
+export declare type CustomPopupData = SharedPopupData & {
+    type: Extract<PopupType, 'custom'>;
+    /**
+     * The HTML element to use as the content of the custom popup
+     */
+    node: HTMLElement;
+};
+
+/**
+ * Represents a deep required type, ensuring all properties of an object are required and recursively applies to nested objects
+ * @template T The type to make deep required
+ * @returns A type that represents a deep required version of T
+ */
+declare type DeepRequired<T> = Required<{
+    [P in keyof T]: T[P] extends object | undefined ? DeepRequired<Required<T[P]>> : T[P];
+}>;
+
+/**
+ * Interface for updating popup view
+ */
+declare interface IUpdatePopup {
+    /**
+     * Updates the popup view with the provided data
+     * @param {HTMLElement} popup - The popup element to update
+     * @param {PopupData} popupData - The data to use for updating the popup
+     * @param {Tour} tour - The tour instance
+     */
+    updatePopupView(popup: HTMLElement, popupData: PopupData, tour: Tour): void;
+}
+
+export declare type PopupCloseIconElement = InnerHTML | HTMLElement;
+
+/**
+ * Represents the customization options for a popup
+ */
+export declare type PopupCustomization = {
+    /**
+     * The CSS class to apply to the popup container
+     */
+    class?: string;
+    /**
+     * The CSS class to apply to the popup header
+     */
+    headerClass?: string;
+    /**
+     * The CSS class to apply to the popup title
+     */
+    titleClass?: string;
+    /**
+     * The CSS class to apply to the popup close button
+     */
+    closeButtonClass?: string;
+    /**
+     * The CSS class to apply to the popup content
+     */
+    contentClass?: string;
+    /**
+     * The CSS class to apply to the popup description
+     */
+    descriptionClass?: string;
+    /**
+     * The CSS class to apply to the popup footer
+     */
+    footerClass?: string;
+};
+
+/**
+ * Represents the data for a popup
+ */
+export declare type PopupData = TextPopupData | CustomPopupData;
+
+/**
+ * Represents the host of a tour step. It can be a string, an HTMLElement, or a function that returns either an HTMLElement or a string.
+ * @example
+ * // Example 1: Class as host
+ * { host: '.example-element' }
+ * @example
+ * // Example 2: HTMLElement as host
+ * { host: document.querySelector('.example-element') }
+ * @example
+ * // Example 3: Function returning HTMLElement as host
+ * { host: () => document.querySelector('.example-element') };
+ * @example
+ * // Example 4: Function returning string as host
+ * { host: () => '.example-element' };
+ */
+export declare type PopupHost = string | HTMLElement | (() => HTMLElement | string);
+
+/**
+ * The position of a popup
+ */
+export declare type PopupPosition = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * The type of a popup
+ */
+export declare type PopupType = 'text' | 'custom';
+
+/**
+ * Represents the shared data for a popup, including title, position, customization, and button collection.
+ */
+export declare type SharedPopupData = {
+    /**
+     * The title of the popup
+     */
+    title?: string;
+    /**
+     * The position of the popup
+     */
+    position?: PopupPosition;
+    /**
+     * Customization options for the popup
+     *
+     * Each step-popup can have own styles by providing it's own classes
+     */
+    customization?: PopupCustomization;
+    /**
+     * A collection of button configurations for the popup
+     */
+    buttonCollection: TourButtonConfig[];
+};
+
+declare type StepId = string;
+
+/**
+ * Represents the data for a text popup
+ */
+export declare type TextPopupData = SharedPopupData & {
+    type: Extract<PopupType, 'text'>;
+    /**
+     * The text to display in the popup
+     */
+    text: string;
+};
+
+export declare class Tour {
+    get stepList(): readonly TourStep[];
+    get config(): DeepRequired<TourConfig>;
+    /**
+     * Popup element getter
+     * @returns {HTMLElement | null} The popup element or null if not found.
+     * @example siteguide popup layout
+     *
+     * <div class="siteguide">
+     *     <div class="siteguide-header">
+     *         <h1 class="siteguide-title"></h1>
+     *         <div class="siteguide-close"></div>
+     *     </div>
+     *     <div class="siteguide-content"></div>
+     *     <div class="siteguide-footer">
+     *         <button class="siteguide-button"></button>
+     *         <button class="siteguide-button"></button>
+     *     </div>
+     * </div>
+     */
+    get popup(): HTMLElement | null;
+    get helperLayout(): HTMLElement | null;
+    /**
+     * TODO remove
+     * @deprecated remove later
+     */
+    isStarted: boolean;
+    readonly updatePopupStrategies: Map<PopupType, IUpdatePopup>;
+    private _popup;
+    private _helperLayout;
+    private readonly _stepMap;
+    private _stepList;
+    private _currentStep;
+    private _bodyResizeObserver;
+    private readonly _config;
+    constructor(config: TourConfig);
+    addStep(config: TourStepConfig): void;
+    removeStep(stepId: StepId): void;
+    start(): void;
+    complete(): void;
+    prev(): void;
+    next(): void;
+    private setUpStrategies;
+    private setUpBodySizeObserver;
+}
+
+/**
+ * Represents the configuration for a button
+ */
+export declare type TourButtonConfig = {
+    text: string;
+    type?: TourButtonType;
+    /**
+     * Additional CSS class to apply to the button
+     */
+    class?: string;
+    /**
+     * The action to perform when the button is clicked.
+     * This can be a function that returns void or a Promise that resolves to void
+     */
+    action: (() => void) | (() => Promise<void>);
+};
+
+/**
+ * Type of a button
+ */
+export declare type TourButtonType = 'primary' | 'secondary';
+
+/**
+ * Represents the configuration for a tour.
+ */
+export declare type TourConfig = {
+    /**
+     * The prefix for the CSS classes used in the tour
+     * Overriding this prefix will replace all 'siteguide-' prefixes with '{classPrefix}-'
+     * This option allows to easily replace all classes for customizing popup html
+     * @default 'siteguide'
+     */
+    classPrefix?: string;
+    /**
+     * Indicates if the tour popup can be closed by the user
+     * @default true
+     */
+    allowClose?: boolean;
+    /**
+     * Specifies if the tour should scroll to the current step and how to scroll
+     * Can be a boolean to enable or disable scrolling, or an object with options for scrollIntoView
+     * @default {behavior:'smooth',block:'center',inline:'center'}
+     */
+    scrollTo?: boolean | ScrollIntoViewOptions;
+    /**
+     * The element or HTML to use as the close icon
+     */
+    closeIcon?: PopupCloseIconElement;
+};
+
+export declare class TourStep {
+    readonly id: StepId;
+    private readonly _hostData;
+    private readonly _popupData;
+    private readonly _tour;
+    private _hostElement;
+    constructor(tour: Tour, config: TourStepConfig);
+    show(): void;
+    hide(): void;
+    updatePopupPosition(): void;
+    private updatePopup;
+    private resolveHostElement;
+    private resolvePopupPosition;
+}
+
+/**
+ * Represents the configuration for a single step in a tour
+ */
+export declare type TourStepConfig = {
+    /**
+     * The unique identifier for the tour step.
+     */
+    id: StepId;
+    /**
+     * The host element or a function that returns the host element for the tour step
+     */
+    host: PopupHost;
+    /**
+     * The popup data for the tour step
+     */
+    popup: PopupData;
+};
+
+export { }

package/dist/index.js

@@ -1,194 +1,21 @@
-'use strict';
-var m = Object.defineProperty;
-var w = (i, t, e) => (t in i ? m(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : (i[t] = e));
-var o = (i, t, e) => w(i, typeof t != 'symbol' ? t + '' : t, e);
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-function n(i, t) {
-    const e = document.createElement(i);
-    return t && t.length > 0 && ((t = t.filter((s) => s)), e.classList.add(...t)), e;
-}
-function c(i, t) {
-    i.innerHTML = '';
-    const e = n('div', ['overview-header']);
-    i.appendChild(e);
-    const s = n('button', ['overview-exit-button']);
-    e.appendChild(s);
-    const r = n('div', ['overview-content']);
-    i.appendChild(r);
-    const p = n('div', ['overview-button-list']);
-    t.buttonCollection.forEach((h) => {
-        var a;
-        const l = n('button', ['overview-button', (a = h.className) != null ? a : '']);
-        (l.innerText = h.title),
-            (l.onclick = () => {
-                h.action();
-            }),
-            p.appendChild(l);
-    }),
-        i.appendChild(p);
-}
-class f {
-    updatePopupView(t, e) {
-        c(t, e), t.querySelector('.overview-content').appendChild(e.node);
-    }
-}
-class v {
-    updatePopupView(t, e) {
-        c(t, e);
-        const s = t.querySelector('.overview-content');
-        this.appendContent(s, 'h2', e.title, ['overview-title']),
-            this.appendContent(s, 'p', e.text, ['overview-description']);
-    }
-    appendContent(t, e, s, r) {
-        const p = n(e, r);
-        (p.innerText = s), t.appendChild(p);
-    }
-}
-function E(i) {
-    return i === null || typeof i == 'undefined';
-}
-class _ {
-    constructor(t, e) {
-        o(this, 'id');
-        o(this, '_hostData');
-        o(this, '_popupData');
-        o(this, '_tour');
-        o(this, '_hostElement', null);
-        (this.id = e.id), (this._hostData = e.host), (this._popupData = e.popup), (this._tour = t);
-    }
-    show() {
-        (this._hostElement = this.resolveHostElement(
-            typeof this._hostData == 'function' ? this._hostData() : this._hostData
-        )),
-            this.updatePopup();
-    }
-    hide() {}
-    updatePopupPosition() {
-        const t = this._hostElement.getBoundingClientRect(),
-            e = 8,
-            s = 4,
-            r = this.resolvePopupPosition();
-        (this._tour.helperElement.style.position = r),
-            (this._tour.helperElement.style.left = `${t.left - e}px`),
-            (this._tour.helperElement.style.top = `${t.top - s}px`),
-            (this._tour.helperElement.style.width = `${t.width + 2 * e}px`),
-            (this._tour.helperElement.style.height = `${t.height + 2 * s}px`),
-            (this._tour.popupElement.style.position = r);
-        const p = this._tour.popupElement.offsetHeight,
-            h = this._tour.popupElement.offsetWidth,
-            l = window.innerHeight,
-            a = window.innerWidth;
-        let u = t.top + window.scrollY - p,
-            d = t.left + window.scrollX;
-        u < 0 && (u = t.bottom + window.scrollY),
-            d + h > a && (d = t.right + window.scrollX - h),
-            d < 0 && (d = t.left + window.scrollX),
-            u + p > l && (u = t.top + window.scrollY),
-            (this._tour.popupElement.style.left = `${d}px`),
-            (this._tour.popupElement.style.top = `${u}px`);
-    }
-    updatePopup() {
-        var t;
-        if (!this._tour.updatePopupStrategies.has(this._popupData.type))
-            throw new Error('Missing popup creator strategy');
-        this._tour.updatePopupStrategies
-            .get(this._popupData.type)
-            .updatePopupView(this._tour.popupElement, this._popupData),
-            this.updatePopupPosition(),
-            (t = this._hostElement) == null ||
-                t.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
-    }
-    resolveHostElement(t) {
-        return typeof this._hostData == 'string' ? document.querySelector(this._hostData) : t;
-    }
-    resolvePopupPosition() {
-        var s;
-        let t = this.resolveHostElement(typeof this._hostData == 'function' ? this._hostData() : this._hostData),
-            e = 'absolute';
-        for (; !E(t); )
-            (t == null ? void 0 : t.style.position) === 'fixed' && (e = 'fixed'),
-                (t = (s = t == null ? void 0 : t.parentElement) != null ? s : null);
-        return e;
-    }
-}
-class S {
-    constructor(t) {
-        o(this, 'isStarted', !1);
-        o(this, 'updatePopupStrategies', new Map());
-        o(this, '_popupElement', null);
-        o(this, '_helperElement', null);
-        o(this, '_stepMap', new Map());
-        o(this, '_stepList', []);
-        o(this, '_currentStep', null);
-        o(this, '_bodyResizeObserver');
-        (this._config = t), this.setUpStrategies(), this.setUpBodySizeObserver();
-    }
-    get stepList() {
-        return [...this._stepList];
-    }
-    get config() {
-        return this._config;
-    }
-    get popupElement() {
-        return this._popupElement;
-    }
-    get helperElement() {
-        return this._helperElement;
-    }
-    addStep(t) {
-        if (this._stepMap.has(t.id)) throw new Error('Step with provided id has been already registered');
-        const e = new _(this, t);
-        t.popup.buttonCollection.forEach((s) => (s.action = s.action.bind(this))),
-            this._stepList.push(e),
-            this._stepMap.set(t.id, e);
-    }
-    removeStep(t) {
-        (this._stepList = this._stepList.filter((e) => t !== e.id)), this._stepMap.delete(t);
-    }
-    start() {
-        var t, e;
-        (this.isStarted = !0),
-            (this._popupElement = n('div', ['overview', (t = this._config.className) != null ? t : ''])),
-            document.body.appendChild(this._popupElement),
-            (this._helperElement = n('div', ['overview-helper', (e = this._config.helperClassName) != null ? e : ''])),
-            document.body.appendChild(this._helperElement),
-            this.next();
-    }
-    complete() {
-        (this.isStarted = !1),
-            this._popupElement && document.body.removeChild(this._popupElement),
-            this._helperElement && document.body.removeChild(this._helperElement);
-    }
-    prev() {
-        var e;
-        (e = this._currentStep) == null || e.hide();
-        const t = this._stepList.indexOf(this._currentStep) - 1;
-        if (t < 0) {
-            this.complete();
-            return;
-        }
-        (this._currentStep = this._stepList[t]), this._currentStep.show();
-    }
-    next() {
-        var e;
-        const t = this._stepList.indexOf(this._currentStep) + 1;
-        if (((e = this._currentStep) == null || e.hide(), t >= this._stepList.length)) {
-            this.complete();
-            return;
-        }
-        (this._currentStep = this._stepList[t]), this._currentStep.show();
-    }
-    setUpStrategies() {
-        this.updatePopupStrategies.set('default', new v()), this.updatePopupStrategies.set('custom', new f());
-    }
-    setUpBodySizeObserver() {
-        (this._bodyResizeObserver = new ResizeObserver(() => {
-            var t;
-            this.isStarted && ((t = this._currentStep) == null || t.updatePopupPosition());
-        })),
-            this._bodyResizeObserver.observe(document.body);
-    }
-}
-exports.Tour = S;
-exports.TourStep = _;
-exports.createElement = n;
+"use strict";var $=Object.defineProperty;var E=(i,t,e)=>t in i?$(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var o=(i,t,e)=>E(i,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function y(i){return i===null||typeof i=="undefined"}function h(i,t){const e=document.createElement(i);return t&&t.length>0&&(t=t.filter(s=>s),e.classList.add(...t)),e}function v(i,t,e){var d,u,c,a,g,w,m,x,P,S,L;i.innerHTML="";const s=h("div",[`${e.config.classPrefix}-header`,`${(u=(d=t.customization)==null?void 0:d.headerClass)!=null?u:""}`]);i.appendChild(s);const n=h("h1",[`${e.config.classPrefix}-title`,`${(a=(c=t.customization)==null?void 0:c.titleClass)!=null?a:""}`]);if(n.innerHTML=(g=t.title)!=null?g:"",s.appendChild(n),e.config.allowClose){const r=h("button",[`${e.config.classPrefix}-close`,`${(m=(w=t.customization)==null?void 0:w.closeButtonClass)!=null?m:""}`]);T(r,e.config.closeIcon),r.onclick=()=>{e.complete()},s.appendChild(r)}const p=h("div",[`${e.config.classPrefix}-content`,`${(P=(x=t.customization)==null?void 0:x.contentClass)!=null?P:""}`]);i.appendChild(p);const l=h("div",[`${e.config.classPrefix}-footer`,`${(L=(S=t.customization)==null?void 0:S.footerClass)!=null?L:""}`]);t.buttonCollection.forEach(r=>{var C;const f=[`${e.config.classPrefix}-button`,(C=r.class)!=null?C:""];y(r.type)||r.type==="secondary"?f.push(`${e.config.classPrefix}-button-secondary`):r.type==="primary"&&f.push(`${e.config.classPrefix}-button-primary`),!y(r.class)&&r.class!==""&&f.push(r.class);const _=h("button",f);_.innerText=r.text,_.onclick=()=>{r.action()},l.appendChild(_)}),i.appendChild(l)}function T(i,t){t instanceof HTMLElement?i.appendChild(t):i.innerHTML=t.innerHTML}class M{updatePopupView(t,e,s){v(t,e,s),t.querySelector(`.${s.config.classPrefix}-content`).appendChild(e.node)}}class H{updatePopupView(t,e,s){var p,l;v(t,e,s);const n=t.querySelector(`.${s.config.classPrefix}-content`);this.appendContent(n,"p",e.text,[`${s.config.classPrefix}-description`,`${(l=(p=e.customization)==null?void 0:p.descriptionClass)!=null?l:""}`])}appendContent(t,e,s,n){const p=h(e,n);p.innerText=s,t.appendChild(p)}}class b{constructor(t,e){o(this,"id");o(this,"_hostData");o(this,"_popupData");o(this,"_tour");o(this,"_hostElement",null);this.id=e.id,this._hostData=e.host,this._popupData=e.popup,this._tour=t}show(){this._hostElement=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),this.updatePopup()}hide(){}updatePopupPosition(){const t=this._hostElement.getBoundingClientRect(),e=8,s=4,n=this.resolvePopupPosition();this._tour.helperLayout.style.position=n,this._tour.helperLayout.style.left=`${t.left-e}px`,this._tour.helperLayout.style.top=`${t.top-s}px`,this._tour.helperLayout.style.width=`${t.width+2*e}px`,this._tour.helperLayout.style.height=`${t.height+2*s}px`,this._tour.popup.style.position=n;const p=this._tour.popup.offsetHeight,l=this._tour.popup.offsetWidth,d=window.innerHeight,u=window.innerWidth;let c=t.top+window.scrollY-p,a=t.left+window.scrollX;c<0&&(c=t.bottom+window.scrollY),a+l>u&&(a=t.right+window.scrollX-l),a<0&&(a=t.left+window.scrollX),c+p>d&&(c=t.top+window.scrollY),this._tour.popup.style.left=`${a}px`,this._tour.popup.style.top=`${c}px`}updatePopup(){var t;if(!this._tour.updatePopupStrategies.has(this._popupData.type))throw new Error("Missing popup creator strategy");this._tour.updatePopupStrategies.get(this._popupData.type).updatePopupView(this._tour.popup,this._popupData,this._tour),this.updatePopupPosition(),(t=this._hostElement)==null||t.scrollIntoView(this._tour.config.scrollTo)}resolveHostElement(t){return typeof this._hostData=="string"?document.querySelector(this._hostData):t}resolvePopupPosition(){var s;let t=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),e="absolute";for(;!y(t);)(t==null?void 0:t.style.position)==="fixed"&&(e="fixed"),t=(s=t==null?void 0:t.parentElement)!=null?s:null;return e}}function k(i){return{innerHTML:`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 162 162"
+    class="${i}-close-icon"
+>
+    <path
+        stroke-linecap="round"
+        stroke-width="17"
+        stroke="black"
+        d="M9.01074 8.98926L153.021 153"
+    ></path>
+    <path
+        stroke-linecap="round"
+        stroke-width="17"
+        stroke="black"
+        d="M9.01074 153L153.021 8.98926"
+    ></path>
+</svg>
+        `}}class z{constructor(t){o(this,"isStarted",!1);o(this,"updatePopupStrategies",new Map);o(this,"_popup",null);o(this,"_helperLayout",null);o(this,"_stepMap",new Map);o(this,"_stepList",[]);o(this,"_currentStep",null);o(this,"_bodyResizeObserver");o(this,"_config");var e,s,n,p,l;this.setUpStrategies(),this.setUpBodySizeObserver(),this._config={classPrefix:(e=t.classPrefix)!=null?e:"siteguide",allowClose:(s=t.allowClose)!=null?s:!0,scrollTo:(n=t.scrollTo)!=null?n:{behavior:"smooth",block:"center",inline:"center"},closeIcon:(l=t.closeIcon)!=null?l:k((p=t.classPrefix)!=null?p:"siteguide")}}get stepList(){return this._stepList}get config(){return this._config}get popup(){return this._popup}get helperLayout(){return this._helperLayout}addStep(t){if(this._stepMap.has(t.id))throw new Error("Step with provided id has been already registered");const e=new b(this,t);t.popup.buttonCollection.forEach(s=>s.action=s.action.bind(this)),this._stepList.push(e),this._stepMap.set(t.id,e)}removeStep(t){this._stepList=this._stepList.filter(e=>t!==e.id),this._stepMap.delete(t)}start(){this.isStarted=!0,this._popup=h("div",[this._config.classPrefix]),document.body.appendChild(this._popup),this._helperLayout=h("div",[`${this._config.classPrefix}-helper`]),this._helperLayout.addEventListener("click",()=>{this.complete()}),document.body.appendChild(this._helperLayout),this.next()}complete(){this.isStarted=!1,this._popup&&document.body.removeChild(this._popup),this._helperLayout&&document.body.removeChild(this._helperLayout)}prev(){var e;(e=this._currentStep)==null||e.hide();const t=this._stepList.indexOf(this._currentStep)-1;if(t<0){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}next(){var e;const t=this._stepList.indexOf(this._currentStep)+1;if((e=this._currentStep)==null||e.hide(),t>=this._stepList.length){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}setUpStrategies(){this.updatePopupStrategies.set("text",new H),this.updatePopupStrategies.set("custom",new M)}setUpBodySizeObserver(){this._bodyResizeObserver=new ResizeObserver(()=>{var t;this.isStarted&&((t=this._currentStep)==null||t.updatePopupPosition())}),this._bodyResizeObserver.observe(document.body)}}exports.Tour=z;exports.TourStep=b;exports.createElement=h;

package/dist/index.mjs

@@ -1,206 +1,259 @@
-var _ = Object.defineProperty;
-var m = (i, t, e) => (t in i ? _(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : (i[t] = e));
-var o = (i, t, e) => m(i, typeof t != 'symbol' ? t + '' : t, e);
-function p(i, t) {
-    const e = document.createElement(i);
-    return t && t.length > 0 && ((t = t.filter((s) => s)), e.classList.add(...t)), e;
+var $ = Object.defineProperty;
+var b = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var o = (i, t, e) => b(i, typeof t != "symbol" ? t + "" : t, e);
+function y(i) {
+  return i === null || typeof i == "undefined";
 }
-function c(i, t) {
-    i.innerHTML = '';
-    const e = p('div', ['overview-header']);
-    i.appendChild(e);
-    const s = p('button', ['overview-exit-button']);
-    e.appendChild(s);
-    const r = p('div', ['overview-content']);
-    i.appendChild(r);
-    const n = p('div', ['overview-button-list']);
-    t.buttonCollection.forEach((h) => {
-        var a;
-        const l = p('button', ['overview-button', (a = h.className) != null ? a : '']);
-        (l.innerText = h.title),
-            (l.onclick = () => {
-                h.action();
-            }),
-            n.appendChild(l);
-    }),
-        i.appendChild(n);
+function h(i, t) {
+  const e = document.createElement(i);
+  return t && t.length > 0 && (t = t.filter((s) => s), e.classList.add(...t)), e;
 }
-class w {
-    updatePopupView(t, e) {
-        c(t, e), t.querySelector('.overview-content').appendChild(e.node);
-    }
+function v(i, t, e) {
+  var d, u, c, a, g, w, m, x, P, S, L;
+  i.innerHTML = "";
+  const s = h("div", [
+    `${e.config.classPrefix}-header`,
+    `${(u = (d = t.customization) == null ? void 0 : d.headerClass) != null ? u : ""}`
+  ]);
+  i.appendChild(s);
+  const n = h("h1", [
+    `${e.config.classPrefix}-title`,
+    `${(a = (c = t.customization) == null ? void 0 : c.titleClass) != null ? a : ""}`
+  ]);
+  if (n.innerHTML = (g = t.title) != null ? g : "", s.appendChild(n), e.config.allowClose) {
+    const r = h("button", [
+      `${e.config.classPrefix}-close`,
+      `${(m = (w = t.customization) == null ? void 0 : w.closeButtonClass) != null ? m : ""}`
+    ]);
+    E(r, e.config.closeIcon), r.onclick = () => {
+      e.complete();
+    }, s.appendChild(r);
+  }
+  const p = h("div", [
+    `${e.config.classPrefix}-content`,
+    `${(P = (x = t.customization) == null ? void 0 : x.contentClass) != null ? P : ""}`
+  ]);
+  i.appendChild(p);
+  const l = h("div", [
+    `${e.config.classPrefix}-footer`,
+    `${(L = (S = t.customization) == null ? void 0 : S.footerClass) != null ? L : ""}`
+  ]);
+  t.buttonCollection.forEach((r) => {
+    var C;
+    const f = [`${e.config.classPrefix}-button`, (C = r.class) != null ? C : ""];
+    y(r.type) || r.type === "secondary" ? f.push(`${e.config.classPrefix}-button-secondary`) : r.type === "primary" && f.push(`${e.config.classPrefix}-button-primary`), !y(r.class) && r.class !== "" && f.push(r.class);
+    const _ = h("button", f);
+    _.innerText = r.text, _.onclick = () => {
+      r.action();
+    }, l.appendChild(_);
+  }), i.appendChild(l);
 }
-class f {
-    updatePopupView(t, e) {
-        c(t, e);
-        const s = t.querySelector('.overview-content');
-        this.appendContent(s, 'h2', e.title, ['overview-title']),
-            this.appendContent(s, 'p', e.text, ['overview-description']);
-    }
-    /**
-     * Appends a new HTML element with the specified class list and inner text to the parent element.
-     * @param {HTMLElement} parent - The parent element to which the new element will be appended.
-     * @param {keyof HTMLElementTagNameMap} tagType - The type of HTML element to create and append.
-     * @param {string} innerText - The inner text to set for the new element.
-     * @param {string[]} classList - An array of class names to add to the new element.
-     * @returns {void}
-     */
-    appendContent(t, e, s, r) {
-        const n = p(e, r);
-        (n.innerText = s), t.appendChild(n);
-    }
+function E(i, t) {
+  t instanceof HTMLElement ? i.appendChild(t) : i.innerHTML = t.innerHTML;
 }
-function v(i) {
-    return i === null || typeof i == 'undefined';
+class M {
+  /**
+   * @inheritdoc
+   */
+  updatePopupView(t, e, s) {
+    v(t, e, s), t.querySelector(`.${s.config.classPrefix}-content`).appendChild(e.node);
+  }
 }
-class E {
-    constructor(t, e) {
-        o(this, 'id');
-        o(this, '_hostData');
-        o(this, '_popupData');
-        o(this, '_tour');
-        o(this, '_hostElement', null);
-        (this.id = e.id), (this._hostData = e.host), (this._popupData = e.popup), (this._tour = t);
-    }
-    show() {
-        (this._hostElement = this.resolveHostElement(
-            typeof this._hostData == 'function' ? this._hostData() : this._hostData
-        )),
-            this.updatePopup();
-    }
-    hide() {}
-    updatePopupPosition() {
-        const t = this._hostElement.getBoundingClientRect(),
-            e = 8,
-            s = 4,
-            r = this.resolvePopupPosition();
-        (this._tour.helperElement.style.position = r),
-            (this._tour.helperElement.style.left = `${t.left - e}px`),
-            (this._tour.helperElement.style.top = `${t.top - s}px`),
-            (this._tour.helperElement.style.width = `${t.width + 2 * e}px`),
-            (this._tour.helperElement.style.height = `${t.height + 2 * s}px`),
-            (this._tour.popupElement.style.position = r);
-        const n = this._tour.popupElement.offsetHeight,
-            h = this._tour.popupElement.offsetWidth,
-            l = window.innerHeight,
-            a = window.innerWidth;
-        let u = t.top + window.scrollY - n,
-            d = t.left + window.scrollX;
-        u < 0 && (u = t.bottom + window.scrollY),
-            d + h > a && (d = t.right + window.scrollX - h),
-            d < 0 && (d = t.left + window.scrollX),
-            u + n > l && (u = t.top + window.scrollY),
-            (this._tour.popupElement.style.left = `${d}px`),
-            (this._tour.popupElement.style.top = `${u}px`);
-    }
-    updatePopup() {
-        var t;
-        if (!this._tour.updatePopupStrategies.has(this._popupData.type))
-            throw new Error('Missing popup creator strategy');
-        this._tour.updatePopupStrategies
-            .get(this._popupData.type)
-            .updatePopupView(this._tour.popupElement, this._popupData),
-            this.updatePopupPosition(),
-            (t = this._hostElement) == null ||
-                t.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'center',
-                    inline: 'center',
-                });
-    }
-    resolveHostElement(t) {
-        return typeof this._hostData == 'string' ? document.querySelector(this._hostData) : t;
-    }
-    resolvePopupPosition() {
-        var s;
-        let t = this.resolveHostElement(typeof this._hostData == 'function' ? this._hostData() : this._hostData),
-            e = 'absolute';
-        for (; !v(t); )
-            (t == null ? void 0 : t.style.position) === 'fixed' && (e = 'fixed'),
-                (t = (s = t == null ? void 0 : t.parentElement) != null ? s : null);
-        return e;
-    }
+class T {
+  /** @inheritdoc */
+  updatePopupView(t, e, s) {
+    var p, l;
+    v(t, e, s);
+    const n = t.querySelector(`.${s.config.classPrefix}-content`);
+    this.appendContent(n, "p", e.text, [
+      `${s.config.classPrefix}-description`,
+      `${(l = (p = e.customization) == null ? void 0 : p.descriptionClass) != null ? l : ""}`
+    ]);
+  }
+  /**
+   * Appends a new HTML element with the specified class list and inner text to the parent element.
+   * @param {HTMLElement} parent - The parent element to which the new element will be appended.
+   * @param {keyof HTMLElementTagNameMap} tagType - The type of HTML element to create and append.
+   * @param {string} innerText - The inner text to set for the new element.
+   * @param {string[]} classList - An array of class names to add to the new element.
+   * @returns {void}
+   */
+  appendContent(t, e, s, n) {
+    const p = h(e, n);
+    p.innerText = s, t.appendChild(p);
+  }
 }
-class y {
-    constructor(t) {
-        /**
-         * TODO remove
-         * @deprecated remove later
-         */
-        o(this, 'isStarted', !1);
-        o(this, 'updatePopupStrategies', /* @__PURE__ */ new Map());
-        o(this, '_popupElement', null);
-        o(this, '_helperElement', null);
-        o(this, '_stepMap', /* @__PURE__ */ new Map());
-        o(this, '_stepList', []);
-        o(this, '_currentStep', null);
-        o(this, '_bodyResizeObserver');
-        (this._config = t), this.setUpStrategies(), this.setUpBodySizeObserver();
-    }
-    get stepList() {
-        return [...this._stepList];
-    }
-    get config() {
-        return this._config;
-    }
-    get popupElement() {
-        return this._popupElement;
-    }
-    get helperElement() {
-        return this._helperElement;
-    }
-    addStep(t) {
-        if (this._stepMap.has(t.id)) throw new Error('Step with provided id has been already registered');
-        const e = new E(this, t);
-        t.popup.buttonCollection.forEach((s) => (s.action = s.action.bind(this))),
-            this._stepList.push(e),
-            this._stepMap.set(t.id, e);
-    }
-    removeStep(t) {
-        (this._stepList = this._stepList.filter((e) => t !== e.id)), this._stepMap.delete(t);
-    }
-    start() {
-        var t, e;
-        (this.isStarted = !0),
-            (this._popupElement = p('div', ['overview', (t = this._config.className) != null ? t : ''])),
-            document.body.appendChild(this._popupElement),
-            (this._helperElement = p('div', ['overview-helper', (e = this._config.helperClassName) != null ? e : ''])),
-            document.body.appendChild(this._helperElement),
-            this.next();
-    }
-    complete() {
-        (this.isStarted = !1),
-            this._popupElement && document.body.removeChild(this._popupElement),
-            this._helperElement && document.body.removeChild(this._helperElement);
-    }
-    prev() {
-        var e;
-        (e = this._currentStep) == null || e.hide();
-        const t = this._stepList.indexOf(this._currentStep) - 1;
-        if (t < 0) {
-            this.complete();
-            return;
-        }
-        (this._currentStep = this._stepList[t]), this._currentStep.show();
-    }
-    next() {
-        var e;
-        const t = this._stepList.indexOf(this._currentStep) + 1;
-        if (((e = this._currentStep) == null || e.hide(), t >= this._stepList.length)) {
-            this.complete();
-            return;
-        }
-        (this._currentStep = this._stepList[t]), this._currentStep.show();
-    }
-    setUpStrategies() {
-        this.updatePopupStrategies.set('default', new f()), this.updatePopupStrategies.set('custom', new w());
+class H {
+  constructor(t, e) {
+    o(this, "id");
+    o(this, "_hostData");
+    o(this, "_popupData");
+    o(this, "_tour");
+    o(this, "_hostElement", null);
+    this.id = e.id, this._hostData = e.host, this._popupData = e.popup, this._tour = t;
+  }
+  show() {
+    this._hostElement = this.resolveHostElement(
+      typeof this._hostData == "function" ? this._hostData() : this._hostData
+    ), this.updatePopup();
+  }
+  hide() {
+  }
+  updatePopupPosition() {
+    const t = this._hostElement.getBoundingClientRect(), e = 8, s = 4, n = this.resolvePopupPosition();
+    this._tour.helperLayout.style.position = n, this._tour.helperLayout.style.left = `${t.left - e}px`, this._tour.helperLayout.style.top = `${t.top - s}px`, this._tour.helperLayout.style.width = `${t.width + 2 * e}px`, this._tour.helperLayout.style.height = `${t.height + 2 * s}px`, this._tour.popup.style.position = n;
+    const p = this._tour.popup.offsetHeight, l = this._tour.popup.offsetWidth, d = window.innerHeight, u = window.innerWidth;
+    let c = t.top + window.scrollY - p, a = t.left + window.scrollX;
+    c < 0 && (c = t.bottom + window.scrollY), a + l > u && (a = t.right + window.scrollX - l), a < 0 && (a = t.left + window.scrollX), c + p > d && (c = t.top + window.scrollY), this._tour.popup.style.left = `${a}px`, this._tour.popup.style.top = `${c}px`;
+  }
+  updatePopup() {
+    var t;
+    if (!this._tour.updatePopupStrategies.has(this._popupData.type))
+      throw new Error("Missing popup creator strategy");
+    this._tour.updatePopupStrategies.get(this._popupData.type).updatePopupView(this._tour.popup, this._popupData, this._tour), this.updatePopupPosition(), (t = this._hostElement) == null || t.scrollIntoView(this._tour.config.scrollTo);
+  }
+  resolveHostElement(t) {
+    return typeof this._hostData == "string" ? document.querySelector(this._hostData) : t;
+  }
+  resolvePopupPosition() {
+    var s;
+    let t = this.resolveHostElement(
+      typeof this._hostData == "function" ? this._hostData() : this._hostData
+    ), e = "absolute";
+    for (; !y(t); )
+      (t == null ? void 0 : t.style.position) === "fixed" && (e = "fixed"), t = (s = t == null ? void 0 : t.parentElement) != null ? s : null;
+    return e;
+  }
+}
+function k(i) {
+  return {
+    innerHTML: `
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 162 162"
+    class="${i}-close-icon"
+>
+    <path
+        stroke-linecap="round"
+        stroke-width="17"
+        stroke="black"
+        d="M9.01074 8.98926L153.021 153"
+    ></path>
+    <path
+        stroke-linecap="round"
+        stroke-width="17"
+        stroke="black"
+        d="M9.01074 153L153.021 8.98926"
+    ></path>
+</svg>
+        `
+  };
+}
+class O {
+  constructor(t) {
+    /**
+     * TODO remove
+     * @deprecated remove later
+     */
+    o(this, "isStarted", !1);
+    o(this, "updatePopupStrategies", /* @__PURE__ */ new Map());
+    o(this, "_popup", null);
+    o(this, "_helperLayout", null);
+    o(this, "_stepMap", /* @__PURE__ */ new Map());
+    o(this, "_stepList", []);
+    o(this, "_currentStep", null);
+    o(this, "_bodyResizeObserver");
+    o(this, "_config");
+    var e, s, n, p, l;
+    this.setUpStrategies(), this.setUpBodySizeObserver(), this._config = {
+      classPrefix: (e = t.classPrefix) != null ? e : "siteguide",
+      allowClose: (s = t.allowClose) != null ? s : !0,
+      scrollTo: (n = t.scrollTo) != null ? n : {
+        behavior: "smooth",
+        block: "center",
+        inline: "center"
+      },
+      closeIcon: (l = t.closeIcon) != null ? l : k((p = t.classPrefix) != null ? p : "siteguide")
+    };
+  }
+  get stepList() {
+    return this._stepList;
+  }
+  get config() {
+    return this._config;
+  }
+  /**
+   * Popup element getter
+   * @returns {HTMLElement | null} The popup element or null if not found.
+   * @example siteguide popup layout
+   *
+   * <div class="siteguide">
+   *     <div class="siteguide-header">
+   *         <h1 class="siteguide-title"></h1>
+   *         <div class="siteguide-close"></div>
+   *     </div>
+   *     <div class="siteguide-content"></div>
+   *     <div class="siteguide-footer">
+   *         <button class="siteguide-button"></button>
+   *         <button class="siteguide-button"></button>
+   *     </div>
+   * </div>
+   */
+  get popup() {
+    return this._popup;
+  }
+  get helperLayout() {
+    return this._helperLayout;
+  }
+  addStep(t) {
+    if (this._stepMap.has(t.id))
+      throw new Error("Step with provided id has been already registered");
+    const e = new H(this, t);
+    t.popup.buttonCollection.forEach((s) => s.action = s.action.bind(this)), this._stepList.push(e), this._stepMap.set(t.id, e);
+  }
+  removeStep(t) {
+    this._stepList = this._stepList.filter((e) => t !== e.id), this._stepMap.delete(t);
+  }
+  start() {
+    this.isStarted = !0, this._popup = h("div", [this._config.classPrefix]), document.body.appendChild(this._popup), this._helperLayout = h("div", [`${this._config.classPrefix}-helper`]), this._helperLayout.addEventListener("click", () => {
+      this.complete();
+    }), document.body.appendChild(this._helperLayout), this.next();
+  }
+  complete() {
+    this.isStarted = !1, this._popup && document.body.removeChild(this._popup), this._helperLayout && document.body.removeChild(this._helperLayout);
+  }
+  prev() {
+    var e;
+    (e = this._currentStep) == null || e.hide();
+    const t = this._stepList.indexOf(this._currentStep) - 1;
+    if (t < 0) {
+      this.complete();
+      return;
     }
-    setUpBodySizeObserver() {
-        (this._bodyResizeObserver = new ResizeObserver(() => {
-            var t;
-            this.isStarted && ((t = this._currentStep) == null || t.updatePopupPosition());
-        })),
-            this._bodyResizeObserver.observe(document.body);
+    this._currentStep = this._stepList[t], this._currentStep.show();
+  }
+  next() {
+    var e;
+    const t = this._stepList.indexOf(this._currentStep) + 1;
+    if ((e = this._currentStep) == null || e.hide(), t >= this._stepList.length) {
+      this.complete();
+      return;
     }
+    this._currentStep = this._stepList[t], this._currentStep.show();
+  }
+  setUpStrategies() {
+    this.updatePopupStrategies.set("text", new T()), this.updatePopupStrategies.set("custom", new M());
+  }
+  setUpBodySizeObserver() {
+    this._bodyResizeObserver = new ResizeObserver(() => {
+      var t;
+      this.isStarted && ((t = this._currentStep) == null || t.updatePopupPosition());
+    }), this._bodyResizeObserver.observe(document.body);
+  }
 }
-export { y as Tour, E as TourStep, p as createElement };
+export {
+  O as Tour,
+  H as TourStep,
+  h as createElement
+};

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "siteguide.js",
-    "version": "0.1.2",
-    "description": "Site guide and tours building lib",
+    "version": "0.2.0-alpha",
+    "description": "Web-site guides and tours building lib",
     "license": "MIT",
     "keywords": [
         "siteguide",
+        "siteguide.js",
         "site tour",
         "tour",
         "tutorial",
@@ -14,7 +15,7 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/Handehoch/siteguide.js.git"
+        "url": "git+https://github.com/Handehoch/siteguide.git"
     },
     "author": {
         "name": "Borislav Shelanov",