refactor(qrcode): replace angularx-qrcode with custom QRCodeComponent and update dependencies

src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
-import { QRCodeComponent } from 'angularx-qrcode';
-
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
+import { QRCodeComponent } from '../../../../shared/components/qrcode/qrcode.component';
 import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
 
 @Component({

src/app/shared/components/qrcode/qrcode.component.ts

@@ -0,0 +1,68 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  ViewChild
+} from '@angular/core';
+
+import * as QRCode from 'qrcode';
+
+type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+@Component({
+  selector: 'qrcode',
+  standalone: true,
+  template: '<canvas #canvas [attr.aria-label]="ariaLabel" role="img"></canvas>',
+  styles: [
+    `
+      :host {
+        display: inline-block;
+        line-height: 0;
+      }
+
+      canvas {
+        display: block;
+        height: auto;
+        max-width: 100%;
+      }
+    `
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QRCodeComponent implements AfterViewInit, OnChanges {
+  @Input({ required: true }) qrdata = '';
+  @Input() width = 200;
+  @Input() errorCorrectionLevel: QRCodeErrorCorrectionLevel = 'M';
+  @Input() ariaLabel = 'Codigo QR';
+
+  @ViewChild('canvas', { static: true }) private readonly canvas!: ElementRef<HTMLCanvasElement>;
+
+  private viewReady = false;
+
+  ngAfterViewInit(): void {
+    this.viewReady = true;
+    this.render();
+  }
+
+  ngOnChanges(): void {
+    this.render();
+  }
+
+  private render(): void {
+    if (!this.viewReady || !this.qrdata) {
+      return;
+    }
+
+    void QRCode.toCanvas(this.canvas.nativeElement, this.qrdata, {
+      errorCorrectionLevel: this.errorCorrectionLevel,
+      margin: 2,
+      width: this.width
+    }).catch(() => {
+      const context = this.canvas.nativeElement.getContext('2d');
+      context?.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+    });
+  }
+}

src/types/qrcode.d.ts

@@ -0,0 +1,15 @@
+declare module 'qrcode' {
+  export type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+  export interface QRCodeToCanvasOptions {
+    errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
+    margin?: number;
+    width?: number;
+  }
+
+  export function toCanvas(
+    canvasElement: HTMLCanvasElement,
+    text: string,
+    options?: QRCodeToCanvasOptions
+  ): Promise<void>;
+}