siteguide.js 0.1.1 → 0.1.2

package/dist/css/siteguide.css

@@ -0,0 +1,70 @@
+.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;
+}

package/dist/index.d.ts

@@ -1,110 +1,106 @@
-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);
-
-/**
- * Checks if a value is null or undefined.
- * @param {any} value - The value to check.
- * @returns {boolean} True if the value is null or undefined, false otherwise.
- */
-export declare function isNullOrUndefined(value: any): value is null | undefined;
-
-export 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[];
-};
-
-export 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 { }
+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 {};

package/dist/index.js

@@ -0,0 +1,194 @@
+'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;

package/dist/index.mjs

@@ -1,173 +1,206 @@
 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);
+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;
+    const e = document.createElement(i);
+    return t && t.length > 0 && ((t = t.filter((s) => s)), e.classList.add(...t)), e;
 }
-function a(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) => {
-    const l = p("button", ["overview-button", h.className ?? ""]);
-    l.innerText = h.title, l.onclick = () => {
-      h.action();
-    }, n.appendChild(l);
-  }), i.appendChild(n);
+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);
 }
 class w {
-  updatePopupView(t, e) {
-    a(t, e), t.querySelector(".overview-content").appendChild(e.node);
-  }
+    updatePopupView(t, e) {
+        c(t, e), t.querySelector('.overview-content').appendChild(e.node);
+    }
 }
 class f {
-  updatePopupView(t, e) {
-    a(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);
-  }
+    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 v(i) {
-  return i === null || typeof i > "u";
+    return i === null || typeof i == 'undefined';
 }
 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, c = window.innerWidth;
-    let u = t.top + window.scrollY - n, d = t.left + window.scrollX;
-    u < 0 && (u = t.bottom + window.scrollY), d + h > c && (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() {
-    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 = (t == null ? void 0 : t.parentElement) ?? null;
-    return 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 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() {
-    this.isStarted = !0, this._popupElement = p("div", ["overview", this._config.className ?? ""]), document.body.appendChild(this._popupElement), this._helperElement = p("div", ["overview-helper", this._config.helperClassName ?? ""]), 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());
-  }
-  setUpBodySizeObserver() {
-    this._bodyResizeObserver = new ResizeObserver(() => {
-      var t;
-      this.isStarted && ((t = this._currentStep) == null || t.updatePopupPosition());
-    }), this._bodyResizeObserver.observe(document.body);
-  }
+    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());
+    }
+    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,
-  v as isNullOrUndefined
-};
+export { y as Tour, E as TourStep, p as createElement };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "siteguide.js",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "description": "Site guide and tours building lib",
     "license": "MIT",
     "keywords": [
@@ -20,12 +20,18 @@
         "name": "Borislav Shelanov",
         "email": "borislav.shelanov@gmail.com"
     },
-    "main": "dist/index.cjs",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
     "type": "module",
     "exports": {
-        "./dist/styles/siteguide.css": "./dist/styles/siteguide.css"
+        ".": {
+            "types": "./dist/index.d.ts",
+            "require": "./dist/index.js",
+            "import": "./dist/index.mjs",
+            "default": "./dist/index.mjs"
+        },
+        "./dist/css/siteguide.css": "./dist/css/siteguide.css"
     },
     "files": [
         "dist"

package/dist/index.cjs

@@ -1 +0,0 @@
-"use strict";var w=Object.defineProperty;var f=(i,t,e)=>t in i?w(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var o=(i,t,e)=>f(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 a(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=>{const l=n("button",["overview-button",h.className??""]);l.innerText=h.title,l.onclick=()=>{h.action()},p.appendChild(l)}),i.appendChild(p)}class v{updatePopupView(t,e){a(t,e),t.querySelector(".overview-content").appendChild(e.node)}}class E{updatePopupView(t,e){a(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 c(i){return i===null||typeof i>"u"}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,m=window.innerWidth;let u=t.top+window.scrollY-p,d=t.left+window.scrollX;u<0&&(u=t.bottom+window.scrollY),d+h>m&&(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(){let t=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),e="absolute";for(;!c(t);)(t==null?void 0:t.style.position)==="fixed"&&(e="fixed"),t=(t==null?void 0:t.parentElement)??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(){this.isStarted=!0,this._popupElement=n("div",["overview",this._config.className??""]),document.body.appendChild(this._popupElement),this._helperElement=n("div",["overview-helper",this._config.helperClassName??""]),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 E),this.updatePopupStrategies.set("custom",new v)}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;exports.isNullOrUndefined=c;

package/dist/styles/siteguide.css

@@ -1 +0,0 @@
-.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 .3s ease-out}.overview-helper{box-shadow:0 0 #212121cc,0 0 0 5000px #21212180;border:2px dashed rgba(33,33,33,.8);border-radius:4px;opacity:1;z-index:1000000;box-sizing:border-box;position:absolute;transition:all .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}