@qrcodesdk/angular 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/LICENSE +19 -0
- package/README.md +316 -0
- package/fesm2022/qrcodesdk-angular.mjs +129 -0
- package/fesm2022/qrcodesdk-angular.mjs.map +1 -0
- package/package.json +70 -0
- package/types/qrcodesdk-angular.d.ts +64 -0
package/CHANGELOG.md
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
Copyright (c) 2026 Dominik Dafert
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
5
|
+
in the Software without restriction, including without limitation the rights
|
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
8
|
+
furnished to do so, subject to the following conditions:
|
|
9
|
+
|
|
10
|
+
The above copyright notice and this permission notice shall be included in all
|
|
11
|
+
copies or substantial portions of the Software.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
19
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
<!-- Generated from apps/docs/src/content/docs/packages/angular.mdx. Run `pnpm --filter docs generate-readmes` to update. -->
|
|
2
|
+
|
|
3
|
+
<p align="center"><img src="https://qrcodesdk.dev/favicon.svg" alt="QRCodeSDK logo" width="240"></p>
|
|
4
|
+
|
|
5
|
+
# @qrcodesdk/angular
|
|
6
|
+
|
|
7
|
+
[](https://npmx.dev/@qrcodesdk/angular)    [](https://github.com/Dafnik/qrcodesdk/tree/main/packages/angular)
|
|
8
|
+
|
|
9
|
+
**[Live Demo](https://qrcodesdk.dev/playground/?package=angular)**
|
|
10
|
+
|
|
11
|
+
`@qrcodesdk/angular` provides Angular components for rendering QR codes as inline SVG, PNG-backed Image elements, and Canvas elements.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
pnpm add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
<details>
|
|
24
|
+
<summary>Other package managers</summary>
|
|
25
|
+
|
|
26
|
+
**vp**
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
vp add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**deno**
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
deno add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**bun**
|
|
39
|
+
|
|
40
|
+
```sh
|
|
41
|
+
bun add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**yarn**
|
|
45
|
+
|
|
46
|
+
```sh
|
|
47
|
+
yarn add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
</details>
|
|
51
|
+
|
|
52
|
+
## Quick start
|
|
53
|
+
|
|
54
|
+
Import the components directly where you need them:
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import {Component} from '@angular/core';
|
|
58
|
+
|
|
59
|
+
import {QRCodeCanvas, QRCodeImage, QRCodeSVG} from '@qrcodesdk/angular';
|
|
60
|
+
|
|
61
|
+
@Component({
|
|
62
|
+
selector: 'app-root',
|
|
63
|
+
imports: [QRCodeSVG, QRCodeImage, QRCodeCanvas],
|
|
64
|
+
template: `
|
|
65
|
+
<qrcode-svg data="https://qrcodesdk.dev" />
|
|
66
|
+
<qrcode-image data="https://qrcodesdk.dev" />
|
|
67
|
+
<qrcode-canvas data="https://qrcodesdk.dev" />
|
|
68
|
+
`,
|
|
69
|
+
})
|
|
70
|
+
export class App {}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Components
|
|
74
|
+
|
|
75
|
+
| Component | Selector | Output | Download support |
|
|
76
|
+
| -------------- | --------------- | ------------------ | ---------------- |
|
|
77
|
+
| `QRCodeSVG` | `qrcode-svg` | Inline SVG element | SVG |
|
|
78
|
+
| `QRCodeImage` | `qrcode-image` | PNG-backed `<img>` | PNG |
|
|
79
|
+
| `QRCodeCanvas` | `qrcode-canvas` | `<canvas>` element | None |
|
|
80
|
+
|
|
81
|
+
All components accept:
|
|
82
|
+
|
|
83
|
+
| Input | Type | Description |
|
|
84
|
+
| --------- | -------------------------- | ------------------------------------------- |
|
|
85
|
+
| `data` | `string \| number` | Required QR code payload. |
|
|
86
|
+
| `options` | Component-specific options | Optional matrix and renderer configuration. |
|
|
87
|
+
|
|
88
|
+
`options` supports shared matrix options such as `version`, `mode`, `errorCorrectionLevel`, and `mask`. Renderer options match the corresponding QRCodeSDK renderer:
|
|
89
|
+
|
|
90
|
+
- `QRCodeSVG` uses `QRCodeSVGOptions`.
|
|
91
|
+
- `QRCodeImage` uses `QRCodeImageOptions`.
|
|
92
|
+
- `QRCodeCanvas` uses `QRCodeCanvasOptions`.
|
|
93
|
+
|
|
94
|
+
Import `QRCodeSVGOptions` from `@qrcodesdk/core`. Import `QRCodeImageOptions` and `QRCodeCanvasOptions` from `@qrcodesdk/browser`.
|
|
95
|
+
|
|
96
|
+
## Matrix options
|
|
97
|
+
|
|
98
|
+
The `options` input combines the component's renderer options with the shared QR matrix options:
|
|
99
|
+
|
|
100
|
+
| Option | Type | Default | Description |
|
|
101
|
+
| ---------------------- | ---------------------------------------- | --------- | ----------------------- |
|
|
102
|
+
| `mode` | `'numeric' \| 'alphanumeric' \| 'octet'` | Automatic | Encoding mode. |
|
|
103
|
+
| `errorCorrectionLevel` | `'L' \| 'M' \| 'Q' \| 'H'` | `'M'` | Error correction level. |
|
|
104
|
+
| `version` | `1` through `40` | Automatic | Pins the QR version. |
|
|
105
|
+
| `mask` | `0` through `7` | Automatic | Pins the QR mask. |
|
|
106
|
+
|
|
107
|
+
Most applications should let the builder select the mode, version, and mask automatically.
|
|
108
|
+
|
|
109
|
+
## Live examples
|
|
110
|
+
|
|
111
|
+
### SVG component
|
|
112
|
+
|
|
113
|
+
```ts
|
|
114
|
+
import {Component} from '@angular/core';
|
|
115
|
+
|
|
116
|
+
import {QRCodeSVG} from '@qrcodesdk/angular';
|
|
117
|
+
|
|
118
|
+
@Component({
|
|
119
|
+
selector: 'qrcode-angular-svg-example',
|
|
120
|
+
imports: [QRCodeSVG],
|
|
121
|
+
template: `
|
|
122
|
+
<qrcode-svg
|
|
123
|
+
[options]="{
|
|
124
|
+
title: 'QR code for qrcodesdk.dev',
|
|
125
|
+
ariaLabel: 'Scan to open qrcodesdk.dev',
|
|
126
|
+
}"
|
|
127
|
+
data="https://qrcodesdk.dev" />
|
|
128
|
+
`,
|
|
129
|
+
})
|
|
130
|
+
export class QRCodeSVGExample {}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Image component
|
|
134
|
+
|
|
135
|
+
```ts
|
|
136
|
+
import {Component} from '@angular/core';
|
|
137
|
+
|
|
138
|
+
import {QRCodeImage} from '@qrcodesdk/angular';
|
|
139
|
+
import type {QRCodeImageOptions} from '@qrcodesdk/browser';
|
|
140
|
+
|
|
141
|
+
@Component({
|
|
142
|
+
selector: 'qrcode-angular-image-example',
|
|
143
|
+
imports: [QRCodeImage],
|
|
144
|
+
template: `
|
|
145
|
+
<qrcode-image [options]="options" data="https://qrcodesdk.dev" />
|
|
146
|
+
`,
|
|
147
|
+
})
|
|
148
|
+
export class QRCodeImageExample {
|
|
149
|
+
protected readonly options: QRCodeImageOptions = {
|
|
150
|
+
size: 8,
|
|
151
|
+
margin: 4,
|
|
152
|
+
alt: 'QR code for qrcodesdk.dev',
|
|
153
|
+
ariaLabel: 'Scan to open qrcodesdk.dev',
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Canvas component
|
|
159
|
+
|
|
160
|
+
```ts
|
|
161
|
+
import {Component} from '@angular/core';
|
|
162
|
+
|
|
163
|
+
import {QRCodeCanvas} from '@qrcodesdk/angular';
|
|
164
|
+
import type {QRCodeCanvasOptions} from '@qrcodesdk/browser';
|
|
165
|
+
|
|
166
|
+
@Component({
|
|
167
|
+
selector: 'qrcode-angular-canvas-example',
|
|
168
|
+
imports: [QRCodeCanvas],
|
|
169
|
+
template: `
|
|
170
|
+
<qrcode-canvas [options]="options" data="https://qrcodesdk.dev" />
|
|
171
|
+
`,
|
|
172
|
+
})
|
|
173
|
+
export class QRCodeCanvasExample {
|
|
174
|
+
protected readonly options: QRCodeCanvasOptions = {
|
|
175
|
+
size: 8,
|
|
176
|
+
margin: 4,
|
|
177
|
+
colors: {
|
|
178
|
+
colorDark: '#111827',
|
|
179
|
+
colorLight: '#ffffff',
|
|
180
|
+
},
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### PNG download
|
|
186
|
+
|
|
187
|
+
```ts
|
|
188
|
+
import {Component, viewChild} from '@angular/core';
|
|
189
|
+
|
|
190
|
+
import {QRCodeImage} from '@qrcodesdk/angular';
|
|
191
|
+
|
|
192
|
+
@Component({
|
|
193
|
+
selector: 'qrcode-angular-download-image-example',
|
|
194
|
+
imports: [QRCodeImage],
|
|
195
|
+
template: `
|
|
196
|
+
<div class="flex flex-col items-center">
|
|
197
|
+
<qrcode-image
|
|
198
|
+
#qrcode
|
|
199
|
+
[options]="{
|
|
200
|
+
alt: 'QR code for qrcodesdk.dev',
|
|
201
|
+
}"
|
|
202
|
+
data="https://qrcodesdk.dev" />
|
|
203
|
+
<button class="btn-primary" (click)="qrcode.download('qrcodesdk')" type="button">
|
|
204
|
+
Download PNG
|
|
205
|
+
</button>
|
|
206
|
+
</div>
|
|
207
|
+
`,
|
|
208
|
+
})
|
|
209
|
+
export class QRCodeDownloadImageExample {
|
|
210
|
+
private readonly qrCode = viewChild.required(QRCodeImage);
|
|
211
|
+
|
|
212
|
+
protected download() {
|
|
213
|
+
this.qrCode().download('qrcode.png');
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
## Renderer options
|
|
219
|
+
|
|
220
|
+
| Option | Components | Type | Default |
|
|
221
|
+
| ----------------------- | ---------- | ---------------------------- | -----------------: |
|
|
222
|
+
| `size` | All | `number` | `5` |
|
|
223
|
+
| `margin` | All | `number` | `4` |
|
|
224
|
+
| `colors.colorDark` | All | `string` | `'#000000'` |
|
|
225
|
+
| `colors.colorLight` | All | `string` | `'#ffffff'` |
|
|
226
|
+
| `dotsOptions` | All | `QRCodeDotsOptions` | `{type: 'square'}` |
|
|
227
|
+
| `cornersSquareOptions` | All | `QRCodeCornersSquareOptions` | `{type: 'square'}` |
|
|
228
|
+
| `cornersDotOptions` | All | `QRCodeCornersDotOptions` | `{type: 'square'}` |
|
|
229
|
+
| `alt` | SVG, Image | `string` | `undefined` |
|
|
230
|
+
| `ariaLabel` | SVG, Image | `string` | `undefined` |
|
|
231
|
+
| `title` | SVG, Image | `string` | `undefined` |
|
|
232
|
+
| `image.source` | All | Renderer-specific source | `undefined` |
|
|
233
|
+
| `image.size` | All | `number` | `0.4` |
|
|
234
|
+
| `image.padding` | All | `number` | `1` |
|
|
235
|
+
| `image.clearBackground` | All | `boolean` | `true` |
|
|
236
|
+
|
|
237
|
+
Color options use hash-prefixed values such as `#111827`. All built-in renderers require a positive safe integer `size` and a non-negative safe integer `margin`.
|
|
238
|
+
|
|
239
|
+
Module, finder-ring, and finder-center options pass through to every component. Their optional
|
|
240
|
+
colors independently inherit `colors.colorDark`.
|
|
241
|
+
|
|
242
|
+
### Prepared center images
|
|
243
|
+
|
|
244
|
+
Pass prepared data through the existing `options` input. For browser output, finish decoding and
|
|
245
|
+
only instantiate the component when the source is ready:
|
|
246
|
+
|
|
247
|
+
```ts
|
|
248
|
+
readonly logo = signal<HTMLImageElement | undefined>(undefined);
|
|
249
|
+
|
|
250
|
+
async selectLogo(file: File | undefined) {
|
|
251
|
+
if (!file) return;
|
|
252
|
+
|
|
253
|
+
const source = new Image();
|
|
254
|
+
const localUrl = URL.createObjectURL(file);
|
|
255
|
+
source.src = localUrl;
|
|
256
|
+
|
|
257
|
+
try {
|
|
258
|
+
await source.decode();
|
|
259
|
+
this.logo.set(source);
|
|
260
|
+
} finally {
|
|
261
|
+
URL.revokeObjectURL(localUrl);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
```angular-html
|
|
267
|
+
<input #logoInput (change)="selectLogo(logoInput.files?.[0])" accept="image/*" type="file" />
|
|
268
|
+
|
|
269
|
+
@if (logo(); as source) {
|
|
270
|
+
<qrcode-image
|
|
271
|
+
[options]="{errorCorrectionLevel: 'H', image: {source, size: 0.3}}"
|
|
272
|
+
data="https://qrcodesdk.dev" />
|
|
273
|
+
}
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
Use an embedded `data:image/...` URL for `QRCodeSVG`. Components never load paths or URLs
|
|
277
|
+
themselves, and SVG/PNG downloads include the overlay.
|
|
278
|
+
|
|
279
|
+
## Download files
|
|
280
|
+
|
|
281
|
+
- `QRCodeSVG` exposes `download(filename?)` and writes an SVG file.
|
|
282
|
+
- `QRCodeImage` exposes `download(filename?)` and writes a PNG file.
|
|
283
|
+
|
|
284
|
+
```angular-html
|
|
285
|
+
<qrcode-svg #qrcodeSvg data="https://qrcodesdk.dev" />
|
|
286
|
+
<button (click)="qrcodeSvg.download('qrcodesdk')" type="button">Download SVG</button>
|
|
287
|
+
|
|
288
|
+
<qrcode-image #qrcodeImage data="https://qrcodesdk.dev" />
|
|
289
|
+
<button (click)="qrcodeImage.download('qrcodesdk')" type="button">Download PNG</button>
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
The appropriate `.svg` or `.png` extension is appended when necessary.
|
|
293
|
+
|
|
294
|
+
`QRCodeCanvas` does not include a download method. Use `QRCodeImage` when you want built-in PNG download support.
|
|
295
|
+
|
|
296
|
+
## Server-side rendering
|
|
297
|
+
|
|
298
|
+
`QRCodeSVG` produces runtime-neutral SVG and can render on the server.
|
|
299
|
+
|
|
300
|
+
`QRCodeImage` and `QRCodeCanvas` rely on browser DOM and Canvas APIs, so they skip element creation and downloads outside the browser and populate their host after hydration.
|
|
301
|
+
|
|
302
|
+
## Public API
|
|
303
|
+
|
|
304
|
+
```ts
|
|
305
|
+
import {QRCodeCanvas, QRCodeImage, QRCodeSVG} from '@qrcodesdk/angular';
|
|
306
|
+
import type {QRCodeCanvasOptions, QRCodeImageOptions} from '@qrcodesdk/browser';
|
|
307
|
+
import type {QRCodeSVGOptions} from '@qrcodesdk/core';
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
## Documentation
|
|
311
|
+
|
|
312
|
+
- [@qrcodesdk/angular](https://qrcodesdk.dev/packages/angular/)
|
|
313
|
+
- [Customize QR Codes](https://qrcodesdk.dev/advanced/customize/)
|
|
314
|
+
- [Render SVG](https://qrcodesdk.dev/renderers/core/svg/)
|
|
315
|
+
- [Render to an Image Element](https://qrcodesdk.dev/renderers/browser/image/)
|
|
316
|
+
- [Render to Canvas](https://qrcodesdk.dev/renderers/browser/canvas/)
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { isPlatformBrowser } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, Renderer2, PLATFORM_ID, ElementRef, input, computed, effect, Component } from '@angular/core';
|
|
4
|
+
import { QRCodeCanvasRenderer, QRCodeImageRenderer, QRCodeDownloadImageRenderer, QRCodeDownloadSVGRenderer } from '@qrcodesdk/browser';
|
|
5
|
+
import { qrcode, QRCodeSVGRenderer } from '@qrcodesdk/core';
|
|
6
|
+
|
|
7
|
+
function replaceElementChildren(renderer, element, child) {
|
|
8
|
+
const nativeElement = element.nativeElement;
|
|
9
|
+
while (nativeElement.firstChild) {
|
|
10
|
+
renderer.removeChild(nativeElement, nativeElement.firstChild);
|
|
11
|
+
}
|
|
12
|
+
renderer.appendChild(nativeElement, child);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
class QRCodeCanvas {
|
|
16
|
+
renderer = inject(Renderer2);
|
|
17
|
+
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
18
|
+
qrcode = inject(ElementRef);
|
|
19
|
+
data = input.required(/* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
21
|
+
options = input(/* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
|
|
23
|
+
canvasRenderer = computed(() => QRCodeCanvasRenderer(this.options()), /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "canvasRenderer" }] : /* istanbul ignore next */ []));
|
|
25
|
+
qrcodeBuilder = computed(() => qrcode(this.data()).config(this.options()).renderer(this.canvasRenderer()), /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "qrcodeBuilder" }] : /* istanbul ignore next */ []));
|
|
27
|
+
constructor() {
|
|
28
|
+
effect(() => {
|
|
29
|
+
if (!this.isBrowser)
|
|
30
|
+
return;
|
|
31
|
+
const canvas = this.qrcodeBuilder().render();
|
|
32
|
+
replaceElementChildren(this.renderer, this.qrcode, canvas);
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: QRCodeCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: QRCodeCanvas, isStandalone: true, selector: "qrcode-canvas", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
37
|
+
}
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: QRCodeCanvas, decorators: [{
|
|
39
|
+
type: Component,
|
|
40
|
+
args: [{
|
|
41
|
+
selector: 'qrcode-canvas',
|
|
42
|
+
template: '',
|
|
43
|
+
}]
|
|
44
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
|
|
45
|
+
|
|
46
|
+
class QRCodeImage {
|
|
47
|
+
renderer = inject(Renderer2);
|
|
48
|
+
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
49
|
+
qrcode = inject(ElementRef);
|
|
50
|
+
data = input.required(/* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
52
|
+
options = input(/* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
|
|
54
|
+
imageRenderer = computed(() => QRCodeImageRenderer(this.options()), /* @ts-ignore */
|
|
55
|
+
...(ngDevMode ? [{ debugName: "imageRenderer" }] : /* istanbul ignore next */ []));
|
|
56
|
+
qrcodeBuilder = computed(() => qrcode(this.data()).config(this.options()).renderer(this.imageRenderer()), /* @ts-ignore */
|
|
57
|
+
...(ngDevMode ? [{ debugName: "qrcodeBuilder" }] : /* istanbul ignore next */ []));
|
|
58
|
+
constructor() {
|
|
59
|
+
effect(() => {
|
|
60
|
+
if (!this.isBrowser)
|
|
61
|
+
return;
|
|
62
|
+
const image = this.qrcodeBuilder().render();
|
|
63
|
+
replaceElementChildren(this.renderer, this.qrcode, image);
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
download(filename) {
|
|
67
|
+
if (!this.isBrowser)
|
|
68
|
+
return;
|
|
69
|
+
this.qrcodeBuilder().render(QRCodeDownloadImageRenderer({
|
|
70
|
+
renderer: this.imageRenderer(),
|
|
71
|
+
filename,
|
|
72
|
+
}));
|
|
73
|
+
}
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: QRCodeImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: QRCodeImage, isStandalone: true, selector: "qrcode-image", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
76
|
+
}
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: QRCodeImage, decorators: [{
|
|
78
|
+
type: Component,
|
|
79
|
+
args: [{
|
|
80
|
+
selector: 'qrcode-image',
|
|
81
|
+
template: '',
|
|
82
|
+
}]
|
|
83
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
|
|
84
|
+
|
|
85
|
+
class QRCodeSVG {
|
|
86
|
+
renderer = inject(Renderer2);
|
|
87
|
+
qrcode = inject(ElementRef);
|
|
88
|
+
data = input.required(/* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
90
|
+
options = input(/* @ts-ignore */
|
|
91
|
+
...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
|
|
92
|
+
svgRenderer = computed(() => QRCodeSVGRenderer(this.options()), /* @ts-ignore */
|
|
93
|
+
...(ngDevMode ? [{ debugName: "svgRenderer" }] : /* istanbul ignore next */ []));
|
|
94
|
+
qrcodeBuilder = computed(() => qrcode(this.data()).config(this.options()).renderer(this.svgRenderer()), /* @ts-ignore */
|
|
95
|
+
...(ngDevMode ? [{ debugName: "qrcodeBuilder" }] : /* istanbul ignore next */ []));
|
|
96
|
+
constructor() {
|
|
97
|
+
effect(() => {
|
|
98
|
+
const qrcodeBuilder = this.qrcodeBuilder();
|
|
99
|
+
const svg = qrcodeBuilder.render();
|
|
100
|
+
this.renderer.setProperty(this.qrcode.nativeElement, 'innerHTML', svg);
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
download(filename) {
|
|
104
|
+
this.qrcodeBuilder().render(QRCodeDownloadSVGRenderer({
|
|
105
|
+
renderer: this.svgRenderer(),
|
|
106
|
+
filename,
|
|
107
|
+
}));
|
|
108
|
+
}
|
|
109
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: QRCodeSVG, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: QRCodeSVG, isStandalone: true, selector: "qrcode-svg", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
111
|
+
}
|
|
112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: QRCodeSVG, decorators: [{
|
|
113
|
+
type: Component,
|
|
114
|
+
args: [{
|
|
115
|
+
selector: 'qrcode-svg',
|
|
116
|
+
template: '',
|
|
117
|
+
}]
|
|
118
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
|
|
119
|
+
|
|
120
|
+
/*
|
|
121
|
+
* Public API Surface of angular
|
|
122
|
+
*/
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Generated bundle index. Do not edit.
|
|
126
|
+
*/
|
|
127
|
+
|
|
128
|
+
export { QRCodeCanvas, QRCodeImage, QRCodeSVG };
|
|
129
|
+
//# sourceMappingURL=qrcodesdk-angular.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qrcodesdk-angular.mjs","sources":["../../../src/lib/render-element.ts","../../../src/lib/QRCodeCanvas.ts","../../../src/lib/QRCodeImage.ts","../../../src/lib/QRCodeSVG.ts","../../../src/public-api.ts","../../../src/qrcodesdk-angular.ts"],"sourcesContent":["import type {ElementRef, Renderer2} from '@angular/core';\n\nexport function replaceElementChildren<TElement extends HTMLElement>(\n renderer: Renderer2,\n element: ElementRef<TElement>,\n child: Element,\n): void {\n const nativeElement = element.nativeElement;\n\n while (nativeElement.firstChild) {\n renderer.removeChild(nativeElement, nativeElement.firstChild);\n }\n\n renderer.appendChild(nativeElement, child);\n}\n","import {isPlatformBrowser} from '@angular/common';\nimport {\n Component,\n ElementRef,\n PLATFORM_ID,\n Renderer2,\n computed,\n effect,\n inject,\n input,\n} from '@angular/core';\n\nimport {type QRCodeCanvasOptions, QRCodeCanvasRenderer} from '@qrcodesdk/browser';\nimport {type QRCodeInputData, qrcode} from '@qrcodesdk/core';\n\nimport {replaceElementChildren} from './render-element';\n\n@Component({\n selector: 'qrcode-canvas',\n template: '',\n})\nexport class QRCodeCanvas {\n private readonly renderer = inject(Renderer2);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n private readonly qrcode = inject(ElementRef);\n\n data = input.required<QRCodeInputData>();\n\n options = input<QRCodeCanvasOptions>();\n\n readonly canvasRenderer = computed(() => QRCodeCanvasRenderer(this.options()));\n\n readonly qrcodeBuilder = computed(() =>\n qrcode(this.data()).config(this.options()).renderer(this.canvasRenderer()),\n );\n\n constructor() {\n effect(() => {\n if (!this.isBrowser) return;\n\n const canvas = this.qrcodeBuilder().render();\n\n replaceElementChildren(this.renderer, this.qrcode, canvas);\n });\n }\n}\n","import {isPlatformBrowser} from '@angular/common';\nimport {\n Component,\n ElementRef,\n PLATFORM_ID,\n Renderer2,\n computed,\n effect,\n inject,\n input,\n} from '@angular/core';\n\nimport {\n QRCodeDownloadImageRenderer,\n type QRCodeImageOptions,\n QRCodeImageRenderer,\n} from '@qrcodesdk/browser';\nimport {type QRCodeInputData, qrcode} from '@qrcodesdk/core';\n\nimport {replaceElementChildren} from './render-element';\n\n@Component({\n selector: 'qrcode-image',\n template: '',\n})\nexport class QRCodeImage {\n private readonly renderer = inject(Renderer2);\n private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n private readonly qrcode = inject(ElementRef);\n\n data = input.required<QRCodeInputData>();\n\n options = input<QRCodeImageOptions>();\n\n readonly imageRenderer = computed(() => QRCodeImageRenderer(this.options()));\n\n readonly qrcodeBuilder = computed(() =>\n qrcode(this.data()).config(this.options()).renderer(this.imageRenderer()),\n );\n\n constructor() {\n effect(() => {\n if (!this.isBrowser) return;\n\n const image = this.qrcodeBuilder().render();\n\n replaceElementChildren(this.renderer, this.qrcode, image);\n });\n }\n\n public download(filename?: string): void {\n if (!this.isBrowser) return;\n\n this.qrcodeBuilder().render(\n QRCodeDownloadImageRenderer({\n renderer: this.imageRenderer(),\n filename,\n }),\n );\n }\n}\n","import {Component, ElementRef, Renderer2, computed, effect, inject, input} from '@angular/core';\n\nimport {QRCodeDownloadSVGRenderer} from '@qrcodesdk/browser';\nimport {\n type QRCodeInputData,\n type QRCodeSVGOptions,\n QRCodeSVGRenderer,\n qrcode,\n} from '@qrcodesdk/core';\n\n@Component({\n selector: 'qrcode-svg',\n template: '',\n})\nexport class QRCodeSVG {\n private readonly renderer = inject(Renderer2);\n private readonly qrcode = inject(ElementRef);\n\n data = input.required<QRCodeInputData>();\n\n options = input<QRCodeSVGOptions>();\n\n readonly svgRenderer = computed(() => QRCodeSVGRenderer(this.options()));\n\n readonly qrcodeBuilder = computed(() =>\n qrcode(this.data()).config(this.options()).renderer(this.svgRenderer()),\n );\n\n constructor() {\n effect(() => {\n const qrcodeBuilder = this.qrcodeBuilder();\n const svg = qrcodeBuilder.render();\n\n this.renderer.setProperty(this.qrcode.nativeElement, 'innerHTML', svg);\n });\n }\n\n public download(filename?: string): void {\n this.qrcodeBuilder().render(\n QRCodeDownloadSVGRenderer({\n renderer: this.svgRenderer(),\n filename,\n }),\n );\n }\n}\n","/*\n * Public API Surface of angular\n */\n\nexport * from './lib/QRCodeCanvas';\nexport * from './lib/QRCodeImage';\nexport * from './lib/QRCodeSVG';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@qrcodesdk/angular",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "@qrcodesdk/angular provides standalone Angular components for rendering QR codes as SVG, PNG-backed image elements, and canvas elements.",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"private": false,
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"author": {
|
|
9
|
+
"name": "Dafnik",
|
|
10
|
+
"email": "contact@dafnik.me",
|
|
11
|
+
"url": "https://dafnik.me"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"typescript",
|
|
15
|
+
"types",
|
|
16
|
+
"qr-code",
|
|
17
|
+
"qrcode",
|
|
18
|
+
"qr",
|
|
19
|
+
"code",
|
|
20
|
+
"esm",
|
|
21
|
+
"modules",
|
|
22
|
+
"module"
|
|
23
|
+
],
|
|
24
|
+
"homepage": "https://qrcodesdk.dev/packages/angular",
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "git@github.com:Dafnik/qrcodesdk.git",
|
|
28
|
+
"directory": "packages/angular"
|
|
29
|
+
},
|
|
30
|
+
"bugs": {
|
|
31
|
+
"url": "https://github.com/Dafnik/qrcodesdk/issues"
|
|
32
|
+
},
|
|
33
|
+
"funding": [
|
|
34
|
+
{
|
|
35
|
+
"type": "github",
|
|
36
|
+
"url": "https://github.com/sponsors/Dafnik"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"type": "liberapay",
|
|
40
|
+
"url": "https://liberapay.com/Dafnik"
|
|
41
|
+
}
|
|
42
|
+
],
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public",
|
|
45
|
+
"directory": "dist/angular",
|
|
46
|
+
"provenance": true
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"@angular/common": "^22.0.0",
|
|
50
|
+
"@angular/core": "^22.0.0",
|
|
51
|
+
"rxjs": "^7.0.0",
|
|
52
|
+
"@qrcodesdk/core": "^0.0.1",
|
|
53
|
+
"@qrcodesdk/browser": "^0.0.1"
|
|
54
|
+
},
|
|
55
|
+
"dependencies": {
|
|
56
|
+
"tslib": "^2.3.0"
|
|
57
|
+
},
|
|
58
|
+
"module": "fesm2022/qrcodesdk-angular.mjs",
|
|
59
|
+
"typings": "types/qrcodesdk-angular.d.ts",
|
|
60
|
+
"exports": {
|
|
61
|
+
"./package.json": {
|
|
62
|
+
"default": "./package.json"
|
|
63
|
+
},
|
|
64
|
+
".": {
|
|
65
|
+
"types": "./types/qrcodesdk-angular.d.ts",
|
|
66
|
+
"default": "./fesm2022/qrcodesdk-angular.mjs"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"type": "module"
|
|
70
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import * as _qrcodesdk_core from '@qrcodesdk/core';
|
|
2
|
+
import { QRCodeInputData, QRCodeSVGOptions } from '@qrcodesdk/core';
|
|
3
|
+
import * as _angular_core from '@angular/core';
|
|
4
|
+
import { QRCodeCanvasOptions, QRCodeImageOptions } from '@qrcodesdk/browser';
|
|
5
|
+
|
|
6
|
+
declare class QRCodeCanvas {
|
|
7
|
+
private readonly renderer;
|
|
8
|
+
private readonly isBrowser;
|
|
9
|
+
private readonly qrcode;
|
|
10
|
+
data: _angular_core.InputSignal<QRCodeInputData>;
|
|
11
|
+
options: _angular_core.InputSignal<QRCodeCanvasOptions | undefined>;
|
|
12
|
+
readonly canvasRenderer: _angular_core.Signal<_qrcodesdk_core.QRCodeRenderer<HTMLCanvasElement>>;
|
|
13
|
+
readonly qrcodeBuilder: _angular_core.Signal<_qrcodesdk_core.QRCodeBuilder<{
|
|
14
|
+
readonly hasData: true;
|
|
15
|
+
readonly _data: QRCodeInputData;
|
|
16
|
+
}, {
|
|
17
|
+
readonly hasRenderer: true;
|
|
18
|
+
readonly output: HTMLCanvasElement;
|
|
19
|
+
}>>;
|
|
20
|
+
constructor();
|
|
21
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<QRCodeCanvas, never>;
|
|
22
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<QRCodeCanvas, "qrcode-canvas", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
declare class QRCodeImage {
|
|
26
|
+
private readonly renderer;
|
|
27
|
+
private readonly isBrowser;
|
|
28
|
+
private readonly qrcode;
|
|
29
|
+
data: _angular_core.InputSignal<QRCodeInputData>;
|
|
30
|
+
options: _angular_core.InputSignal<QRCodeImageOptions | undefined>;
|
|
31
|
+
readonly imageRenderer: _angular_core.Signal<_qrcodesdk_core.QRCodeRenderer<HTMLImageElement>>;
|
|
32
|
+
readonly qrcodeBuilder: _angular_core.Signal<_qrcodesdk_core.QRCodeBuilder<{
|
|
33
|
+
readonly hasData: true;
|
|
34
|
+
readonly _data: QRCodeInputData;
|
|
35
|
+
}, {
|
|
36
|
+
readonly hasRenderer: true;
|
|
37
|
+
readonly output: HTMLImageElement;
|
|
38
|
+
}>>;
|
|
39
|
+
constructor();
|
|
40
|
+
download(filename?: string): void;
|
|
41
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<QRCodeImage, never>;
|
|
42
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<QRCodeImage, "qrcode-image", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
declare class QRCodeSVG {
|
|
46
|
+
private readonly renderer;
|
|
47
|
+
private readonly qrcode;
|
|
48
|
+
data: _angular_core.InputSignal<QRCodeInputData>;
|
|
49
|
+
options: _angular_core.InputSignal<QRCodeSVGOptions | undefined>;
|
|
50
|
+
readonly svgRenderer: _angular_core.Signal<_qrcodesdk_core.QRCodeRenderer<string>>;
|
|
51
|
+
readonly qrcodeBuilder: _angular_core.Signal<_qrcodesdk_core.QRCodeBuilder<{
|
|
52
|
+
readonly hasData: true;
|
|
53
|
+
readonly _data: QRCodeInputData;
|
|
54
|
+
}, {
|
|
55
|
+
readonly hasRenderer: true;
|
|
56
|
+
readonly output: string;
|
|
57
|
+
}>>;
|
|
58
|
+
constructor();
|
|
59
|
+
download(filename?: string): void;
|
|
60
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<QRCodeSVG, never>;
|
|
61
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<QRCodeSVG, "qrcode-svg", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export { QRCodeCanvas, QRCodeImage, QRCodeSVG };
|