published shows are readonly

src/app/modules/shows/show/song/song.component.html

@@ -1,5 +1,7 @@
 <div *ngIf="_song">
-  <div class="song">
+  <div *ngIf="show.published" class="title published">{{_song.title}}</div>
+
+  <div *ngIf="!show.published" class="song">
     <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
     <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
     <span class="title">{{_song.title}}</span>
@@ -13,6 +15,7 @@
   </span>
     <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
   </div>
-  <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText" [chordMode]="showSong.chordMode"
-                 [showSwitch]="true" [text]="_song.text"></app-song-text>
+  <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText || show.published"
+                 [chordMode]="showSong.chordMode"
+                 [showSwitch]="!show.published" [text]="_song.text"></app-song-text>
 </div>

src/app/modules/shows/show/song/song.component.less

@@ -30,6 +30,11 @@ mat-form-field {
 
 .title {
   grid-area: title;
+
+  &.published {
+    margin: 10px 0;
+    font-weight: bold;
+  }
 }
 
 .keys {

src/app/modules/shows/show/song/song.component.ts

@@ -8,6 +8,7 @@ import {ShowSong} from '../../services/showSong';
 import {getScale} from '../../../songs/services/key.helper';
 import {FormControl} from '@angular/forms';
 import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
+import {Show} from '../../services/show';
 
 @Component({
   selector: 'app-song',
@@ -15,6 +16,7 @@ import {ChordMode} from '../../../../widget-modules/components/song-text/song-te
   styleUrls: ['./song.component.less']
 })
 export class SongComponent implements OnInit {
+  @Input() public show: Show;
   @Input() public showSong: ShowSong;
   @Input() public showSongs: ShowSong[];
   @Input() public showId: string;