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

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