qr-scanner-app 0.0.0 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dheeraj Prajapati
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,59 +1 @@
-# QrScannerApp
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.20.
-
-## Development server
-
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+## CheckExplore

package/fesm2022/qr-scanner-app.mjs

@@ -0,0 +1,246 @@
+import * as i0 from '@angular/core';
+import { Injectable, ViewChild, Component } from '@angular/core';
+import QrScanner from 'qr-scanner';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class NgxCustomQrScannerService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NgxCustomQrScannerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NgxCustomQrScannerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NgxCustomQrScannerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class NgxCustomQrScannerComponent {
+    videoRef;
+    qrScanner;
+    flashOn = false;
+    zoom = 1;
+    maxZoom = 5;
+    async ngAfterViewInit() {
+        this.qrScanner = new QrScanner(this.videoRef.nativeElement, (result) => alert('✅ QR Scanned: ' + result.data), {
+            preferredCamera: 'environment',
+            highlightScanRegion: true,
+            highlightCodeOutline: true,
+        });
+        this.qrScanner.setInversionMode('both');
+        try {
+            await this.qrScanner.start();
+            await this.initZoom();
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    async toggleFlash() {
+        if (await this.qrScanner.hasFlash()) {
+            this.qrScanner.toggleFlash(); // no arguments
+            this.flashOn = !this.flashOn;
+        }
+    }
+    getVideoTrack() {
+        // Access internal video element securely
+        // @ts-ignore
+        const video = this.qrScanner.$video;
+        if (video?.srcObject instanceof MediaStream) {
+            return video.srcObject.getVideoTracks()[0];
+        }
+        return null;
+    }
+    async initZoom() {
+        const track = this.getVideoTrack();
+        if (track) {
+            const caps = track.getCapabilities();
+            if (caps.zoom) {
+                this.maxZoom = caps.zoom.max || 5;
+                this.zoom = caps.zoom.min || 1;
+            }
+        }
+    }
+    async onZoomChange(event) {
+        const value = parseFloat(event.target.value);
+        this.zoom = value;
+        const track = this.getVideoTrack();
+        if (track) {
+            const caps = track.getCapabilities();
+            if (caps.zoom) {
+                // clamp value
+                const z = Math.max(caps.zoom.min, Math.min(value, caps.zoom.max));
+                await track.applyConstraints({ advanced: [{ zoom: z }] });
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.qrScanner?.stop();
+        this.qrScanner?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NgxCustomQrScannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NgxCustomQrScannerComponent, isStandalone: true, selector: "ngx-custom-qr-scanner", viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], ngImport: i0, template: `
+    <div class="scanner-container">
+      <!-- Left Sidebar -->
+      <div class="sidebar left-sidebar">
+        <div class="thumbnails">
+             <div class="thumb-placeholder">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                    <polyline points="21 15 16 10 5 21"></polyline>
+                </svg>
+             </div>
+        </div>
+        <div class="vertical-text">
+          <span>T</span><span>y</span><span>r</span><span>e</span>
+          <span class="spacer"></span>
+          <span>Q</span><span>R</span>
+          <span class="spacer"></span>
+          <span>C</span><span>o</span><span>d</span><span>e</span>
+        </div>
+      </div>
+
+      <!-- Center Camera Area -->
+      <div class="camera-area">
+        <video #video playsinline></video>
+        
+        <!-- Overlay Layer -->
+        <div class="overlay">
+          <div class="scan-region">
+            <div class="corner top-left"></div>
+            <div class="corner top-right"></div>
+            <div class="corner bottom-left"></div>
+            <div class="corner bottom-right"></div>
+            
+            <!-- Scan line animation -->
+            <div class="scan-line"></div>
+          </div>
+          
+          <div class="instruction-bubble">
+            Only Tire-care and touch the barcode mount with full interest
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Sidebar -->
+      <div class="sidebar right-sidebar">
+        <!-- Torch Control -->
+        <div class="control-group torch-group">
+          <div class="label">Torch</div>
+          <button class="torch-btn" (click)="toggleFlash()" [class.active]="flashOn">
+            <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Zoom Control -->
+        <div class="control-group zoom-group">
+          <div class="label">Zoom Slider</div>
+          <div class="zoom-value">{{ zoom | number:'1.0-1' }}</div>
+          <div class="slider-container">
+            <input type="range" 
+                   min="1" 
+                   [max]="maxZoom" 
+                   step="0.1" 
+                   [value]="zoom" 
+                   (input)="onZoomChange($event)"
+                   class="zoom-slider">
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;background:#000;color:#fff;font-family:sans-serif;overflow:hidden}.scanner-container{display:flex;flex-direction:row;height:100vh;width:100vw}.sidebar{background-color:#e60000;width:120px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:20px 0;z-index:10}.left-sidebar{justify-content:flex-start;gap:40px}.thumbnails .thumb-placeholder{width:80px;height:60px;background:#fff3;border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}.vertical-text{display:flex;flex-direction:column;align-items:center;font-size:1.2rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff}.vertical-text span{line-height:1.5}.vertical-text .spacer{height:20px}.right-sidebar{justify-content:flex-start;gap:60px}.control-group{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.label{font-size:.9rem;font-weight:500}.torch-btn{background:none;border:none;color:#fff;cursor:pointer;padding:10px;border-radius:50%;border:2px solid white;transition:all .2s}.torch-btn.active{background:#fff;color:#e60000}.zoom-group{margin-top:auto;margin-bottom:50px}.zoom-value{font-size:1.2rem;font-weight:700}.slider-container{height:150px;display:flex;align-items:center}.zoom-slider{-webkit-appearance:none;width:150px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;transform:rotate(-90deg)}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#00f;cursor:pointer;border:2px solid white}.camera-area{flex-grow:1;position:relative;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}video{width:100%;height:100%;object-fit:cover}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.scan-region{width:250px;height:250px;position:relative;box-shadow:0 0 0 9999px #00000080}.corner{position:absolute;width:30px;height:30px;border:4px solid white}.top-left{top:-2px;left:-2px;border-right:none;border-bottom:none}.top-right{top:-2px;right:-2px;border-left:none;border-bottom:none}.bottom-left{bottom:-2px;left:-2px;border-right:none;border-top:none}.bottom-right{bottom:-2px;right:-2px;border-left:none;border-top:none}.scan-line{width:100%;height:2px;background:#0ff;position:absolute;top:0;animation:scan 2s infinite linear;box-shadow:0 0 4px #0ff}@keyframes scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}to{top:100%;opacity:0}}.instruction-bubble{margin-top:20px;background:#fff;color:#000;padding:10px 20px;border-radius:20px;font-size:.8rem;text-align:center;max-width:80%;box-shadow:0 2px 5px #0000004d}@media (max-width: 768px){.scanner-container{flex-direction:column}.sidebar{width:100%;height:80px;flex-direction:row;padding:0 20px}.left-sidebar{order:1;justify-content:space-between}.right-sidebar{order:3;justify-content:space-around}.camera-area{order:2}.vertical-text{flex-direction:row;gap:5px}.vertical-text .spacer{width:10px;height:auto;display:inline-block}.zoom-slider{transform:none;width:100px}.slider-container{height:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NgxCustomQrScannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-custom-qr-scanner', standalone: true, imports: [CommonModule], template: `
+    <div class="scanner-container">
+      <!-- Left Sidebar -->
+      <div class="sidebar left-sidebar">
+        <div class="thumbnails">
+             <div class="thumb-placeholder">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                    <polyline points="21 15 16 10 5 21"></polyline>
+                </svg>
+             </div>
+        </div>
+        <div class="vertical-text">
+          <span>T</span><span>y</span><span>r</span><span>e</span>
+          <span class="spacer"></span>
+          <span>Q</span><span>R</span>
+          <span class="spacer"></span>
+          <span>C</span><span>o</span><span>d</span><span>e</span>
+        </div>
+      </div>
+
+      <!-- Center Camera Area -->
+      <div class="camera-area">
+        <video #video playsinline></video>
+        
+        <!-- Overlay Layer -->
+        <div class="overlay">
+          <div class="scan-region">
+            <div class="corner top-left"></div>
+            <div class="corner top-right"></div>
+            <div class="corner bottom-left"></div>
+            <div class="corner bottom-right"></div>
+            
+            <!-- Scan line animation -->
+            <div class="scan-line"></div>
+          </div>
+          
+          <div class="instruction-bubble">
+            Only Tire-care and touch the barcode mount with full interest
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Sidebar -->
+      <div class="sidebar right-sidebar">
+        <!-- Torch Control -->
+        <div class="control-group torch-group">
+          <div class="label">Torch</div>
+          <button class="torch-btn" (click)="toggleFlash()" [class.active]="flashOn">
+            <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Zoom Control -->
+        <div class="control-group zoom-group">
+          <div class="label">Zoom Slider</div>
+          <div class="zoom-value">{{ zoom | number:'1.0-1' }}</div>
+          <div class="slider-container">
+            <input type="range" 
+                   min="1" 
+                   [max]="maxZoom" 
+                   step="0.1" 
+                   [value]="zoom" 
+                   (input)="onZoomChange($event)"
+                   class="zoom-slider">
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: [":host{display:block;width:100%;height:100%;background:#000;color:#fff;font-family:sans-serif;overflow:hidden}.scanner-container{display:flex;flex-direction:row;height:100vh;width:100vw}.sidebar{background-color:#e60000;width:120px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:20px 0;z-index:10}.left-sidebar{justify-content:flex-start;gap:40px}.thumbnails .thumb-placeholder{width:80px;height:60px;background:#fff3;border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}.vertical-text{display:flex;flex-direction:column;align-items:center;font-size:1.2rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff}.vertical-text span{line-height:1.5}.vertical-text .spacer{height:20px}.right-sidebar{justify-content:flex-start;gap:60px}.control-group{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.label{font-size:.9rem;font-weight:500}.torch-btn{background:none;border:none;color:#fff;cursor:pointer;padding:10px;border-radius:50%;border:2px solid white;transition:all .2s}.torch-btn.active{background:#fff;color:#e60000}.zoom-group{margin-top:auto;margin-bottom:50px}.zoom-value{font-size:1.2rem;font-weight:700}.slider-container{height:150px;display:flex;align-items:center}.zoom-slider{-webkit-appearance:none;width:150px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;transform:rotate(-90deg)}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#00f;cursor:pointer;border:2px solid white}.camera-area{flex-grow:1;position:relative;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}video{width:100%;height:100%;object-fit:cover}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.scan-region{width:250px;height:250px;position:relative;box-shadow:0 0 0 9999px #00000080}.corner{position:absolute;width:30px;height:30px;border:4px solid white}.top-left{top:-2px;left:-2px;border-right:none;border-bottom:none}.top-right{top:-2px;right:-2px;border-left:none;border-bottom:none}.bottom-left{bottom:-2px;left:-2px;border-right:none;border-top:none}.bottom-right{bottom:-2px;right:-2px;border-left:none;border-top:none}.scan-line{width:100%;height:2px;background:#0ff;position:absolute;top:0;animation:scan 2s infinite linear;box-shadow:0 0 4px #0ff}@keyframes scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}to{top:100%;opacity:0}}.instruction-bubble{margin-top:20px;background:#fff;color:#000;padding:10px 20px;border-radius:20px;font-size:.8rem;text-align:center;max-width:80%;box-shadow:0 2px 5px #0000004d}@media (max-width: 768px){.scanner-container{flex-direction:column}.sidebar{width:100%;height:80px;flex-direction:row;padding:0 20px}.left-sidebar{order:1;justify-content:space-between}.right-sidebar{order:3;justify-content:space-around}.camera-area{order:2}.vertical-text{flex-direction:row;gap:5px}.vertical-text .spacer{width:10px;height:auto;display:inline-block}.zoom-slider{transform:none;width:100px}.slider-container{height:auto}}\n"] }]
+        }], propDecorators: { videoRef: [{
+                type: ViewChild,
+                args: ['video', { static: true }]
+            }] } });
+
+/*
+ * Public API Surface of ngx-custom-qr-scanner
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxCustomQrScannerComponent, NgxCustomQrScannerService };
+//# sourceMappingURL=qr-scanner-app.mjs.map

package/fesm2022/qr-scanner-app.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-scanner-app.mjs","sources":["../../../projects/ngx-custom-qr-scanner/src/lib/ngx-custom-qr-scanner.service.ts","../../../projects/ngx-custom-qr-scanner/src/lib/ngx-custom-qr-scanner.component.ts","../../../projects/ngx-custom-qr-scanner/src/public-api.ts","../../../projects/ngx-custom-qr-scanner/src/qr-scanner-app.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class NgxCustomQrScannerService {\n\n  constructor() { }\n}\n","import { Component, AfterViewInit, OnDestroy, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';\nimport QrScanner from 'qr-scanner';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ngx-custom-qr-scanner',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div class=\"scanner-container\">\n      <!-- Left Sidebar -->\n      <div class=\"sidebar left-sidebar\">\n        <div class=\"thumbnails\">\n             <div class=\"thumb-placeholder\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n                    <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n                    <polyline points=\"21 15 16 10 5 21\"></polyline>\n                </svg>\n             </div>\n        </div>\n        <div class=\"vertical-text\">\n          <span>T</span><span>y</span><span>r</span><span>e</span>\n          <span class=\"spacer\"></span>\n          <span>Q</span><span>R</span>\n          <span class=\"spacer\"></span>\n          <span>C</span><span>o</span><span>d</span><span>e</span>\n        </div>\n      </div>\n\n      <!-- Center Camera Area -->\n      <div class=\"camera-area\">\n        <video #video playsinline></video>\n        \n        <!-- Overlay Layer -->\n        <div class=\"overlay\">\n          <div class=\"scan-region\">\n            <div class=\"corner top-left\"></div>\n            <div class=\"corner top-right\"></div>\n            <div class=\"corner bottom-left\"></div>\n            <div class=\"corner bottom-right\"></div>\n            \n            <!-- Scan line animation -->\n            <div class=\"scan-line\"></div>\n          </div>\n          \n          <div class=\"instruction-bubble\">\n            Only Tire-care and touch the barcode mount with full interest\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Sidebar -->\n      <div class=\"sidebar right-sidebar\">\n        <!-- Torch Control -->\n        <div class=\"control-group torch-group\">\n          <div class=\"label\">Torch</div>\n          <button class=\"torch-btn\" (click)=\"toggleFlash()\" [class.active]=\"flashOn\">\n            <svg viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"></path>\n            </svg>\n          </button>\n        </div>\n\n        <!-- Zoom Control -->\n        <div class=\"control-group zoom-group\">\n          <div class=\"label\">Zoom Slider</div>\n          <div class=\"zoom-value\">{{ zoom | number:'1.0-1' }}</div>\n          <div class=\"slider-container\">\n            <input type=\"range\" \n                   min=\"1\" \n                   [max]=\"maxZoom\" \n                   step=\"0.1\" \n                   [value]=\"zoom\" \n                   (input)=\"onZoomChange($event)\"\n                   class=\"zoom-slider\">\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n  styles: [`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n      background: #000;\n      color: white;\n      font-family: sans-serif;\n      overflow: hidden;\n    }\n\n    .scanner-container {\n      display: flex;\n      flex-direction: row;\n      height: 100vh;\n      width: 100vw;\n    }\n\n    /* Sidebars */\n    .sidebar {\n      background-color: #E60000; /* Vibrant Red */\n      width: 120px;\n      flex-shrink: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 20px 0;\n      z-index: 10;\n    }\n\n    /* Left Sidebar Specifics */\n    .left-sidebar {\n      justify-content: flex-start;\n      gap: 40px;\n    }\n\n    .thumbnails .thumb-placeholder {\n      width: 80px;\n      height: 60px;\n      background: rgba(255,255,255,0.2);\n      border: 2px solid rgba(255,255,255,0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    \n    .vertical-text {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      font-size: 1.2rem;\n      font-weight: bold;\n      letter-spacing: 2px;\n      text-transform: uppercase;\n      color: white;\n    }\n    .vertical-text span {\n      line-height: 1.5;\n    }\n    .vertical-text .spacer {\n        height: 20px;\n    }\n\n    /* Right Sidebar Specifics */\n    .right-sidebar {\n      justify-content: flex-start;\n      gap: 60px;\n    }\n\n    .control-group {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n    }\n\n    .label {\n      font-size: 0.9rem;\n      font-weight: 500;\n    }\n\n    /* Torch Button */\n    .torch-btn {\n      background: none;\n      border: none;\n      color: white;\n      cursor: pointer;\n      padding: 10px;\n      border-radius: 50%;\n      border: 2px solid white;\n      transition: all 0.2s;\n    }\n    .torch-btn.active {\n      background: white;\n      color: #E60000;\n    }\n\n    /* Zoom Slider */\n    .zoom-group {\n        margin-top: auto;\n        margin-bottom: 50px;\n    }\n    \n    .zoom-value {\n        font-size: 1.2rem;\n        font-weight: bold;\n    }\n\n    .slider-container {\n        height: 150px;\n        display: flex;\n        align-items: center;\n    }\n\n    .zoom-slider {\n      -webkit-appearance: none;\n      width: 150px;\n      height: 4px;\n      background: rgba(255,255,255,0.3);\n      border-radius: 2px;\n      outline: none;\n      transform: rotate(-90deg); /* Vertical Slider */\n    }\n\n    .zoom-slider::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      background: #0000FF; /* Blue thumb */\n      cursor: pointer;\n      border: 2px solid white;\n    }\n\n    /* Center Camera Area */\n    .camera-area {\n      flex-grow: 1;\n      position: relative;\n      background: #000;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .scan-region {\n      width: 250px;\n      height: 250px;\n      position: relative;\n      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); /* Dimming outside */\n    }\n\n    .corner {\n        position: absolute;\n        width: 30px;\n        height: 30px;\n        border: 4px solid white;\n    }\n\n    .top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }\n    .top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }\n    .bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }\n    .bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }\n\n    .scan-line {\n        width: 100%;\n        height: 2px;\n        background: #00FFFF;\n        position: absolute;\n        top: 0;\n        animation: scan 2s infinite linear;\n        box-shadow: 0 0 4px #00FFFF;\n    }\n\n    @keyframes scan {\n        0% { top: 0; opacity: 0; }\n        10% { opacity: 1; }\n        90% { opacity: 1; }\n        100% { top: 100%; opacity: 0; }\n    }\n\n    .instruction-bubble {\n        margin-top: 20px;\n        background: white;\n        color: black;\n        padding: 10px 20px;\n        border-radius: 20px;\n        font-size: 0.8rem;\n        text-align: center;\n        max-width: 80%;\n        box-shadow: 0 2px 5px rgba(0,0,0,0.3);\n    }\n    \n    /* Responsive Adjustments */\n    @media (max-width: 768px) {\n        .scanner-container {\n            flex-direction: column;\n        }\n        .sidebar {\n            width: 100%;\n            height: 80px;\n            flex-direction: row;\n            padding: 0 20px;\n        }\n        .left-sidebar {\n            order: 1; /* Move to top if needed, or keep order */\n            justify-content: space-between;\n        }\n        .right-sidebar {\n            order: 3;\n            justify-content: space-around;\n        }\n        .camera-area {\n            order: 2;\n        }\n        .vertical-text {\n            flex-direction: row;\n            gap: 5px;\n        }\n        .vertical-text .spacer {\n            width: 10px;\n            height: auto;\n            display: inline-block;\n        }\n        .zoom-slider {\n            transform: none; /* Horizontal on mobile */\n            width: 100px;\n        }\n        .slider-container {\n            height: auto;\n        }\n    }\n  `]\n})\nexport class NgxCustomQrScannerComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('video', { static: true }) videoRef!: ElementRef<HTMLVideoElement>;\n\n  qrScanner!: QrScanner;\n  flashOn = false;\n  zoom = 1;\n  maxZoom = 5;\n\n  async ngAfterViewInit() {\n    this.qrScanner = new QrScanner(\n      this.videoRef.nativeElement,\n      (result: { data: string }) => alert('✅ QR Scanned: ' + result.data),\n      {\n        preferredCamera: 'environment',\n        highlightScanRegion: true,\n        highlightCodeOutline: true,\n      }\n    );\n\n    this.qrScanner.setInversionMode('both');\n\n    try {\n      await this.qrScanner.start();\n      await this.initZoom();\n    } catch (err) {\n      console.error(err);\n    }\n  }\n\n  async toggleFlash() {\n    if (await this.qrScanner.hasFlash()) {\n      this.qrScanner.toggleFlash(); // no arguments\n      this.flashOn = !this.flashOn;\n    }\n  }\n\n  private getVideoTrack(): MediaStreamTrack | null {\n    // Access internal video element securely\n    // @ts-ignore\n    const video: HTMLVideoElement = this.qrScanner.$video;\n    if (video?.srcObject instanceof MediaStream) {\n      return video.srcObject.getVideoTracks()[0];\n    }\n    return null;\n  }\n\n  async initZoom() {\n    const track = this.getVideoTrack();\n    if (track) {\n      const caps = track.getCapabilities() as any;\n      if (caps.zoom) {\n        this.maxZoom = caps.zoom.max || 5;\n        this.zoom = caps.zoom.min || 1;\n      }\n    }\n  }\n\n  async onZoomChange(event: any) {\n    const value = parseFloat(event.target.value);\n    this.zoom = value;\n\n    const track = this.getVideoTrack();\n    if (track) {\n      const caps = track.getCapabilities() as any;\n      if (caps.zoom) {\n        // clamp value\n        const z = Math.max(caps.zoom.min, Math.min(value, caps.zoom.max));\n        await track.applyConstraints({ advanced: [{ zoom: z }] } as any);\n      }\n    }\n  }\n\n  ngOnDestroy() {\n    this.qrScanner?.stop();\n    this.qrScanner?.destroy();\n  }\n}\n","/*\n * Public API Surface of ngx-custom-qr-scanner\n */\n\nexport * from './lib/ngx-custom-qr-scanner.service';\nexport * from './lib/ngx-custom-qr-scanner.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="qr-scanner-app" />
+export * from './public-api';

package/lib/ngx-custom-qr-scanner.component.d.ts

@@ -0,0 +1,18 @@
+import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
+import QrScanner from 'qr-scanner';
+import * as i0 from "@angular/core";
+export declare class NgxCustomQrScannerComponent implements AfterViewInit, OnDestroy {
+    videoRef: ElementRef<HTMLVideoElement>;
+    qrScanner: QrScanner;
+    flashOn: boolean;
+    zoom: number;
+    maxZoom: number;
+    ngAfterViewInit(): Promise<void>;
+    toggleFlash(): Promise<void>;
+    private getVideoTrack;
+    initZoom(): Promise<void>;
+    onZoomChange(event: any): Promise<void>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxCustomQrScannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxCustomQrScannerComponent, "ngx-custom-qr-scanner", never, {}, {}, never, never, true, never>;
+}

package/lib/ngx-custom-qr-scanner.service.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class NgxCustomQrScannerService {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxCustomQrScannerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NgxCustomQrScannerService>;
+}

package/package.json

@@ -1,43 +1,42 @@
 {
   "name": "qr-scanner-app",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
+  "version": "0.0.3",
+  "description": "A reusable Angular QR scanner library",
+  "keywords": [
+    "angular",
+    "qr-scanner",
+    "ngx",
+    "barcode"
+  ],
   "private": false,
-  "dependencies": {
+  "license": "MIT",
+  "homepage": "https://github.com/dheerajprajapati9898/qr-scanner-app#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dheerajprajapati9898/qr-scanner-app.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dheerajprajapati9898/qr-scanner-app/issues"
+  },
+  "author": "Dheeraj Prajapati <dheerajprajapati9898@gmail.com>",
+  "peerDependencies": {
     "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
     "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.18",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/router": "^19.2.0",
-    "@zxing/browser": "^0.1.5",
-    "@zxing/library": "^0.21.3",
-    "html5-qrcode": "^2.3.8",
-    "ngx-scanner-qrcode": "^1.7.6",
-    "qr-scanner": "^1.4.2",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "qr-scanner": "^1.4.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
   },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.20",
-    "@angular/cli": "^19.2.20",
-    "@angular/compiler-cli": "^19.2.0",
-    "@types/jasmine": "~5.1.0",
-    "jasmine-core": "~5.6.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^19.2.0",
-    "typescript": "~5.7.2"
+  "sideEffects": false,
+  "module": "fesm2022/qr-scanner-app.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/qr-scanner-app.mjs"
+    }
   }
 }

