import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { isDevMode, Directive, Input, Component, NgModule } from '@angular/core';
import qrcode from 'qrcode';
const validColorRegex = /^#(?:[0-9a-fA-F]{3,4}){1,2}$/;
class QrCodeDirective {
static { this.DEFAULT_ERROR_CORRECTION_LEVEL = "M"; }
static { this.DEFAULT_CENTER_IMAGE_SIZE = 40; }
constructor(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 = validColorRegex.test(this.darkColor) ? this.darkColor : undefined;
const light = 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: this.width,
margin: this.margin,
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: "19.0.5", ngImport: i0, type: QrCodeDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", 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"] }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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"]
}] } });
function getIntOrDefault(value, defaultValue) {
if (value === undefined || value === "") {
return defaultValue;
}
if (typeof value === "string") {
return parseInt(value, 10);
}
return value;
}
class QrCodeComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: QrCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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" }, ngImport: i0, template: `
@if (value) {
}
`, isInline: true, dependencies: [{ kind: "directive", type: QrCodeDirective, selector: "canvas[qrCode]", inputs: ["qrCode", "qrCodeVersion", "qrCodeErrorCorrectionLevel", "width", "height", "darkColor", "lightColor", "qrCodeCenterImageSrc", "qrCodeCenterImageWidth", "qrCodeCenterImageHeight", "qrCodeMargin"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: QrCodeComponent, decorators: [{
type: Component,
args: [{ selector: "qr-code", template: `
@if (value) {
}
`, 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
}] } });
/**
* @deprecated prefer importing `QrCodeComponent` or `QrCodeDirective` directly
*/
class QrCodeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: QrCodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: QrCodeModule, imports: [CommonModule,
QrCodeComponent,
QrCodeDirective], exports: [QrCodeComponent,
QrCodeDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: QrCodeModule, imports: [CommonModule,
QrCodeComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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 };
//# sourceMappingURL=ng-qrcode.mjs.map