driver.js - npm Package Compare versions

Comparing version 1.1.0-next.0 to 1.1.0

dist/driver.js.d.ts

 // Generated by dts-bundle-generator v8.0.1
 
-export type Side = "top" | "right" | "bottom" | "left" | "over";
-export type Alignment = "start" | "center" | "end";
-export type AllowedButtons = "next" | "previous" | "close";
-export type Popover = {
-	title?: string;
-	description?: string;
-	side?: Side;
-	align?: Alignment;
-	showButtons?: AllowedButtons[];
-	showProgress?: boolean;
-	disableButtons?: AllowedButtons[];
-	popoverClass?: string;
-	progressText?: string;
-	doneBtnText?: string;
-	nextBtnText?: string;
-	prevBtnText?: string;
-	onPopoverRendered?: (popover: PopoverDOM) => void;
-	onNextClick?: (element: Element | undefined, step: DriveStep) => void;
-	onPrevClick?: (element: Element | undefined, step: DriveStep) => void;
-	onCloseClick?: (element: Element | undefined, step: DriveStep) => void;
-};
-export type PopoverDOM = {
-	wrapper: HTMLElement;
-	arrow: HTMLElement;
-	title: HTMLElement;
-	description: HTMLElement;
-	footer: HTMLElement;
-	progress: HTMLElement;
-	previousButton: HTMLElement;
-	nextButton: HTMLElement;
-	closeButton: HTMLElement;
-	footerButtons: HTMLElement;
-};
-declare function requireRefresh(): void;
 export type StageDefinition = {
@@ -51,8 +17,11 @@ x: number;
 	popover?: PopoverDOM;
+	__activeOnDestroyed?: Element;
 	__resizeTimeout?: number;
 	__transitionCallback?: () => void;
 	__activeStagePosition?: StageDefinition;
-	__stageSvg?: SVGSVGElement;
+	__overlaySvg?: SVGSVGElement;
 };
