Skip to content

Commit 53fd7d6

Browse files
werthdavidwerthdavid
authored
Merge pull request #597 from zxing-js/feature/ang-21
Feature/ang 21
2 parents 4c92da1 + 870aea6 commit 53fd7d6

File tree

12 files changed

+4485
-3999
lines changed

12 files changed

+4485
-3999
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ jobs:
1313

1414
- uses: actions/setup-node@v4
1515
with:
16-
node-version: 22
16+
node-version: 24
1717

1818
- name: Get yarn cache directory path
1919
id: yarn-cache-dir-path

‎.github/workflows/npmpublish.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ jobs:
1616

1717
- uses: actions/setup-node@v4
1818
with:
19-
node-version: 22
19+
node-version: 24
2020

2121
- name: Get yarn cache directory path
2222
id: yarn-cache-dir-path
@@ -62,7 +62,7 @@ jobs:
6262

6363
- uses: actions/setup-node@v4
6464
with:
65-
node-version: 22
65+
node-version: 24
6666
registry-url: https://registry.npmjs.org/
6767

6868
- run: npm publish ./package.tgz --access public

‎README.md‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -56,21 +56,10 @@ I promise that it's **very** easy to use:
5656

5757
### Angular version compatibility
5858

59-
Angular version compatibility table:
60-
61-
| Angular | @zxing/ngx-scanner |
62-
|---------|--------------------|
63-
| 17.x.x | 17.0.0 |
64-
| 16.x.x | 3.9.1 & 16.0.0 |
65-
| 15.x.x | 3.9.0 |
66-
| 14.x.x | 3.6.2 |
67-
| 13.x.x | 3.5.0 |
68-
| 12.x.x | 3.3.0 |
69-
| 10.x.x | 3.1.3 |
70-
| 9.x.x | 3.0.1 |
71-
| 8.x.x | 2.0.1 |
72-
| 5.x.x | 1.7.1 |
73-
| 4.x.x | 0.3.4 |
59+
Angular version compatibility:
60+
61+
The main version of @zxing/ngx-scanner will be compatible with the corresponding Angular version.
62+
That means e.g. @zxing/ngx-scanner@21.0.0 will be compatible with Angular 21.
7463

7564
(Sorry for not using semver in the past, future releases will use the same major as the supported Angular version)
7665

