import { AXValuableComponent, AXComponent } from '@acorex/cdk/common';
import { generateQRCode } from '@acorex/cdk/qrcode';
import * as i0 from '@angular/core';
import { input, signal, viewChild, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CommonModule } from '@angular/common';

function debounce(func, delayMS) {
    let timeoutId;
    return function (...args) {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            func(...args);
        }, delayMS);
    };
}

class AXQrcodeComponent {
    constructor() {
        /**
         * @description Value of QR code
         */
        this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
        /**
         * @description Size of the QR code
         * @default 256
         */
        this.size = input(256, ...(ngDevMode ? [{ debugName: "size" }] : []));
        /**
         * @description Error correction level can be 'L' | 'M' | 'Q' | 'H'
         * @default 'M'
         */
        this.level = input('M', ...(ngDevMode ? [{ debugName: "level" }] : []));
        /**
         * @description QR code color, can be a hex code or CSS color name
         * @default '#000000'
         */
        this.color = input('#000000', ...(ngDevMode ? [{ debugName: "color" }] : []));
        /**
         * @description QR code Background color, can be a hex code or CSS color name
         * @default '#FFFFFF'
         */
        this.backgroundColor = input('#FFFFFF', ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
        /**
         * @description Type of output can be 'canvas' | 'svg' | 'url'
         * @default 'canvas'
         */
        this.outputType = input('canvas', ...(ngDevMode ? [{ debugName: "outputType" }] : [])); //
        /**
         * @ignore
         */
        /**
         * @description // Holds base64 or URL if outputType is 'url' or 'base64'
         */
        this.qrCodeUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "qrCodeUrl" }] : []));
        /**
         * @ignore
         */
        this.canvas = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvas" }] : []));
        /**
         * @ignore
         */
        this.svg = viewChild('svg', ...(ngDevMode ? [{ debugName: "svg" }] : []));
        effect(() => {
            this.generate();
        });
    }
    ngAfterViewInit() {
        this.generate();
    }
    generate() {
        generateQRCode(this.content(), this.size(), this.level(), this.color(), this.backgroundColor(), this.outputType(), this.canvas()?.nativeElement, this.svg()?.nativeElement)
            .then((result) => {
            if (this.outputType() === 'url') {
                this.qrCodeUrl.set(result);
            }
        })
            .catch((error) => {
            console.error(error);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXQrcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXQrcodeComponent, isStandalone: true, selector: "ax-qrcode", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            { provide: AXValuableComponent, useExisting: AXQrcodeComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXQrcodeComponent),
                multi: true,
            },
            { provide: AXComponent, useExisting: AXQrcodeComponent },
        ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"qrcode\">\n  @if (outputType() === 'canvas') {\n    <canvas #canvas></canvas>\n  } @else if (outputType() === 'svg') {\n    <div #svg></div>\n  } @else {\n    <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" />\n  }\n  <div class=\"logo-container\">\n    <ng-content select=\"img\"></ng-content>\n  </div>\n</div>\n", styles: [".qrcode{display:flex;justify-content:center;align-items:center;position:relative}.qrcode .logo-container{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXQrcodeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-qrcode', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        { provide: AXValuableComponent, useExisting: AXQrcodeComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXQrcodeComponent),
                            multi: true,
                        },
                        { provide: AXComponent, useExisting: AXQrcodeComponent },
                    ], template: "<div class=\"qrcode\">\n  @if (outputType() === 'canvas') {\n    <canvas #canvas></canvas>\n  } @else if (outputType() === 'svg') {\n    <div #svg></div>\n  } @else {\n    <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" />\n  }\n  <div class=\"logo-container\">\n    <ng-content select=\"img\"></ng-content>\n  </div>\n</div>\n", styles: [".qrcode{display:flex;justify-content:center;align-items:center;position:relative}.qrcode .logo-container{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], svg: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });

class AXQrcodeModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXQrcodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXQrcodeModule, imports: [CommonModule, AXQrcodeComponent], exports: [AXQrcodeComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXQrcodeModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXQrcodeModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, AXQrcodeComponent],
                    exports: [AXQrcodeComponent],
                }]
        }] });

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

export { AXQrcodeComponent, AXQrcodeModule, debounce };
//# sourceMappingURL=acorex-components-qrcode.mjs.map