-export type DriverHook = (element: Element | undefined, step: DriveStep, opts?: {
+declare function getState(): State;
+declare function getState<K extends keyof State>(key: K): State[K];
+export type DriverHook = (element: Element | undefined, step: DriveStep, opts: {
 	config: Config;
@@ -64,6 +33,6 @@ state: State;
 	animate?: boolean;
-	backdropColor?: string;
+	overlayColor?: string;
+	overlayOpacity?: number;
 	smoothScroll?: boolean;
 	allowClose?: boolean;
-	opacity?: number;
 	stagePadding?: number;
@@ -81,3 +50,3 @@ stageRadius?: number;
 	doneBtnText?: string;
-	onPopoverRendered?: (popover: PopoverDOM) => void;
+	onPopoverRender?: (popover: PopoverDOM) => void;
 	onHighlightStarted?: DriverHook;
@@ -92,5 +61,47 @@ onHighlighted?: DriverHook;
 };
+declare function configure(config?: Config): void;
+declare function getConfig(): Config;
+declare function getConfig<K extends keyof Config>(key: K): Config[K];
+export type Side = "top" | "right" | "bottom" | "left" | "over";
+export type Alignment = "start" | "center" | "end";
+export type AllowedButtons = "next" | "previous" | "close";
+export type Popover = {
+	title?: string;
+	description?: string;
+	side?: Side;
+	align?: Alignment;
+	showButtons?: AllowedButtons[];
+	showProgress?: boolean;
+	disableButtons?: AllowedButtons[];
+	popoverClass?: string;
+	progressText?: string;
+	doneBtnText?: string;
+	nextBtnText?: string;
+	prevBtnText?: string;
+	onPopoverRender?: (popover: PopoverDOM, opts: {
+		config: Config;
+		state: State;
+	}) => void;
+	onNextClick?: DriverHook;
+	onPrevClick?: DriverHook;
+	onCloseClick?: DriverHook;
+};
+export type PopoverDOM = {
+	wrapper: HTMLElement;
+	arrow: HTMLElement;
+	title: HTMLElement;
+	description: HTMLElement;
+	footer: HTMLElement;
+	progress: HTMLElement;
+	previousButton: HTMLButtonElement;
+	nextButton: HTMLButtonElement;
+	closeButton: HTMLButtonElement;
+	footerButtons: HTMLElement;
+};
+declare function requireRefresh(): void;
 export type DriveStep = {
 	element?: string | Element;
-	onDeselected?: (element: Element | undefined, step: DriveStep) => void;
+	onHighlightStarted?: DriverHook;
+	onHighlighted?: DriverHook;
+	onDeselected?: DriverHook;
 	popover?: Popover;
@@ -102,4 +113,16 @@ };
 	drive: (stepIndex?: number) => void;
+	setConfig: typeof configure;
+	setSteps: (steps: DriveStep[]) => void;
+	getConfig: typeof getConfig;
+	getState: typeof getState;
+	getActiveIndex: () => number | undefined;
+	isFirstStep: () => boolean;
+	isLastStep: () => boolean;
+	getActiveStep: () => DriveStep | undefined;
+	getActiveElement: () => Element | undefined;
+	getPreviousElement: () => Element | undefined;
+	getPreviousStep: () => DriveStep | undefined;
 	moveNext: () => void;
 	movePrevious: () => void;
+	moveTo: (index: number) => void;
 	hasNextStep: () => false | DriveStep;
@@ -106,0 +129,0 @@ hasPreviousStep: () => false | DriveStep;

dist/driver.js.iife.js

@@ -1,2 +0,2 @@
-this.driver=this.driver||{};this.driver.js=function(M){"use strict";let R={};function G(e={}){R={animate:!0,allowClose:!0,opacity:.7,smoothScroll:!1,showProgress:!1,stagePadding:10,stageRadius:5,popoverOffset:10,showButtons:["next","previous","close"],disableButtons:[],backdropColor:"#000",...e}}function d(e){return e?R[e]:R}function H(e,o,t,n){return(e/=n/2)<1?t/2*e*e+o:-t/2*(--e*(e-2)-1)+o}function A(e){if(!e||U(e))return;const o=d("smoothScroll");e.scrollIntoView({behavior:!o||J(e)?"auto":"smooth",inline:"center",block:"center"})}function J(e){if(!e||!e.parentElement)return;const o=e.parentElement;return o.scrollHeight>o.clientHeight}function U(e){const o=e.getBoundingClientRect();return o.top>=0&&o.left>=0&&o.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&o.right<=(window.innerWidth||document.documentElement.clientWidth)}let E={};function b(e,o){E[e]=o}function h(e){return e?E[e]:E}function ee(){E={}}let $={};function B(e,o){$[e]=o}function T(e){var o;(o=$[e])==null||o.call($)}function te(){$={}}function oe(e,o,t,n){let c=h("__activeStagePosition");const r=c||t.getBoundingClientRect(),u=n.getBoundingClientRect(),v=H(e,r.x,u.x-r.x,o),i=H(e,r.y,u.y-r.y,o),s=H(e,r.width,u.width-r.width,o),a=H(e,r.height,u.height-r.height,o);c={x:v,y:i,width:s,height:a},_(c),b("__activeStagePosition",c)}function W(e){if(!e)return;const o=e.getBoundingClientRect(),t={x:o.x,y:o.y,width:o.width,height:o.height};b("__activeStagePosition",t),_(t)}function ne(){const e=h("__activeStagePosition"),o=h("__stageSvg");if(!e)return;if(!o){console.warn("No stage svg found.");return}const t=window.innerWidth,n=window.innerHeight;o.setAttribute("viewBox",`0 0 ${t} ${n}`)}function ie(e){const o=re(e);document.body.appendChild(o),z(o,t=>{t.target.tagName==="path"&&T("overlayClick")}),b("__stageSvg",o)}function _(e){const o=h("__stageSvg");if(!o){ie(e);return}const t=o.firstElementChild;if((t==null?void 0:t.tagName)!=="path")throw new Error("no path element found in stage svg");t.setAttribute("d",N(e))}function re(e){const o=window.innerWidth,t=window.innerHeight,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.classList.add("driver-stage","driver-stage-animated"),n.setAttribute("viewBox",`0 0 ${o} ${t}`),n.setAttribute("xmlSpace","preserve"),n.setAttribute("xmlnsXlink","http://www.w3.org/1999/xlink"),n.setAttribute("version","1.1"),n.setAttribute("preserveAspectRatio","xMinYMin slice"),n.style.fillRule="evenodd",n.style.clipRule="evenodd",n.style.strokeLinejoin="round",n.style.strokeMiterlimit="2",n.style.zIndex="10000",n.style.position="fixed",n.style.top="0",n.style.left="0",n.style.width="100%",n.style.height="100%";const c=document.createElementNS("http://www.w3.org/2000/svg","path");return c.setAttribute("d",N(e)),c.style.fill=d("backdropColor")||"rgb(0,0,0)",c.style.opacity=`${d("opacity")}`,c.style.pointerEvents="auto",c.style.cursor="auto",n.appendChild(c),n}function N(e){const o=window.innerWidth,t=window.innerHeight,n=d("stagePadding")||0,c=d("stageRadius")||0,r=e.width+n*2,u=e.height+n*2,v=Math.min(c,r/2,u/2),i=Math.floor(Math.max(v,0)),s=e.x-n+i,a=e.y-n,l=r-i*2,g=u-i*2;return`M${o},0L0,0L0,${t}L${o},${t}L${o},0Z
-    M${s},${a} h${l} a${i},${i} 0 0 1 ${i},${i} v${g} a${i},${i} 0 0 1 -${i},${i} h-${l} a${i},${i} 0 0 1 -${i},-${i} v-${g} a${i},${i} 0 0 1 ${i},-${i} z`}function se(){const e=h("__stageSvg");e&&e.remove()}function ae(){const e=document.getElementById("driver-dummy-element");if(e)return e;let o=document.createElement("div");return o.id="driver-dummy-element",o.style.width="0",o.style.height="0",o.style.pointerEvents="none",o.style.opacity="0",o.style.position="fixed",o.style.top="50%",o.style.left="50%",document.body.appendChild(o),o}function I(e){const{element:o}=e;let t=typeof o=="string"?document.querySelector(o):o;t||(t=ae()),de(t,e)}function le(){const e=h("activeElement"),o=h("activeStep");e&&(W(e),ne(),V(e,o))}function de(e,o){const n=Date.now(),c=h("activeStep"),r=h("activeElement")||e,u=!r||r===e,v=e.id==="driver-dummy-element",i=r.id==="driver-dummy-element",s=d("animate"),a=d("onHighlightStarted"),l=d("onHighlighted"),g=(c==null?void 0:c.onDeselected)||d("onDeselected"),m=d(),w=h();!u&&g&&g(i?void 0:r,c,{config:m,state:w}),a&&a(v?void 0:e,o,{config:m,state:w});const p=!u&&s;let f=!1;ve();const L=()=>{if(h("__transitionCallback")!==L)return;const S=Date.now()-n,y=400-S<=400/2;o.popover&&y&&!f&&p&&(O(e,o),f=!0),d("animate")&&S<400?oe(S,400,r,e):(W(e),l&&l(v?void 0:e,o,{config:d(),state:h()}),b("__transitionCallback",void 0),b("previousStep",c),b("previousElement",r),b("activeStep",o),b("activeElement",e)),window.requestAnimationFrame(L)};b("__transitionCallback",L),window.requestAnimationFrame(L),A(e),!p&&o.popover&&O(e,o),r.classList.remove("driver-active-element"),e.classList.add("driver-active-element")}function ce(){var e;(e=document.getElementById("driver-dummy-element"))==null||e.remove(),document.querySelectorAll(".driver-active-element").forEach(o=>{o.classList.remove("driver-active-element")})}function k(){const e=h("__resizeTimeout");e&&window.cancelAnimationFrame(e),b("__resizeTimeout",window.requestAnimationFrame(le))}function pe(e){d("allowKeyboardControl");e.key==="Escape"?T("escapePress"):e.key==="ArrowRight"?T("arrowRightPress"):e.key==="ArrowLeft"&&T("arrowLeftPress")}function z(e,o,t){const n=(r,u)=>{const v=r.target;e.contains(v)&&((!t||t(v))&&r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation(),u==null||u(r))};document.addEventListener("pointerdown",n,!0),document.addEventListener("mousedown",n,!0),document.addEventListener("pointerup",n,!0),document.addEventListener("mouseup",n,!0),document.addEventListener("click",r=>{n(r,o)},!0)}function ue(){window.addEventListener("keyup",pe,!1),window.addEventListener("resize",k),window.addEventListener("scroll",k)}function he(){window.removeEventListener("resize",k),window.removeEventListener("scroll",k)}function ve(){const e=h("popover");e&&(e.wrapper.style.display="none")}function O(e,o){var S,P;let t=h("popover");t&&document.body.removeChild(t.wrapper),t=ge(),document.body.appendChild(t.wrapper);const{title:n,description:c,showButtons:r,disableButtons:u,showProgress:v,nextBtnText:i=d("nextBtnText")||"Next &rarr;",prevBtnText:s=d("prevBtnText")||"&larr; Previous",progressText:a=d("progressText")||"{current} of {total}"}=o.popover||{};t.nextButton.innerHTML=i,t.previousButton.innerHTML=s,t.progress.innerHTML=a,n?(t.title.innerText=n,t.title.style.display="block"):t.title.style.display="none",c?(t.description.innerHTML=c,t.description.style.display="block"):t.description.style.display="none";const l=r||d("showButtons"),g=v||d("showProgress")||!1,m=(l==null?void 0:l.includes("next"))||(l==null?void 0:l.includes("previous"))||(l==null?void 0:l.includes("close"))||g;t.closeButton.style.display=l.includes("close")?"block":"none",m?(t.footer.style.display="flex",t.progress.style.display=g?"block":"none",t.nextButton.style.display=l.includes("next")?"block":"none",t.previousButton.style.display=l.includes("previous")?"block":"none"):t.footer.style.display="none";const w=u||d("disableButtons")||[];w!=null&&w.includes("next")&&t.nextButton.classList.add("driver-popover-btn-disabled"),w!=null&&w.includes("previous")&&t.previousButton.classList.add("driver-popover-btn-disabled"),w!=null&&w.includes("close")&&t.closeButton.classList.add("driver-popover-btn-disabled");const p=t.wrapper;p.style.display="block",p.style.left="",p.style.top="",p.style.bottom="",p.style.right="";const f=t.arrow;f.className="driver-popover-arrow";const L=((S=o.popover)==null?void 0:S.popoverClass)||d("popoverClass")||"";p.className=`driver-popover ${L}`.trim(),z(t.wrapper,y=>{var K,Q,Z;const x=y.target,X=((K=o.popover)==null?void 0:K.onNextClick)||d("onNextClick"),Y=((Q=o.popover)==null?void 0:Q.onPrevClick)||d("onPrevClick"),j=((Z=o.popover)==null?void 0:Z.onCloseClick)||d("onCloseClick");if(x.classList.contains("driver-popover-next-btn"))return X?X(e,o):T("nextClick");if(x.classList.contains("driver-popover-prev-btn"))return Y?Y(e,o):T("prevClick");if(x.classList.contains("driver-popover-close-btn"))return j?j(e,o):T("closeClick")},y=>!(t!=null&&t.description.contains(y))&&!(t!=null&&t.title.contains(y))),b("popover",t),V(e,o),A(p);const C=((P=o.popover)==null?void 0:P.onPopoverRendered)||d("onPopoverRendered");C&&C(t)}function D(){const e=h("popover");if(!(e!=null&&e.wrapper))return;const o=e.wrapper.getBoundingClientRect(),t=d("stagePadding")||0,n=d("popoverOffset")||0;return{width:o.width+t+n,height:o.height+t+n,realWidth:o.width,realHeight:o.height}}function F(e,o){const{elementDimensions:t,popoverDimensions:n,popoverPadding:c,popoverArrowDimensions:r}=o;return e==="start"?Math.max(Math.min(t.top-c,window.innerHeight-n.realHeight-r.width),r.width):e==="end"?Math.max(Math.min(t.top-(n==null?void 0:n.realHeight)+t.height+c,window.innerHeight-(n==null?void 0:n.realHeight)-r.width),r.width):e==="center"?Math.max(Math.min(t.top+t.height/2-(n==null?void 0:n.realHeight)/2,window.innerHeight-(n==null?void 0:n.realHeight)-r.width),r.width):0}function q(e,o){const{elementDimensions:t,popoverDimensions:n,popoverPadding:c,popoverArrowDimensions:r}=o;return e==="start"?Math.max(Math.min(t.left-c,window.innerWidth-n.realWidth-r.width),r.width):e==="end"?Math.max(Math.min(t.left-(n==null?void 0:n.realWidth)+t.width+c,window.innerWidth-(n==null?void 0:n.realWidth)-r.width),r.width):e==="center"?Math.max(Math.min(t.left+t.width/2-(n==null?void 0:n.realWidth)/2,window.innerWidth-(n==null?void 0:n.realWidth)-r.width),r.width):0}function V(e,o){const t=h("popover");if(!t)return;const{align:n="start",side:c="left"}=(o==null?void 0:o.popover)||{},r=n,u=e.id==="driver-dummy-element"?"over":c,v=d("stagePadding")||0,i=D(),s=t.arrow.getBoundingClientRect(),a=e.getBoundingClientRect(),l=a.top-i.height;let g=l>=0;const m=window.innerHeight-(a.bottom+i.height);let w=m>=0;const p=a.left-i.width;let f=p>=0;const L=window.innerWidth-(a.right+i.width);let C=L>=0;const S=!g&&!w&&!f&&!C;let P=u;if(u==="top"&&g?C=f=w=!1:u==="bottom"&&w?C=f=g=!1:u==="left"&&f?C=g=w=!1:u==="right"&&C&&(f=g=w=!1),u==="over"){const y=window.innerWidth/2-i.realWidth/2,x=window.innerHeight/2-i.realHeight/2;t.wrapper.style.left=`${y}px`,t.wrapper.style.right="auto",t.wrapper.style.top=`${x}px`,t.wrapper.style.bottom="auto"}else if(S){const y=window.innerWidth/2-(i==null?void 0:i.realWidth)/2,x=10;t.wrapper.style.left=`${y}px`,t.wrapper.style.right="auto",t.wrapper.style.bottom=`${x}px`,t.wrapper.style.top="auto"}else if(f){const y=Math.min(p,window.innerWidth-(i==null?void 0:i.realWidth)-s.width),x=F(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:v,popoverArrowDimensions:s});t.wrapper.style.left=`${y}px`,t.wrapper.style.top=`${x}px`,t.wrapper.style.bottom="auto",t.wrapper.style.right="auto",P="left"}else if(C){const y=Math.min(L,window.innerWidth-(i==null?void 0:i.realWidth)-s.width),x=F(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:v,popoverArrowDimensions:s});t.wrapper.style.right=`${y}px`,t.wrapper.style.top=`${x}px`,t.wrapper.style.bottom="auto",t.wrapper.style.left="auto",P="right"}else if(g){const y=Math.min(l,window.innerHeight-i.realHeight-s.width);let x=q(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:v,popoverArrowDimensions:s});t.wrapper.style.top=`${y}px`,t.wrapper.style.left=`${x}px`,t.wrapper.style.bottom="auto",t.wrapper.style.right="auto",P="top"}else if(w){const y=Math.min(m,window.innerHeight-(i==null?void 0:i.realHeight)-s.width);let x=q(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:v,popoverArrowDimensions:s});t.wrapper.style.left=`${x}px`,t.wrapper.style.bottom=`${y}px`,t.wrapper.style.top="auto",t.wrapper.style.right="auto",P="bottom"}S?t.arrow.classList.add("driver-popover-arrow-none"):fe(r,P,e)}function fe(e,o,t){const n=h("popover");if(!n)return;const c=t.getBoundingClientRect(),r=D(),u=n.arrow,v=r.width,i=window.innerWidth,s=c.width,a=c.left,l=r.height,g=window.innerHeight,m=c.top,w=c.height;u.className="driver-popover-arrow";let p=o,f=e;o==="top"?(a+s<=0?(p="right",f="end"):a+s-v<=0&&(p="top",f="start"),a>=i?(p="left",f="end"):a+v>=i&&(p="top",f="end")):o==="bottom"?(a+s<=0?(p="right",f="start"):a+s-v<=0&&(p="bottom",f="start"),a>=i?(p="left",f="start"):a+v>=i&&(p="bottom",f="end")):o==="left"?(m+w<=0?(p="bottom",f="end"):m+w-l<=0&&(p="left",f="start"),m>=g?(p="top",f="end"):m+l>=g&&(p="left",f="end")):o==="right"&&(m+w<=0?(p="bottom",f="start"):m+w-l<=0&&(p="right",f="start"),m>=g?(p="top",f="start"):m+l>=g&&(p="right",f="end")),p?(u.classList.add(`driver-popover-arrow-side-${p}`),u.classList.add(`driver-popover-arrow-align-${f}`)):u.classList.add("driver-popover-arrow-none")}function ge(){const e=document.createElement("div");e.classList.add("driver-popover");const o=document.createElement("div");o.classList.add("driver-popover-arrow");const t=document.createElement("div");t.classList.add("driver-popover-title"),t.style.display="none",t.innerText="Popover Title";const n=document.createElement("div");n.classList.add("driver-popover-description"),n.style.display="none",n.innerText="Popover description is here";const c=document.createElement("button");c.classList.add("driver-popover-close-btn"),c.innerHTML="&times;";const r=document.createElement("div");r.classList.add("driver-popover-footer");const u=document.createElement("span");u.classList.add("driver-popover-progress-text"),u.innerText="";const v=document.createElement("span");v.classList.add("driver-popover-navigation-btns");const i=document.createElement("button");i.classList.add("driver-popover-prev-btn"),i.innerHTML="&larr; Previous";const s=document.createElement("button");return s.classList.add("driver-popover-next-btn"),s.innerHTML="Next &rarr;",v.appendChild(i),v.appendChild(s),r.appendChild(u),r.appendChild(v),e.appendChild(c),e.appendChild(o),e.appendChild(t),e.appendChild(n),e.appendChild(r),{wrapper:e,arrow:o,title:t,description:n,footer:r,previousButton:i,nextButton:s,closeButton:c,footerButtons:v,progress:u}}function we(){var o;const e=h("popover");e&&((o=e.wrapper.parentElement)==null||o.removeChild(e.wrapper))}const ye="";function me(e={}){G(e);function o(){d("allowClose")&&i()}function t(){const s=h("activeIndex"),a=d("steps")||[];if(typeof s>"u")return;const l=s+1;a[l]?v(l):i()}function n(){const s=h("activeIndex"),a=d("steps")||[];if(typeof s>"u")return;const l=s-1;a[l]?v(l):i()}function c(){const s=d("steps")||[],a=h("activeIndex");if(typeof a>"u")return;const l=a-1;s[l]&&v(l)}function r(){var m;const s=h("activeIndex"),a=h("activeStep"),l=h("activeElement");if(typeof s>"u"||typeof a>"u")return;const g=((m=a.popover)==null?void 0:m.onNextClick)||d("onNextClick");if(g)return g(l,a,{config:d(),state:h()});t()}function u(){h("isInitialized")||(b("isInitialized",!0),document.body.classList.add("driver-active",d("animate")?"driver-fade":"driver-simple"),ue(),B("overlayClick",o),B("escapePress",o),B("arrowLeftPress",c),B("arrowRightPress",r))}function v(s=0){var S,P,y,x;const a=d("steps");if(!a){console.error("No steps to drive through"),i();return}a[s]||(console.warn(`Step not found at index: ${s}`),i()),b("activeIndex",s);const l=a[s],g=a[s+1],m=a[s-1],w=((S=l.popover)==null?void 0:S.doneBtnText)||d("doneBtnText")||"Done",p=d("allowClose"),f=typeof((P=l.popover)==null?void 0:P.showProgress)<"u"?(y=l.popover)==null?void 0:y.showProgress:d("showProgress"),C=(((x=l.popover)==null?void 0:x.progressText)||d("progressText")||"{{current}} of {{total}}").replace("{{current}}",`${s+1}`).replace("{{total}}",`${a.length}`);console.log(f),I({...l,popover:{showButtons:["next","previous",...p?["close"]:[]],nextBtnText:g?void 0:w,disableButtons:[...m?[]:["previous"]],showProgress:f,progressText:C,onNextClick:()=>{g?v(s+1):i()},onPrevClick:()=>{v(s-1)},onCloseClick:()=>{i()},...(l==null?void 0:l.popover)||{}}})}function i(s=!0){const a=h("activeElement"),l=h("activeStep"),g=d("onDestroyStarted");if(s&&g){g(a,l,{config:d(),state:h()});return}const m=(l==null?void 0:l.onDeselected)||d("onDeselected"),w=d("onDestroyed");if(document.body.classList.remove("driver-active","driver-fade","driver-simple"),he(),we(),ce(),se(),te(),ee(),a&&l){const p=a.id==="driver-dummy-element";m&&m(p?void 0:a,l,{config:d(),state:h()}),w&&w(p?void 0:a,l,{config:d(),state:h()})}}return{isActive:()=>h("isInitialized")||!1,refresh:k,drive:(s=0)=>{u(),v(s)},moveNext:t,movePrevious:n,hasNextStep:()=>{const s=d("steps")||[],a=h("activeIndex");return a!==void 0&&s[a+1]},hasPreviousStep:()=>{const s=d("steps")||[],a=h("activeIndex");return a!==void 0&&s[a-1]},highlight:s=>{u(),I({...s,popover:s.popover?{showButtons:[],showProgress:!1,progressText:"",...s.popover}:void 0})},destroy:()=>{i(!1)}}}return M.driver=me,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"}),M}({});
+this.driver=this.driver||{};this.driver.js=function(D){"use strict";let F={};function z(e={}){F={animate:!0,allowClose:!0,overlayOpacity:.7,smoothScroll:!1,showProgress:!1,stagePadding:10,stageRadius:5,popoverOffset:10,showButtons:["next","previous","close"],disableButtons:[],overlayColor:"#000",...e}}function a(e){return e?F[e]:F}function I(e,o,t,i){return(e/=i/2)<1?t/2*e*e+o:-t/2*(--e*(e-2)-1)+o}function q(e){const o='a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])';return e.flatMap(t=>{const i=t.matches(o),p=Array.from(t.querySelectorAll(o));return[...i?[t]:[],...p]}).filter(t=>ae(t))}function V(e){if(!e||se(e))return;const o=a("smoothScroll");e.scrollIntoView({behavior:!o||re(e)?"auto":"smooth",inline:"center",block:"center"})}function re(e){if(!e||!e.parentElement)return;const o=e.parentElement;return o.scrollHeight>o.clientHeight}function se(e){const o=e.getBoundingClientRect();return o.top>=0&&o.left>=0&&o.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&o.right<=(window.innerWidth||document.documentElement.clientWidth)}function ae(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}let N={};function C(e,o){N[e]=o}function l(e){return e?N[e]:N}function K(){N={}}let A={};function O(e,o){A[e]=o}function T(e){var o;(o=A[e])==null||o.call(A)}function ce(){A={}}function le(e,o,t,i){let p=l("__activeStagePosition");const n=p||t.getBoundingClientRect(),h=i.getBoundingClientRect(),w=I(e,n.x,h.x-n.x,o),r=I(e,n.y,h.y-n.y,o),v=I(e,n.width,h.width-n.width,o),s=I(e,n.height,h.height-n.height,o);p={x:w,y:r,width:v,height:s},Y(p),C("__activeStagePosition",p)}function X(e){if(!e)return;const o=e.getBoundingClientRect(),t={x:o.x,y:o.y,width:o.width,height:o.height};C("__activeStagePosition",t),Y(t)}function de(){const e=l("__activeStagePosition"),o=l("__overlaySvg");if(!e)return;if(!o){console.warn("No stage svg found.");return}const t=window.innerWidth,i=window.innerHeight;o.setAttribute("viewBox",`0 0 ${t} ${i}`)}function pe(e){const o=ue(e);document.body.appendChild(o),G(o,t=>{t.target.tagName==="path"&&T("overlayClick")}),C("__overlaySvg",o)}function Y(e){const o=l("__overlaySvg");if(!o){pe(e);return}const t=o.firstElementChild;if((t==null?void 0:t.tagName)!=="path")throw new Error("no path element found in stage svg");t.setAttribute("d",j(e))}function ue(e){const o=window.innerWidth,t=window.innerHeight,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.classList.add("driver-overlay","driver-overlay-animated"),i.setAttribute("viewBox",`0 0 ${o} ${t}`),i.setAttribute("xmlSpace","preserve"),i.setAttribute("xmlnsXlink","http://www.w3.org/1999/xlink"),i.setAttribute("version","1.1"),i.setAttribute("preserveAspectRatio","xMinYMin slice"),i.style.fillRule="evenodd",i.style.clipRule="evenodd",i.style.strokeLinejoin="round",i.style.strokeMiterlimit="2",i.style.zIndex="10000",i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.width="100%",i.style.height="100%";const p=document.createElementNS("http://www.w3.org/2000/svg","path");return p.setAttribute("d",j(e)),p.style.fill=a("overlayColor")||"rgb(0,0,0)",p.style.opacity=`${a("overlayOpacity")}`,p.style.pointerEvents="auto",p.style.cursor="auto",i.appendChild(p),i}function j(e){const o=window.innerWidth,t=window.innerHeight,i=a("stagePadding")||0,p=a("stageRadius")||0,n=e.width+i*2,h=e.height+i*2,w=Math.min(p,n/2,h/2),r=Math.floor(Math.max(w,0)),v=e.x-i+r,s=e.y-i,c=n-r*2,d=h-r*2;return`M${o},0L0,0L0,${t}L${o},${t}L${o},0Z
+    M${v},${s} h${c} a${r},${r} 0 0 1 ${r},${r} v${d} a${r},${r} 0 0 1 -${r},${r} h-${c} a${r},${r} 0 0 1 -${r},-${r} v-${d} a${r},${r} 0 0 1 ${r},-${r} z`}function ve(){const e=l("__overlaySvg");e&&e.remove()}function he(){const e=document.getElementById("driver-dummy-element");if(e)return e;let o=document.createElement("div");return o.id="driver-dummy-element",o.style.width="0",o.style.height="0",o.style.pointerEvents="none",o.style.opacity="0",o.style.position="fixed",o.style.top="50%",o.style.left="50%",document.body.appendChild(o),o}function Q(e){const{element:o}=e;let t=typeof o=="string"?document.querySelector(o):o;t||(t=he()),ge(t,e)}function fe(){const e=l("activeElement"),o=l("activeStep");e&&(X(e),de(),oe(e,o))}function ge(e,o){const i=Date.now(),p=l("activeStep"),n=l("activeElement")||e,h=!n||n===e,w=e.id==="driver-dummy-element",r=n.id==="driver-dummy-element",v=a("animate"),s=o.onHighlightStarted||a("onHighlightStarted"),c=(o==null?void 0:o.onHighlighted)||a("onHighlighted"),d=(p==null?void 0:p.onDeselected)||a("onDeselected"),m=a(),g=l();!h&&d&&d(r?void 0:n,p,{config:m,state:g}),s&&s(w?void 0:e,o,{config:m,state:g});const u=!h&&v;let f=!1;xe();const x=()=>{if(l("__transitionCallback")!==x)return;const k=Date.now()-i,y=400-k<=400/2;o.popover&&y&&!f&&u&&(J(e,o),f=!0),a("animate")&&k<400?le(k,400,n,e):(X(e),c&&c(w?void 0:e,o,{config:a(),state:l()}),C("__transitionCallback",void 0),C("previousStep",p),C("previousElement",n),C("activeStep",o),C("activeElement",e)),window.requestAnimationFrame(x)};C("__transitionCallback",x),window.requestAnimationFrame(x),V(e),!u&&o.popover&&J(e,o),n.classList.remove("driver-active-element"),n.removeAttribute("aria-haspopup"),n.removeAttribute("aria-expanded"),n.removeAttribute("aria-controls"),e.classList.add("driver-active-element"),e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","true"),e.setAttribute("aria-controls","driver-popover-content")}function we(){var e;(e=document.getElementById("driver-dummy-element"))==null||e.remove(),document.querySelectorAll(".driver-active-element").forEach(o=>{o.classList.remove("driver-active-element"),o.removeAttribute("aria-haspopup"),o.removeAttribute("aria-expanded"),o.removeAttribute("aria-controls")})}function H(){const e=l("__resizeTimeout");e&&window.cancelAnimationFrame(e),C("__resizeTimeout",window.requestAnimationFrame(fe))}function me(e){var r;if(!l("isInitialized")||!(e.key==="Tab"||e.keyCode===9))return;const i=l("activeElement"),p=(r=l("popover"))==null?void 0:r.wrapper,n=q([...p?[p]:[],...i?[i]:[]]),h=n[0],w=n[n.length-1];if(e.preventDefault(),e.shiftKey){const v=n[n.indexOf(document.activeElement)-1]||w;v==null||v.focus()}else{const v=n[n.indexOf(document.activeElement)+1]||h;v==null||v.focus()}}function Z(e){a("allowKeyboardControl");e.key==="Escape"?T("escapePress"):e.key==="ArrowRight"?T("arrowRightPress"):e.key==="ArrowLeft"&&T("arrowLeftPress")}function G(e,o,t){const i=(n,h)=>{const w=n.target;e.contains(w)&&((!t||t(w))&&(n.preventDefault(),n.stopPropagation(),n.stopImmediatePropagation()),h==null||h(n))};document.addEventListener("pointerdown",i,!0),document.addEventListener("mousedown",i,!0),document.addEventListener("pointerup",i,!0),document.addEventListener("mouseup",i,!0),document.addEventListener("click",n=>{i(n,o)},!0)}function ye(){window.addEventListener("keyup",Z,!1),window.addEventListener("keydown",me,!1),window.addEventListener("resize",H),window.addEventListener("scroll",H)}function be(){window.removeEventListener("keyup",Z),window.removeEventListener("resize",H),window.removeEventListener("scroll",H)}function xe(){const e=l("popover");e&&(e.wrapper.style.display="none")}function J(e,o){var y,b;let t=l("popover");t&&document.body.removeChild(t.wrapper),t=Pe(),document.body.appendChild(t.wrapper);const{title:i,description:p,showButtons:n,disableButtons:h,showProgress:w,nextBtnText:r=a("nextBtnText")||"Next &rarr;",prevBtnText:v=a("prevBtnText")||"&larr; Previous",progressText:s=a("progressText")||"{current} of {total}"}=o.popover||{};t.nextButton.innerHTML=r,t.previousButton.innerHTML=v,t.progress.innerHTML=s,i?(t.title.innerText=i,t.title.style.display="block"):t.title.style.display="none",p?(t.description.innerHTML=p,t.description.style.display="block"):t.description.style.display="none";const c=n||a("showButtons"),d=w||a("showProgress")||!1,m=(c==null?void 0:c.includes("next"))||(c==null?void 0:c.includes("previous"))||d;t.closeButton.style.display=c.includes("close")?"block":"none",m?(t.footer.style.display="flex",t.progress.style.display=d?"block":"none",t.nextButton.style.display=c.includes("next")?"block":"none",t.previousButton.style.display=c.includes("previous")?"block":"none"):t.footer.style.display="none";const g=h||a("disableButtons")||[];g!=null&&g.includes("next")&&(t.nextButton.disabled=!0,t.nextButton.classList.add("driver-popover-btn-disabled")),g!=null&&g.includes("previous")&&(t.previousButton.disabled=!0,t.previousButton.classList.add("driver-popover-btn-disabled")),g!=null&&g.includes("close")&&(t.closeButton.disabled=!0,t.closeButton.classList.add("driver-popover-btn-disabled"));const u=t.wrapper;u.style.display="block",u.style.left="",u.style.top="",u.style.bottom="",u.style.right="",u.id="driver-popover-content",u.setAttribute("role","dialog"),u.setAttribute("aria-labelledby","driver-popover-title"),u.setAttribute("aria-describedby","driver-popover-description");const f=t.arrow;f.className="driver-popover-arrow";const x=((y=o.popover)==null?void 0:y.popoverClass)||a("popoverClass")||"";u.className=`driver-popover ${x}`.trim(),G(t.wrapper,L=>{var M,R,W;const E=L.target,$=((M=o.popover)==null?void 0:M.onNextClick)||a("onNextClick"),B=((R=o.popover)==null?void 0:R.onPrevClick)||a("onPrevClick"),_=((W=o.popover)==null?void 0:W.onCloseClick)||a("onCloseClick");if(E.classList.contains("driver-popover-next-btn"))return $?$(e,o,{config:a(),state:l()}):T("nextClick");if(E.classList.contains("driver-popover-prev-btn"))return B?B(e,o,{config:a(),state:l()}):T("prevClick");if(E.classList.contains("driver-popover-close-btn"))return _?_(e,o,{config:a(),state:l()}):T("closeClick")},L=>!(t!=null&&t.description.contains(L))&&!(t!=null&&t.title.contains(L))&&L.className.includes("driver-popover")),C("popover",t);const S=((b=o.popover)==null?void 0:b.onPopoverRender)||a("onPopoverRender");S&&S(t,{config:a(),state:l()}),oe(e,o),V(u);const k=e.classList.contains("driver-dummy-element"),P=q([u,...k?[]:[e]]);P.length>0&&P[0].focus()}function U(){const e=l("popover");if(!(e!=null&&e.wrapper))return;const o=e.wrapper.getBoundingClientRect(),t=a("stagePadding")||0,i=a("popoverOffset")||0;return{width:o.width+t+i,height:o.height+t+i,realWidth:o.width,realHeight:o.height}}function ee(e,o){const{elementDimensions:t,popoverDimensions:i,popoverPadding:p,popoverArrowDimensions:n}=o;return e==="start"?Math.max(Math.min(t.top-p,window.innerHeight-i.realHeight-n.width),n.width):e==="end"?Math.max(Math.min(t.top-(i==null?void 0:i.realHeight)+t.height+p,window.innerHeight-(i==null?void 0:i.realHeight)-n.width),n.width):e==="center"?Math.max(Math.min(t.top+t.height/2-(i==null?void 0:i.realHeight)/2,window.innerHeight-(i==null?void 0:i.realHeight)-n.width),n.width):0}function te(e,o){const{elementDimensions:t,popoverDimensions:i,popoverPadding:p,popoverArrowDimensions:n}=o;return e==="start"?Math.max(Math.min(t.left-p,window.innerWidth-i.realWidth-n.width),n.width):e==="end"?Math.max(Math.min(t.left-(i==null?void 0:i.realWidth)+t.width+p,window.innerWidth-(i==null?void 0:i.realWidth)-n.width),n.width):e==="center"?Math.max(Math.min(t.left+t.width/2-(i==null?void 0:i.realWidth)/2,window.innerWidth-(i==null?void 0:i.realWidth)-n.width),n.width):0}function oe(e,o){const t=l("popover");if(!t)return;const{align:i="start",side:p="left"}=(o==null?void 0:o.popover)||{},n=i,h=e.id==="driver-dummy-element"?"over":p,w=a("stagePadding")||0,r=U(),v=t.arrow.getBoundingClientRect(),s=e.getBoundingClientRect(),c=s.top-r.height;let d=c>=0;const m=window.innerHeight-(s.bottom+r.height);let g=m>=0;const u=s.left-r.width;let f=u>=0;const x=window.innerWidth-(s.right+r.width);let S=x>=0;const k=!d&&!g&&!f&&!S;let P=h;if(h==="top"&&d?S=f=g=!1:h==="bottom"&&g?S=f=d=!1:h==="left"&&f?S=d=g=!1:h==="right"&&S&&(f=d=g=!1),h==="over"){const y=window.innerWidth/2-r.realWidth/2,b=window.innerHeight/2-r.realHeight/2;t.wrapper.style.left=`${y}px`,t.wrapper.style.right="auto",t.wrapper.style.top=`${b}px`,t.wrapper.style.bottom="auto"}else if(k){const y=window.innerWidth/2-(r==null?void 0:r.realWidth)/2,b=10;t.wrapper.style.left=`${y}px`,t.wrapper.style.right="auto",t.wrapper.style.bottom=`${b}px`,t.wrapper.style.top="auto"}else if(f){const y=Math.min(u,window.innerWidth-(r==null?void 0:r.realWidth)-v.width),b=ee(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.left=`${y}px`,t.wrapper.style.top=`${b}px`,t.wrapper.style.bottom="auto",t.wrapper.style.right="auto",P="left"}else if(S){const y=Math.min(x,window.innerWidth-(r==null?void 0:r.realWidth)-v.width),b=ee(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.right=`${y}px`,t.wrapper.style.top=`${b}px`,t.wrapper.style.bottom="auto",t.wrapper.style.left="auto",P="right"}else if(d){const y=Math.min(c,window.innerHeight-r.realHeight-v.width);let b=te(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.top=`${y}px`,t.wrapper.style.left=`${b}px`,t.wrapper.style.bottom="auto",t.wrapper.style.right="auto",P="top"}else if(g){const y=Math.min(m,window.innerHeight-(r==null?void 0:r.realHeight)-v.width);let b=te(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.left=`${b}px`,t.wrapper.style.bottom=`${y}px`,t.wrapper.style.top="auto",t.wrapper.style.right="auto",P="bottom"}k?t.arrow.classList.add("driver-popover-arrow-none"):Ce(n,P,e)}function Ce(e,o,t){const i=l("popover");if(!i)return;const p=t.getBoundingClientRect(),n=U(),h=i.arrow,w=n.width,r=window.innerWidth,v=p.width,s=p.left,c=n.height,d=window.innerHeight,m=p.top,g=p.height;h.className="driver-popover-arrow";let u=o,f=e;o==="top"?(s+v<=0?(u="right",f="end"):s+v-w<=0&&(u="top",f="start"),s>=r?(u="left",f="end"):s+w>=r&&(u="top",f="end")):o==="bottom"?(s+v<=0?(u="right",f="start"):s+v-w<=0&&(u="bottom",f="start"),s>=r?(u="left",f="start"):s+w>=r&&(u="bottom",f="end")):o==="left"?(m+g<=0?(u="bottom",f="end"):m+g-c<=0&&(u="left",f="start"),m>=d?(u="top",f="end"):m+c>=d&&(u="left",f="end")):o==="right"&&(m+g<=0?(u="bottom",f="start"):m+g-c<=0&&(u="right",f="start"),m>=d?(u="top",f="start"):m+c>=d&&(u="right",f="end")),u?(h.classList.add(`driver-popover-arrow-side-${u}`),h.classList.add(`driver-popover-arrow-align-${f}`)):h.classList.add("driver-popover-arrow-none")}function Pe(){const e=document.createElement("div");e.classList.add("driver-popover");const o=document.createElement("div");o.classList.add("driver-popover-arrow");const t=document.createElement("header");t.id="driver-popover-title",t.classList.add("driver-popover-title"),t.style.display="none",t.innerText="Popover Title";const i=document.createElement("div");i.id="driver-popover-description",i.classList.add("driver-popover-description"),i.style.display="none",i.innerText="Popover description is here";const p=document.createElement("button");p.type="button",p.classList.add("driver-popover-close-btn"),p.setAttribute("aria-label","Close"),p.innerHTML="&times;";const n=document.createElement("footer");n.classList.add("driver-popover-footer");const h=document.createElement("span");h.classList.add("driver-popover-progress-text"),h.innerText="";const w=document.createElement("span");w.classList.add("driver-popover-navigation-btns");const r=document.createElement("button");r.type="button",r.classList.add("driver-popover-prev-btn"),r.innerHTML="&larr; Previous";const v=document.createElement("button");return v.type="button",v.classList.add("driver-popover-next-btn"),v.innerHTML="Next &rarr;",w.appendChild(r),w.appendChild(v),n.appendChild(h),n.appendChild(w),e.appendChild(p),e.appendChild(o),e.appendChild(t),e.appendChild(i),e.appendChild(n),{wrapper:e,arrow:o,title:t,description:i,footer:n,previousButton:r,nextButton:v,closeButton:p,footerButtons:w,progress:h}}function Se(){var o;const e=l("popover");e&&((o=e.wrapper.parentElement)==null||o.removeChild(e.wrapper))}const Te="";function ke(e={}){z(e);function o(){a("allowClose")&&v()}function t(){const s=l("activeIndex"),c=a("steps")||[];if(typeof s>"u")return;const d=s+1;c[d]?r(d):v()}function i(){const s=l("activeIndex"),c=a("steps")||[];if(typeof s>"u")return;const d=s-1;c[d]?r(d):v()}function p(s){(a("steps")||[])[s]?r(s):v()}function n(){var f;if(l("__transitionCallback"))return;const c=l("activeIndex"),d=l("activeStep"),m=l("activeElement");if(typeof c>"u"||typeof d>"u"||typeof l("activeIndex")>"u")return;const u=((f=d.popover)==null?void 0:f.onPrevClick)||a("onPrevClick");if(u)return u(m,d,{config:a(),state:l()});i()}function h(){var u;if(l("__transitionCallback"))return;const c=l("activeIndex"),d=l("activeStep"),m=l("activeElement");if(typeof c>"u"||typeof d>"u")return;const g=((u=d.popover)==null?void 0:u.onNextClick)||a("onNextClick");if(g)return g(m,d,{config:a(),state:l()});t()}function w(){l("isInitialized")||(C("isInitialized",!0),document.body.classList.add("driver-active",a("animate")?"driver-fade":"driver-simple"),ye(),O("overlayClick",o),O("escapePress",o),O("arrowLeftPress",n),O("arrowRightPress",h))}function r(s=0){var $,B,_,M,R,W,ie,ne;const c=a("steps");if(!c){console.error("No steps to drive through"),v();return}if(!c[s]){v();return}C("__activeOnDestroyed",document.activeElement),C("activeIndex",s);const d=c[s],m=c[s+1],g=c[s-1],u=(($=d.popover)==null?void 0:$.doneBtnText)||a("doneBtnText")||"Done",f=a("allowClose"),x=typeof((B=d.popover)==null?void 0:B.showProgress)<"u"?(_=d.popover)==null?void 0:_.showProgress:a("showProgress"),k=(((M=d.popover)==null?void 0:M.progressText)||a("progressText")||"{{current}} of {{total}}").replace("{{current}}",`${s+1}`).replace("{{total}}",`${c.length}`),P=((R=d.popover)==null?void 0:R.showButtons)||a("showButtons"),y=["next","previous",...f?["close"]:[]].filter(Le=>!(P!=null&&P.length)||P.includes(Le)),b=((W=d.popover)==null?void 0:W.onNextClick)||a("onNextClick"),L=((ie=d.popover)==null?void 0:ie.onPrevClick)||a("onPrevClick"),E=((ne=d.popover)==null?void 0:ne.onCloseClick)||a("onCloseClick");Q({...d,popover:{showButtons:y,nextBtnText:m?void 0:u,disableButtons:[...g?[]:["previous"]],showProgress:x,progressText:k,onNextClick:b||(()=>{m?r(s+1):v()}),onPrevClick:L||(()=>{r(s-1)}),onCloseClick:E||(()=>{v()}),...(d==null?void 0:d.popover)||{}}})}function v(s=!0){const c=l("activeElement"),d=l("activeStep"),m=l("__activeOnDestroyed"),g=a("onDestroyStarted");if(s&&g){const x=!c||(c==null?void 0:c.id)==="driver-dummy-element";g(x?void 0:c,d,{config:a(),state:l()});return}const u=(d==null?void 0:d.onDeselected)||a("onDeselected"),f=a("onDestroyed");if(document.body.classList.remove("driver-active","driver-fade","driver-simple"),be(),Se(),we(),ve(),ce(),K(),c&&d){const x=c.id==="driver-dummy-element";u&&u(x?void 0:c,d,{config:a(),state:l()}),f&&f(x?void 0:c,d,{config:a(),state:l()})}m&&m.focus()}return{isActive:()=>l("isInitialized")||!1,refresh:H,drive:(s=0)=>{w(),r(s)},setConfig:z,setSteps:s=>{K(),z({...a(),steps:s})},getConfig:a,getState:l,getActiveIndex:()=>l("activeIndex"),isFirstStep:()=>l("activeIndex")===0,isLastStep:()=>{const s=a("steps")||[],c=l("activeIndex");return c!==void 0&&c===s.length-1},getActiveStep:()=>l("activeStep"),getActiveElement:()=>l("activeElement"),getPreviousElement:()=>l("previousElement"),getPreviousStep:()=>l("previousStep"),moveNext:t,movePrevious:i,moveTo:p,hasNextStep:()=>{const s=a("steps")||[],c=l("activeIndex");return c!==void 0&&s[c+1]},hasPreviousStep:()=>{const s=a("steps")||[],c=l("activeIndex");return c!==void 0&&s[c-1]},highlight:s=>{w(),Q({...s,popover:s.popover?{showButtons:[],showProgress:!1,progressText:"",...s.popover}:void 0})},destroy:()=>{v(!1)}}}return D.driver=ke,Object.defineProperty(D,Symbol.toStringTag,{value:"Module"}),D}({});

package.json

 {
   "name": "driver.js",
   "private": false,
-  "version": "1.1.0-next.0",
+  "version": "1.1.0",
   "main": "./dist/driver.js.cjs",
   "module": "./dist/driver.js.mjs",
+  "types": "./dist/driver.js.d.ts",
+  "homepage": "https://driverjs.com",
+  "repository": "https://github.com/kamranahmedse/driver.js",
+  "author": "Kamran Ahmed <[e-mail]>",
+  "bugs": {
+    "url": "https://github.com/kamranahmedse/driver.js/issues"
+  },
   "exports": {
@@ -11,2 +18,6 @@ ".": {
       "import": "./dist/driver.js.mjs"
+    },
+    "./dist/driver.css": {
+      "import": "./dist/driver.css",
+      "require": "./dist/driver.css"
     }
@@ -38,3 +49,19 @@ },
     "vitest": "^0.32.0"
-  }
+  },
+  "keywords": [
+    "driver.js",
+    "driver",
+    "tour",
+    "guide",
+    "overlay",
+    "tooltip",
+    "walkthrough",
+    "product tour",
+    "product walkthrough",
+    "product guide",
+    "product tutorial",
+    "product demo",
+    "modal",
+    "lightbox"
+  ]
 }