‎package.json‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -46,49 +46,49 @@
4646
"deploy:demo:ngh": "npm run build:gh-pages && npx ngh --dir=dist/gh-pages"
4747
},
4848
"dependencies": {
49-
"@angular/animations": "^20.0.0",
50-
"@angular/cdk": "^20.0.0",
51-
"@angular/common": "^20.0.0",
52-
"@angular/core": "^20.0.0",
53-
"@angular/forms": "^20.0.0",
54-
"@angular/material": "^20.0.0",
55-
"@angular/platform-browser": "^20.0.0",
56-
"@angular/platform-browser-dynamic": "^20.0.0",
57-
"@angular/router": "^20.0.0",
58-
"@angular/service-worker": "^20.0.0",
49+
"@angular/animations": "^21.0.2",
50+
"@angular/cdk": "^21.0.1",
51+
"@angular/common": "^21.0.2",
52+
"@angular/core": "^21.0.2",
53+
"@angular/forms": "^21.0.2",
54+
"@angular/material": "^21.0.1",
55+
"@angular/platform-browser": "^21.0.2",
56+
"@angular/platform-browser-dynamic": "^21.0.2",
57+
"@angular/router": "^21.0.2",
58+
"@angular/service-worker": "^21.0.2",
5959
"@zxing/browser": "^0.1.5",
6060
"@zxing/library": "^0.21.3",
61-
"rxjs": "^7.8.1",
62-
"tslib": "^2.6.2"
61+
"rxjs": "^7.8.2",
62+
"tslib": "^2.8.1"
6363
},
6464
"devDependencies": {
65-
"@angular-devkit/architect": "^0.2000.0",
66-
"@angular-devkit/build-angular": "^20.0.0",
67-
"@angular-devkit/core": "^20.0.0",
68-
"@angular-devkit/schematics": "^20.0.0",
69-
"@angular/cli": "^20.0.0",
70-
"@angular/compiler": "^20.0.0",
71-
"@angular/compiler-cli": "^20.0.0",
72-
"@angular/language-service": "^20.0.0",
73-
"@compodoc/compodoc": "^1.1.24",
74-
"@types/jasmine": "^5.1.4",
65+
"@angular-devkit/architect": "^0.2100.1",
66+
"@angular-devkit/build-angular": "^21.0.1",
67+
"@angular-devkit/core": "^21.0.1",
68+
"@angular-devkit/schematics": "^21.0.1",
69+
"@angular/cli": "^21.0.1",
70+
"@angular/compiler": "^21.0.2",
71+
"@angular/compiler-cli": "^21.0.2",
72+
"@angular/language-service": "^21.0.2",
73+
"@compodoc/compodoc": "^1.1.32",
74+
"@types/jasmine": "^5.1.13",
7575
"@types/jasminewd2": "~2.0.13",
76-
"@types/node": "^20.12.12",
76+
"@types/node": "^24.10.1",
7777
"codelyzer": "^6.0.2",
78-
"jasmine-core": "^5.4.0",
78+
"jasmine-core": "^5.13.0",
7979
"jasmine-spec-reporter": "^7.0.0",
8080
"karma": "^6.4.4",
8181
"karma-chrome-launcher": "^3.2.0",
8282
"karma-cli": "^2.0.0",
8383
"karma-coverage-istanbul-reporter": "^3.0.3",
8484
"karma-jasmine": "^5.1.0",
8585
"karma-jasmine-html-reporter": "^2.1.0",
86-
"ng-packagr": "^20.0.0",
86+
"ng-packagr": "^21.0.0",
8787
"protractor": "^7.0.0",
8888
"ts-node": "^10.9.2",
8989
"tslint": "^6.1.3",
90-
"typescript": "5.8.2",
91-
"zone.js": "~0.15.0"
90+
"typescript": "5.9.3",
91+
"zone.js": "~0.16.0"
9292
},
9393
"collective": {
9494
"type": "opencollective",

‎projects/zxing-scanner-demo/.browserslistrc‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,2 @@
1-
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2-
# For additional information regarding the format and rule options, please see:
3-
# https://github.com/browserslist/browserslist#queries
4-
5-
# You can see what browsers were selected by your queries by running:
6-
# npx browserslist
7-
8-
> 0.5%
9-
last 2 versions
10-
Firefox ESR
11-
not dead
12-
not IE 9-11 # For IE 9-11 support, remove 'not'.
1+
defaults and fully supports es6-module
2+
maintained node versions

‎projects/zxing-scanner-demo/src/app/app.component.html‎

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
<mat-list-option checkboxPosition="start" (click)="toggleTryHarder()" [selected]="tryHarder">
66
Enable Try-harder
77
</mat-list-option>
8-
<mat-list-option checkboxPosition="start" (click)="toggleTorch()" [selected]="torchEnabled"
9-
*ngIf="torchAvailable$ | async">
10-
Enable Torch
11-
</mat-list-option>
8+
@if (torchAvailable$ | async) {
9+
<mat-list-option checkboxPosition="start" (click)="toggleTorch()" [selected]="torchEnabled"
10+
>
11+
Enable Torch
12+
</mat-list-option>
13+
}
1214
</mat-selection-list>
1315
<mat-divider></mat-divider>
1416
<button mat-menu-item (click)="openFormatsDialog()">Barcode formats</button>
@@ -19,7 +21,9 @@
1921
<mat-form-field appearance="fill">
2022
<mat-select [value]="deviceSelected" (valueChange)="onDeviceSelectChange($event)">
2123
<mat-option value="">No Device Selected</mat-option>
22-
<mat-option *ngFor="let device of availableDevices" [value]="device.deviceId">{{device.label}}</mat-option>
24+
@for (device of availableDevices; track device) {
25+
<mat-option [value]="device.deviceId">{{device.label}}</mat-option>
26+
}
2327
</mat-select>
2428
</mat-form-field>
2529
<button mat-icon-button [matMenuTriggerFor]="appMenu">
@@ -29,50 +33,41 @@
2933

3034
<zxing-scanner [torch]="torchEnabled" [device]="deviceCurrent" (deviceChange)="onDeviceChange($event)" (scanSuccess)="onCodeResult($event)"
3135
[formats]="formatsEnabled" [tryHarder]="tryHarder" (permissionResponse)="onHasPermission($event)"
32-
(camerasFound)="onCamerasFound($event)" (torchCompatible)="onTorchCompatible($event)"></zxing-scanner>
33-
34-
<section class="results" *ngIf="qrResultString">
35-
<div>
36-
<small>Result</small>
37-
<strong>{{ qrResultString }}</strong>
38-
</div>
39-
<button mat-icon-button (click)="clearResult()">&times;</button>
40-
</section>
36+
(camerasFound)="onCamerasFound($event)" (torchCompatible)="onTorchCompatible($event)"></zxing-scanner>
37+
38+
@if (qrResultString) {
39+
<section class="results">
40+
<div>
41+
<small>Result</small>
42+
<strong>{{ qrResultString }}</strong>
43+
</div>
44+
<button mat-icon-button (click)="clearResult()">&times;</button>
45+
</section>
46+
}
4147

4248
</div>
4349

44-
<ng-container *ngIf="hasPermission === undefined">
45-
50+
@if (hasPermission === undefined) {
4651
<h2>Waiting for permissions.</h2>
47-
4852
<blockquote>
4953
If your device does not has cameras, no permissions will be asked.
5054
</blockquote>
55+
}
5156

52-
</ng-container>
53-
54-
<ng-container *ngIf="hasPermission === false">
55-
57+
@if (hasPermission === false) {
5658
<h2>You denied the camera permission, we can't scan anything without it. 😪</h2>
59+
}
5760

58-
</ng-container>
59-
60-
<ng-container *ngIf="hasDevices === undefined">
61-
61+
@if (hasDevices === undefined) {
6262
<h2>Couldn't check for devices.</h2>
63-
6463
<blockquote>
6564
This may be caused by some security error.
6665
</blockquote>
66+
}
6767

68-
</ng-container>
69-
70-
<ng-container *ngIf="hasDevices === false">
71-
68+
@if (hasDevices === false) {
7269
<h2>No devices were found.</h2>
73-
7470
<blockquote>
7571
I believe your device has no media devices attached to.
7672
</blockquote>
77-
78-
</ng-container>
73+
}

‎projects/zxing-scanner-demo/src/app/formats-dialog/formats-dialog.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
</header>
44

55
<mat-selection-list #selectedFormats (selectionChange)="onSelectionChange($event)">
6-
<mat-list-option *ngFor="let format of formatsAvailable" [selected]="isEnabled(format)" [value]="format">
7-
{{ formatNames[format] }}
8-
</mat-list-option>
6+
@for (format of formatsAvailable; track format) {
7+
<mat-list-option [selected]="isEnabled(format)" [value]="format">
8+
{{ formatNames[format] }}
9+
</mat-list-option>
10+
}
911
</mat-selection-list>
1012

1113
<mat-dialog-actions>

‎projects/zxing-scanner-demo/src/main.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { enableProdMode } from '@angular/core';
2+
import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
33
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
44

55
import { AppModule } from './app/app.module';
@@ -9,5 +9,5 @@ if (environment.production) {
99
enableProdMode();
1010
}
1111

12-
platformBrowserDynamic().bootstrapModule(AppModule)
12+
platformBrowserDynamic().bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()], })
1313
.catch(err => console.error(err));

