smartcomply-web-sdk 1.0.34 → 1.0.36

package/dist/smartcomply.browser.js

@@ -4925,7 +4925,10 @@ var SmartComplySDK = (() => {
         docVideo.play().catch(() => {
         });
         const cleanup = () => {
-          if (docRoot.parentElement) docRoot.parentElement.removeChild(docRoot);
+          try {
+            docRoot.remove();
+          } catch (_2) {
+          }
           this.docCaptureRoot = null;
         };
         const captureBtn = bottomPanel.querySelector("#sc-capture-doc-btn");
@@ -4968,12 +4971,14 @@ var SmartComplySDK = (() => {
     }
     unmount() {
       this.stopTimer();
-      if (this.docCaptureRoot?.parentElement) {
-        this.docCaptureRoot.parentElement.removeChild(this.docCaptureRoot);
-        this.docCaptureRoot = null;
+      try {
+        this.docCaptureRoot?.remove();
+      } catch (_2) {
       }
-      if (this.root?.parentElement) {
-        this.root.parentElement.removeChild(this.root);
+      this.docCaptureRoot = null;
+      try {
+        this.root?.remove();
+      } catch (_2) {
       }
       this.root = null;
       this.videoEl = null;
@@ -5655,133 +5660,135 @@ var SmartComplySDK = (() => {
     }
     requiresBackSide(documentType) {
       const type = documentType.toLowerCase();
-      return type.includes("voter") || type.includes("nin") || type.includes("driver") || type.includes("license") || type.includes("national id") || type.includes("national id card") || type.includes("ghana");
+      return type.includes("voter") || type.includes("driver") || type.includes("license") || type.includes("national id") || type.includes("national id card") || type.includes("ghana");
     }
     shouldCaptureBackSide(documentType) {
       return this.requiresBackOverride !== void 0 ? this.requiresBackOverride : this.requiresBackSide(documentType);
     }
     renderChoiceScreen(container, theme, documentType) {
       this.root = document.createElement("div");
-      this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 20px;max-width:100%;";
+      this.root.style.cssText = `
+      display:flex;flex-direction:column;gap:0;padding:0;width:100%;
+      font-family:system-ui,-apple-system,sans-serif;
+    `;
       const docLabel = this.getDocumentLabel(documentType);
       const requiresBack = this.shouldCaptureBackSide(documentType);
       const isCapturingFront = this.currentSide === "front";
-      const header = document.createElement("div");
-      header.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;";
-      const iconContainer = document.createElement("div");
-      iconContainer.style.cssText = `
-      width:120px;height:120px;border-radius:24px;
+      const sideLabel = requiresBack ? isCapturingFront ? " \u2014 Front side" : " \u2014 Back side" : "";
+      const headerRow = document.createElement("div");
+      headerRow.style.cssText = `
+      display:flex;align-items:center;gap:14px;
+      padding:16px 20px 14px;
+    `;
+      const iconBox = document.createElement("div");
+      iconBox.style.cssText = `
+      width:48px;height:48px;border-radius:14px;flex-shrink:0;
       display:flex;align-items:center;justify-content:center;
-      background:linear-gradient(135deg, ${theme.primary}15, ${theme.primary}05);
-      border:3px solid ${theme.primary}30;
-      position:relative;overflow:hidden;
-      box-shadow:0 8px 32px ${theme.primary}20;
+      font-size:24px;
+      background:${theme.primary}15;
+      border:1.5px solid ${theme.primary}30;
     `;
-      const icon = document.createElement("div");
-      icon.style.cssText = "font-size:48px;animation:float 3s ease-in-out infinite;";
-      icon.textContent = "\u{1FAAA}";
-      iconContainer.appendChild(icon);
-      if (!document.head.querySelector("style[data-float-animation]")) {
-        const style2 = document.createElement("style");
-        style2.setAttribute("data-float-animation", "true");
-        style2.textContent = `
-        @keyframes float {
-          0%, 100% { transform: translateY(0px); }
-          50% { transform: translateY(-10px); }
-        }
-      `;
-        document.head.appendChild(style2);
-      }
-      header.appendChild(iconContainer);
-      const title = document.createElement("div");
-      title.style.cssText = `color:${theme.text};font-size:20px;font-weight:700;text-align:center;line-height:1.4;`;
-      let labelText = `Capture your ${docLabel}`;
-      if (requiresBack) {
-        labelText += ` (${isCapturingFront ? "Front Side" : "Back Side"})`;
-      }
-      title.textContent = labelText;
-      header.appendChild(title);
-      const subtitle = document.createElement("div");
-      subtitle.style.cssText = `color:${theme.textSecondary};font-size:14px;text-align:center;line-height:1.5;max-width:280px;`;
-      subtitle.textContent = "Choose how you'd like to provide your document";
-      header.appendChild(subtitle);
-      this.root.appendChild(header);
-      if (requiresBack) {
-        const progress = document.createElement("div");
-        progress.style.cssText = `
-        display:flex;flex-direction:column;align-items:center;gap:12px;
-        padding:16px 20px;background:${theme.primary}08;border-radius:16px;
-        border:1px solid ${theme.primary}20;width:100%;max-width:320px;
-      `;
-        progress.innerHTML = `
-        <div style="display:flex;gap:8px;align-items:center;">
-          <div style="width:12px;height:12px;border-radius:50%;background:${isCapturingFront ? theme.primary : theme.border};transition:all 0.3s ease;"></div>
-          <div style="width:32px;height:2px;background:${theme.border};border-radius:1px;"></div>
-          <div style="width:12px;height:12px;border-radius:50%;background:${!isCapturingFront ? theme.primary : theme.border};transition:all 0.3s ease;"></div>
-        </div>
-        <span style="color:${theme.text};font-size:13px;font-weight:600;">${isCapturingFront ? "Step 1 of 2" : "Step 2 of 2"}</span>
-      `;
-        this.root.appendChild(progress);
-      }
-      const actionsContainer = document.createElement("div");
-      actionsContainer.style.cssText = "display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px;";
-      const cameraBtn = this.createEnhancedButton(
-        "\u{1F4F7}  Take Photo with Camera",
-        theme,
-        true,
-        "Open camera to capture document"
-      );
+      iconBox.textContent = this._docIcon(documentType);
+      const titleBlock = document.createElement("div");
+      const titleEl = document.createElement("div");
+      titleEl.style.cssText = `color:${theme.text};font-size:16px;font-weight:700;line-height:1.3;`;
+      titleEl.textContent = `Capture your ${docLabel}`;
+      const subEl = document.createElement("div");
+      subEl.style.cssText = `color:${theme.textSecondary};font-size:12px;margin-top:2px;`;
+      subEl.textContent = requiresBack ? isCapturingFront ? "Step 1 of 2 \u2014 front side" : "Step 2 of 2 \u2014 back side" : "Choose how to provide your document";
+      titleBlock.appendChild(titleEl);
+      titleBlock.appendChild(subEl);
+      headerRow.appendChild(iconBox);
+      headerRow.appendChild(titleBlock);
+      this.root.appendChild(headerRow);
+      const btnRow = document.createElement("div");
+      btnRow.style.cssText = `
+      display:grid;grid-template-columns:1fr 1fr;gap:10px;
+      padding:0 20px 14px;
+    `;
+      const cameraBtn = document.createElement("button");
+      cameraBtn.style.cssText = `
+      display:flex;flex-direction:column;align-items:center;justify-content:center;
+      gap:8px;padding:16px 12px;
+      background:${theme.primary};color:#fff;
+      border:none;border-radius:14px;cursor:pointer;
+      font-size:13px;font-weight:600;font-family:inherit;
+      transition:all 0.15s ease;min-height:80px;
+      box-shadow:0 4px 14px ${theme.primary}30;
+    `;
+      cameraBtn.innerHTML = `<span style="font-size:26px;">\u{1F4F7}</span><span>Take Photo</span><span style="font-size:10px;opacity:0.8;font-weight:500;">Use camera</span>`;
+      cameraBtn.addEventListener("mouseenter", () => {
+        cameraBtn.style.opacity = "0.9";
+        cameraBtn.style.transform = "translateY(-1px)";
+      });
+      cameraBtn.addEventListener("mouseleave", () => {
+        cameraBtn.style.opacity = "1";
+        cameraBtn.style.transform = "none";
+      });
       cameraBtn.addEventListener("click", () => {
-        this.showLoadingState("Opening camera...", theme);
         this.root.innerHTML = "";
-        setTimeout(() => {
-          this.renderCameraView(this.root, theme, documentType);
-        }, 500);
+        this.renderCameraView(this.root, theme, documentType);
+      });
+      const uploadBtn = document.createElement("button");
+      uploadBtn.style.cssText = `
+      display:flex;flex-direction:column;align-items:center;justify-content:center;
+      gap:8px;padding:16px 12px;
+      background:${theme.cardBg || theme.inputBg};color:${theme.text};
+      border:2px solid ${theme.border};border-radius:14px;cursor:pointer;
+      font-size:13px;font-weight:600;font-family:inherit;
+      transition:all 0.15s ease;min-height:80px;
+    `;
+      uploadBtn.innerHTML = `<span style="font-size:26px;">\u{1F5BC}\uFE0F</span><span>From Gallery</span><span style="font-size:10px;color:${theme.textMuted || theme.textSecondary};font-weight:500;">Upload file</span>`;
+      uploadBtn.addEventListener("mouseenter", () => {
+        uploadBtn.style.borderColor = theme.primary;
+        uploadBtn.style.transform = "translateY(-1px)";
+      });
+      uploadBtn.addEventListener("mouseleave", () => {
+        uploadBtn.style.borderColor = theme.border;
+        uploadBtn.style.transform = "none";
       });
-      actionsContainer.appendChild(cameraBtn);
-      const uploadBtn = this.createEnhancedButton(
-        "\u{1F4C1}  Choose from Gallery",
-        theme,
-        false,
-        "Upload document image from device"
-      );
       uploadBtn.addEventListener("click", () => {
         this.handleFileUpload(container, theme);
       });
-      actionsContainer.appendChild(uploadBtn);
-      this.root.appendChild(actionsContainer);
+      btnRow.appendChild(cameraBtn);
+      btnRow.appendChild(uploadBtn);
+      this.root.appendChild(btnRow);
       const tips = document.createElement("div");
       tips.style.cssText = `
-      width:100%;padding:16px 20px;border-radius:16px;
-      background:${theme.shimmer};border:1px solid ${theme.border};
-      margin-top:8px;
+      margin:0 20px 16px;padding:12px 14px;
+      background:${theme.shimmer || theme.cardBg};
+      border:1px solid ${theme.border};border-radius:12px;
     `;
-      const tipsTitle = document.createElement("div");
-      tipsTitle.style.cssText = `font-weight:700;color:${theme.text};margin-bottom:12px;font-size:14px;display:flex;align-items:center;gap:8px;`;
-      tipsTitle.innerHTML = `\u{1F4A1} Tips for best results`;
-      tips.appendChild(tipsTitle);
-      const tipsList = document.createElement("div");
-      tipsList.style.cssText = `display:grid;gap:8px;font-size:13px;color:${theme.textSecondary};line-height:1.6;`;
-      tipsList.innerHTML = `
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Lay document flat on a solid surface</span>
-      </div>
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Ensure all four corners are visible</span>
-      </div>
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Use good lighting, avoid glare</span>
-      </div>
-      <div style="display:flex;gap:8px;align-items:flex-start;">
-        <span style="color:${theme.primary};font-weight:bold;">\u2713</span>
-        <span>Make sure all text is clearly readable</span>
-      </div>
+      const tipsGrid = document.createElement("div");
+      tipsGrid.style.cssText = `
+      display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;
     `;
-      tips.appendChild(tipsList);
+      const tipItems = [
+        "Lay document flat",
+        "All 4 corners visible",
+        "Good lighting, no glare",
+        "All text clearly readable"
+      ];
+      tipItems.forEach((t2) => {
+        const row = document.createElement("div");
+        row.style.cssText = `display:flex;align-items:center;gap:5px;font-size:11px;color:${theme.textSecondary};`;
+        row.innerHTML = `<span style="color:${theme.primary};font-weight:700;flex-shrink:0;">\u2713</span><span>${t2}</span>`;
+        tipsGrid.appendChild(row);
+      });
+      tips.appendChild(tipsGrid);
       this.root.appendChild(tips);
+      if (requiresBack && isCapturingFront) {
+        const notice = document.createElement("div");
+        notice.style.cssText = `
+        margin:0 20px 16px;padding:10px 14px;
+        background:${theme.primary}0D;
+        border:1px solid ${theme.primary}25;border-radius:10px;
+        display:flex;align-items:center;gap:8px;
+        font-size:12px;color:${theme.textSecondary};line-height:1.5;
+      `;
+        notice.innerHTML = `<span style="font-size:16px;flex-shrink:0;">\u2139\uFE0F</span><span>You'll capture both the <strong style="color:${theme.text}">front</strong> and <strong style="color:${theme.text}">back</strong> of this document.</span>`;
+        this.root.appendChild(notice);
+      }
       const fileInput = document.createElement("input");
       fileInput.type = "file";
       fileInput.accept = "image/jpeg,image/png";
@@ -5790,18 +5797,26 @@ var SmartComplySDK = (() => {
       fileInput.addEventListener("change", (e2) => {
         const file = e2.target.files?.[0];
         if (file) {
-          const validationError = this.validateFile(file);
-          if (validationError) {
-            this.showError(validationError);
+          const err = this.validateFile(file);
+          if (err) {
+            this.showError(err);
             return;
           }
           this.showLoadingState("Processing image...", theme);
-          this.compressImage(file, 1280, 960, 0.85).then((compressed) => this.handleFileUploadComplete(compressed, container, theme, documentType)).catch(() => this.handleFileUploadComplete(file, container, theme, documentType));
+          this.compressImage(file, 1280, 960, 0.85).then((c2) => this.handleFileUploadComplete(c2, container, theme, documentType)).catch(() => this.handleFileUploadComplete(file, container, theme, documentType));
         }
       });
       this.root.appendChild(fileInput);
       container.appendChild(this.root);
     }
+    /** Returns an appropriate emoji icon for the document type. */
+    _docIcon(documentType) {
+      const t2 = documentType.toLowerCase();
+      if (t2.includes("passport")) return "\u{1F4D8}";
+      if (t2.includes("driver") || t2.includes("licen")) return "\u{1F697}";
+      if (t2.includes("voter") || t2.includes("pvc")) return "\u{1F5F3}\uFE0F";
+      return "\u{1FAAA}";
+    }
     renderCameraView(container, theme, documentType) {
       const wrapper = document.createElement("div");
       wrapper.style.cssText = "position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;";
@@ -6349,24 +6364,21 @@ var SmartComplySDK = (() => {
   };
   function resolveIdTypeInfo(typeName, isDocumentFlow) {
     const u2 = typeName.toUpperCase();
-    const withFace = u2.includes("WITH FACE") || u2.includes("FACE");
     const advanced = u2.includes("ADVANCED");
+    const cleanName = typeName.replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
     const requiresBackSide = (type) => {
       const t2 = type.toLowerCase();
-      return t2.includes("voter") || t2.includes("nin") || t2.includes("driver") || t2.includes("license") || t2.includes("national id") || t2.includes("national id card");
+      return t2.includes("voter") || t2.includes("driver") || t2.includes("license") || t2.includes("national id") || t2.includes("national id card");
     };
     if (u2.includes("BVN") || u2.includes("BANK VERIFICATION")) {
-      const extra = withFace ? " + selfie photo" : "";
-      return { icon: "\u{1F3E6}", desc: `Enter your 11-digit BVN${extra}`, requiresBack: false };
+      return { icon: "\u{1F3E6}", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
     }
     if (u2.includes("NIN") || u2.includes("NATIONAL IDENTITY NUMBER")) {
-      const extra = withFace ? " + selfie photo" : "";
-      return { icon: "\u{1F194}", desc: `Enter your 11-digit NIN${extra}`, requiresBack: false };
+      return { icon: "\u{1F194}", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
     }
     if (u2.includes("GHANA")) {
       if (isDocumentFlow) return { icon: "\u{1FAAA}", desc: "Capture or upload your Ghana Card", requiresBack: true };
-      const extra = withFace ? " + selfie photo" : "";
-      return { icon: "\u{1FAAA}", desc: `Enter your Ghana Card number${extra}`, requiresBack: false };
+      return { icon: "\u{1FAAA}", desc: "Enter your Ghana Card number", requiresBack: false };
     }
     if (u2.includes("SSNIT"))
       return { icon: "\u{1F3DB}\uFE0F", desc: "Enter your SSNIT number", requiresBack: false };
@@ -6502,8 +6514,9 @@ var SmartComplySDK = (() => {
       if (this.overlay) {
         this.overlay.style.opacity = "0";
         setTimeout(() => {
-          if (this.overlay?.parentElement) {
-            this.overlay.parentElement.removeChild(this.overlay);
+          try {
+            this.overlay?.remove();
+          } catch (_2) {
           }
           this.overlay = null;
           this.modal = null;
@@ -6839,8 +6852,9 @@ var SmartComplySDK = (() => {
         if (requiresBack && isThisDocFlow) {
           subtitle2 += " \u26A0\uFE0F Both sides required";
         }
+        const displayName = typeName.replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
         const card = this.createOptionCard(
-          `${info.icon}  ${typeName}`,
+          `${info.icon}  ${displayName}`,
           subtitle2,
           () => {
             const idTypeChanged = this.selectedIdType !== typeCode;
@@ -6874,7 +6888,8 @@ var SmartComplySDK = (() => {
       container.style.cssText += "display:flex;flex-direction:column;gap:16px;";
       const dataFields = this.selectedChannelFields.filter((f2) => f2.type !== "upload");
       const info = resolveIdTypeInfo(this.selectedIdTypeName || this.selectedIdType, false);
-      const title = this.createStepTitle(`${info.icon}  ${this.selectedIdTypeName || this.selectedIdType}`);
+      const cleanStepTitle = (this.selectedIdTypeName || this.selectedIdType).replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
+      const title = this.createStepTitle(`${info.icon}  ${cleanStepTitle}`);
       container.appendChild(title);
       const subtitle = document.createElement("div");
       subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin-top:-8px;`;
@@ -7093,69 +7108,65 @@ var SmartComplySDK = (() => {
     }
     // ── Processing ────────────────────────────────────────────────────
     renderProcessing(container) {
-      container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 16px;min-height:400px;";
+      container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px;";
       const animationWrap = document.createElement("div");
-      animationWrap.style.cssText = "position:relative;width:80px;height:80px;";
+      animationWrap.style.cssText = "position:relative;width:52px;height:52px;flex-shrink:0;";
       const spinner = document.createElement("div");
       spinner.style.cssText = `
       position:absolute;inset:0;border-radius:50%;
-      border:4px solid ${this.theme.border};
+      border:3px solid ${this.theme.border};
       border-top-color:${this.theme.primary};
-      animation:sc-spin 1s linear infinite;
+      animation:sc-spin 0.9s linear infinite;
     `;
       animationWrap.appendChild(spinner);
       const centerIcon = document.createElement("div");
       centerIcon.style.cssText = `
       position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
-      font-size:28px;
+      font-size:20px;
     `;
       centerIcon.textContent = "\u{1F50D}";
       animationWrap.appendChild(centerIcon);
       container.appendChild(animationWrap);
       const title = document.createElement("div");
-      title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:600;text-align:center;`;
-      title.textContent = "Processing Your Documents";
+      title.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:700;text-align:center;`;
+      title.textContent = "Processing your document";
       container.appendChild(title);
       const subtitle = document.createElement("div");
-      subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:13px;text-align:center;max-width:280px;line-height:1.5;`;
-      subtitle.textContent = "Scanning and verifying your identity documents. This may take a few moments.";
+      subtitle.style.cssText = `color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:260px;line-height:1.5;`;
+      subtitle.textContent = "Scanning and verifying your ID. This usually takes a few seconds.";
       container.appendChild(subtitle);
       const stepsContainer = document.createElement("div");
       stepsContainer.style.cssText = `
-      width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;
-      margin-top:16px;
+      width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;
     `;
       const steps = [
-        { id: "uploading", text: "Uploading documents", icon: "\u{1F4E4}" },
-        { id: "scanning", text: "Scanning for information", icon: "\u{1F50D}" },
-        { id: "verifying", text: "Verifying authenticity", icon: "\u2713" },
-        { id: "analyzing", text: "Analyzing document quality", icon: "\u{1F52C}" }
+        { id: "uploading", text: "Uploading", icon: "\u{1F4E4}" },
+        { id: "scanning", text: "Scanning", icon: "\u{1F50D}" },
+        { id: "verifying", text: "Verifying", icon: "\u2713" },
+        { id: "analyzing", text: "Checking quality", icon: "\u{1F52C}" }
       ];
-      steps.forEach((step, index) => {
+      steps.forEach((step) => {
         const stepEl = document.createElement("div");
         stepEl.style.cssText = `
-        display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;
+        display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
         background:${this.theme.cardBg};border:1px solid ${this.theme.border};
         transition:all 0.3s ease;
       `;
         stepEl.id = `processing-step-${step.id}`;
         const iconEl = document.createElement("div");
         iconEl.style.cssText = `
-        width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
-        font-size:14px;background:${this.theme.shimmer};border:1px solid ${this.theme.border};
+        width:26px;height:26px;border-radius:7px;flex-shrink:0;
+        display:flex;align-items:center;justify-content:center;
+        font-size:12px;background:${this.theme.shimmer};
       `;
         iconEl.textContent = step.icon;
         iconEl.id = `step-icon-${step.id}`;
         const textEl = document.createElement("div");
-        textEl.style.cssText = `flex:1;color:${this.theme.textSecondary};font-size:13px;font-weight:500;`;
+        textEl.style.cssText = `flex:1;color:${this.theme.textSecondary};font-size:11px;font-weight:500;`;
         textEl.textContent = step.text;
         textEl.id = `step-text-${step.id}`;
         const statusEl = document.createElement("div");
-        statusEl.style.cssText = `
-        width:20px;height:20px;border-radius:50%;
-        border:2px solid ${this.theme.border};
-        position:relative;
-      `;
+        statusEl.style.cssText = `width:16px;height:16px;border-radius:50%;border:2px solid ${this.theme.border};position:relative;flex-shrink:0;`;
         statusEl.id = `step-status-${step.id}`;
         stepEl.appendChild(iconEl);
         stepEl.appendChild(textEl);