ngx-angular-qrcode
Version:
This library allow you to create beautiful QR Codes in Angular application.
290 lines (282 loc) • 10.1 kB
JavaScript
import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, ViewChild, Input, Component, NgModule } from '@angular/core';
import QRCodeStyling from 'qr-code-styling';
let NgxAngularQrcodeService = class NgxAngularQrcodeService {
constructor() { }
};
NgxAngularQrcodeService.ɵprov = ɵɵdefineInjectable({ factory: function NgxAngularQrcodeService_Factory() { return new NgxAngularQrcodeService(); }, token: NgxAngularQrcodeService, providedIn: "root" });
NgxAngularQrcodeService = __decorate([
Injectable({
providedIn: 'root'
})
], NgxAngularQrcodeService);
const QrPreviewSize = {
width: 124,
height: 124,
};
const DefaultQrConfiguration = {
width: 240,
height: 240,
shape: 'square',
type: 'canvas',
data: 'draft',
margin: 5,
dotsOptions: {
type: 'dots',
color: '#000000',
},
backgroundOptions: {
color: '#ffffff',
},
cornersSquareOptions: {
type: 'square',
color: '#000000',
},
cornersDotOptions: {
type: 'square',
color: '#000000',
},
// image: 'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg',
imageOptions: {
hideBackgroundDots: true,
imageSize: 0.4,
margin: 5,
crossOrigin: 'anonymous',
}
};
let NgxAngularQrcodeComponent = class NgxAngularQrcodeComponent {
ngOnInit() {
}
ngOnChanges(changes) {
this.displayQr();
}
ngAfterContentInit() {
console.debug('🔥 this.qrData', this.qrData);
this.displayQr();
}
displayQr() {
var _a, _b, _c, _d, _e, _f, _g;
if (!QRCodeStyling) {
return;
}
this.qrCodeCanvas.nativeElement.innerHTML = '';
const dotsGradient = {
type: this.dotsGradientType,
rotation: this.dotsGradientRotation,
colorStops: [
{
offset: 0,
color: this.dotsStartColor
},
{
offset: 1,
color: this.dotsEndColor
}
]
};
const cornerSquareGradient = {
type: this.cornerSquareGradientType,
rotation: this.cornerSquareGradientRotation,
colorStops: [
{
offset: 0,
color: this.cornerSquareStartColor
},
{
offset: 1,
color: this.cornerSquareEndColor
}
]
};
const backgroundGradient = {
type: this.backgroundGradientType,
rotation: this.backgroundGradientRotation,
colorStops: [
{
offset: 0,
color: this.backgroundStartColor
},
{
offset: 1,
color: this.backgroundEndColor
}
]
};
const cornerDotGradient = {
type: this.cornerDotGradientType,
rotation: this.cornerDotGradientRotation,
colorStops: [
{
offset: 0,
color: this.cornerDotStartColor
},
{
offset: 1,
color: this.cornerDotEndColor
}
]
};
let config = Object.assign(Object.assign({}, DefaultQrConfiguration), { shape: this.shape, width: this.width || QrPreviewSize.width, height: this.height || QrPreviewSize.height, margin: this.margin || DefaultQrConfiguration.margin, data: this.qrData || 'https://qrtrac.com', image: this.imageUrl, dotsOptions: Object.assign({ type: this.dotsType || ((_a = DefaultQrConfiguration.dotsOptions) === null || _a === void 0 ? void 0 : _a.type), color: this.dotsColor }, (this.dotsGradient && { gradient: dotsGradient })), cornersSquareOptions: Object.assign({ type: this.cornerSquareType || ((_b = DefaultQrConfiguration.cornersSquareOptions) === null || _b === void 0 ? void 0 : _b.type), color: this.cornerSquareColor }, (this.cornerSquareGradient && { gradient: cornerSquareGradient })), cornersDotOptions: Object.assign({ type: this.cornerDotType || ((_c = DefaultQrConfiguration.cornersDotOptions) === null || _c === void 0 ? void 0 : _c.type), color: this.cornerDotColor }, (this.cornerDotGradient && { gradient: cornerDotGradient })), backgroundOptions: Object.assign({ color: this.backgroundColor }, (this.backgroundGradient && { gradient: backgroundGradient })), imageOptions: {
imageSize: this.imageSize || ((_d = DefaultQrConfiguration.imageOptions) === null || _d === void 0 ? void 0 : _d.imageSize),
margin: this.imageMargin || ((_e = DefaultQrConfiguration.imageOptions) === null || _e === void 0 ? void 0 : _e.margin),
hideBackgroundDots: this.hideImageBackgroundDots || ((_f = DefaultQrConfiguration.imageOptions) === null || _f === void 0 ? void 0 : _f.hideBackgroundDots)
}, qrOptions: {
errorCorrectionLevel: this.errorCorrectionLevel || ((_g = DefaultQrConfiguration.qrOptions) === null || _g === void 0 ? void 0 : _g.errorCorrectionLevel)
} });
this.qrCodeStyle = new QRCodeStyling(config);
this.qrCodeStyle.append(this.qrCodeCanvas.nativeElement);
}
download(fileExtension, qrName) {
console.debug('🔥 download called');
this.qrCodeStyle.download({
name: qrName || 'ngxs-qrcode',
extension: fileExtension
});
}
};
__decorate([
ViewChild('qrCodeCanvas', { static: true })
], NgxAngularQrcodeComponent.prototype, "qrCodeCanvas", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "qrData", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "imageUrl", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "shape", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "width", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "height", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "margin", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "dotsType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "dotsGradient", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "dotsGradientType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "dotsGradientRotation", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "dotsColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "dotsStartColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "dotsEndColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerSquareType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerSquareGradient", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerSquareGradientType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerSquareGradientRotation", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerSquareColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerSquareStartColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerSquareEndColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerDotType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerDotGradient", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerDotGradientType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerDotGradientRotation", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerDotColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerDotStartColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "cornerDotEndColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "backgroundType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "backgroundGradient", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "backgroundGradientType", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "backgroundGradientRotation", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "backgroundColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "backgroundStartColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "backgroundEndColor", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "imageSize", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "imageMargin", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "hideImageBackgroundDots", void 0);
__decorate([
Input()
], NgxAngularQrcodeComponent.prototype, "errorCorrectionLevel", void 0);
NgxAngularQrcodeComponent = __decorate([
Component({
selector: 'qr-code',
template: `
<div #qrCodeCanvas></div>
`
})
], NgxAngularQrcodeComponent);
let NgxAngularQrcodeModule = class NgxAngularQrcodeModule {
};
NgxAngularQrcodeModule = __decorate([
NgModule({
declarations: [
NgxAngularQrcodeComponent
],
imports: [],
exports: [
NgxAngularQrcodeComponent
]
})
], NgxAngularQrcodeModule);
/*
* Public API Surface of ngx-angular-qrcode
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxAngularQrcodeComponent, NgxAngularQrcodeModule, NgxAngularQrcodeService };
//# sourceMappingURL=ngx-angular-qrcode.js.map