UNPKG

@jonyadamit/ngx-qrcode-ivy

Version:

An Angular component for generating QRCodes

123 lines 14.1 kB
import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core'; import QRCode from 'qrcode'; import { NgxQrcodeElementTypes } from './qrcode.types'; import { DEFAULT_VALUES } from './qrcode.constants'; import * as i0 from "@angular/core"; export class QrcodeComponent { constructor(renderer) { this.renderer = renderer; this.elementType = DEFAULT_VALUES.elementType; this.cssClass = DEFAULT_VALUES.cssClass; this.value = DEFAULT_VALUES.value; this.version = DEFAULT_VALUES.version; this.errorCorrectionLevel = DEFAULT_VALUES.errorCorrectionLevel; this.margin = DEFAULT_VALUES.margin; this.scale = DEFAULT_VALUES.scale; this.width = DEFAULT_VALUES.width; this.colorDark = DEFAULT_VALUES.colorDark; this.colorLight = DEFAULT_VALUES.colorLight; } ngOnChanges() { this.createQRCode(); } createQRCode() { if (!this.value) { return; } let element; switch (this.elementType) { case NgxQrcodeElementTypes.CANVAS: element = this.renderer.createElement('canvas'); this.toCanvas(element).then(() => { this.renderElement(element); }).catch(e => { this.removeElementChildren(); console.error(e); }); break; default: element = this.renderer.createElement('img'); this.toDataURL().then((src) => { element.setAttribute('src', src); if (this.alt) { element.setAttribute('alt', this.alt); } this.renderElement(element); }).catch(e => { this.removeElementChildren(); console.error(e); }); } } toDataURL() { return QRCode.toDataURL(this.value, { version: this.version, errorCorrectionLevel: this.errorCorrectionLevel, margin: this.margin, scale: this.scale, width: this.width, color: { dark: this.colorDark, light: this.colorLight } }); } toCanvas(canvas) { return QRCode.toCanvas(canvas, this.value, { version: this.version, errorCorrectionLevel: this.errorCorrectionLevel, margin: this.margin, scale: this.scale, width: this.width, color: { dark: this.colorDark, light: this.colorLight } }); } renderElement(element) { this.removeElementChildren(); this.renderer.appendChild(this.qrcElement.nativeElement, element); } removeElementChildren() { for (const node of this.qrcElement.nativeElement.childNodes) { this.renderer.removeChild(this.qrcElement.nativeElement, node); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: QrcodeComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: QrcodeComponent, selector: "ngx-qrcode", inputs: { elementType: "elementType", cssClass: "cssClass", alt: "alt", value: "value", version: "version", errorCorrectionLevel: "errorCorrectionLevel", margin: "margin", scale: "scale", width: "width", colorDark: "colorDark", colorLight: "colorLight" }, viewQueries: [{ propertyName: "qrcElement", first: true, predicate: ["qrcElement"], descendants: 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.1", ngImport: i0, type: QrcodeComponent, decorators: [{ type: Component, args: [{ selector: 'ngx-qrcode', template: `<div #qrcElement [class]="cssClass"></div>`, changeDetection: ChangeDetectionStrategy.OnPush }] }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { elementType: [{ type: Input }], cssClass: [{ type: Input }], alt: [{ type: Input }], value: [{ type: Input }], version: [{ type: Input }], errorCorrectionLevel: [{ type: Input }], margin: [{ type: Input }], scale: [{ type: Input }], width: [{ type: Input }], colorDark: [{ type: Input }], colorLight: [{ type: Input }], qrcElement: [{ type: ViewChild, args: ['qrcElement'] }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXJjb2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1xcmNvZGUvc3JjL2xpYi9xcmNvZGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUF3QixTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFdkgsT0FBTyxNQUFNLE1BQU0sUUFBUSxDQUFDO0FBRTVCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7QUFPcEQsTUFBTSxPQUFPLGVBQWU7SUFnQjFCLFlBQW9CLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7UUFkOUIsZ0JBQVcsR0FBRyxjQUFjLENBQUMsV0FBVyxDQUFDO1FBQ3pDLGFBQVEsR0FBRyxjQUFjLENBQUMsUUFBUSxDQUFDO1FBRW5DLFVBQUssR0FBRyxjQUFjLENBQUMsS0FBSyxDQUFDO1FBQzdCLFlBQU8sR0FBRyxjQUFjLENBQUMsT0FBTyxDQUFDO1FBQ2pDLHlCQUFvQixHQUFHLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQztRQUMzRCxXQUFNLEdBQUcsY0FBYyxDQUFDLE1BQU0sQ0FBQztRQUMvQixVQUFLLEdBQUcsY0FBYyxDQUFDLEtBQUssQ0FBQztRQUM3QixVQUFLLEdBQUcsY0FBYyxDQUFDLEtBQUssQ0FBQztRQUM3QixjQUFTLEdBQUcsY0FBYyxDQUFDLFNBQVMsQ0FBQztRQUNyQyxlQUFVLEdBQUcsY0FBYyxDQUFDLFVBQVUsQ0FBQztJQUtoRCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2YsT0FBTztTQUNSO1FBRUQsSUFBSSxPQUFnQixDQUFDO1FBRXJCLFFBQVEsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUV4QixLQUFLLHFCQUFxQixDQUFDLE1BQU07Z0JBQy9CLE9BQU8sR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDaEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFO29CQUMvQixJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO2dCQUM5QixDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUU7b0JBQ1gsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7b0JBQzdCLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQ25CLENBQUMsQ0FBQyxDQUFDO2dCQUNILE1BQU07WUFDUjtnQkFDRSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQzdDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxHQUFXLEVBQUUsRUFBRTtvQkFDcEMsT0FBTyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLENBQUM7b0JBQ2pDLElBQUksSUFBSSxDQUFDLEdBQUcsRUFBRTt3QkFDWixPQUFPLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7cUJBQ3ZDO29CQUNELElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7Z0JBQzlCLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRTtvQkFDWCxJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztvQkFDN0IsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDbkIsQ0FBQyxDQUFDLENBQUM7U0FDTjtJQUNILENBQUM7SUFFTyxTQUFTO1FBQ2YsT0FBTyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQ2hDO1lBQ0UsT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPO1lBQ3JCLG9CQUFvQixFQUFFLElBQUksQ0FBQyxvQkFBb0I7WUFDL0MsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO1lBQ25CLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSztZQUNqQixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUs7WUFDakIsS0FBSyxFQUFFO2dCQUNMLElBQUksRUFBRSxJQUFJLENBQUMsU0FBUztnQkFDcEIsS0FBSyxFQUFFLElBQUksQ0FBQyxVQUFVO2FBQ3ZCO1NBQ0YsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVPLFFBQVEsQ0FBQyxNQUFNO1FBQ3JCLE9BQU8sTUFBTSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUN6QyxPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU87WUFDckIsb0JBQW9CLEVBQUUsSUFBSSxDQUFDLG9CQUFvQjtZQUMvQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07WUFDbkIsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO1lBQ2pCLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSztZQUNqQixLQUFLLEVBQUU7Z0JBQ0wsSUFBSSxFQUFFLElBQUksQ0FBQyxTQUFTO2dCQUNwQixLQUFLLEVBQUUsSUFBSSxDQUFDLFVBQVU7YUFDdkI7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU8sYUFBYSxDQUFDLE9BQU87UUFDM0IsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7UUFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsT0FBTyxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVPLHFCQUFxQjtRQUMzQixLQUFLLE1BQU0sSUFBSSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFVBQVUsRUFBRTtZQUMzRCxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsQ0FBQztTQUNoRTtJQUNILENBQUM7OEdBOUZVLGVBQWU7a0dBQWYsZUFBZSxpYkFIaEIsNENBQTRDOzsyRkFHM0MsZUFBZTtrQkFMM0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtvQkFDdEIsUUFBUSxFQUFFLDRDQUE0QztvQkFDdEQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQ2hEO2dHQUdVLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxvQkFBb0I7c0JBQTVCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVtQixVQUFVO3NCQUFsQyxTQUFTO3VCQUFDLFlBQVkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT25DaGFuZ2VzLCBSZW5kZXJlcjIsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IFFSQ29kZSBmcm9tICdxcmNvZGUnO1xyXG5cclxuaW1wb3J0IHsgTmd4UXJjb2RlRWxlbWVudFR5cGVzIH0gZnJvbSAnLi9xcmNvZGUudHlwZXMnO1xyXG5pbXBvcnQgeyBERUZBVUxUX1ZBTFVFUyB9IGZyb20gJy4vcXJjb2RlLmNvbnN0YW50cyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1xcmNvZGUnLFxyXG4gIHRlbXBsYXRlOiBgPGRpdiAjcXJjRWxlbWVudCBbY2xhc3NdPVwiY3NzQ2xhc3NcIj48L2Rpdj5gLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBRcmNvZGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG5cclxuICBASW5wdXQoKSBlbGVtZW50VHlwZSA9IERFRkFVTFRfVkFMVUVTLmVsZW1lbnRUeXBlO1xyXG4gIEBJbnB1dCgpIGNzc0NsYXNzID0gREVGQVVMVF9WQUxVRVMuY3NzQ2xhc3M7XHJcbiAgQElucHV0KCkgYWx0OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdmFsdWUgPSBERUZBVUxUX1ZBTFVFUy52YWx1ZTtcclxuICBASW5wdXQoKSB2ZXJzaW9uID0gREVGQVVMVF9WQUxVRVMudmVyc2lvbjtcclxuICBASW5wdXQoKSBlcnJvckNvcnJlY3Rpb25MZXZlbCA9IERFRkFVTFRfVkFMVUVTLmVycm9yQ29ycmVjdGlvbkxldmVsO1xyXG4gIEBJbnB1dCgpIG1hcmdpbiA9IERFRkFVTFRfVkFMVUVTLm1hcmdpbjtcclxuICBASW5wdXQoKSBzY2FsZSA9IERFRkFVTFRfVkFMVUVTLnNjYWxlO1xyXG4gIEBJbnB1dCgpIHdpZHRoID0gREVGQVVMVF9WQUxVRVMud2lkdGg7XHJcbiAgQElucHV0KCkgY29sb3JEYXJrID0gREVGQVVMVF9WQUxVRVMuY29sb3JEYXJrO1xyXG4gIEBJbnB1dCgpIGNvbG9yTGlnaHQgPSBERUZBVUxUX1ZBTFVFUy5jb2xvckxpZ2h0O1xyXG5cclxuICBAVmlld0NoaWxkKCdxcmNFbGVtZW50JykgcXJjRWxlbWVudDogRWxlbWVudFJlZjtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uQ2hhbmdlcygpIHtcclxuICAgIHRoaXMuY3JlYXRlUVJDb2RlKCk7XHJcbiAgfVxyXG5cclxuICBjcmVhdGVRUkNvZGUoKSB7XHJcbiAgICBpZiAoIXRoaXMudmFsdWUpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG5cclxuICAgIGxldCBlbGVtZW50OiBFbGVtZW50O1xyXG5cclxuICAgIHN3aXRjaCAodGhpcy5lbGVtZW50VHlwZSkge1xyXG5cclxuICAgICAgY2FzZSBOZ3hRcmNvZGVFbGVtZW50VHlwZXMuQ0FOVkFTOlxyXG4gICAgICAgIGVsZW1lbnQgPSB0aGlzLnJlbmRlcmVyLmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpO1xyXG4gICAgICAgIHRoaXMudG9DYW52YXMoZWxlbWVudCkudGhlbigoKSA9PiB7XHJcbiAgICAgICAgICB0aGlzLnJlbmRlckVsZW1lbnQoZWxlbWVudCk7XHJcbiAgICAgICAgfSkuY2F0Y2goZSA9PiB7XHJcbiAgICAgICAgICB0aGlzLnJlbW92ZUVsZW1lbnRDaGlsZHJlbigpO1xyXG4gICAgICAgICAgY29uc29sZS5lcnJvcihlKTtcclxuICAgICAgICB9KTtcclxuICAgICAgICBicmVhaztcclxuICAgICAgZGVmYXVsdDpcclxuICAgICAgICBlbGVtZW50ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdpbWcnKTtcclxuICAgICAgICB0aGlzLnRvRGF0YVVSTCgpLnRoZW4oKHNyYzogc3RyaW5nKSA9PiB7XHJcbiAgICAgICAgICBlbGVtZW50LnNldEF0dHJpYnV0ZSgnc3JjJywgc3JjKTtcclxuICAgICAgICAgIGlmICh0aGlzLmFsdCkge1xyXG4gICAgICAgICAgICBlbGVtZW50LnNldEF0dHJpYnV0ZSgnYWx0JywgdGhpcy5hbHQpO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgICAgdGhpcy5yZW5kZXJFbGVtZW50KGVsZW1lbnQpO1xyXG4gICAgICAgIH0pLmNhdGNoKGUgPT4ge1xyXG4gICAgICAgICAgdGhpcy5yZW1vdmVFbGVtZW50Q2hpbGRyZW4oKTtcclxuICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZSk7XHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHRvRGF0YVVSTCgpOiBQcm9taXNlPHN0cmluZz4ge1xyXG4gICAgcmV0dXJuIFFSQ29kZS50b0RhdGFVUkwodGhpcy52YWx1ZSxcclxuICAgICAge1xyXG4gICAgICAgIHZlcnNpb246IHRoaXMudmVyc2lvbixcclxuICAgICAgICBlcnJvckNvcnJlY3Rpb25MZXZlbDogdGhpcy5lcnJvckNvcnJlY3Rpb25MZXZlbCxcclxuICAgICAgICBtYXJnaW46IHRoaXMubWFyZ2luLFxyXG4gICAgICAgIHNjYWxlOiB0aGlzLnNjYWxlLFxyXG4gICAgICAgIHdpZHRoOiB0aGlzLndpZHRoLFxyXG4gICAgICAgIGNvbG9yOiB7XHJcbiAgICAgICAgICBkYXJrOiB0aGlzLmNvbG9yRGFyayxcclxuICAgICAgICAgIGxpZ2h0OiB0aGlzLmNvbG9yTGlnaHRcclxuICAgICAgICB9XHJcbiAgICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSB0b0NhbnZhcyhjYW52YXMpOiBQcm9taXNlPGFueT4ge1xyXG4gICAgcmV0dXJuIFFSQ29kZS50b0NhbnZhcyhjYW52YXMsIHRoaXMudmFsdWUsIHtcclxuICAgICAgdmVyc2lvbjogdGhpcy52ZXJzaW9uLFxyXG4gICAgICBlcnJvckNvcnJlY3Rpb25MZXZlbDogdGhpcy5lcnJvckNvcnJlY3Rpb25MZXZlbCxcclxuICAgICAgbWFyZ2luOiB0aGlzLm1hcmdpbixcclxuICAgICAgc2NhbGU6IHRoaXMuc2NhbGUsXHJcbiAgICAgIHdpZHRoOiB0aGlzLndpZHRoLFxyXG4gICAgICBjb2xvcjoge1xyXG4gICAgICAgIGRhcms6IHRoaXMuY29sb3JEYXJrLFxyXG4gICAgICAgIGxpZ2h0OiB0aGlzLmNvbG9yTGlnaHRcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHJlbmRlckVsZW1lbnQoZWxlbWVudCk6IHZvaWQge1xyXG4gICAgdGhpcy5yZW1vdmVFbGVtZW50Q2hpbGRyZW4oKTtcclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQodGhpcy5xcmNFbGVtZW50Lm5hdGl2ZUVsZW1lbnQsIGVsZW1lbnQpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSByZW1vdmVFbGVtZW50Q2hpbGRyZW4oKTogdm9pZCB7XHJcbiAgICBmb3IgKGNvbnN0IG5vZGUgb2YgdGhpcy5xcmNFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY2hpbGROb2Rlcykge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNoaWxkKHRoaXMucXJjRWxlbWVudC5uYXRpdmVFbGVtZW50LCBub2RlKTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19