package/{projects/ngx-custom-qr-scanner/src/public-api.ts → public-api.d.ts}

@@ -1,6 +1,2 @@
-/*
- * Public API Surface of ngx-custom-qr-scanner
- */
-
 export * from './lib/ngx-custom-qr-scanner.service';
 export * from './lib/ngx-custom-qr-scanner.component';

package/.editorconfig

@@ -1,17 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-ij_typescript_use_double_quotes = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.firebase/hosting.ZGlzdC9xci1zY2FubmVyLWFwcA.cache

@@ -1,7 +0,0 @@
-browser/styles-5INURTSO.css,1770988179363,f1b651238a58fe290baec6c5e32f3bdb1943dd2bd582f02569231f7a757c7837
-browser/index.html,1770988179364,d298e2708dc2f260f9f1891fb748aaee33584ac1309e3587015245aa43b31bdd
-prerendered-routes.json,1770988179365,5c19cca0df6fbfe49815495e7145ec4551d30ac216520a6ce811ec2cca054a67
-3rdpartylicenses.txt,1770988179364,0327bcb868bf4fd5efa4b8257eea09d3623d81d58e25da91c7139b78bd5899b9
-browser/polyfills-B6TNHZQ6.js,1770988179364,0d470d11ef45790298a0211b78859f53935f24a7d05c357a0bce142e2e12a925
-browser/favicon.ico,1770988179363,8f1fc0f94ae643bb8757c3cb49f69bf6cb2228f632cb77c7e47d8ee3995d88a7
-browser/main-VYJBJ3K3.js,1770988179365,78a6749820aba30057621fbe467750be97907dc329f5afd928cb63bb0ae62489