readme.md

@@ -1,2 +0,2 @@
-<h1 align="center"><img height="150" src="./.github/images/driver.svg" /><br> Driver.js</h1>
+<h1 align="center"><img height="150" src="https://driverjs.com/driver.svg" /><br> Driver.js</h1>
 
@@ -17,3 +17,3 @@ <p align="center">
   <b>Powerful, highly customizable vanilla JavaScript engine to drive the user's focus across the page</b></br>
-  <sub>No external dependencies, supports all major browsers and highly customizable <sub>
+  <sub>No external dependencies, light-weight, supports all major browsers and highly customizable </sub><br>
 </p>
@@ -24,2 +24,3 @@
 - **Simple**: is simple to use and has no external dependency at all
+- **Light-weight**: is just 5kb gzipped as compared to other libraries which are +12kb gzipped
 - **Highly customizable**: has a powerful API and can be used however you want
@@ -30,351 +31,27 @@ - **Highlight anything**: highlight any (literally any) element on page
 - **User friendly**: Everything is controllable by keyboard
-- **Consistent behavior**: usable across all browsers (including in-famous IE)
+- **TypeScript**: Written in TypeScript
+- **Consistent behavior**: usable across all browsers
 - **MIT Licensed**: free for personal and commercial use
 
-![](./demo/images/split.png)
+<br />
 
