From 364dc366a114ff863146f80417854d9ffbe9f596 Mon Sep 17 00:00:00 2001
From: mohammad farvardin <mmd77frvrdn@gmail.com>
Date: Fri, 6 Oct 2023 15:29:12 +0330
Subject: [PATCH] feat: Add getStepNumber option for enabling customization of
 step number label

---
 src/core/showElement.ts | 6 +++---
 src/option.ts           | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/core/showElement.ts b/src/core/showElement.ts
index 7cdaf1d3d..ad1935ba5 100644
--- a/src/core/showElement.ts
+++ b/src/core/showElement.ts
@@ -199,7 +199,7 @@ export function _updateProgressBar(
  */
 export default async function _showElement(
   intro: IntroJs,
-  targetElement: IntroStep
+  targetElement: IntroStep,
 ) {
   if (isFunction(intro._introChangeCallback)) {
     await intro._introChangeCallback.call(intro, targetElement.element);
@@ -279,7 +279,7 @@ export default async function _showElement(
     intro._lastShowElementTimer = window.setTimeout(() => {
       // set current step to the label
       if (oldHelperNumberLayer !== null) {
-        oldHelperNumberLayer.innerHTML = `${targetElement.step} ${intro._options.stepNumbersOfLabel} ${intro._introItems.length}`;
+        oldHelperNumberLayer.innerHTML = intro._options.getStepNumber(targetElement.step,intro._introItems.length,intro._options.stepNumbersOfLabel)
       }
 
       // set current tooltip text
@@ -421,7 +421,7 @@ export default async function _showElement(
 
     if (intro._options.showStepNumbers === true) {
       helperNumberLayer.className = "introjs-helperNumberLayer";
-      helperNumberLayer.innerHTML = `${targetElement.step} ${intro._options.stepNumbersOfLabel} ${intro._introItems.length}`;
+      helperNumberLayer.innerHTML=intro._options.getStepNumber(targetElement.step,intro._introItems.length,intro._options.stepNumbersOfLabel)
       tooltipLayer.appendChild(helperNumberLayer);
     }
 
diff --git a/src/option.ts b/src/option.ts
index b4901d1c7..8860b5849 100644
--- a/src/option.ts
+++ b/src/option.ts
@@ -88,6 +88,8 @@ export interface Options {
   buttonClass: string;
   /* additional classes to put on progress bar */
   progressBarAdditionalClass: boolean;
+  /* function for creating stepNumber label */
+  getStepNumber:(stepIndex:number,stepsCount:number,stepNumbersOfLabel:string)=>string
 }
 
 export function getDefaultOptions(): Options {
@@ -135,6 +137,9 @@ export function getDefaultOptions(): Options {
     hintAnimation: true,
     buttonClass: "introjs-button",
     progressBarAdditionalClass: false,
+    getStepNumber(stepIndex,stepsCount,stepNumbersOfLabel){
+      return  `${stepIndex} ${stepNumbersOfLabel} ${stepsCount}`;
+    }
   };
 }