import { isPlatformBrowser } from '@angular/common';
import * as i0 from '@angular/core';
import { input, viewChild, inject, PLATFORM_ID, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
import { zTransform } from '@shival99/z-ui/utils';
import * as QRCode from 'qrcode';

class ZQrCodeComponent {
    // Inputs
    zValue = input.required(...(ngDevMode ? [{ debugName: "zValue" }] : []));
    zSize = input(256, ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zLevel = input('H', ...(ngDevMode ? [{ debugName: "zLevel" }] : []));
    zLogo = input('', ...(ngDevMode ? [{ debugName: "zLogo" }] : []));
    zLogoSize = input(0.2, ...(ngDevMode ? [{ debugName: "zLogoSize" }] : [])); // 20% of QR size
    zLogoBgColor = input('#ffffff', ...(ngDevMode ? [{ debugName: "zLogoBgColor" }] : []));
    zLogoBgShape = input('circle', ...(ngDevMode ? [{ debugName: "zLogoBgShape" }] : []));
    zLogoPadding = input(4, ...(ngDevMode ? [{ debugName: "zLogoPadding" }] : []));
    zFgColor = input('#000000', ...(ngDevMode ? [{ debugName: "zFgColor" }] : []));
    zBgColor = input('#ffffff', ...(ngDevMode ? [{ debugName: "zBgColor" }] : []));
    zDotStyle = input('square', ...(ngDevMode ? [{ debugName: "zDotStyle" }] : []));
    zEyeStyle = input('square', ...(ngDevMode ? [{ debugName: "zEyeStyle" }] : []));
    zEyeColor = input('', ...(ngDevMode ? [{ debugName: "zEyeColor" }] : [])); // if empty, falls back to zFgColor
    zMargin = input(4, ...(ngDevMode ? [{ debugName: "zMargin" }] : [])); // margin in modules
    zFgGradient = input(...(ngDevMode ? [undefined, { debugName: "zFgGradient" }] : []));
    zFrame = input('none', ...(ngDevMode ? [{ debugName: "zFrame" }] : []));
    zFrameText = input('SCAN ME', ...(ngDevMode ? [{ debugName: "zFrameText" }] : []));
    zFrameColor = input('#0f172a', ...(ngDevMode ? [{ debugName: "zFrameColor" }] : []));
    zFramePadding = input(12, ...(ngDevMode ? [{ debugName: "zFramePadding" }] : [])); // padding around QR inside frame
    zFrameBorderRadius = input(12, ...(ngDevMode ? [{ debugName: "zFrameBorderRadius" }] : [])); // border radius of the frame
    zDownloadable = input(false, { ...(ngDevMode ? { debugName: "zDownloadable" } : {}), transform: zTransform }); // toggles hover overlay button
    zDownloadButton = input(false, { ...(ngDevMode ? { debugName: "zDownloadButton" } : {}), transform: zTransform }); // toggles standalone button below
    zShadow = input(true, { ...(ngDevMode ? { debugName: "zShadow" } : {}), transform: zTransform }); // Bật/tắt đổ bóng khung ngoài
    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
    // DOM references
    _canvasRef = viewChild('qrCanvas', ...(ngDevMode ? [{ debugName: "_canvasRef" }] : []));
    _platformId = inject(PLATFORM_ID);
    // States
    downloadText = signal('i18n_z_ui_qrcode_download', ...(ngDevMode ? [{ debugName: "downloadText" }] : []));
    constructor() {
        // Re-render when any signal inputs change
        effect(() => {
            if (isPlatformBrowser(this._platformId)) {
                void this.renderQrCode();
            }
        });
    }
    /**
     * Renders the stylized QR code onto the canvas element
     */
    async renderQrCode() {
        const canvas = this._canvasRef()?.nativeElement;
        if (!canvas) {
            return;
        }
        const value = this.zValue();
        const size = this.zSize();
        const level = this.zLevel();
        const fgColor = this.zFgColor();
        const bgColor = this.zBgColor();
        const dotStyle = this.zDotStyle();
        const eyeStyle = this.zEyeStyle();
        const eyeColorInput = this.zEyeColor();
        const logoUrl = this.zLogo();
        const frame = this.zFrame();
        const dpr = isPlatformBrowser(this._platformId) ? window.devicePixelRatio || 1 : 1;
        const framePadding = frame !== 'none' ? this.zFramePadding() : 0;
        const frameBorderRadius = this.zFrameBorderRadius();
        const bannerHeight = frame === 'text-bottom' || frame === 'text-top' ? 50 : 0;
        const cssWidth = size + framePadding * 2;
        const cssHeight = size + framePadding * 2 + bannerHeight;
        canvas.width = cssWidth * dpr;
        canvas.height = cssHeight * dpr;
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            return;
        }
        ctx.scale(dpr, dpr);
        // Clear background
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, cssWidth, cssHeight);
        if (frame !== 'none') {
            // Draw rounded frame container
            ctx.fillStyle = bgColor;
            ctx.beginPath();
            this._drawRoundedRectPath(ctx, 0, 0, cssWidth, cssHeight, frameBorderRadius);
            ctx.fill();
            // Draw border outline
            ctx.strokeStyle = this.zFrameColor();
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            this._drawRoundedRectPath(ctx, 0.75, 0.75, cssWidth - 1.5, cssHeight - 1.5, frameBorderRadius);
            ctx.stroke();
        }
        try {
            // Create raw QR code matrix
            const qr = QRCode.create(value, { errorCorrectionLevel: level });
            const moduleCount = qr.modules.size;
            const marginModules = this.zMargin();
            const drawSize = size;
            // Calculate module size
            const moduleSize = drawSize / (moduleCount + 2 * marginModules);
            const marginOffset = marginModules * moduleSize;
            // Draw offsets
            let xOffset = 0;
            let yOffset = 0;
            if (frame !== 'none') {
                xOffset = framePadding;
                yOffset = frame === 'text-top' ? framePadding + bannerHeight : framePadding;
            }
            // 1. Prepare foreground style (solid or gradient)
            let fillStyle = fgColor;
            const gradientOpt = this.zFgGradient();
            if (gradientOpt && gradientOpt.colors && gradientOpt.colors.length > 0) {
                fillStyle = this._getGradientStyle(ctx, gradientOpt, drawSize, xOffset, yOffset, marginOffset);
            }
            const eyeColor = eyeColorInput || fillStyle;
            // 2. Draw normal modules (skip eyes and central logo)
            ctx.fillStyle = fillStyle;
            // Calculate logo skip boundary
            const hasLogo = !!logoUrl;
            const logoModules = Math.ceil(moduleCount * this.zLogoSize());
            const logoStart = Math.floor((moduleCount - logoModules) / 2);
            const logoEnd = logoStart + logoModules;
            for (let r = 0; r < moduleCount; r++) {
                for (let c = 0; c < moduleCount; c++) {
                    // Check if it's top-left, top-right, or bottom-left eye
                    const isTopLeftEye = r < 7 && c < 7;
                    const isTopRightEye = r < 7 && c >= moduleCount - 7;
                    const isBottomLeftEye = r >= moduleCount - 7 && c < 7;
                    if (isTopLeftEye || isTopRightEye || isBottomLeftEye) {
                        continue;
                    }
                    // Check if overlapping logo area
                    if (hasLogo && r >= logoStart && r < logoEnd && c >= logoStart && c < logoEnd) {
                        continue;
                    }
                    const isDark = qr.modules.get(r, c) === 1; // standard raw check
                    if (!isDark) {
                        continue;
                    }
                    const x = xOffset + marginOffset + c * moduleSize;
                    const y = yOffset + marginOffset + r * moduleSize;
                    this._drawDot(ctx, x, y, moduleSize, dotStyle);
                }
            }
            // 3. Draw Eyes
            const eyeCoords = [
                { x: xOffset + marginOffset, y: yOffset + marginOffset }, // Top Left
                { x: xOffset + marginOffset + (moduleCount - 7) * moduleSize, y: yOffset + marginOffset }, // Top Right
                { x: xOffset + marginOffset, y: yOffset + marginOffset + (moduleCount - 7) * moduleSize }, // Bottom Left
            ];
            eyeCoords.forEach(coord => {
                this._drawEye(ctx, coord.x, coord.y, moduleSize, eyeStyle, eyeColor);
            });
            // 4. Draw central logo if specified
            if (hasLogo) {
                await this._drawLogo(ctx, xOffset + marginOffset, yOffset, drawSize, logoUrl);
            }
            // 5. Draw Frame details
            if (frame === 'text-bottom' || frame === 'text-top') {
                const bannerY = frame === 'text-bottom' ? framePadding + size : framePadding;
                this._drawFrame(ctx, cssWidth, bannerY, bannerHeight, this.zFrameText(), this.zFrameColor());
            }
        }
        catch (err) {
            console.error('Error generating QR code:', err);
        }
    }
    /**
     * Helper function to get gradient style fill (no else branches)
     */
    _getGradientStyle(ctx, gradientOpt, drawSize, xOffset, yOffset, marginOffset) {
        if (gradientOpt.type === 'radial') {
            const cx = drawSize / 2 + xOffset;
            const cy = drawSize / 2 + yOffset;
            const r = (drawSize / 2) * 1.2;
            const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
            gradientOpt.colors.forEach((c, idx) => {
                grad.addColorStop(idx / (gradientOpt.colors.length - 1), c);
            });
            return grad;
        }
        // Default to linear
        const angle = gradientOpt.angle ?? 45;
        const rad = (angle * Math.PI) / 180;
        const x1 = Math.cos(rad) * 0;
        const y1 = Math.sin(rad) * 0;
        const x2 = Math.cos(rad) * drawSize + x1;
        const y2 = Math.sin(rad) * drawSize + y1;
        const grad = ctx.createLinearGradient(x1 + xOffset + marginOffset, y1 + yOffset + marginOffset, x2 + xOffset + marginOffset, y2 + yOffset + marginOffset);
        gradientOpt.colors.forEach((c, idx) => {
            grad.addColorStop(idx / (gradientOpt.colors.length - 1), c);
        });
        return grad;
    }
    /**
     * Helper function to draw dynamic dot module style (no else branches)
     */
    _drawDot(ctx, x, y, moduleSize, dotStyle) {
        ctx.beginPath();
        if (dotStyle === 'dots') {
            ctx.arc(x + moduleSize / 2, y + moduleSize / 2, (moduleSize / 2) * 0.95, 0, Math.PI * 2);
            ctx.fill();
            return;
        }
        if (dotStyle === 'rounded') {
            this._drawRoundedRectPath(ctx, x + moduleSize * 0.05, y + moduleSize * 0.05, moduleSize * 0.9, moduleSize * 0.9, moduleSize * 0.3);
            ctx.fill();
            return;
        }
        // Default to square
        ctx.fillRect(x, y, moduleSize, moduleSize);
    }
    /**
     * Helper path function for rounded corners (no else branches)
     */
    _drawRoundedRectPath(ctx, x, y, w, h, r, counterClockwise = false) {
        if (r > w / 2) {
            r = w / 2;
        }
        if (r > h / 2) {
            r = h / 2;
        }
        ctx.moveTo(x + r, y);
        if (counterClockwise) {
            ctx.lineTo(x + r, y);
            ctx.arcTo(x, y, x, y + r, r);
            ctx.lineTo(x, y + h - r);
            ctx.arcTo(x, x + h, x + r, y + h, r);
            ctx.lineTo(x + w - r, y + h);
            ctx.arcTo(x + w, y + h, x + w, y + h - r, r);
            ctx.lineTo(x + w, y + r);
            ctx.arcTo(x + w, y, x + w - r, y, r);
            ctx.closePath();
            return;
        }
        ctx.lineTo(x + w - r, y);
        ctx.arcTo(x + w, y, x + w, y + r, r);
        ctx.lineTo(x + w, y + h - r);
        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
        ctx.lineTo(x + r, y + h);
        ctx.arcTo(x, y + h, x, y + h - r, r);
        ctx.lineTo(x, y + r);
        ctx.arcTo(x, y, x + r, y, r);
        ctx.closePath();
    }
    /**
     * Draw eye pattern (no else branches)
     */
    _drawEye(ctx, x, y, moduleSize, style, color) {
        ctx.save();
        ctx.fillStyle = color;
        const outerSize = 7 * moduleSize;
        const innerSize = 3 * moduleSize;
        const innerOffset = 2 * moduleSize;
        if (style === 'circle') {
            ctx.beginPath();
            ctx.arc(x + outerSize / 2, y + outerSize / 2, outerSize / 2, 0, Math.PI * 2);
            ctx.arc(x + outerSize / 2, y + outerSize / 2, outerSize / 2 - moduleSize, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(x + outerSize / 2, y + outerSize / 2, innerSize / 2, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
            return;
        }
        if (style === 'rounded') {
            const outerRadius = 2 * moduleSize;
            const innerRadius = moduleSize;
            ctx.beginPath();
            this._drawRoundedRectPath(ctx, x, y, outerSize, outerSize, outerRadius);
            this._drawRoundedRectPath(ctx, x + moduleSize, y + moduleSize, outerSize - 2 * moduleSize, outerSize - 2 * moduleSize, outerRadius - moduleSize, true);
            ctx.fill();
            ctx.beginPath();
            this._drawRoundedRectPath(ctx, x + innerOffset, y + innerOffset, innerSize, innerSize, innerRadius);
            ctx.fill();
            ctx.restore();
            return;
        }
        // Default to square
        ctx.fillRect(x, y, outerSize, outerSize);
        ctx.clearRect(x + moduleSize, y + moduleSize, outerSize - 2 * moduleSize, outerSize - 2 * moduleSize);
        ctx.fillRect(x + innerOffset, y + innerOffset, innerSize, innerSize);
        ctx.restore();
    }
    /**
     * Load and render the central logo on canvas (no else branches)
     */
    _drawLogo(ctx, marginOffset, yOffset, drawSize, logoUrl) {
        return new Promise(resolve => {
            const img = new Image();
            img.crossOrigin = 'anonymous'; // prevent tainted canvas
            img.src = logoUrl;
            img.onload = () => {
                const logoBoxSize = drawSize * this.zLogoSize();
                const logoBoxX = marginOffset + (drawSize - 2 * marginOffset - logoBoxSize) / 2;
                const logoBoxY = marginOffset + (drawSize - 2 * marginOffset - logoBoxSize) / 2 + yOffset;
                ctx.save();
                // 1. Draw logo mask background (circle or square)
                const bgShape = this.zLogoBgShape();
                if (bgShape === 'circle') {
                    ctx.fillStyle = this.zLogoBgColor();
                    ctx.beginPath();
                    ctx.arc(logoBoxX + logoBoxSize / 2, logoBoxY + logoBoxSize / 2, logoBoxSize / 2, 0, Math.PI * 2);
                    ctx.fill();
                }
                if (bgShape === 'square') {
                    ctx.fillStyle = this.zLogoBgColor();
                    ctx.beginPath();
                    this._drawRoundedRectPath(ctx, logoBoxX, logoBoxY, logoBoxSize, logoBoxSize, logoBoxSize * 0.2);
                    ctx.fill();
                }
                // 2. Draw logo image centered
                const padding = this.zLogoPadding();
                const logoImgSize = logoBoxSize - padding * 2;
                const logoImgX = logoBoxX + padding;
                const logoImgY = logoBoxY + padding;
                if (bgShape === 'circle') {
                    // Clip to circle so non-circle logos look neat
                    ctx.beginPath();
                    ctx.arc(logoBoxX + logoBoxSize / 2, logoBoxY + logoBoxSize / 2, logoImgSize / 2, 0, Math.PI * 2);
                    ctx.clip();
                }
                ctx.drawImage(img, logoImgX, logoImgY, logoImgSize, logoImgSize);
                ctx.restore();
                resolve();
            };
            img.onerror = () => {
                console.warn('Failed to load QR code logo from URL:', logoUrl);
                resolve(); // resolve anyway to avoid blocking execution
            };
        });
    }
    _drawFrame(ctx, width, bannerY, bannerHeight, text, frameColor) {
        ctx.save();
        // Draw pill badge for standard frame aesthetic
        ctx.fillStyle = frameColor;
        const pillWidth = width * 0.75;
        const pillHeight = 28;
        const pillX = (width - pillWidth) / 2;
        const pillY = bannerY + (bannerHeight - pillHeight) / 2;
        ctx.beginPath();
        this._drawRoundedRectPath(ctx, pillX, pillY, pillWidth, pillHeight, pillHeight / 2);
        ctx.fill();
        // Render banner text
        ctx.fillStyle = '#ffffff';
        ctx.font = 'bold 12px var(--font-sans, system-ui, sans-serif)';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, width / 2, pillY + pillHeight / 2);
        ctx.restore();
    }
    /**
     * Download the generated canvas QR Code as a PNG image file
     */
    downloadQr() {
        const canvas = this._canvasRef()?.nativeElement;
        if (!canvas) {
            return;
        }
        const dataUrl = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.href = dataUrl;
        link.download = `qrcode_${Date.now()}.png`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZQrCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZQrCodeComponent, isStandalone: true, selector: "z-qrcode", inputs: { zValue: { classPropertyName: "zValue", publicName: "zValue", isSignal: true, isRequired: true, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLevel: { classPropertyName: "zLevel", publicName: "zLevel", isSignal: true, isRequired: false, transformFunction: null }, zLogo: { classPropertyName: "zLogo", publicName: "zLogo", isSignal: true, isRequired: false, transformFunction: null }, zLogoSize: { classPropertyName: "zLogoSize", publicName: "zLogoSize", isSignal: true, isRequired: false, transformFunction: null }, zLogoBgColor: { classPropertyName: "zLogoBgColor", publicName: "zLogoBgColor", isSignal: true, isRequired: false, transformFunction: null }, zLogoBgShape: { classPropertyName: "zLogoBgShape", publicName: "zLogoBgShape", isSignal: true, isRequired: false, transformFunction: null }, zLogoPadding: { classPropertyName: "zLogoPadding", publicName: "zLogoPadding", isSignal: true, isRequired: false, transformFunction: null }, zFgColor: { classPropertyName: "zFgColor", publicName: "zFgColor", isSignal: true, isRequired: false, transformFunction: null }, zBgColor: { classPropertyName: "zBgColor", publicName: "zBgColor", isSignal: true, isRequired: false, transformFunction: null }, zDotStyle: { classPropertyName: "zDotStyle", publicName: "zDotStyle", isSignal: true, isRequired: false, transformFunction: null }, zEyeStyle: { classPropertyName: "zEyeStyle", publicName: "zEyeStyle", isSignal: true, isRequired: false, transformFunction: null }, zEyeColor: { classPropertyName: "zEyeColor", publicName: "zEyeColor", isSignal: true, isRequired: false, transformFunction: null }, zMargin: { classPropertyName: "zMargin", publicName: "zMargin", isSignal: true, isRequired: false, transformFunction: null }, zFgGradient: { classPropertyName: "zFgGradient", publicName: "zFgGradient", isSignal: true, isRequired: false, transformFunction: null }, zFrame: { classPropertyName: "zFrame", publicName: "zFrame", isSignal: true, isRequired: false, transformFunction: null }, zFrameText: { classPropertyName: "zFrameText", publicName: "zFrameText", isSignal: true, isRequired: false, transformFunction: null }, zFrameColor: { classPropertyName: "zFrameColor", publicName: "zFrameColor", isSignal: true, isRequired: false, transformFunction: null }, zFramePadding: { classPropertyName: "zFramePadding", publicName: "zFramePadding", isSignal: true, isRequired: false, transformFunction: null }, zFrameBorderRadius: { classPropertyName: "zFrameBorderRadius", publicName: "zFrameBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, zDownloadable: { classPropertyName: "zDownloadable", publicName: "zDownloadable", isSignal: true, isRequired: false, transformFunction: null }, zDownloadButton: { classPropertyName: "zDownloadButton", publicName: "zDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, zShadow: { classPropertyName: "zShadow", publicName: "zShadow", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_canvasRef", first: true, predicate: ["qrCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"z-qrcode-container relative flex flex-col items-center\">\n  <div\n    class=\"z-qrcode-canvas-wrapper relative transition-all duration-200\"\n    [class.shadow-md]=\"zShadow()\"\n    [style.border-radius.px]=\"zFrame() !== 'none' || zShadow() ? zFrameBorderRadius() : 0\"\n    [style.overflow]=\"zFrame() !== 'none' || zShadow() ? 'hidden' : 'visible'\">\n    <canvas\n      #qrCanvas\n      class=\"block\"\n      [style.width.px]=\"zFrame() !== 'none' ? zSize() + zFramePadding() * 2 : zSize()\"\n      [style.height.px]=\"\n        zFrame() !== 'none'\n          ? zSize() + zFramePadding() * 2 + (zFrame() === 'text-bottom' || zFrame() === 'text-top' ? 50 : 0)\n          : zSize()\n      \"></canvas>\n\n    @if (zLoading()) {\n      <div class=\"absolute inset-0 z-10 flex items-center justify-center bg-white/80 transition-opacity\">\n        <svg\n          class=\"h-8 w-8 animate-spin text-slate-800\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n      </div>\n    }\n\n    @if (zDownloadable() && !zLoading()) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center rounded-md bg-black/45 opacity-0 transition-all duration-200 hover:opacity-100\">\n        <button\n          z-button\n          [zWave]=\"false\"\n          zSize=\"sm\"\n          (click)=\"downloadQr()\"\n          class=\"flex cursor-pointer items-center gap-2 font-semibold select-none\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"h-4 w-4\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\">\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n          </svg>\n          {{ downloadText() | translate }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (zDownloadButton() && !zLoading()) {\n    <div class=\"mt-4\">\n      <button\n        z-button\n        [zWave]=\"false\"\n        (click)=\"downloadQr()\"\n        class=\"flex cursor-pointer items-center gap-2 font-semibold select-none\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"h-4 w-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\">\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n        </svg>\n        {{ downloadText() | translate }}\n      </button>\n    </div>\n  }\n</div>\n", styles: ["z-qrcode{display:inline-block;line-height:0}z-qrcode .z-qrcode-container{position:relative;display:inline-flex;flex-direction:column;align-items:center;border-radius:inherit}z-qrcode .z-qrcode-canvas-wrapper{position:relative;overflow:hidden;border-radius:inherit}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZQrCodeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-qrcode', imports: [TranslatePipe, ZButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"z-qrcode-container relative flex flex-col items-center\">\n  <div\n    class=\"z-qrcode-canvas-wrapper relative transition-all duration-200\"\n    [class.shadow-md]=\"zShadow()\"\n    [style.border-radius.px]=\"zFrame() !== 'none' || zShadow() ? zFrameBorderRadius() : 0\"\n    [style.overflow]=\"zFrame() !== 'none' || zShadow() ? 'hidden' : 'visible'\">\n    <canvas\n      #qrCanvas\n      class=\"block\"\n      [style.width.px]=\"zFrame() !== 'none' ? zSize() + zFramePadding() * 2 : zSize()\"\n      [style.height.px]=\"\n        zFrame() !== 'none'\n          ? zSize() + zFramePadding() * 2 + (zFrame() === 'text-bottom' || zFrame() === 'text-top' ? 50 : 0)\n          : zSize()\n      \"></canvas>\n\n    @if (zLoading()) {\n      <div class=\"absolute inset-0 z-10 flex items-center justify-center bg-white/80 transition-opacity\">\n        <svg\n          class=\"h-8 w-8 animate-spin text-slate-800\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n      </div>\n    }\n\n    @if (zDownloadable() && !zLoading()) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center rounded-md bg-black/45 opacity-0 transition-all duration-200 hover:opacity-100\">\n        <button\n          z-button\n          [zWave]=\"false\"\n          zSize=\"sm\"\n          (click)=\"downloadQr()\"\n          class=\"flex cursor-pointer items-center gap-2 font-semibold select-none\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"h-4 w-4\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\">\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n          </svg>\n          {{ downloadText() | translate }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (zDownloadButton() && !zLoading()) {\n    <div class=\"mt-4\">\n      <button\n        z-button\n        [zWave]=\"false\"\n        (click)=\"downloadQr()\"\n        class=\"flex cursor-pointer items-center gap-2 font-semibold select-none\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"h-4 w-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\">\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n        </svg>\n        {{ downloadText() | translate }}\n      </button>\n    </div>\n  }\n</div>\n", styles: ["z-qrcode{display:inline-block;line-height:0}z-qrcode .z-qrcode-container{position:relative;display:inline-flex;flex-direction:column;align-items:center;border-radius:inherit}z-qrcode .z-qrcode-canvas-wrapper{position:relative;overflow:hidden;border-radius:inherit}\n"] }]
        }], ctorParameters: () => [], propDecorators: { zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: true }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLevel", required: false }] }], zLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLogo", required: false }] }], zLogoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLogoSize", required: false }] }], zLogoBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLogoBgColor", required: false }] }], zLogoBgShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLogoBgShape", required: false }] }], zLogoPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLogoPadding", required: false }] }], zFgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFgColor", required: false }] }], zBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBgColor", required: false }] }], zDotStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDotStyle", required: false }] }], zEyeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEyeStyle", required: false }] }], zEyeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEyeColor", required: false }] }], zMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMargin", required: false }] }], zFgGradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFgGradient", required: false }] }], zFrame: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFrame", required: false }] }], zFrameText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFrameText", required: false }] }], zFrameColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFrameColor", required: false }] }], zFramePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFramePadding", required: false }] }], zFrameBorderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFrameBorderRadius", required: false }] }], zDownloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDownloadable", required: false }] }], zDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDownloadButton", required: false }] }], zShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShadow", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], _canvasRef: [{ type: i0.ViewChild, args: ['qrCanvas', { isSignal: true }] }] } });

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

export { ZQrCodeComponent };
//# sourceMappingURL=shival99-z-ui-components-z-qrcode.mjs.map
