### Barcode-Scan Custom Element
The `barcode-scan` custom element is designed to simplify the process of scanning and validating barcodes in web applications. It listens for keyboard input and triggers a custom event, providing information about the scanned barcode's validity and other details.
#### Installation
You can install the `barcode-scan` custom element via npm:
```bash
npm install barcode-scan-js
```
#### Stackblitz Demo
https://stackblitz.com/edit/js-j8zukx?file=index.js,index.html
#### Usage
1. Include the `barcode-scan` custom element in your HTML file:
```html
```
2. Configure the element by setting its attributes or properties. You can configure it using a JSON string in the `config` attribute. Here's an example configuration:
```html
```
The available configuration options are:
- `minLength` (optional): The minimum length of a valid barcode (default: 1).
- `maxLength` (optional): The maximum length of a valid barcode (default: 14).
- `scanEndsWithKey` (optional): The key that indicates the end of a barcode scan (default: empty string).
- `scanTimeoutMs` (optional): The timeout (in milliseconds) to consider the input as a complete barcode (default: 3000).
- `ignoreOverElements` (optional): An array of HTML tag names to ignore when scanning (default: ["INPUT"]).
3. Listen for the `scan` event to receive barcode scan results:
```javascript
document.querySelector('barcode-scan').addEventListener('scan', (event) => {
const scanResult = event.detail;
if (scanResult.isValid) {
console.log(`Valid barcode scanned: ${scanResult.code}`);
} else {
console.error(`Invalid barcode scanned: ${scanResult.code}, Error: ${scanResult.errorMessage}`);
}
});
```
The `scan` event provides detailed information about the scanned barcode, including its code, length, validity, time taken to scan, cleaned code, and configuration.
4. That's it! You can now use the `barcode-scan` custom element to scan and validate barcodes in your web application.
### Example
Here's a simple example of how to use the `barcode-scan` custom element in an HTML file:
```html
Barcode Scanner
Barcode Scanner
```
This example sets up the `barcode-scan` custom element with a configuration and listens for the `scan` event to display the scan result on the page.
Feel free to customize the configuration and event handling to fit your specific barcode scanning needs.