import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { Component, Optional, Inject, Input, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@angular/material/snack-bar';
import { MatSnackBar } from '@angular/material/snack-bar';
import { BASE_URL } from '@aztrix/environment';
import * as i2 from '@aztrix/helpers';
import { generateQR$, downloadDataUrl, TranslateService, HelperPipesModule } from '@aztrix/helpers';
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
import { BehaviorSubject, first, map, tap } from 'rxjs';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@aztrix/components/spinner';
import { SpinnerModule } from '@aztrix/components/spinner';
import * as i5 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';

let QrCodeComponent = class QrCodeComponent {
    constructor(_baseUrl, _snackbar, _translate) {
        this._baseUrl = _baseUrl;
        this._snackbar = _snackbar;
        this._translate = _translate;
        this.useAvatar = false;
        this.whiteLabel = false;
        this.generated$ = new BehaviorSubject(false);
        this.error$ = new BehaviorSubject(false);
    }
    ngOnChanges(changes) {
        if (changes.useAvatar) {
            this._fetchQR().subscribe();
        }
    }
    ngOnInit() {
        this._fetchQR().subscribe();
        this.error$.pipe(untilDestroyed(this)).subscribe((error) => {
            if (error) {
                this._snackbar.open(this._translate.instant('error.unknown'), undefined, {
                    duration: 2000,
                });
            }
        });
    }
    download() {
        this._fetchQR(true).subscribe();
    }
    _fetchQR(download = false) {
        this.generated$.next(false);
        this.error$.next(false);
        return generateQR$(download ? 2500 : 256, this.url, this.useAvatar
            ? this.avatarUrl
            : this.whiteLabel
                ? undefined
                : `${this._baseUrl}/assets/icons/custom/aztrixlogo_green-border.svg`, this.useAvatar).pipe(first(), map((dataUrl) => {
            if (download) {
                downloadDataUrl(dataUrl, `${this.name}-qr.png`);
            }
            else {
                this.qrImage.nativeElement.src = dataUrl;
            }
        }), tap({
            next: () => {
                this.generated$.next(true);
            },
            error: () => {
                this.error$.next(true);
                this.generated$.next(true);
            },
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QrCodeComponent, deps: [{ token: BASE_URL, optional: true }, { token: i1.MatSnackBar }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QrCodeComponent, selector: "ax-qr-code", inputs: { name: "name", avatarUrl: "avatarUrl", url: "url", useAvatar: "useAvatar", whiteLabel: "whiteLabel" }, viewQueries: [{ propertyName: "qrImage", first: true, predicate: ["qrImage"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"qr-image\">\n  <ax-spinner *ngIf=\"(generated$ | async) === false\"\n    >{{ 'label.loading' | translate }}...</ax-spinner\n  >\n  <img\n    class=\"image\"\n    #qrImage\n    [ngStyle]=\"{display: (generated$ | async) ? 'inherit' : 'none'}\"\n    [attr.alt]=\"'forward.qr.description' | translate: {subject: 'label.page' | translate}\"\n  />\n</div>\n\n<div class=\"button-wrapper\">\n  <ax-button\n    (click)=\"download()\"\n    [fullWidth]=\"true\"\n    [bigButton]=\"true\"\n    [loading]=\"(generated$ | async) === false\"\n    [disabled]=\"(generated$ | async) === false\"\n    filled\n    color=\"primary\"\n    icon=\"download-outline\"\n  >\n    <span>{{ 'label.download' | translate }}</span>\n  </ax-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.qr-image{border:2px solid #efefef;border-radius:.5rem;min-width:248px;min-height:248px;display:flex;justify-content:center;align-items:center;overflow:hidden;align-self:center}.image{max-width:256px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.SpinnerComponent, selector: "ax-spinner" }, { kind: "component", type: i5.ButtonComponent, selector: "ax-button", inputs: ["url", "ariaLabel", "target"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
};
QrCodeComponent = __decorate([
    UntilDestroy(),
    __metadata("design:paramtypes", [String, MatSnackBar,
        TranslateService])
], QrCodeComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QrCodeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-qr-code', template: "<div class=\"qr-image\">\n  <ax-spinner *ngIf=\"(generated$ | async) === false\"\n    >{{ 'label.loading' | translate }}...</ax-spinner\n  >\n  <img\n    class=\"image\"\n    #qrImage\n    [ngStyle]=\"{display: (generated$ | async) ? 'inherit' : 'none'}\"\n    [attr.alt]=\"'forward.qr.description' | translate: {subject: 'label.page' | translate}\"\n  />\n</div>\n\n<div class=\"button-wrapper\">\n  <ax-button\n    (click)=\"download()\"\n    [fullWidth]=\"true\"\n    [bigButton]=\"true\"\n    [loading]=\"(generated$ | async) === false\"\n    [disabled]=\"(generated$ | async) === false\"\n    filled\n    color=\"primary\"\n    icon=\"download-outline\"\n  >\n    <span>{{ 'label.download' | translate }}</span>\n  </ax-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.qr-image{border:2px solid #efefef;border-radius:.5rem;min-width:248px;min-height:248px;display:flex;justify-content:center;align-items:center;overflow:hidden;align-self:center}.image{max-width:256px}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [BASE_URL]
                }] }, { type: i1.MatSnackBar }, { type: i2.TranslateService }], propDecorators: { name: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], url: [{
                type: Input
            }], useAvatar: [{
                type: Input
            }], whiteLabel: [{
                type: Input
            }], qrImage: [{
                type: ViewChild,
                args: ['qrImage', { static: true }]
            }] } });

class QrCodeModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QrCodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: QrCodeModule, declarations: [QrCodeComponent], imports: [CommonModule, HelperPipesModule, SpinnerModule, ButtonModule], exports: [QrCodeComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QrCodeModule, imports: [CommonModule, HelperPipesModule, SpinnerModule, ButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QrCodeModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [QrCodeComponent],
                    exports: [QrCodeComponent],
                    imports: [CommonModule, HelperPipesModule, SpinnerModule, ButtonModule],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { QrCodeComponent, QrCodeModule };
//# sourceMappingURL=aztrix-components-qr-code.mjs.map
