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();