Yrkki/cv-generator-fe

<ng-container *ngIf="portfolioService.toolbarService.decorations; else elseBlock">
  <span class="d-print-none extra-function toggle_radio" role="radiogroup"
    [attr.aria-labelledby]="uiService.label('viewMode')" #clickableModeDecorated
    (keypress)="inputService.keypress($event)" (click)="$event.stopPropagation()"
    title="{{ portfolioService.model.ui['Mode']?.text }}">
    <input #tagCloudElement type="radio" class="form-control bd-highlight toggle_option" id="first_toggle"
      [(ngModel)]="portfolioService.toolbarService.tagCloud" [value]="TagCloudDisplayMode.tagCloud" name="toggle_option" role="radio"
      [attr.aria-labelledby]="uiService.label('tag cloud')" title="" (keypress)="inputService.keypress($event)"
      (click)="portfolioService.toolbarService.tagCloud=TagCloudDisplayMode.tagCloud">
    <input #chartElement type="radio" class="form-control bd-highlight toggle_option" id="second_toggle"
      [(ngModel)]="portfolioService.toolbarService.tagCloud" [value]="TagCloudDisplayMode.chart" name="toggle_option" role="radio"
      [attr.aria-labelledby]="uiService.label('chart')" title="" (keypress)="inputService.keypress($event)"
      (click)="portfolioService.toolbarService.tagCloud=TagCloudDisplayMode.chart">
    <input #bothElement type="radio" class="form-control bd-highlight toggle_option" id="third_toggle"
      [(ngModel)]="portfolioService.toolbarService.tagCloud" [value]="TagCloudDisplayMode.both" name="toggle_option" role="radio"
      [attr.aria-labelledby]="uiService.label('both')" title="" (keypress)="inputService.keypress($event)"
      (click)="portfolioService.toolbarService.tagCloud=TagCloudDisplayMode.both">
    <label id="{{ uiService.label('tag cloud') }}" for="first_toggle" class="form-label">
      <p>{{ portfolioService.model.ui['tag cloud']?.text }}</p>
    </label>
    <label id="{{ uiService.label('chart') }}" for="second_toggle" class="form-label">
      <p>{{ portfolioService.model.ui['chart']?.text }}</p>
    </label>
    <label id="{{ uiService.label('both') }}" for="third_toggle" class="form-label">
      <p>{{ portfolioService.model.ui['both']?.text }}</p>
    </label>
    <div class="toggle_option_slider">
    </div>
  </span>
</ng-container>
<ng-template #elseBlock>
  <span class="d-print-none extra-function" role="radiogroup" [attr.aria-labelledby]="uiService.label('viewMode')"
    #clickableMode (keypress)="inputService.keypress($event)" (click)="$event.stopPropagation()" title="">
    <span id="{{ uiService.label('viewMode') }}" class="input-group-addon">{{
      portfolioService.model.ui['Mode']?.text }}:</span>

    <label id="{{ uiService.label('tag cloud') }}" for="tag cloud radio" class="form-label radio-inline"
      #clickableTagCloud (keypress)="inputService.keypress($event)"
      (click)="portfolioService.toolbarService.tagCloud=TagCloudDisplayMode.tagCloud">
      <input type="radio" class="form-control bd-highlight" id="tag cloud radio" [(ngModel)]="portfolioService.toolbarService.tagCloud"
        [value]="TagCloudDisplayMode.tagCloud" name="options" role="radio"
        [attr.aria-labelledby]="uiService.label('tag cloud')">{{
      portfolioService.model.ui['tag cloud']?.text }}
    </label>
    <label id="{{ uiService.label('chart') }}" for="chart radio" class="form-label radio-inline" #clickableChart
      (keypress)="inputService.keypress($event)" (click)="portfolioService.toolbarService.tagCloud=TagCloudDisplayMode.chart">
      <input type="radio" class="form-control bd-highlight" id="chart radio" [(ngModel)]="portfolioService.toolbarService.tagCloud"
        [value]="TagCloudDisplayMode.chart" name="options" role="radio"
        [attr.aria-labelledby]="uiService.label('chart')">{{
      portfolioService.model.ui['chart']?.text }}
    </label>
    <label id="{{ uiService.label('both') }}" for="both radio" class="form-label radio-inline" #clickableBoth
      (keypress)="inputService.keypress($event)" (click)="portfolioService.toolbarService.tagCloud=TagCloudDisplayMode.both">
      <input type="radio" class="form-control bd-highlight" id="both radio" [(ngModel)]="portfolioService.toolbarService.tagCloud"
        [value]="TagCloudDisplayMode.both" name="options" role="radio"
        [attr.aria-labelledby]="uiService.label('both')">{{
      portfolioService.model.ui['both']?.text }}
    </label>
  </span>
</ng-template>