‎projects/zxing-scanner/package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
{
22
"name": "@zxing/ngx-scanner",
3-
"version": "20.0.0",
3+
"version": "21.0.0",
44
"description": "High-performance Angular barcode scanner component based on ZXing.",
55
"homepage": "https://github.com/zxing-js/ngx-scanner#readme",
66
"private": false,
77
"license": "MIT",
88
"peerDependencies": {
9-
"@angular/common": "^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
10-
"@angular/core": "^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
11-
"@angular/forms": "^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
9+
"@angular/common": "^21.0.0",
10+
"@angular/core": "^21.0.0",
11+
"@angular/forms": "^21.0.0",
1212
"@zxing/browser": "^0.1.4",
1313
"@zxing/library": "^0.21.0",
14-
"rxjs": "^6.6.3 || ^7.0.0"
14+
"rxjs": "^6.5.3 || ^7.4.0",
15+
"typescript": "^5.9.0"
1516
}
1617
}

‎projects/zxing-scanner/tsconfig.lib.json‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,13 @@
33
"compilerOptions": {
44
"outDir": "../../out-tsc/lib",
55
"module": "es2015",
6-
"moduleResolution": "node",
6+
"moduleResolution": "bundler",
77
"declaration": true,
88
"sourceMap": true,
99
"inlineSources": true,
1010
"experimentalDecorators": true,
1111
"importHelpers": true,
12-
"types": [],
13-
"lib": [
14-
"dom",
15-
"es2018"
16-
]
12+
"types": []
1713
},
1814
"angularCompilerOptions": {
1915
"skipTemplateCodegen": true,

0 commit comments

Comments
 (0)