package/.firebase/hosting.ZGlzdC9xci1zY2FubmVyLWFwcC9icm93c2Vy.cache

@@ -1,13 +0,0 @@
-styles-5INURTSO.css,1771255855743,f1b651238a58fe290baec6c5e32f3bdb1943dd2bd582f02569231f7a757c7837
-index.html,1771255855744,624777144d01c4275a6683bb0d8a4004f174b23173a23f88b6a31f3bc0cdfed0
-chunk-2VMXMS7J.js,1771255855744,8f326e731f352307dfeb3085d7b33b00559f350cab254d5e8a180698dc9093e6
-polyfills-B6TNHZQ6.js,1771255855744,0d470d11ef45790298a0211b78859f53935f24a7d05c357a0bce142e2e12a925
-chunk-6H7TWJR4.js,1771255855744,6c12100c12753c2ef75ba236e57662da29199b2095cefac6446d5b69ddfe1adb
-assets/wasm/index.mjs,1771255855745,7173b80a747bfc839b92f9a5b684e93d2a70bb8536cbda8faef88a620e7ced8c
-favicon.ico,1771255855743,8f1fc0f94ae643bb8757c3cb49f69bf6cb2228f632cb77c7e47d8ee3995d88a7
-assets/wasm/index.js,1771255855745,42a66bdad28941e9162db3f486fcb3e9c5c26ba47812e58a9bdf4e86a39ff72a
-assets/wasm/index.d.ts,1771255855746,d666cf1980dca563d15a9f3d4ddfa2daefc56b1a75fe13865911e9caa755c185
-assets/wasm/index.mjs.map,1771255855746,fde00a63e44377611b67351f627111f1fbd571d606da07a5de7de6945574db40
-assets/wasm/index.js.map,1771255855745,67bcabf551d05ba1431ec2d05a932ee73651585cd693b7dcb50f677c7fac17e0
-main-64QMUHWT.js,1771255855744,0d1eb2cfc40c12844356f4401d8c3bc71fb384bd315dc13d5750b1d7790ca74b
-assets/wasm/ngx-scanner-qrcode.wasm,1771255855748,e47e0b2b77ae1ad36cf44f0eeea5dec89996ff027412b3060f2fb9916d7ec632

package/.firebaserc

@@ -1,5 +0,0 @@
-{
-  "projects": {
-    "default": "loving-petcare-d984a"
-  }
-}

package/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}

package/.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}

package/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}