ngx-qrcode2
Version:
An Angular component for generating QRCodes
136 lines • 13 kB
JavaScript
import { __decorate } from "tslib";
import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, Renderer2, ViewChild } from '@angular/core';
import QRCode from 'qrcode';
import { NgxQrcodeElementTypes } from './qrcode.types';
import { DEFAULT_VALUES } from './qrcode.constants';
let QrcodeComponent = 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);
}
}
};
QrcodeComponent.ctorParameters = () => [
{ type: Renderer2 }
];
__decorate([
Input()
], QrcodeComponent.prototype, "elementType", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "cssClass", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "alt", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "value", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "version", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "errorCorrectionLevel", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "margin", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "scale", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "width", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "colorDark", void 0);
__decorate([
Input()
], QrcodeComponent.prototype, "colorLight", void 0);
__decorate([
ViewChild('qrcElement')
], QrcodeComponent.prototype, "qrcElement", void 0);
QrcodeComponent = __decorate([
Component({
selector: 'ngx-qrcode',
template: `
<div #qrcElement [class]="cssClass"></div>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
], QrcodeComponent);
export { QrcodeComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXJjb2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1xcmNvZGUyLyIsInNvdXJjZXMiOlsibGliL3FyY29kZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2SCxPQUFPLE1BQU0sTUFBTSxRQUFRLENBQUM7QUFFNUIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBUXBELElBQWEsZUFBZSxHQUE1QixNQUFhLGVBQWU7SUFpQjFCLFlBQW9CLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7UUFmOUIsZ0JBQVcsR0FBRyxjQUFjLENBQUMsV0FBVyxDQUFDO1FBQ3pDLGFBQVEsR0FBRyxjQUFjLENBQUMsUUFBUSxDQUFDO1FBRW5DLFVBQUssR0FBRyxjQUFjLENBQUMsS0FBSyxDQUFDO1FBQzdCLFlBQU8sR0FBRyxjQUFjLENBQUMsT0FBTyxDQUFDO1FBRWpDLHlCQUFvQixHQUFHLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQztRQUMzRCxXQUFNLEdBQUcsY0FBYyxDQUFDLE1BQU0sQ0FBQztRQUMvQixVQUFLLEdBQUcsY0FBYyxDQUFDLEtBQUssQ0FBQztRQUM3QixVQUFLLEdBQUcsY0FBYyxDQUFDLEtBQUssQ0FBQztRQUM3QixjQUFTLEdBQUcsY0FBYyxDQUFDLFNBQVMsQ0FBQztRQUNyQyxlQUFVLEdBQUcsY0FBYyxDQUFDLFVBQVUsQ0FBQztJQUtoRCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxJQUFJLENBQUMsS0FB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RUFBRTtZQUMzRCxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsQ0FBQztTQUNoRTtJQUNILENBQUM7Q0FDRixDQUFBOztZQS9FK0IsU0FBUzs7QUFmOUI7SUFBUixLQUFLLEVBQUU7b0RBQTBDO0FBQ3pDO0lBQVIsS0FBSyxFQUFFO2lEQUFvQztBQUNuQztJQUFSLEtBQUssRUFBRTs0Q0FBYTtBQUNaO0lBQVIsS0FBSyxFQUFFOzhDQUE4QjtBQUM3QjtJQUFSLEtBQUssRUFBRTtnREFBa0M7QUFFakM7SUFBUixLQUFLLEVBQUU7NkRBQTREO0FBQzNEO0lBQVIsS0FBSyxFQUFFOytDQUFnQztBQUMvQjtJQUFSLEtBQUssRUFBRTs4Q0FBOEI7QUFDN0I7SUFBUixLQUFLLEVBQUU7OENBQThCO0FBQzdCO0lBQVIsS0FBSyxFQUFFO2tEQUFzQztBQUNyQztJQUFSLEtBQUssRUFBRTttREFBd0M7QUFFdkI7SUFBeEIsU0FBUyxDQUFDLFlBQVksQ0FBQzttREFBd0I7QUFmckMsZUFBZTtJQU4zQixTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsWUFBWTtRQUN0QixRQUFRLEVBQUU7K0NBQ21DO1FBQzdDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO0tBQ2hELENBQUM7R0FDVyxlQUFlLENBZ0czQjtTQWhHWSxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uQ2hhbmdlcywgUmVuZGVyZXIyLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IFFSQ29kZSBmcm9tICdxcmNvZGUnO1xuXG5pbXBvcnQgeyBOZ3hRcmNvZGVFbGVtZW50VHlwZXMgfSBmcm9tICcuL3FyY29kZS50eXBlcyc7XG5pbXBvcnQgeyBERUZBVUxUX1ZBTFVFUyB9IGZyb20gJy4vcXJjb2RlLmNvbnN0YW50cyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1xcmNvZGUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgI3FyY0VsZW1lbnQgW2NsYXNzXT1cImNzc0NsYXNzXCI+PC9kaXY+YCxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgUXJjb2RlQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcblxuICBASW5wdXQoKSBlbGVtZW50VHlwZSA9IERFRkFVTFRfVkFMVUVTLmVsZW1lbnRUeXBlO1xuICBASW5wdXQoKSBjc3NDbGFzcyA9IERFRkFVTFRfVkFMVUVTLmNzc0NsYXNzO1xuICBASW5wdXQoKSBhbHQ6IHN0cmluZztcbiAgQElucHV0KCkgdmFsdWUgPSBERUZBVUxUX1ZBTFVFUy52YWx1ZTtcbiAgQElucHV0KCkgdmVyc2lvbiA9IERFRkFVTFRfVkFMVUVTLnZlcnNpb247XG5cbiAgQElucHV0KCkgZXJyb3JDb3JyZWN0aW9uTGV2ZWwgPSBERUZBVUxUX1ZBTFVFUy5lcnJvckNvcnJlY3Rpb25MZXZlbDtcbiAgQElucHV0KCkgbWFyZ2luID0gREVGQVVMVF9WQUxVRVMubWFyZ2luO1xuICBASW5wdXQoKSBzY2FsZSA9IERFRkFVTFRfVkFMVUVTLnNjYWxlO1xuICBASW5wdXQoKSB3aWR0aCA9IERFRkFVTFRfVkFMVUVTLndpZHRoO1xuICBASW5wdXQoKSBjb2xvckRhcmsgPSBERUZBVUxUX1ZBTFVFUy5jb2xvckRhcms7XG4gIEBJbnB1dCgpIGNvbG9yTGlnaHQgPSBERUZBVUxUX1ZBTFVFUy5jb2xvckxpZ2h0O1xuXG4gIEBWaWV3Q2hpbGQoJ3FyY0VsZW1lbnQnKSBxcmNFbGVtZW50OiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5jcmVhdGVRUkNvZGUoKTtcbiAgfVxuXG4gIGNyZWF0ZVFSQ29kZSgpIHtcbiAgICBpZiAoIXRoaXMudmFsdWUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBsZXQgZWxlbWVudDogRWxlbWVudDtcblxuICAgIHN3aXRjaCAodGhpcy5lbGVtZW50VHlwZSkge1xuXG4gICAgICBjYXNlIE5neFFyY29kZUVsZW1lbnRUeXBlcy5DQU5WQVM6XG4gICAgICAgIGVsZW1lbnQgPSB0aGlzLnJlbmRlcmVyLmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpO1xuICAgICAgICB0aGlzLnRvQ2FudmFzKGVsZW1lbnQpLnRoZW4oKCkgPT4ge1xuICAgICAgICAgIHRoaXMucmVuZGVyRWxlbWVudChlbGVtZW50KTtcbiAgICAgICAgfSkuY2F0Y2goZSA9PiB7XG4gICAgICAgICAgdGhpcy5yZW1vdmVFbGVtZW50Q2hpbGRyZW4oKTtcbiAgICAgICAgICBjb25zb2xlLmVycm9yKGUpO1xuICAgICAgICB9KTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICBlbGVtZW50ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdpbWcnKTtcbiAgICAgICAgdGhpcy50b0RhdGFVUkwoKS50aGVuKChzcmM6IHN0cmluZykgPT4ge1xuICAgICAgICAgIGVsZW1lbnQuc2V0QXR0cmlidXRlKCdzcmMnLCBzcmMpO1xuICAgICAgICAgIGlmICh0aGlzLmFsdCkge1xuICAgICAgICAgICAgZWxlbWVudC5zZXRBdHRyaWJ1dGUoJ2FsdCcsIHRoaXMuYWx0KTtcbiAgICAgICAgICB9XG4gICAgICAgICAgdGhpcy5yZW5kZXJFbGVtZW50KGVsZW1lbnQpO1xuICAgICAgICB9KS5jYXRjaChlID0+IHtcbiAgICAgICAgICB0aGlzLnJlbW92ZUVsZW1lbnRDaGlsZHJlbigpO1xuICAgICAgICAgIGNvbnNvbGUuZXJyb3IoZSk7XG4gICAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgdG9EYXRhVVJMKCk6IFByb21pc2U8c3RyaW5nPiB7XG4gICAgcmV0dXJuIFFSQ29kZS50b0RhdGFVUkwodGhpcy52YWx1ZSxcbiAgICAgIHtcbiAgICAgICAgdmVyc2lvbjogdGhpcy52ZXJzaW9uLFxuICAgICAgICBlcnJvckNvcnJlY3Rpb25MZXZlbDogdGhpcy5lcnJvckNvcnJlY3Rpb25MZXZlbCxcbiAgICAgICAgbWFyZ2luOiB0aGlzLm1hcmdpbixcbiAgICAgICAgc2NhbGU6IHRoaXMuc2NhbGUsXG4gICAgICAgIHdpZHRoOiB0aGlzLndpZHRoLFxuICAgICAgICBjb2xvcjoge1xuICAgICAgICAgIGRhcms6IHRoaXMuY29sb3JEYXJrLFxuICAgICAgICAgIGxpZ2h0OiB0aGlzLmNvbG9yTGlnaHRcbiAgICAgICAgfVxuICAgICAgfSk7XG4gIH1cblxuICBwcml2YXRlIHRvQ2FudmFzKGNhbnZhcyk6IFByb21pc2U8YW55PiB7XG4gICAgcmV0dXJuIFFSQ29kZS50b0NhbnZhcyhjYW52YXMsIHRoaXMudmFsdWUsIHtcbiAgICAgIHZlcnNpb246IHRoaXMudmVyc2lvbixcbiAgICAgIGVycm9yQ29ycmVjdGlvbkxldmVsOiB0aGlzLmVycm9yQ29ycmVjdGlvbkxldmVsLFxuICAgICAgbWFyZ2luOiB0aGlzLm1hcmdpbixcbiAgICAgIHNjYWxlOiB0aGlzLnNjYWxlLFxuICAgICAgd2lkdGg6IHRoaXMud2lkdGgsXG4gICAgICBjb2xvcjoge1xuICAgICAgICBkYXJrOiB0aGlzLmNvbG9yRGFyayxcbiAgICAgICAgbGlnaHQ6IHRoaXMuY29sb3JMaWdodFxuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSByZW5kZXJFbGVtZW50KGVsZW1lbnQpOiB2b2lkIHtcbiAgICB0aGlzLnJlbW92ZUVsZW1lbnRDaGlsZHJlbigpO1xuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQodGhpcy5xcmNFbGVtZW50Lm5hdGl2ZUVsZW1lbnQsIGVsZW1lbnQpO1xuICB9XG5cbiAgcHJpdmF0ZSByZW1vdmVFbGVtZW50Q2hpbGRyZW4oKTogdm9pZCB7XG4gICAgZm9yIChjb25zdCBub2RlIG9mIHRoaXMucXJjRWxlbWVudC5uYXRpdmVFbGVtZW50LmNoaWxkTm9kZXMpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2hpbGQodGhpcy5xcmNFbGVtZW50Lm5hdGl2ZUVsZW1lbnQsIG5vZGUpO1xuICAgIH1cbiAgfVxufVxuIl19