Icard/angular-clarity-master(work.../node_modules/angularx-qrcode/fesm2022/angularx-qrcode.mjs

289 lines
13 KiB
JavaScript
Raw Normal View History

2024-07-16 14:55:36 +00:00
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
import { toDataURL, toCanvas, toString } from 'qrcode';
import * as i1 from '@angular/platform-browser';
class QRCodeComponent {
constructor(renderer, sanitizer) {
this.renderer = renderer;
this.sanitizer = sanitizer;
this.allowEmptyString = false;
this.colorDark = "#000000ff";
this.colorLight = "#ffffffff";
this.cssClass = "qrcode";
this.elementType = "canvas";
this.errorCorrectionLevel = "M";
this.margin = 4;
this.qrdata = "";
this.scale = 4;
this.width = 10;
this.qrCodeURL = new EventEmitter();
this.context = null;
}
async ngOnChanges() {
await this.createQRCode();
}
isValidQrCodeText(data) {
if (this.allowEmptyString === false) {
return !(typeof data === "undefined" ||
data === "" ||
data === "null" ||
data === null);
}
return !(typeof data === "undefined");
}
toDataURL(qrCodeConfig) {
return new Promise((resolve, reject) => {
toDataURL(this.qrdata, qrCodeConfig, (err, url) => {
if (err) {
reject(err);
}
else {
resolve(url);
}
});
});
}
toCanvas(canvas, qrCodeConfig) {
return new Promise((resolve, reject) => {
toCanvas(canvas, this.qrdata, qrCodeConfig, (error) => {
if (error) {
reject(error);
}
else {
resolve("success");
}
});
});
}
toSVG(qrCodeConfig) {
return new Promise((resolve, reject) => {
toString(this.qrdata, qrCodeConfig, (err, url) => {
if (err) {
reject(err);
}
else {
resolve(url);
}
});
});
}
renderElement(element) {
for (const node of this.qrcElement.nativeElement.childNodes) {
this.renderer.removeChild(this.qrcElement.nativeElement, node);
}
this.renderer.appendChild(this.qrcElement.nativeElement, element);
}
async createQRCode() {
if (this.version && this.version > 40) {
console.warn("[angularx-qrcode] max value for `version` is 40");
this.version = 40;
}
else if (this.version && this.version < 1) {
console.warn("[angularx-qrcode]`min value for `version` is 1");
this.version = 1;
}
else if (this.version !== undefined && isNaN(this.version)) {
console.warn("[angularx-qrcode] version should be a number, defaulting to auto.");
this.version = undefined;
}
try {
if (!this.isValidQrCodeText(this.qrdata)) {
throw new Error("[angularx-qrcode] Field `qrdata` is empty, set 'allowEmptyString=\"true\"' to overwrite this behaviour.");
}
if (this.isValidQrCodeText(this.qrdata) && this.qrdata === "") {
this.qrdata = " ";
}
const config = {
color: {
dark: this.colorDark,
light: this.colorLight,
},
errorCorrectionLevel: this.errorCorrectionLevel,
margin: this.margin,
scale: this.scale,
version: this.version,
width: this.width,
};
const centerImageSrc = this.imageSrc;
const centerImageHeight = this.imageHeight || 40;
const centerImageWidth = this.imageWidth || 40;
switch (this.elementType) {
case "canvas": {
const canvasElement = this.renderer.createElement("canvas");
this.context = canvasElement.getContext("2d");
this.toCanvas(canvasElement, config)
.then(() => {
if (this.ariaLabel) {
this.renderer.setAttribute(canvasElement, "aria-label", `${this.ariaLabel}`);
}
if (this.title) {
this.renderer.setAttribute(canvasElement, "title", `${this.title}`);
}
if (centerImageSrc && this.context) {
this.centerImage = new Image(centerImageWidth, centerImageHeight);
if (centerImageSrc !== this.centerImage.src) {
this.centerImage.src = centerImageSrc;
}
if (centerImageHeight !== this.centerImage.height) {
this.centerImage.height = centerImageHeight;
}
if (centerImageWidth !== this.centerImage.width) {
this.centerImage.width = centerImageWidth;
}
const centerImage = this.centerImage;
if (centerImage) {
centerImage.onload = () => {
this.context?.drawImage(centerImage, canvasElement.width / 2 - centerImageWidth / 2, canvasElement.height / 2 - centerImageHeight / 2, centerImageWidth, centerImageHeight);
};
}
}
this.renderElement(canvasElement);
this.emitQRCodeURL(canvasElement);
})
.catch((e) => {
console.error("[angularx-qrcode] canvas error:", e);
});
break;
}
case "svg": {
const svgParentElement = this.renderer.createElement("div");
this.toSVG(config)
.then((svgString) => {
this.renderer.setProperty(svgParentElement, "innerHTML", svgString);
const svgElement = svgParentElement.firstChild;
this.renderer.setAttribute(svgElement, "height", `${this.width}`);
this.renderer.setAttribute(svgElement, "width", `${this.width}`);
this.renderElement(svgElement);
this.emitQRCodeURL(svgElement);
})
.catch((e) => {
console.error("[angularx-qrcode] svg error:", e);
});
break;
}
case "url":
case "img":
default: {
const imgElement = this.renderer.createElement("img");
this.toDataURL(config)
.then((dataUrl) => {
if (this.alt) {
imgElement.setAttribute("alt", this.alt);
}
if (this.ariaLabel) {
imgElement.setAttribute("aria-label", this.ariaLabel);
}
imgElement.setAttribute("src", dataUrl);
if (this.title) {
imgElement.setAttribute("title", this.title);
}
this.renderElement(imgElement);
this.emitQRCodeURL(imgElement);
})
.catch((e) => {
console.error("[angularx-qrcode] img/url error:", e);
});
}
}
}
catch (e) {
console.error("[angularx-qrcode] Error generating QR Code:", e.message);
}
}
emitQRCodeURL(element) {
const className = element.constructor.name;
if (className === SVGSVGElement.name) {
const svgHTML = element.outerHTML;
const blob = new Blob([svgHTML], { type: "image/svg+xml" });
const urlSvg = URL.createObjectURL(blob);
const urlSanitized = this.sanitizer.bypassSecurityTrustUrl(urlSvg);
this.qrCodeURL.emit(urlSanitized);
return;
}
let urlImage = "";
if (className === HTMLCanvasElement.name) {
urlImage = element.toDataURL("image/png");
}
if (className === HTMLImageElement.name) {
urlImage = element.src;
}
fetch(urlImage)
.then((urlResponse) => urlResponse.blob())
.then((blob) => URL.createObjectURL(blob))
.then((url) => this.sanitizer.bypassSecurityTrustUrl(url))
.then((urlSanitized) => {
this.qrCodeURL.emit(urlSanitized);
})
.catch((error) => {
console.error("[angularx-qrcode] Error when fetching image/png URL: " + error);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: QRCodeComponent, deps: [{ token: i0.Renderer2 }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: QRCodeComponent, selector: "qrcode", inputs: { allowEmptyString: "allowEmptyString", colorDark: "colorDark", colorLight: "colorLight", cssClass: "cssClass", elementType: "elementType", errorCorrectionLevel: "errorCorrectionLevel", imageSrc: "imageSrc", imageHeight: "imageHeight", imageWidth: "imageWidth", margin: "margin", qrdata: "qrdata", scale: "scale", version: "version", width: "width", alt: "alt", ariaLabel: "ariaLabel", title: "title" }, outputs: { qrCodeURL: "qrCodeURL" }, viewQueries: [{ propertyName: "qrcElement", first: true, predicate: ["qrcElement"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #qrcElement [class]="cssClass"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: QRCodeComponent, decorators: [{
type: Component,
args: [{
selector: "qrcode",
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div #qrcElement [class]="cssClass"></div>`,
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.DomSanitizer }]; }, propDecorators: { allowEmptyString: [{
type: Input
}], colorDark: [{
type: Input
}], colorLight: [{
type: Input
}], cssClass: [{
type: Input
}], elementType: [{
type: Input
}], errorCorrectionLevel: [{
type: Input
}], imageSrc: [{
type: Input
}], imageHeight: [{
type: Input
}], imageWidth: [{
type: Input
}], margin: [{
type: Input
}], qrdata: [{
type: Input
}], scale: [{
type: Input
}], version: [{
type: Input
}], width: [{
type: Input
}], alt: [{
type: Input
}], ariaLabel: [{
type: Input
}], title: [{
type: Input
}], qrCodeURL: [{
type: Output
}], qrcElement: [{
type: ViewChild,
args: ["qrcElement", { static: true }]
}] } });
class QRCodeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: QRCodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.6", ngImport: i0, type: QRCodeModule, declarations: [QRCodeComponent], exports: [QRCodeComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: QRCodeModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: QRCodeModule, decorators: [{
type: NgModule,
args: [{
providers: [],
declarations: [QRCodeComponent],
exports: [QRCodeComponent],
}]
}] });
export { QRCodeComponent, QRCodeModule };
//# sourceMappingURL=angularx-qrcode.mjs.map