ng-qrcode
Version:
Simple AOT compatible QR code generator for your Angular project.
272 lines (265 loc) • 12.2 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { isDevMode, Input, Directive, Component, NgModule } from '@angular/core';
import qrcode from 'qrcode';
const validColorRegex = /^#(?:[0-9a-fA-F]{3,4}){1,2}$/;
const validNumberRegex = /^[0-9.]+$/;
class QrCodeDirective {
static { this.DEFAULT_ERROR_CORRECTION_LEVEL = "M"; }
static { this.DEFAULT_CENTER_IMAGE_SIZE = 40; }
constructor(
// eslint-disable-next-line @angular-eslint/prefer-inject
viewContainerRef) {
this.viewContainerRef = viewContainerRef;
// eslint-disable-next-line @angular-eslint/no-input-rename
this.errorCorrectionLevel = QrCodeDirective.DEFAULT_ERROR_CORRECTION_LEVEL;
this.darkColor = "#000000FF";
this.lightColor = "#FFFFFFFF";
// eslint-disable-next-line @angular-eslint/no-input-rename
this.margin = 16;
}
async ngOnChanges() {
if (!this.value) {
return;
}
if (this.version && this.version > 40) {
console.warn("[qrCode] max version is 40, clamping");
this.version = 40;
}
else if (this.version && this.version < 1) {
console.warn("[qrCode] min version is 1, clamping");
this.version = 1;
}
else if (this.version !== undefined && isNaN(this.version)) {
console.warn("[qrCode] version should be set to a number, defaulting to auto");
this.version = undefined;
}
const canvas = this.viewContainerRef.element.nativeElement;
if (!canvas) {
// native element not available on server side rendering
return;
}
const context = canvas.getContext("2d");
if (context) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
}
const errorCorrectionLevel = this.errorCorrectionLevel ?? QrCodeDirective.DEFAULT_ERROR_CORRECTION_LEVEL;
const dark = this.darkColor && validColorRegex.test(this.darkColor) ? this.darkColor : undefined;
const light = this.lightColor && validColorRegex.test(this.lightColor) ? this.lightColor : undefined;
if (isDevMode()) {
if (!dark && this.darkColor) {
console.error("[ng-qrcode] darkColor set to invalid value, must be RGBA hex color string, eg: #3050A1FF");
}
if (!light && this.lightColor) {
console.error("[ng-qrcode] lightColor set to invalid value, must be RGBA hex color string, eg: #3050A130");
}
}
await qrcode
.toCanvas(canvas, this.value, {
version: this.version,
errorCorrectionLevel,
width: getOptionalInt(this.width),
margin: this.margin,
scale: this.qrScale,
maskPattern: this.qrCodeMaskPattern,
color: {
dark,
light,
},
});
const centerImageSrc = this.centerImageSrc;
const centerImageWidth = getIntOrDefault(this.centerImageWidth, QrCodeDirective.DEFAULT_CENTER_IMAGE_SIZE);
const centerImageHeight = getIntOrDefault(this.centerImageHeight, QrCodeDirective.DEFAULT_CENTER_IMAGE_SIZE);
if (centerImageSrc && context) {
if (!this.centerImage) {
this.centerImage = new Image(centerImageWidth, centerImageHeight);
}
const centerImage = this.centerImage;
if (centerImageSrc !== this.centerImage.src) {
centerImage.src = centerImageSrc;
}
if (centerImageWidth !== this.centerImage.width) {
centerImage.width = centerImageWidth;
}
if (centerImageHeight !== this.centerImage.height) {
centerImage.height = centerImageHeight;
}
const doDrawImage = () => {
context.drawImage(centerImage, canvas.width / 2 - centerImageWidth / 2, canvas.height / 2 - centerImageHeight / 2, centerImageWidth, centerImageHeight);
};
centerImage.onload = doDrawImage;
if (centerImage.complete) {
doDrawImage();
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QrCodeDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: QrCodeDirective, isStandalone: true, selector: "canvas[qrCode]", inputs: { value: ["qrCode", "value"], version: ["qrCodeVersion", "version"], errorCorrectionLevel: ["qrCodeErrorCorrectionLevel", "errorCorrectionLevel"], width: "width", height: "height", darkColor: "darkColor", lightColor: "lightColor", centerImageSrc: ["qrCodeCenterImageSrc", "centerImageSrc"], centerImageWidth: ["qrCodeCenterImageWidth", "centerImageWidth"], centerImageHeight: ["qrCodeCenterImageHeight", "centerImageHeight"], margin: ["qrCodeMargin", "margin"], qrScale: "qrScale", qrCodeMaskPattern: "qrCodeMaskPattern" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QrCodeDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line @angular-eslint/directive-selector
selector: `canvas[qrCode]`,
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { value: [{
type: Input,
args: ["qrCode"]
}], version: [{
type: Input,
args: ["qrCodeVersion"]
}], errorCorrectionLevel: [{
type: Input,
args: ["qrCodeErrorCorrectionLevel"]
}], width: [{
type: Input
}], height: [{
type: Input
}], darkColor: [{
type: Input
}], lightColor: [{
type: Input
}], centerImageSrc: [{
type: Input,
args: ["qrCodeCenterImageSrc"]
}], centerImageWidth: [{
type: Input,
args: ["qrCodeCenterImageWidth"]
}], centerImageHeight: [{
type: Input,
args: ["qrCodeCenterImageHeight"]
}], margin: [{
type: Input,
args: ["qrCodeMargin"]
}], qrScale: [{
type: Input
}], qrCodeMaskPattern: [{
type: Input
}] } });
function getOptionalInt(value) {
if (value === undefined || value === "") {
return undefined;
}
if (typeof value === "string") {
if (!validNumberRegex.test(value)) {
throw new Error(`'${value}' is not a valid number`);
}
return parseFloat(value);
}
return value;
}
function getIntOrDefault(value, defaultValue) {
if (value === undefined || value === "") {
return defaultValue;
}
return getOptionalInt(value);
}
class QrCodeComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QrCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: QrCodeComponent, isStandalone: true, selector: "qr-code", inputs: { value: "value", size: "size", style: "style", styleClass: "styleClass", darkColor: "darkColor", lightColor: "lightColor", errorCorrectionLevel: "errorCorrectionLevel", centerImageSrc: "centerImageSrc", centerImageSize: "centerImageSize", margin: "margin", scale: "scale", maskPattern: "maskPattern" }, ngImport: i0, template: `
(value) {
<canvas
[qrCode]="value"
[qrCodeErrorCorrectionLevel]="errorCorrectionLevel"
[qrCodeCenterImageSrc]="centerImageSrc"
[qrCodeCenterImageWidth]="centerImageSize"
[qrCodeCenterImageHeight]="centerImageSize"
[qrCodeMargin]="margin"
[qrScale]="scale"
[qrCodeMaskPattern]="maskPattern"
[width]="size"
[height]="size"
[class]="styleClass"
[ngStyle]="style"
[darkColor]="darkColor"
[lightColor]="lightColor"
>
</canvas>
}
`, isInline: true, dependencies: [{ kind: "directive", type: QrCodeDirective, selector: "canvas[qrCode]", inputs: ["qrCode", "qrCodeVersion", "qrCodeErrorCorrectionLevel", "width", "height", "darkColor", "lightColor", "qrCodeCenterImageSrc", "qrCodeCenterImageWidth", "qrCodeCenterImageHeight", "qrCodeMargin", "qrScale", "qrCodeMaskPattern"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QrCodeComponent, decorators: [{
type: Component,
args: [{ selector: "qr-code", template: `
(value) {
<canvas
[qrCode]="value"
[qrCodeErrorCorrectionLevel]="errorCorrectionLevel"
[qrCodeCenterImageSrc]="centerImageSrc"
[qrCodeCenterImageWidth]="centerImageSize"
[qrCodeCenterImageHeight]="centerImageSize"
[qrCodeMargin]="margin"
[qrScale]="scale"
[qrCodeMaskPattern]="maskPattern"
[width]="size"
[height]="size"
[class]="styleClass"
[ngStyle]="style"
[darkColor]="darkColor"
[lightColor]="lightColor"
>
</canvas>
}
`, standalone: true, imports: [QrCodeDirective, CommonModule] }]
}], propDecorators: { value: [{
type: Input
}], size: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], darkColor: [{
type: Input
}], lightColor: [{
type: Input
}], errorCorrectionLevel: [{
type: Input
}], centerImageSrc: [{
type: Input
}], centerImageSize: [{
type: Input
}], margin: [{
type: Input
}], scale: [{
type: Input
}], maskPattern: [{
type: Input
}] } });
/**
* @deprecated prefer importing `QrCodeComponent` or `QrCodeDirective` directly
*/
class QrCodeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QrCodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: QrCodeModule, imports: [CommonModule,
QrCodeComponent,
QrCodeDirective], exports: [QrCodeComponent,
QrCodeDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QrCodeModule, imports: [CommonModule,
QrCodeComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QrCodeModule, decorators: [{
type: NgModule,
args: [{
declarations: [],
imports: [
CommonModule,
QrCodeComponent,
QrCodeDirective,
],
exports: [
QrCodeComponent,
QrCodeDirective,
],
}]
}] });
/*
* Public API Surface of ng-qrcode
*/
/**
* Generated bundle index. Do not edit.
*/
export { QrCodeComponent, QrCodeDirective, QrCodeModule, getIntOrDefault, getOptionalInt };
//# sourceMappingURL=ng-qrcode.mjs.map