feat(qr-modal): implement QR modal component and integrate with tickets page

src/app/shared/components/modal-shell/modal-shell.component.scss

@@ -19,6 +19,36 @@
   margin: 0;
 }
 
+.modal-shell__dialog--qr {
+  width: min(100%, 15rem);
+}
+
+.modal-shell__dialog--qr .modal-shell__content {
+  min-height: auto;
+  border-radius: 0.35rem;
+  background: #ffffff;
+}
+
+.modal-shell__dialog--qr .modal-shell__header {
+  padding: 1.7rem 1rem 0.35rem;
+}
+
+.modal-shell__dialog--qr .modal-shell__title {
+  color: var(--bs-success, #198754);
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.modal-shell__dialog--qr .modal-shell__header .btn-close {
+  top: 0.85rem;
+  right: 0.85rem;
+  font-size: 0.7rem;
+}
+
+.modal-shell__dialog--qr .modal-shell__body {
+  padding: 0 1rem 1rem;
+}
+
 .modal-shell__dialog.modal-sm {
   width: min(100%, 24rem);
 }
@@ -40,8 +70,7 @@
   min-height: 180px;
   max-height: calc(100dvh - 2rem);
   border-radius: 1.25rem;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
 }
 
 .modal-shell__dialog--full .modal-shell__content {
@@ -88,6 +117,7 @@
   }
 
   .modal-shell__dialog,
+  .modal-shell__dialog--qr,
   .modal-shell__dialog.modal-sm,
   .modal-shell__dialog.modal-lg,
   .modal-shell__dialog.modal-xl,

src/app/shared/components/modal-shell/modal-shell.component.ts

@@ -6,7 +6,7 @@ import {
   computed,
   input,
   output,
-  viewChild
+  viewChild,
 } from '@angular/core';
 
 import { ModalSize } from '../../../core/services/modal.service';
@@ -16,7 +16,7 @@ import { ModalSize } from '../../../core/services/modal.service';
   imports: [NgClass],
   templateUrl: './modal-shell.component.html',
   styleUrl: './modal-shell.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalShellComponent {
   private readonly panel = viewChild.required<ElementRef<HTMLElement>>('panel');
@@ -32,10 +32,11 @@ export class ModalShellComponent {
     const size = this.size();
 
     return {
+      'modal-shell__dialog--qr': size === 'qr',
       'modal-sm': size === 'sm',
       'modal-lg': size === 'lg',
       'modal-xl': size === 'xl',
-      'modal-shell__dialog--full': size === 'full'
+      'modal-shell__dialog--full': size === 'full',
     };
   });
 
@@ -55,8 +56,8 @@ export class ModalShellComponent {
         'input:not([disabled])',
         'select:not([disabled])',
         'textarea:not([disabled])',
-        '[tabindex]:not([tabindex="-1"])'
-      ].join(', ')
+        '[tabindex]:not([tabindex="-1"])',
+      ].join(', '),
     );
 
     (focusTarget ?? panel).focus();

src/app/shared/components/qr-modal/qr-modal.component.html

@@ -0,0 +1,16 @@
+<article class="qr-modal">
+  <header class="qr-modal__header">
+    <p class="qr-modal__id">ID: {{ data.id }}</p>
+    @if (data.date) {
+      <time class="qr-modal__date">{{ data.date }}</time>
+    }
+  </header>
+
+  <qrcode
+    class="qr-modal__code"
+    [qrdata]="data.ticket"
+    [width]="320"
+    errorCorrectionLevel="M"
+    [ariaLabel]="'Código QR del ticket ' + data.id"
+  />
+</article>

src/app/shared/components/qr-modal/qr-modal.component.scss

@@ -0,0 +1,44 @@
+.qr-modal {
+  display: grid;
+  justify-items: center;
+  gap: 0.65rem;
+  width: 100%;
+  text-align: center;
+}
+
+.qr-modal__header {
+  display: grid;
+  justify-items: center;
+  gap: 0.25rem;
+}
+
+.qr-modal__id {
+  margin: 0;
+}
+
+.qr-modal__id {
+  color: #4f4f4f;
+  font-size: 0.68rem;
+  line-height: 1.2;
+}
+
+.qr-modal__date {
+  margin-top: 0.35rem;
+  color: #8a8a8a;
+  font-size: 0.62rem;
+  line-height: 1.2;
+}
+
+.qr-modal__code {
+  display: block;
+  width: 100%;
+  max-width: 11rem;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+:host ::ng-deep .qr-modal__code canvas {
+  display: block;
+  width: 100% !important;
+  height: auto !important;
+}

src/app/shared/components/qr-modal/qr-modal.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { MODAL_DATA, QrModalData } from '../../../core/services/modal.service';
+import { QRCodeComponent } from '../qrcode/qrcode.component';
+
+@Component({
+  selector: 'app-qr-modal',
+  imports: [QRCodeComponent],
+  templateUrl: './qr-modal.component.html',
+  styleUrl: './qr-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QrModalComponent {
+  protected readonly data = inject<QrModalData>(MODAL_DATA);
+}