-For Usage and Examples, [have a look at demo](http://kamranahmed.info/driver.js)
+## Documentation
 
-## So, yet another tour library?
+For demos and documentation, visit [driverjs.com](https://driverjs.com)
 
-**No**, it is not. **Tours are just one of the many use-cases**. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with some component i.e. [the way Facebook does](https://i.imgur.com/Q3PzaKkr.png) when you try to create a post, using it as a focus shifter to bring user's attention to some component on page, or using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, etc.
+> Please note that above documentation is for version `1.x` which is the complete rewrite of driver.js.<br>
+> For `0.x` documentation, please visit [kamranahmed.info/driver.js](https://kamranahmed.info/driver.js/)
 
-Driver.js is written in Vanilla JS, has zero dependencies and is highly customizable. It has several options allowing you to manipulate how it behaves and also **provides you the hooks** to manipulate the elements as they are highlighted, about to be highlighted, or deselected.
+<br />
 
-## Installation
+## So, yet another tour library?
 
-You can install it using `yarn` or `npm`, whatever you prefer.
+**No**, it's more than a tour library. **Tours are just one of the many use-cases**. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: [highlighting a page component](https://i.imgur.com/TS0LSK9.png) when user is interacting with some component to keep them focused, providing contextual help e.g. popover with dimmed background when user is filling a form, using it as a focus shifter to bring user's attention to some component on page, using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, usage as a simple modal, and of-course product tours etc.
 
-```bash
-yarn add driver.js
-npm install driver.js
-```
+Driver.js is written in Vanilla TypeScript, has zero dependencies and is highly customizable. It has several options allowing you to change how it behaves and also **provides you the hooks** to manipulate the elements as they are highlighted, about to be highlighted, or deselected.
 
-Or include it using CDN. If you want a specific version, put it as `driver.js@0.5` in the name
+> Also, comparing the size of Driver.js with other libraries, it's the most light-weight, it is **just ~5kb gzipped** while others are 12kb+.
 
-```html
-<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css" />
-```
+<br>
 
-Or grab the code from `dist` directory and include it directly.
-
-```html
-<link rel="stylesheet" href="/dist/driver.min.css" />
-<script src="/dist/driver.min.js"></script>
-```
-
-![](./demo/images/split.png)
-
-## Usage and Demo
-
-If you are using some sort of module bundler, import the library and the CSS file
-
-```javascript
-import Driver from "driver.js";
-import "driver.js/dist/driver.min.css";
-```
-
-otherwise use the `script` and `link` tags to import the JavaScript and CSS files.
-
-Demos and many more usage examples can be found [in the docs page](http://kamranahmed.info/driver.js).
-
-### Highlighting Single Element – [Demo](http://kamranahmed.info/driver.js#single-element-no-popover)
-
-You can highlight a single element by simply passing the selector.
-
-```javascript
-const driver = new Driver();
-driver.highlight("#create-post");
-```
-
-A real world usage example for this is: using it to dim the background and highlight the required element e.g. the way Facebook does it when creating a post.
-
-### Highlight and Popover – [Demo](http://kamranahmed.info/driver.js#single-element-with-popover)
-
-You can show additional details beside the highlighted element using the popover.
-
-```javascript
-const driver = new Driver();
-driver.highlight({
-  element: "#some-element",
-  popover: {
-    title: "Title for the Popover",
-    description: "Description for it",
-  },
-});
-```
-
-Also, `title` and `description` can have HTML as well.
-
-### Positioning the Popover – [Demo](http://kamranahmed.info/driver.js#single-element-with-popover-position)
-
-By default, driver automatically finds the suitable position for the popover and displays it. You can override it using `position` property.
-
-```javascript
-const driver = new Driver();
-driver.highlight({
-  element: "#some-element",
-  popover: {
-    title: "Title for the Popover",
-    description: "Description for it",
-    // position can be left, left-center, left-bottom, top,
-    // top-center, top-right, right, right-center, right-bottom,
-    // bottom, bottom-center, bottom-right, mid-center
-    position: "left",
-  },
-});
-```
-
-You can also add offset to the popover position by using the `offset` property
-
-```javascript
-const driver = new Driver();
-driver.highlight({
-  element: "#some-element",
-  popover: {
-    title: "Title for the Popover",
-    description: "Description for it",
-    position: "bottom",
-    // Will show it 20 pixels away from the actual position of popover
-    // You may also provide the negative values
-    offset: 20,
-  },
-});
-```
-
-### Creating Feature Introductions – [Demo](http://kamranahmed.info/driver.js)
-
-Feature introductions are helpful when onboarding new users and giving them an idea about different parts of the application; you can create them seamlessly with Driver. Define the steps and call the `start` when you want to start presenting. User will be able to control the steps using the keyboard or using the buttons on popovers.
-
-```javascript
-const driver = new Driver();
-
-// Define the steps for introduction
-driver.defineSteps([
-  {
-    element: "#first-element-introduction",
-    popover: {
-      className: "first-step-popover-class",
-      title: "Title on Popover",
-      description: "Body of the popover",
-      position: "left",
-    },
-  },
-  {
-    element: "#second-element-introduction",
-    popover: {
-      title: "Title on Popover",
-      description: "Body of the popover",
-      position: "top",
-    },
-  },
-  {
-    element: "#third-element-introduction",
-    popover: {
-      title: "Title on Popover",
-      description: "Body of the popover",
-      position: "right",
-    },
-  },
-]);
-
-// Start the introduction
-driver.start();
-```
-
-You can also hide the buttons and control the introductions programmatically by using the API methods listed below.
-
-![](./demo/images/split.png)
-
-### Asynchronous Actions – [Demo](http://kamranahmed.info/driver.js)
-
-For any asynchronous actions between the transition steps, you may delay the execution till the action completes. All you have to do is stop the transition using `driver.preventMove()` in your `onNext` or `onPrevious` callbacks and initiate it manually using `driver.moveNext()`. Here is a sample implementation where it will stop at the second step for four seconds and then move on to the next step.
-
-```javascript
-const driver = new Driver();
-
-// Define the steps for introduction
-driver.defineSteps([
-  {
-    element: "#first-element-introduction",
-    popover: {
-      title: "Title on Popover",
-      description: "Body of the popover",
-      position: "left",
-    },
-  },
-  {
-    element: "#second-element-introduction",
-    popover: {
-      title: "Title on Popover",
-      description: "Body of the popover",
-      position: "top",
-    },
-    onNext: () => {
-      // Prevent moving to the next step
-      driver.preventMove();
-
-      // Perform some action or create the element to move to
-      // And then move to that element
-      setTimeout(() => {
-        driver.moveNext();
-      }, 4000);
-    },
-  },
-  {
-    element: "#third-element-introduction",
-    popover: {
-      title: "Title on Popover",
-      description: "Body of the popover",
-      position: "right",
-    },
-  },
-]);
-
-// Start the introduction
-driver.start();
-```
-
-You can also hide the buttons and control the introductions programmatically by using the API methods listed below.
-
-![](./demo/images/split.png)
-
-## API
-
-Driver comes with several options that you can manipulate to make Driver behave as you like
-
-### Driver Definition
-
-Here are the options that Driver understands:
-
-```javascript
-const driver = new Driver({
-  className: "scoped-class", // className to wrap driver.js popover
-  animate: true, // Whether to animate or not
-  opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
-  padding: 10, // Distance of element from around the edges
-  allowClose: true, // Whether the click on overlay should close or not
-  overlayClickNext: false, // Whether the click on overlay should move next
-  doneBtnText: "Done", // Text on the final button
-  closeBtnText: "Close", // Text on the close button for this step
-  stageBackground: "#ffffff", // Background color for the staged behind highlighted element
-  nextBtnText: "Next", // Next button text for this step
-  prevBtnText: "Previous", // Previous button text for this step
-  showButtons: false, // Do not show control buttons in footer
-  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
-  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
-  onHighlightStarted: Element => {}, // Called when element is about to be highlighted
-  onHighlighted: Element => {}, // Called when element is fully highlighted
-  onDeselected: Element => {}, // Called when element has been deselected
-  onReset: Element => {}, // Called when overlay is about to be cleared
-  onNext: Element => {}, // Called when moving to next step on any step
-  onPrevious: Element => {}, // Called when moving to previous step on any step
-});
-```
-
-Note that all the button options that you provide in the driver definition can be overridden for a specific step by giving them in the step definition
-
-### Step Definition
-
-Here are the set of options that you can pass while defining steps `defineSteps` or the object that you pass to `highlight` method:
-
-```javascript
-const stepDefinition = {
-  element: "#some-item", // Query selector string or Node to be highlighted
-  stageBackground: "#ffffff", // This will override the one set in driver
-  popover: {
-    // There will be no popover if empty or not given
-    className: "popover-class", // className to wrap this specific step popover in addition to the general className in Driver options
-    title: "Title", // Title on the popover
-    description: "Description", // Body of the popover
-    showButtons: false, // Do not show control buttons in footer
-    doneBtnText: "Done", // Text on the last button
-    closeBtnText: "Close", // Text on the close button
-    nextBtnText: "Next", // Next button text
-    prevBtnText: "Previous", // Previous button text
-  },
-  onNext: () => {}, // Called when moving to next step from current step
-  onPrevious: () => {}, // Called when moving to previous step from current step
-};
-```
-
-For example, here is how it would look when highlighting a single element:
-
-```javascript
-const driver = new Driver(driverOptions);
-driver.highlight(stepDefinition);
-```
-
-And this is how it would look when creating a step by step guide:
-
-```javascript
-const driver = new Driver(driverOptions);
-driver.defineSteps([stepDefinition1, stepDefinition2, stepDefinition3, stepDefinition4]);
-```
-
-### API Methods
-
-Below are the set of methods that are available:
-
-```javascript
-const driver = new Driver(driverOptions);
-
-// Checks if the driver is active or not
-if (driver.isActivated) {
-  console.log("Driver is active");
-}
-
-// In case of the steps guide, you can call below methods
-driver.defineSteps([stepDefinition1, stepDefinition2, stepDefinition3]);
-driver.start((stepNumber = 0)); // Starts driving through the defined steps
-driver.moveNext(); // Moves to next step in the steps list
-driver.movePrevious(); // Moves to previous step in the steps list
-driver.hasNextStep(); // Checks if there is next step to move to
-driver.hasPreviousStep(); // Checks if there is previous step to move to
-
-// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
-// perform some asynchronous task and manually move to next step
-driver.preventMove();
-
-// Highlights the element using query selector or the step definition
-driver.highlight(string | stepDefinition);
-
-// Reposition the popover and highlighted element
-driver.refresh();
-
-// Resets the overlay and clears the screen
-driver.reset();
-
-// Additionally you can pass a boolean parameter
-// to clear immediately and not do the animations etc
-// Could be useful when you, let's say, want to run
-// a different instance of driver while one was running
-driver.reset((clearImmediately = false));
-
-// Checks if there is any highlighted element
-if (driver.hasHighlightedElement()) {
-  console.log("There is an element highlighted");
-}
-
-// Gets the currently highlighted element on screen
-// It would be an instance of `/src/core/element.js`
-const activeElement = driver.getHighlightedElement();
-
-// Gets the last highlighted element, would be an instance of `/src/core/element.js`
-const lastActiveElement = driver.getLastHighlightedElement();
-
-activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
-activeElement.hidePopover(); // Hide the popover
-activeElement.showPopover(); // Show the popover
-
-activeElement.getNode(); // Gets the DOM Element behind this element
-```
-
-![](./demo/images/split.png)
-
-**Note –** Do not forget to add `e.stopPropagation()` to the `click` binding that triggers driver.
-
-![](./demo/images/split.png)
-
 ## Contributions
@@ -384,10 +61,4 @@
 
-## Sponsored By
-
-Thanks to [BrowserStack](https://browserstack.com) for sponsoring the compatibility testing needs.
-
-[![BrowserStack](./demo/images/browserstack.png)](https://www.browserstack.com)
-
 ## License
 
 MIT &copy; [Kamran Ahmed](https://twitter.com/kamranahmedse)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78280

increased by0.69%

Lines of code

938

increased by16.23%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

61

decreased by-84.36%

No dependency changes