From ead327d44f364eb9dd8cfc8a5dfe4bcbd9e83672 Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Sat, 17 Jan 2026 18:51:37 -0300
Subject: [PATCH] feat(barcode reader): add close  btn

---
 public/barcode-reader/barcode-reader.css | 17 ++++++++++++++++-
 src/app/web-components/barcode-reader.ts |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/public/barcode-reader/barcode-reader.css b/public/barcode-reader/barcode-reader.css
index 21b2229..ddf8d03 100644
--- a/public/barcode-reader/barcode-reader.css
+++ b/public/barcode-reader/barcode-reader.css
@@ -13,7 +13,22 @@
     width: var(--video-width);
     background-color: #000000;
 }
-    
+
+.close-btn {
+    background: none;
+    border-radius: 50%;
+    border-style: none;
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    margin-right: 12px;
+    margin-top: 12px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 101;
+}
+
 @media screen and (min-width: 1024px) {
     #container {
         min-width: 400px;
diff --git a/src/app/web-components/barcode-reader.ts b/src/app/web-components/barcode-reader.ts
index abc676a..88eebcd 100644
--- a/src/app/web-components/barcode-reader.ts
+++ b/src/app/web-components/barcode-reader.ts
@@ -24,10 +24,16 @@ export class BarcodeReader extends HTMLElement {
     link.rel = 'stylesheet';
     link.href = '/barcode-reader/barcode-reader.css';
     this.container.setAttribute('id', 'container');
+    const closeBtn = document.createElement('button');
+    closeBtn.textContent = 'X';
+    closeBtn.onclick = this.stopScan.bind(this);
+    closeBtn.classList.add('close-btn')
+    this.container.appendChild(closeBtn);
     const videoContainer = document.createElement('div');
     videoContainer.setAttribute('id', 'video-container');
     this.container.appendChild(videoContainer);
 
+    
     const overlay = document.createElement('div');
     overlay.classList.add('overlay');
     this.video.setAttribute('autoplay', '');