add "Allow switching files" option to the code editor

Author: NothingEverHappens

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.html

@@ -24,12 +24,18 @@
       Show preview
     </mat-checkbox>
   </div>
+  <div>
+    <mat-checkbox [(ngModel)]="allowSwitchingFiles" (ngModelChange)="update()">
+      Allow switching files
+    </mat-checkbox>
+  </div>
 </div>
 
 <code-demo
   [showPreview]="showPreview"
-  [allowSwitchingFiles]="false"
+  [allowSwitchingFiles]="allowSwitchingFiles"
   [(ngModel)]="code"
+  [displayFileName]="!allowSwitchingFiles"
   (ngModelChange)="update()"
   [files]="openFiles"
   [ui]="ui"

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.ts

@@ -21,6 +21,8 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
   @Input() presentationId!: string;
   @Input() selectedFiles: SelectableFiles[] = [];
   @Input() showPreview = true;
+  @Input() allowSwitchingFiles = true;
+  @Input() displayFileName = false;
   readonly defaultNewFileName = 'new.ts';
 
   openFiles: string[] = [];
@@ -38,7 +40,8 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
       props: {
         code: this.code,
         selectedFiles: this.selectedFiles,
-        showPreview: this.showPreview
+        showPreview: this.showPreview,
+        allowSwitchingFiles: this.allowSwitchingFiles
       }
     });
   }

libs/code-demos/src/lib/code-demo/code-demo.component.html

@@ -3,6 +3,7 @@
   class="quarter"
   [enableAutoFolding]="enableAutoFolding"
   [files]="files"
+  [displayFileName]="displayFileName"
   [allowSwitchingFiles]="allowSwitchingFiles"
   [solutions]="solutions"
   [(ngModel)]="code"

libs/code-demos/src/lib/code-demo/code-demo.component.ts

@@ -67,6 +67,7 @@ export class CodeDemoComponent implements ControlValueAccessor, OnDestroy {
   @Input() files: string[];
   @Input() presets = ['angular'];
   @Input() bootstrap = 'bootstrap';
+  @Input() displayFileName = false;
   @Input() solutions: Code = {};
   @Input() highlights: Record<string, string | RegExp> = {};
   @Input() allowSwitchingFiles = true;