refactor: make prettier work for angular

.github/dependabot.yml

@@ -13,7 +13,7 @@ updates:
   #    directory: "/tools/schematics/" # Location of package manifests
   #    schedule:
   #      interval: "monthly"
-  - package-ecosystem: "github-actions"
+  - package-ecosystem: 'github-actions'
-    directory: "/"
+    directory: '/'
     schedule:
       interval: monthly

.prettierrc.json

@@ -11,16 +11,10 @@
   "endOfLine": "auto",
   "printWidth": 90,
   "overrides": [
-    {
-      "files": "*.component.html",
-      "options": {
-        "parser": "angular"
-      }
-    },
     {
       "files": "*.html",
       "options": {
-        "parser": "html"
+        "parser": "angular"
       }
     }
   ]

package-lock.json

@@ -121,7 +121,7 @@
         "nightwatch": "^3.6.3",
         "object-path": "^0.11.8",
         "p-throttle": "^3.1.0",
-        "prettier": "^3.4.2",
+        "prettier": "^3.5.1",
         "pretty-quick": "^4.0.0",
         "query-string": "^7.1.1",
         "rxjs": "^6.6.7",
@@ -21014,9 +21014,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.4.2",
+      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.1.tgz",
-      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "integrity": "sha512-hPpFQvHwL3Qv5AdRvBFMhnKo4tYxp0ReXiPn2bxkiohEX6mBeBwEpBSQTkD458RaaDKQMYSp4hX4UtfUTA5wDw==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"

package.json

@@ -207,7 +207,7 @@
     "nightwatch": "^3.6.3",
     "object-path": "^0.11.8",
     "p-throttle": "^3.1.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.1",
     "pretty-quick": "^4.0.0",
     "query-string": "^7.1.1",
     "rxjs": "^6.6.7",

src/app/app.component.html

@@ -1,4 +1,5 @@
-@if (isShowUi$|async) { @if ((globalThemeService.backgroundImg$|async); as bgImage) {
+@if (isShowUi$ | async) {
+  @if (globalThemeService.backgroundImg$ | async; as bgImage) {
     <div
       [style.background]="'url(' + bgImage + ')'"
       class="bg-image"
@@ -11,15 +12,18 @@
       [isElevated]="true"
       class="global"
     ></add-task-bar>
-} @if ((layoutService.isShowAddTaskBar$|async)) {
+  }
+  @if (layoutService.isShowAddTaskBar$ | async) {
     <div
       (click)="layoutService.hideAddTaskBar()"
       @fade
       class="backdrop"
     ></div>
-} @if (layoutService.isShowSearchBar$|async) {
+  }
+  @if (layoutService.isShowSearchBar$ | async) {
     <search-bar (blurred)="layoutService.hideSearchBar()"></search-bar>
-} @if ((layoutService.isShowSearchBar$|async)) {
+  }
+  @if (layoutService.isShowSearchBar$ | async) {
     <div
       (click)="layoutService.hideSearchBar()"
       @fade
@@ -34,7 +38,7 @@
       <mat-sidenav
         (closedStart)="layoutService.hideSideNav()"
         [mode]="(layoutService.isNavOver$ | async) ? 'over' : 'side'"
-    [opened]="(layoutService.isShowSideNav$|async)"
+        [opened]="layoutService.isShowSideNav$ | async"
         position="start"
       >
         <side-nav></side-nav>
@@ -46,7 +50,7 @@
           class="header-wrapper"
         >
           <main-header></main-header>
-      @if ((workContextService.isActiveWorkContextProject$|async)) {
+          @if (workContextService.isActiveWorkContextProject$ | async) {
             <bookmark-bar></bookmark-bar>
           }
           <banner></banner>
@@ -63,8 +67,11 @@
     </mat-sidenav-container>
   }
   <!-- -->
-} @if (!(syncTriggerService.afterInitialSyncDoneAndDataLoadedInitially$|async) ||
+}
-(imexMetaService.isDataImportInProgress$|async)) {
+@if (
+  !(syncTriggerService.afterInitialSyncDoneAndDataLoadedInitially$ | async) ||
+  (imexMetaService.isDataImportInProgress$ | async)
+) {
   <div class="loading-full-page-wrapper">
     <global-progress-bar></global-progress-bar>
     <div class="app-loading">

src/app/core-ui/global-progress-bar/global-progress-bar.component.html

@@ -1,11 +1,12 @@
-@if ((globalProgressBarService.label$|async); as label) {
+@if (globalProgressBarService.label$ | async; as label) {
   <div
     [@fadeOut]
     class="badge"
   >
     {{ label | translate }}
   </div>
-} @if ((globalProgressBarService.isShowGlobalProgressBar$|async)) {
+}
+@if (globalProgressBarService.isShowGlobalProgressBar$ | async) {
   <div [@fadeInOutBottom]>
     <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   </div>

src/app/core-ui/main-header/main-header.component.html

@@ -42,7 +42,9 @@
   <nav class="action-nav">
     <button
       (click)="layoutService.showAddTaskBar()"
-      matTooltip="{{T.MH.ADD_NEW_TASK|translate}} {{kb.addNewTask?'['+kb.addNewTask+']':''}}"
+      matTooltip="{{ T.MH.ADD_NEW_TASK | translate }} {{
+        kb.addNewTask ? '[' + kb.addNewTask + ']' : ''
+      }}"
       class="hide-xs tour-addBtn"
       mat-icon-button
     >
@@ -51,7 +53,9 @@
 
     <button
       (click)="layoutService.showSearchBar()"
-      matTooltip="{{T.MH.SHOW_SEARCH_BAR|translate}} {{kb.showSearchBar?'['+kb.showSearchBar+']':''}}"
+      matTooltip="{{ T.MH.SHOW_SEARCH_BAR | translate }} {{
+        kb.showSearchBar ? '[' + kb.showSearchBar + ']' : ''
+      }}"
       mat-icon-button
     >
       <mat-icon>search</mat-icon>
@@ -72,7 +76,7 @@
         <!-- -->
         @if (isOnline) {
           <!-- -->
-      <mat-icon [class.spin]="(syncProviderService.isSyncing$|async)">sync</mat-icon>
+          <mat-icon [class.spin]="syncProviderService.isSyncing$ | async">sync</mat-icon>
           @let isInSync = syncProviderService.isCurrentProviderInSync$ | async;
           <!-- -->
           @if (isInSync) {
@@ -112,7 +116,9 @@
     @if (!(globalConfigService.cfg$ | async)?.focusMode?.isAlwaysUseFocusMode) {
       <button
         mat-icon-button
-      matTooltip="Enter focus mode {{kb.goToFocusMode?'['+kb.goToFocusMode+']':''}}"
+        matTooltip="Enter focus mode {{
+          kb.goToFocusMode ? '[' + kb.goToFocusMode + ']' : ''
+        }}"
         class="hide-xxs"
         (click)="enableFocusMode()"
       >
@@ -121,13 +127,13 @@
     }
 
     <div class="play-btn-wrapper">
-      @if ((taskService.currentTask$|async); as currentTask) {
+      @if (taskService.currentTask$ | async; as currentTask) {
         <div
           @fade
           class="current-task-title"
         >
           <div class="title">{{ currentTask.title }}</div>
-        @if ((currentTaskContext$|async); as currentTaskContext) {
+          @if (currentTaskContext$ | async; as currentTaskContext) {
             <tag
               @expandFadeHorizontal
               [tag]="currentTaskContext"
@@ -135,7 +141,8 @@
             ></tag>
           }
         </div>
-      } @if ((taskService.currentTaskId$|async)) {
+      }
+      @if (taskService.currentTaskId$ | async) {
         <div class="pulse-circle"></div>
       }
 
@@ -147,20 +154,27 @@
         class="play-btn tour-playBtn mat-elevation-z3"
         mat-mini-fab
       >
-        @if ((pomodoroService.isEnabled$|async)) { @if ((pomodoroService.isBreak$|async))
+        @if (pomodoroService.isEnabled$ | async) {
-        {
+          @if (pomodoroService.isBreak$ | async) {
             <mat-icon>free_breakfast</mat-icon>
-        } @if (!(pomodoroService.isBreak$|async)) { @if
+          }
-        (!(taskService.currentTaskId$|async)) {
+          @if (!(pomodoroService.isBreak$ | async)) {
+            @if (!(taskService.currentTaskId$ | async)) {
               <mat-icon>play_arrow</mat-icon>
-        } @if ((taskService.currentTaskId$|async)) {
+            }
+            @if (taskService.currentTaskId$ | async) {
               <mat-icon>pause</mat-icon>
-        } } } @if (!(pomodoroService.isEnabled$|async)) { @if
+            }
-        (!(taskService.currentTaskId$|async)) {
+          }
+        }
+        @if (!(pomodoroService.isEnabled$ | async)) {
+          @if (!(taskService.currentTaskId$ | async)) {
             <mat-icon>play_arrow</mat-icon>
-        } @if ((taskService.currentTaskId$|async)) {
+          }
+          @if (taskService.currentTaskId$ | async) {
             <mat-icon>pause</mat-icon>
-        } }
+          }
+        }
 
         <svg
           class="circle-svg"
@@ -184,7 +198,7 @@
 
       @if ((pomodoroService.cfg$ | async)?.isEnabled) {
         <div class="pomodoro-label">
-        {{ (pomodoroService.currentSessionTime$|async|msToMinuteClockString) }}
+          {{ pomodoroService.currentSessionTime$ | async | msToMinuteClockString }}
         </div>
         <div class="pomodoro-controls">
           <button
@@ -211,7 +225,7 @@
       }
     </div>
 
-    @if ((simpleCounterService.enabledSimpleCounters$|async); as enabledSimpleCounters) {
+    @if (simpleCounterService.enabledSimpleCounters$ | async; as enabledSimpleCounters) {
       @if (enabledSimpleCounters.length) {
         <div class="simple-counter-buttons-outer-wrapper">
           <button
@@ -222,7 +236,8 @@
           >
             @if (!isShowSimpleCounterBtnsMobile) {
               <mat-icon>timer</mat-icon>
-        } @if (isShowSimpleCounterBtnsMobile) {
+            }
+            @if (isShowSimpleCounterBtnsMobile) {
               <mat-icon>close</mat-icon>
             }
           </button>
@@ -230,8 +245,10 @@
             class="simple-counter-buttons"
             [class.isVisibleMobile]="isShowSimpleCounterBtnsMobile"
           >
-        @for (simpleCounter of enabledSimpleCounters; track trackById($index,
+            @for (
-        simpleCounter)) {
+              simpleCounter of enabledSimpleCounters;
+              track trackById($index, simpleCounter)
+            ) {
               <simple-counter-button
                 [matTooltip]="simpleCounter.title"
                 [simpleCounter]="simpleCounter"
@@ -239,29 +256,36 @@
             }
           </div>
         </div>
-    } }
+      }
+    }
 
     <button
       class="toggle-notes-btn tour-issuePanelTrigger e2e-toggle-issue-provider-panel"
       [disabled]="!(isRouteWithSidePanel$ | async)"
-      [class.isActive]="(layoutService.isShowIssuePanel$|async)"
+      [class.isActive]="layoutService.isShowIssuePanel$ | async"
-      [class.isRouteWithRightPanel]="(isRouteWithRightPanel$|async)"
+      [class.isRouteWithRightPanel]="isRouteWithRightPanel$ | async"
       (click)="layoutService.toggleAddTaskPanel()"
       mat-icon-button
-      matTooltip="{{T.MH.TOGGLE_SHOW_ISSUE_PANEL|translate}} {{kb.toggleIssuePanel?'['+kb.toggleIssuePanel+']':''}}"
+      matTooltip="{{ T.MH.TOGGLE_SHOW_ISSUE_PANEL | translate }} {{
+        kb.toggleIssuePanel ? '[' + kb.toggleIssuePanel + ']' : ''
+      }}"
     >
       <mat-icon class="note-ico">playlist_add</mat-icon>
     </button>
 
     <button
       class="toggle-notes-btn e2e-toggle-notes-btn"
-      [title]="!(isRouteWithSidePanel$|async) ? (T.MH.NOTES_PANEL_INFO|translate) : ''"
+      [title]="
+        !(isRouteWithSidePanel$ | async) ? (T.MH.NOTES_PANEL_INFO | translate) : ''
+      "
       [disabled]="!(isRouteWithSidePanel$ | async)"
-      [class.isActive]="(layoutService.isShowNotes$|async)"
+      [class.isActive]="layoutService.isShowNotes$ | async"
-      [class.isRouteWithRightPanel]="(isRouteWithRightPanel$|async)"
+      [class.isRouteWithRightPanel]="isRouteWithRightPanel$ | async"
       (click)="layoutService.toggleNotes()"
       mat-icon-button
-      matTooltip="{{T.MH.TOGGLE_SHOW_NOTES|translate}} {{kb.openProjectNotes?'['+kb.openProjectNotes+']':''}}"
+      matTooltip="{{ T.MH.TOGGLE_SHOW_NOTES | translate }} {{
+        kb.openProjectNotes ? '[' + kb.openProjectNotes + ']' : ''
+      }}"
     >
       <mat-icon class="note-ico">comment</mat-icon>
     </button>

src/app/core-ui/side-nav/side-nav.component.html

@@ -1,5 +1,5 @@
 <section class="main">
-  @if ((workContextService.mainWorkContext$|async); as mainContext) {
+  @if (workContextService.mainWorkContext$ | async; as mainContext) {
     <side-nav-item
       #menuEntry
       [type]="WorkContextType.TAG"
@@ -78,16 +78,18 @@
       [rightClickTriggerEl]="projectExpandBtn"
     ></context-menu>
     <ng-template #contextMenu>
-    @for (project of (allProjects$|async); track project.id) {
+      @for (project of allProjects$ | async; track project.id) {
         <button
           mat-menu-item
           (click)="toggleProjectVisibility(project)"
         >
           @if (!project.isHiddenFromMenu) {
             <mat-icon>visibility</mat-icon>
-      } @if (project.isHiddenFromMenu) {
+          }
+          @if (project.isHiddenFromMenu) {
             <mat-icon>visibility_off</mat-icon>
-      } {{ project.title }}
+          }
+          {{ project.title }}
         </button>
       }
     </ng-template>
@@ -111,7 +113,8 @@
       }
     </div>
   </section>
-} @if ((tagList$|async); as tagList) {
+}
+@if (tagList$ | async; as tagList) {
   <section class="tags">
     <button
       #menuEntry

src/app/core-ui/work-context-menu/work-context-menu.component.html

@@ -40,7 +40,8 @@
     <mat-icon class="color-warn-i">delete_forever</mat-icon>
     <span class="text">{{ T.MH.DELETE_TAG | translate }}</span>
   </button>
-} @if (isForProject) {
+}
+@if (isForProject) {
   <button
     (click)="deleteProject()"
     mat-menu-item

src/app/core/banner/banner/banner.component.html

@@ -1,15 +1,17 @@
-@if ((activeBanner$|async); as banner) {
+@if (activeBanner$ | async; as banner) {
   <div
     [@banner]
     [class.isError]="banner.type === 'ERROR'"
     class="content-wrapper"
   >
-  @if (banner.progress$ && (banner.progress$|async); as progress) { @if (progress>0) {
+    @if (banner.progress$ && (banner.progress$ | async); as progress) {
+      @if (progress > 0) {
         <mat-progress-bar
           mode="determinate"
           [value]="progress"
         ></mat-progress-bar>
-  } }
+      }
+    }
     <div class="inner-content-wrapper">
       @if (banner.img) {
         <div class="motivational-img-wrapper">
@@ -19,7 +21,8 @@
       <div class="message-wrapper">
         @if (banner.ico) {
           <mat-icon>{{ banner.ico }}</mat-icon>
-      } @if (banner.svgIco) {
+        }
+        @if (banner.svgIco) {
           <mat-icon [svgIcon]="banner.svgIco"></mat-icon>
         }
         <!-- -->
@@ -45,7 +48,8 @@
           >
             {{ T.G.DISMISS | translate }}
           </button>
-      } @if (banner.action) {
+        }
+        @if (banner.action) {
           <button
             (click)="action(banner.id, banner.action)"
             color="primary"
@@ -54,7 +58,8 @@
           >
             {{ banner.action.label | translate: banner.translateParams }}
           </button>
-      } @if (banner.action2) {
+        }
+        @if (banner.action2) {
           <button
             (click)="action(banner.id, banner.action2)"
             color="primary"
@@ -63,7 +68,8 @@
           >
             {{ banner.action2.label | translate: banner.translateParams }}
           </button>
-      } @if (banner.action3) {
+        }
+        @if (banner.action3) {
           <button
             (click)="action(banner.id, banner.action3)"
             color="primary"

src/app/core/snack/snack-custom/snack-custom.component.html

@@ -4,13 +4,18 @@
   [class.success]="data.type === 'SUCCESS'"
   class="wrapper"
 >
-  @if (!data.ico) { @if (data.type==='SUCCESS') {
+  @if (!data.ico) {
+    @if (data.type === 'SUCCESS') {
       <mat-icon class="snack-icon">check_circle </mat-icon>
-  } @if (data.type==='ERROR') {
+    }
+    @if (data.type === 'ERROR') {
       <mat-icon class="snack-icon">error </mat-icon>
-  } } @if (data.ico) {
+    }
+  }
+  @if (data.ico) {
     <mat-icon class="snack-icon">{{ data.ico }}</mat-icon>
-  } @if (data.svgIco) {
+  }
+  @if (data.svgIco) {
     <mat-icon
       [svgIcon]="data.svgIco"
       class="snack-icon"
@@ -42,7 +47,8 @@
     >
       <mat-icon>close</mat-icon>
     </button>
-  } @if (data.promise||data.showWhile$||data.isSpinner) {
+  }
+  @if (data.promise || data.showWhile$ || data.isSpinner) {
     <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   }
 </div>

src/app/features/add-tasks-for-tomorrow/add-scheduled-for-tomorrow/add-scheduled-today-or-tomorrow-btn.component.html

@@ -1,11 +1,15 @@
 @let nrOfPlannerItemsForTomorrow =
-(addTasksForTomorrowService.nrOfPlannerItemsForTomorrow$|async);
+  addTasksForTomorrowService.nrOfPlannerItemsForTomorrow$ | async;
 <!---->
-@let plannedForToday = (addTasksForTomorrowService.allPlannedForTodayNotOnToday$|async);
+@let plannedForToday = addTasksForTomorrowService.allPlannedForTodayNotOnToday$ | async;
 <!---->
 
-@if (workContextService.isToday &&(isAlwaysShowIfAny() ||
+@if (
-(workContextService.activeWorkContext$|async)?.taskIds.length ===0) && plannedForToday) {
+  workContextService.isToday &&
+  (isAlwaysShowIfAny() ||
+    (workContextService.activeWorkContext$ | async)?.taskIds.length === 0) &&
+  plannedForToday
+) {
   <div class="wrap-add-planned">
     @if (plannedForToday?.length) {
       <button
@@ -31,8 +35,12 @@
           tabindex="1"
         >
           <mat-icon>playlist_add</mat-icon>
-    {{ T.WW.ADD_SCHEDULED_FOR_TOMORROW|translate:{ nr: nrOfPlannerItemsForTomorrow } }}
+          {{
-  </button>
+            T.WW.ADD_SCHEDULED_FOR_TOMORROW
+              | translate: { nr: nrOfPlannerItemsForTomorrow }
           }}
+        </button>
+      }
+    }
   </div>
 }

src/app/features/bookmark/bookmark-bar/bookmark-bar.component.html

@@ -1,7 +1,7 @@
 @if (bookmarkService.isShowBookmarks$ | async) {
   <div
     #bookmarkBar
-  [@slide]="{value:'*',params:{elHeight:(bookmarkBarHeight)}}"
+    [@slide]="{ value: '*', params: { elHeight: bookmarkBarHeight } }"
     class="global-bookmark-list-outer"
   >
     @if (isDragOver) {
@@ -25,7 +25,8 @@
           >
             <mat-icon>more_vert</mat-icon>
           </button>
-      } @if (isEditMode) {
+        }
+        @if (isEditMode) {
           <button
             (click)="isEditMode = false; isContextMenuDisabled = false"
             mat-stroked-button
@@ -54,7 +55,7 @@
           </ng-template>
         </mat-menu>
       </div>
-    @let bookmarks = (bookmarkService.bookmarks$|async);
+      @let bookmarks = bookmarkService.bookmarks$ | async;
       <div
         [class.isEditMode]="isEditMode"
         cdkDropList
@@ -65,7 +66,8 @@
       >
         @if (!bookmarks?.length) {
           <div class="msg">{{ T.F.BOOKMARK.BAR.NO_BOOKMARKS | translate }}</div>
-      } @for (bookmark of bookmarks; track trackByFn($index, bookmark)) {
+        }
+        @for (bookmark of bookmarks; track trackByFn($index, bookmark)) {
           <div
             class="global-bookmark"
             cdkDrag
@@ -74,7 +76,9 @@
             <a
               [enlargeImg]="bookmark.type === 'IMG' && bookmark.path"
               [href]="bookmark.path"
-          [style.background-image]="bookmark.type==='IMG'&& 'url('+bookmark.path+')'"
+              [style.background-image]="
+                bookmark.type === 'IMG' && 'url(' + bookmark.path + ')'
+              "
               [title]="bookmark.path"
               aria-label="open global bookmark"
               bookmarkLink
@@ -86,7 +90,8 @@
             >
               @if (bookmark.icon) {
                 <mat-icon>{{ bookmark.icon }} </mat-icon>
-          } {{bookmark.title}}
+              }
+              {{ bookmark.title }}
             </a>
             @if (isEditMode) {
               <div class="controls">

src/app/features/bookmark/dialog-edit-bookmark/dialog-edit-bookmark.component.html

@@ -4,13 +4,17 @@
     (submit)="$event.preventDefault(); submit()"
   >
     <h1 mat-dialog-title>
-    {{ (bookmarkCopy.id ? (T.F.BOOKMARK.DIALOG_EDIT.EDIT_BOOKMARK) :
+      {{
-    (T.F.BOOKMARK.DIALOG_EDIT.ADD_BOOKMARK)) |translate }}
+        (bookmarkCopy.id
+          ? T.F.BOOKMARK.DIALOG_EDIT.EDIT_BOOKMARK
+          : T.F.BOOKMARK.DIALOG_EDIT.ADD_BOOKMARK
+        ) | translate
+      }}
     </h1>
     <mat-dialog-content>
       <div class="form-wrapper">
         <mat-form-field>
-        <mat-label>{{(T.G.TITLE|translate)}}</mat-label>
+          <mat-label>{{ T.G.TITLE | translate }}</mat-label>
           <input
             [(ngModel)]="bookmarkCopy.title"
             autofocus="autofocus"
@@ -30,20 +34,20 @@
           />
         </mat-form-field>
         <mat-form-field>
-        <mat-label>{{(T.F.BOOKMARK.DIALOG_EDIT.SELECT_TYPE|translate)}}</mat-label>
+          <mat-label>{{ T.F.BOOKMARK.DIALOG_EDIT.SELECT_TYPE | translate }}</mat-label>
           <mat-select
             [(ngModel)]="bookmarkCopy.type"
             name="type"
             required="true"
           >
             @for (type of types; track trackByIndex($index, type)) {
-          <mat-option [value]="type.type">{{ (type.title|translate) }} </mat-option>
+              <mat-option [value]="type.type">{{ type.title | translate }} </mat-option>
             }
           </mat-select>
         </mat-form-field>
         <div class="custom-icon-wrapper">
           <mat-form-field>
-          <mat-label>{{(T.F.BOOKMARK.DIALOG_EDIT.SELECT_ICON|translate)}}</mat-label>
+            <mat-label>{{ T.F.BOOKMARK.DIALOG_EDIT.SELECT_ICON | translate }}</mat-label>
             <input
               [(ngModel)]="bookmarkCopy.icon"
               [formControl]="iconControl"
@@ -56,7 +60,7 @@
               #auto="matAutocomplete"
               [autoActiveFirstOption]="true"
             >
-            @for (icon of (filteredIcons$|async); track trackByIndex($index, icon)) {
+              @for (icon of filteredIcons$ | async; track trackByIndex($index, icon)) {
                 <mat-option [value]="icon">
                   <mat-icon>{{ icon }}</mat-icon>
                   <span>{{ icon }}</span>

src/app/features/config/config-section/config-section.component.html

@@ -1,7 +1,7 @@
 <collapsible
   [isExpanded]="isExpanded"
   [isIconBefore]="true"
-  [title]="(section?.title|translate)"
+  [title]="section?.title | translate"
 >
   <!--[icon]="section?.icon"-->
 
@@ -9,18 +9,26 @@
     <help-section>
       @if (section?.help) {
         <div [innerHtml]="section?.help | translate"></div>
-    } @if (section?.helpArr) { @for (helpSection of section?.helpArr; track
+      }
-    trackByIndex($index, helpSection)) { @if (helpSection.h) {
+      @if (section?.helpArr) {
+        @for (helpSection of section?.helpArr; track trackByIndex($index, helpSection)) {
+          @if (helpSection.h) {
             <div class="mat-caption">{{ helpSection.h | translate }}</div>
-    } @if (helpSection.p) {
+          }
+          @if (helpSection.p) {
             <p [innerHTML]="helpSection.p | translate"></p>
-    } @if (helpSection.p2) {
+          }
+          @if (helpSection.p2) {
             <p [innerHTML]="helpSection.p2 | translate"></p>
-    } @if (helpSection.p3) {
+          }
+          @if (helpSection.p3) {
             <p [innerHTML]="helpSection.p3 | translate"></p>
-    } @if (helpSection.p4) {
+          }
+          @if (helpSection.p4) {
             <p [innerHTML]="helpSection.p4 | translate"></p>
-    } } }
+          }
+        }
+      }
     </help-section>
   }
   <div class="form-wrapper {{ section?.key }}">

src/app/features/config/default-global-config.const.ts

@@ -1,10 +1,10 @@
 import { GlobalConfigState } from './global-config.model';
 import { DEFAULT_PROJECT_ID } from '../project/project.const';
 import { TRACKING_INTERVAL } from 'src/app/app.constants';
-import {getDefaultVoice} from 'src/app/features/domina-mode/getAvailableVoices'
+import { getDefaultVoice } from 'src/app/features/domina-mode/getAvailableVoices';
 const minute = 60 * 1000;
 const defaultVoice = getDefaultVoice();
-console.log("Setting default voice as"+ defaultVoice);
+console.log('Setting default voice as' + defaultVoice);
 
 export const DEFAULT_DAY_START = '9:00';
 export const DEFAULT_GLOBAL_CONFIG: GlobalConfigState = {
@@ -64,7 +64,6 @@ export const DEFAULT_GLOBAL_CONFIG: GlobalConfigState = {
     volume: 75,
     text: 'Your current task is: ${currentTaskTitle}',
     voice: defaultVoice,
-
   },
   focusMode: {
     isAlwaysUseFocusMode: false,

src/app/features/config/form-cfgs/domina-mode-form.const.ts

@@ -2,8 +2,7 @@
 import { ConfigFormSection, DominaModeConfig } from '../global-config.model';
 import { T } from '../../../t.const';
 import { speak } from '../../../util/speak';
-import {getAvailableVoices} from '../../domina-mode/getAvailableVoices'
+import { getAvailableVoices } from '../../domina-mode/getAvailableVoices';
-
 
 export const DOMINA_MODE_FORM: ConfigFormSection<DominaModeConfig> = {
   title: T.F.DOMINA_MODE.FORM.TITLE,
@@ -61,8 +60,8 @@ export const DOMINA_MODE_FORM: ConfigFormSection<DominaModeConfig> = {
       key: 'voice',
       type: 'select',
       templateOptions: {
-        label:"Select a Voice",
+        label: 'Select a Voice',
-        description:"Choose a voice",
+        description: 'Choose a voice',
         required: false,
       },
       hooks: {
@@ -72,16 +71,13 @@ export const DOMINA_MODE_FORM: ConfigFormSection<DominaModeConfig> = {
           //console.log(voices);
 
           if (field.templateOptions) {
-            field.templateOptions.options = voices.map(voiceName=>({
+            field.templateOptions.options = voices.map((voiceName) => ({
               label: voiceName.name,
               value: voiceName.voiceURI,
-
+            }));
-            }))
-          }
-
-        }
-      }
-
           }
+        },
+      },
+    },
   ],
 };

src/app/features/config/global-config.model.ts

@@ -157,7 +157,6 @@ export type DominaModeConfig = Readonly<{
   interval: number;
   volume: number;
   voice: string;
-
 }>;
 
 export type FocusModeConfig = Readonly<{

src/app/features/config/icon-input/icon-input.component.html

@@ -18,7 +18,7 @@
   (optionSelected)="onIconSelect($event.option.value)"
   [autoActiveFirstOption]="false"
 >
-  @for (icon of (filteredIcons); track trackByIndex($index, icon)) {
+  @for (icon of filteredIcons; track trackByIndex($index, icon)) {
     <mat-option [value]="icon">
       <mat-icon>{{ icon }}</mat-icon>
       <span>{{ icon }}</span>

src/app/features/domina-mode/getAvailableVoices.ts

@@ -1,16 +1,14 @@
-
 export const getAvailableVoices = (): SpeechSynthesisVoice[] => {
   const synth = window.speechSynthesis;
-  return synth.getVoices()
+  return synth.getVoices();
 };
 
-
 export const getDefaultVoice = (): string => {
   const voices = window.speechSynthesis.getVoices();
   if (voices.length === 0) {
-    return "null";
+    return 'null';
   }
   //"null" should theoretically use the default voice
-  const defaultVoice = voices.find(voice => voice.default);
+  const defaultVoice = voices.find((voice) => voice.default);
   return defaultVoice ? defaultVoice.voiceURI : voices[0].voiceURI;
-}
+};

src/app/features/focus-mode/focus-mode-duration-selection/focus-mode-duration-selection.component.html

@@ -4,10 +4,14 @@
 >
   @if (selectedMode() !== FocusModeMode.Flowtime) {
     <h1>{{ T.F.FOCUS_MODE.SET_FOCUS_SESSION_DURATION | translate }}</h1>
-  } @if (task$|async; as task) {
+  }
+  @if (task$ | async; as task) {
     <div class="for-task">
       <div class="label">for task</div>
-    <div>"<em>{{task?.title}}</em>"</div>
+      <div>
+        "<em>{{ task?.title }}</em
+        >"
+      </div>
     </div>
     <div style="text-align: center; margin-bottom: 8px">
       <button
@@ -19,8 +23,8 @@
         {{ T.F.FOCUS_MODE.SELECT_ANOTHER_TASK | translate }}
       </button>
     </div>
-  } @if(selectedMode() !== FocusModeMode.Flowtime) {
+  }
-
+  @if (selectedMode() !== FocusModeMode.Flowtime) {
     <input-duration-slider
       [model]="sessionDuration$ | async"
       (modelChange)="onFocusModeDurationChanged($event)"

src/app/features/focus-mode/focus-mode-main/focus-mode-main.component.html

@@ -1,128 +1,137 @@
-@let isCountTimeDown = isCountTimeDown$|async;
+<!--@let isCountTimeDown = isCountTimeDown$|async;-->
-<!-- -->
+<!--&lt;!&ndash; &ndash;&gt;-->
-@if (taskService.currentTask$|async; as task) {
+<!--@if (taskService.currentTask$|async; as task) {-->
-<task-title
+<!--  <task-title-->
-  (valueEdited)="updateTaskTitleIfChanged($event.wasChanged, $event.newVal)"
+<!--    (valueEdited)="updateTaskTitleIfChanged($event.wasChanged, $event.newVal)"-->
-  [value]="task.title"
+<!--    [value]="task.title"-->
-  class="task-title"
+<!--    class="task-title"-->
-></task-title>
+<!--  ></task-title>-->
-<div class="progress-wrapper">
+<!--  <div class="progress-wrapper">-->
-  @if (isCountTimeDown) {
+<!--    @if (isCountTimeDown) {-->
-  <progress-circle [progress]="sessionProgress$|async"></progress-circle>
+<!--      <progress-circle [progress]="sessionProgress$|async"></progress-circle>-->
-  } @else {
+<!--    } @else {-->
-  <progress-circle [autoRotationDuration]="60000"></progress-circle>
+<!--      <progress-circle [autoRotationDuration]="60000"></progress-circle>-->
-  }
+<!--    }-->
-  <div class="progress-label-wrapper">
+<!--    <div class="progress-label-wrapper">-->
-    <div
+<!--      <div-->
-      class="focus-time"
+<!--        class="focus-time"-->
-      title="Focus time"
+<!--        title="Focus time"-->
-    >
+<!--      >-->
-      <!--        {{focusModeTimeToGo / 60000}}min-->
+<!--        &lt;!&ndash;        {{focusModeTimeToGo / 60000}}min&ndash;&gt;-->
-      @if(isCountTimeDown) { {{ (timeToGo$|async|msToMinuteClockString) }} } @else { {{
+<!--        @if (isCountTimeDown) {-->
-      (timeElapsed$|async|msToMinuteClockString) }} }
+<!--          {{ (timeToGo$|async|msToMinuteClockString) }}-->
-    </div>
+<!--        } @else {-->
-    <!--      <div class="task-times">-->
+<!--          {{ (timeElapsed$|async|msToMinuteClockString) }}-->
-    <!--        {{task.timeSpent|msToString}}/{{task.timeEstimate|msToString}}-->
+<!--        }-->
 <!--      </div>-->
-  </div>
+<!--      &lt;!&ndash;      <div class="task-times">&ndash;&gt;-->
-</div>
+<!--      &lt;!&ndash;        {{task.timeSpent|msToString}}/{{task.timeEstimate|msToString}}&ndash;&gt;-->
-@if ((simpleCounterService.enabledSimpleCounters$|async); as enabledSimpleCounters) { @if
+<!--      &lt;!&ndash;      </div>&ndash;&gt;-->
-(enabledSimpleCounters.length) {
+<!--    </div>-->
-<section class="simple-counter-buttons">
+<!--  </div>-->
-  @for (simpleCounter of enabledSimpleCounters; track trackById($index, simpleCounter)) {
+<!--  @if ((simpleCounterService.enabledSimpleCounters$|async); as enabledSimpleCounters) {-->
-  <simple-counter-button
+<!--    @if () {-->
-    [class.isHiddenWithoutFocus]="!simpleCounter.isOn"
+<!--    } (enabledSimpleCounters.length) {-->
-    [simpleCounter]="simpleCounter"
+<!--    <section class="simple-counter-buttons">-->
-  ></simple-counter-button>
+<!--        @for (simpleCounter of enabledSimpleCounters; track trackById($index, simpleCounter))-->
-  }
+<!--      {-->
-</section>
+<!--    <simple-counter-button-->
-} }
+<!--      [class.isHiddenWithoutFocus]="!simpleCounter.isOn"-->
-<section class="controls">
+<!--      [simpleCounter]="simpleCounter"-->
-  <button
+<!--    ></simple-counter-button>-->
-    mat-icon-button
+<!--    }-->
-    [matTooltip]="T.F.FOCUS_MODE.FINISH_TASK_AND_SELECT_NEXT|translate"
+<!--      </section>-->
-    (click)="finishCurrentTask();"
+<!--      }-->
-  >
+<!--  }-->
-    <mat-icon>done</mat-icon>
+<!--  <section class="controls">-->
-  </button>
+<!--    <button-->
-  <button
+<!--      mat-icon-button-->
-    mat-icon-button
+<!--      [matTooltip]="T.F.FOCUS_MODE.FINISH_TASK_AND_SELECT_NEXT|translate"-->
-    [matTooltip]="T.F.FOCUS_MODE.GO_TO_PROCRASTINATION|translate"
+<!--      (click)="finishCurrentTask();"-->
-    (click)="getProcrastinationHelp()"
+<!--    >-->
-  >
+<!--      <mat-icon>done</mat-icon>-->
-    <mat-icon>flash_on</mat-icon>
+<!--    </button>-->
-  </button>
+<!--    <button-->
-  @if (task.issueId && task.issueType !== ICAL_TYPE) {
+<!--      mat-icon-button-->
-  <a
+<!--      [matTooltip]="T.F.FOCUS_MODE.GO_TO_PROCRASTINATION|translate"-->
-    mat-icon-button
+<!--      (click)="getProcrastinationHelp()"-->
-    [matTooltip]="T.F.FOCUS_MODE.OPEN_ISSUE_IN_BROWSER|translate"
+<!--    >-->
-    target="_blank"
+<!--      <mat-icon>flash_on</mat-icon>-->
-    [href]="issueUrl$|async"
+<!--    </button>-->
-  >
+<!--    @if (task.issueId && task.issueType !== ICAL_TYPE) {-->
-    @if (task.issuePoints) {
+<!--      <a-->
-    <div class="mini-badge bgc-primary">{{ task.issuePoints }}</div>
+<!--        mat-icon-button-->
-    }
+<!--        [matTooltip]="T.F.FOCUS_MODE.OPEN_ISSUE_IN_BROWSER|translate"-->
-    <mat-icon [svgIcon]="task.issueType|issueIcon"></mat-icon>
+<!--        target="_blank"-->
-  </a>
+<!--        [href]="issueUrl$|async"-->
-  }
+<!--      >-->
-  <button
+<!--        @if (task.issuePoints) {-->
-    (click)="isShowNotes=!isShowNotes"
+<!--          <div class="mini-badge bgc-primary">{{ task.issuePoints }}</div>-->
-    [matTooltip]="T.F.FOCUS_MODE.SHOW_HIDE_NOTES_AND_ATTACHMENTS|translate"
+<!--        }-->
-    class="ico-btn show-additional-info-btn"
+<!--        <mat-icon [svgIcon]="task.issueType|issueIcon"></mat-icon>-->
-    color=""
+<!--      </a>-->
-    mat-icon-button
+<!--    }-->
-  >
+<!--    <button-->
-    @if (!isShowNotes) {
+<!--      (click)="isShowNotes=!isShowNotes"-->
-    <mat-icon>chat</mat-icon>
+<!--      [matTooltip]="T.F.FOCUS_MODE.SHOW_HIDE_NOTES_AND_ATTACHMENTS|translate"-->
-    } @if (isShowNotes) {
+<!--      class="ico-btn show-additional-info-btn"-->
-    <mat-icon>expand_less</mat-icon>
+<!--      color=""-->
-    }
+<!--      mat-icon-button-->
-  </button>
+<!--    >-->
-</section>
+<!--      @if (!isShowNotes) {-->
-@if (isShowNotes) {
+<!--        <mat-icon>chat</mat-icon>-->
-<div
+<!--      }-->
-  style="height: 100px"
+<!--      @if (isShowNotes) {-->
-  @expand
+<!--        <mat-icon>expand_less</mat-icon>-->
-></div>
+<!--      }-->
+<!--    </button>-->
+<!--  </section>-->
+<!--  @if (isShowNotes) {-->
+<!--    <div-->
+<!--      style="height: 100px"-->
+<!--      @expand-->
+<!--    ></div>-->
 
-<div
+<!--    <div-->
-  class="notes-and-attachments"
+<!--      class="notes-and-attachments"-->
-  @slideInOutFromBottom
+<!--      @slideInOutFromBottom-->
->
+<!--    >-->
-  <button
+<!--      <button-->
-    (click)="isShowNotes=false"
+<!--        (click)="isShowNotes=false"-->
-    class="hide-notes-btn"
+<!--        class="hide-notes-btn"-->
-    color=""
+<!--        color=""-->
-    mat-mini-fab
+<!--        mat-mini-fab-->
-  >
+<!--      >-->
-    <mat-icon>expand_less</mat-icon>
+<!--        <mat-icon>expand_less</mat-icon>-->
-  </button>
+<!--      </button>-->
 
-  <div class="notes-panel">
+<!--      <div class="notes-panel">-->
-    <inline-markdown
+<!--        <inline-markdown-->
-      (blur)="isFocusNotes=false"
+<!--          (blur)="isFocusNotes=false"-->
-      (blurred)="isFocusNotes=false"
+<!--          (blurred)="isFocusNotes=false"-->
-      (changed)="changeTaskNotes($event); isFocusNotes=false"
+<!--          (changed)="changeTaskNotes($event); isFocusNotes=false"-->
-      [isFocus]="isFocusNotes"
+<!--          [isFocus]="isFocusNotes"-->
-      [isShowControls]="true"
+<!--          [isShowControls]="true"-->
-      [model]="task.notes|| defaultTaskNotes"
+<!--          [model]="task.notes|| defaultTaskNotes"-->
-    ></inline-markdown>
+<!--        ></inline-markdown>-->
-  </div>
+<!--      </div>-->
-  @if (task.attachments.length) {
+<!--      @if (task.attachments.length) {-->
-  <div
+<!--        <div-->
-    class="attachment-list-wrapper"
+<!--          class="attachment-list-wrapper"-->
-    @fade
+<!--          @fade-->
-  >
+<!--        >-->
-    <task-attachment-list
+<!--          <task-attachment-list-->
-      [taskId]="task.id"
+<!--            [taskId]="task.id"-->
-      [attachments]="task.attachments"
+<!--            [attachments]="task.attachments"-->
-    ></task-attachment-list>
+<!--          ></task-attachment-list>-->
-  </div>
+<!--        </div>-->
-  }
+<!--      }-->
-</div>
+<!--    </div>-->
-} @if (isDragOver) {
+<!--  }-->
-<div class="bgc-accent drag-over-msg">
+<!--  @if (isDragOver) {-->
-  <mat-icon>add</mat-icon>
+<!--    <div class="bgc-accent drag-over-msg">-->
-  {{ T.F.TASK.CMP.DROP_ATTACHMENT|translate:{ title: task.title } }}
+<!--      <mat-icon>add</mat-icon>-->
-</div>
+<!--      {{ T.F.TASK.CMP.DROP_ATTACHMENT|translate:{ title: task.title } }}-->
-} }
+<!--    </div>-->
+<!--  }-->
+<!--}-->

src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.html

@@ -14,7 +14,8 @@
         >
           <mat-icon>close</mat-icon>
         </button>
-  } @if (activePage() !== FocusModePage.ProcrastinationHelp) {
+      }
+      @if (activePage() !== FocusModePage.ProcrastinationHelp) {
         <button
           class="close-btn"
           mat-icon-button
@@ -32,7 +33,9 @@
         >
           <mat-button-toggle [value]="FocusModeMode.Flowtime">Flowtime</mat-button-toggle>
           <!--      <mat-button-toggle [value]="FocusModeMode.Pomodoro">Pomodoro</mat-button-toggle>-->
-      <mat-button-toggle [value]="FocusModeMode.Countdown">Countdown</mat-button-toggle>
+          <mat-button-toggle [value]="FocusModeMode.Countdown"
+            >Countdown</mat-button-toggle
+          >
         </mat-button-toggle-group>
       </ng-template>
 
@@ -46,27 +49,34 @@
           >
             <procrastination></procrastination>
           </div>
-  } @case (FocusModePage.TaskSelection) {
+        }
+        @case (FocusModePage.TaskSelection) {
           <ng-container *ngTemplateOutlet="selectModeTpl"></ng-container>
           <focus-mode-task-selection
             style="margin-bottom: auto; margin-top: -32px"
             @warpIn
           ></focus-mode-task-selection>
-  } @case (FocusModePage.DurationSelection) {
+        }
+        @case (FocusModePage.DurationSelection) {
           <ng-container *ngTemplateOutlet="selectModeTpl"></ng-container>
           <focus-mode-duration-selection
             style="margin-bottom: auto; margin-top: -32px"
             @warpIn
           ></focus-mode-duration-selection>
-  } @case (FocusModePage.Preparation) {
+        }
+        @case (FocusModePage.Preparation) {
           <focus-mode-preparation @warpIn></focus-mode-preparation>
-  } @case (FocusModePage.Main) {
+        }
+        @case (FocusModePage.Main) {
           <focus-mode-main @warpIn></focus-mode-main>
-  } @case (FocusModePage.SessionDone) {
+        }
+        @case (FocusModePage.SessionDone) {
           <focus-mode-task-done @warpIn></focus-mode-task-done>
-  } }
+        }
+      }
     </main>
-} } @else {
+  }
+} @else {
   <button
     class="close-btn"
     mat-icon-button

src/app/features/focus-mode/focus-mode-preparation/focus-mode-preparation.component.html

@@ -1,4 +1,5 @@
-@if (countdown$|async; as countdown) { @if (countdown > 0) {
+@if (countdown$ | async; as countdown) {
+  @if (countdown > 0) {
     <section>
       <div class="action-msg">{{ T.F.FOCUS_MODE.GET_READY | translate }}</div>
       <ol>
@@ -18,7 +19,8 @@
       <!--    </button>-->
       <!--  </div>-->
     </section>
-} } @else {
+  }
+} @else {
   <section @fade>
     <div class="action-msg">{{ T.F.FOCUS_MODE.GOGOGO | translate }}</div>
   </section>

src/app/features/focus-mode/focus-mode-task-done/focus-mode-task-done.component.html

@@ -32,7 +32,8 @@
     >
       {{ T.F.FOCUS_MODE.START_NEXT_FOCUS_SESSION | translate }}
     </button>
-  } @if ((currentTask$|async)) {
+  }
+  @if (currentTask$ | async) {
     <button
       mat-raised-button
       color="primary"

src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.html

@@ -30,14 +30,21 @@
           >
           </select-task>
           <section class="simple-counter-section">
-          @for (simpleCounterBtn of item.simpleCounterToggleBtns; track simpleCounterBtn)
+            @for (
-          {
+              simpleCounterBtn of item.simpleCounterToggleBtns;
+              track simpleCounterBtn
+            ) {
               <button
                 mat-mini-fab
                 class="simple-counter"
                 type="button"
                 (click)="simpleCounterBtn.isTrackTo = !simpleCounterBtn.isTrackTo"
-            [matTooltip]="(simpleCounterBtn.isTrackTo ? T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP_DISABLE : T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP)|translate:{ title: simpleCounterBtn.title }"
+                [matTooltip]="
+                  (simpleCounterBtn.isTrackTo
+                    ? T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP_DISABLE
+                    : T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP
+                  ) | translate: { title: simpleCounterBtn.title }
+                "
                 [color]="simpleCounterBtn.isTrackTo ? 'primary' : ''"
               >
                 <mat-icon>{{ simpleCounterBtn.icon }}</mat-icon>

src/app/features/idle/dialog-idle/dialog-idle.component.html

@@ -22,8 +22,11 @@
       <div class="track-to-label">
         @if (!isCreate) {
           <span>{{ T.F.TIME_TRACKING.D_IDLE.TRACK_TO | translate }}</span>
-      } @if (isCreate) {
+        }
-      <span [innerHTML]="T.F.TIME_TRACKING.D_IDLE.CREATE_AND_TRACK|translate"></span>
+        @if (isCreate) {
+          <span
+            [innerHTML]="T.F.TIME_TRACKING.D_IDLE.CREATE_AND_TRACK | translate"
+          ></span>
         }
       </div>
       <select-task
@@ -38,7 +41,12 @@
             class="simple-counter"
             type="button"
             (click)="simpleCounterBtn.isTrackTo = !simpleCounterBtn.isTrackTo"
-        [matTooltip]="(simpleCounterBtn.isTrackTo ? T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP_DISABLE : T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP)|translate:{ title: simpleCounterBtn.title }"
+            [matTooltip]="
+              (simpleCounterBtn.isTrackTo
+                ? T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP_DISABLE
+                : T.F.TIME_TRACKING.D_IDLE.SIMPLE_COUNTER_TOOLTIP
+              ) | translate: { title: simpleCounterBtn.title }
+            "
             [color]="simpleCounterBtn.isTrackTo ? 'primary' : ''"
           >
             <mat-icon>{{ simpleCounterBtn.icon }}</mat-icon>
@@ -56,8 +64,7 @@
         >
           <mat-checkbox
             [(ngModel)]="isResetBreakTimer"
-        [ngModelOptions]="
+            [ngModelOptions]="{ standalone: true }"
-             {standalone: true}"
           >
             {{ T.F.TIME_TRACKING.D_IDLE.RESET_BREAK_REMINDER_TIMER | translate }}
           </mat-checkbox>
@@ -94,9 +101,11 @@
       >
         @if (!isCreate) {
           <mat-icon>track_changes</mat-icon>
-      } @if (isCreate) {
+        }
+        @if (isCreate) {
           <mat-icon>add</mat-icon>
-      } {{T.F.TIME_TRACKING.D_IDLE.TASK|translate}}
+        }
+        {{ T.F.TIME_TRACKING.D_IDLE.TASK | translate }}
       </button>
     </div>
   </form>

src/app/features/issue-panel/issue-panel-calendar-agenda/issue-panel-calendar-agenda.component.html

@@ -22,7 +22,11 @@
             <issue-preview-item
               [issueProviderId]="issueProvider().id"
               [itemData]="item"
-        [customTitleStr]="(item.issueData?.start|date:'shortTime') + ' – ' + item.issueData?.title"
+              [customTitleStr]="
+                (item.issueData?.start | date: 'shortTime') +
+                ' – ' +
+                item.issueData?.title
+              "
               (addIssue)="addIssue($event)"
             ></issue-preview-item>
           }

src/app/features/issue-panel/issue-provider-tab/issue-provider-tab.component.html

@@ -8,7 +8,8 @@
     <mat-icon>settings</mat-icon>
   </button>
   <div class="title">{{ issueProviderTooltip() }}</div>
-  @let defaultP = defaultProject(); @if (defaultP) {
+  @let defaultP = defaultProject();
+  @if (defaultP) {
     <mat-icon class="arrow">arrow_forward</mat-icon>
     <div class="default-project">{{ defaultP.title }}</div>
   }
@@ -26,7 +27,6 @@
   <!---->
   @if (ip.issueProviderKey === 'ICAL') {
     <issue-panel-calendar-agenda [issueProvider]="ip"></issue-panel-calendar-agenda>
-
   } @else {
     <form
       class="example-form"
@@ -63,7 +63,9 @@
             (click)="unPinSearch()"
             [matTooltip]="'Clear pinned search query'"
           ></mat-icon>
-    } @else if(ip?.pinnedSearch?.length||searchText()?.length >= SEARCH_MIN_LENGTH) {
+        } @else if (
+          ip?.pinnedSearch?.length || searchText()?.length >= SEARCH_MIN_LENGTH
+        ) {
           <mat-icon
             class="keep-ico"
             matSuffix
@@ -129,4 +131,5 @@
         <!--    </div>-->
       }
     </div>
-} }
+  }
+}

src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.html

@@ -7,7 +7,7 @@
 <h1 mat-dialog-title>
   <mat-icon
     class="dialog-header-icon"
-    [svgIcon]="(issueProviderKey)|issueIcon"
+    [svgIcon]="issueProviderKey | issueIcon"
   ></mat-icon>
   <!-- TODO improve title -->
 
@@ -24,20 +24,29 @@
       <help-section>
         @if (configFormSection?.help) {
           <div [innerHtml]="configFormSection?.help | translate"></div>
-      } @if (configFormSection?.helpArr) { @for (helpSection of
+        }
-      configFormSection?.helpArr; track helpSection) { @if (helpSection.h) {
+        @if (configFormSection?.helpArr) {
+          @for (helpSection of configFormSection?.helpArr; track helpSection) {
+            @if (helpSection.h) {
               <div class="mat-caption">{{ helpSection.h | translate }}</div>
-      } @if (helpSection.p) {
+            }
+            @if (helpSection.p) {
               <p [innerHTML]="helpSection.p | translate"></p>
-      } @if (helpSection.p2) {
+            }
+            @if (helpSection.p2) {
               <p [innerHTML]="helpSection.p2 | translate"></p>
-      } @if (helpSection.p3) {
+            }
+            @if (helpSection.p3) {
               <p [innerHTML]="helpSection.p3 | translate"></p>
-      } @if (helpSection.p4) {
+            }
+            @if (helpSection.p4) {
               <p [innerHTML]="helpSection.p4 | translate"></p>
-      } } }
+            }
+          }
+        }
       </help-section>
-    } @if (isEdit) {
+    }
+    @if (isEdit) {
       <div style="margin-bottom: 32px">
         <mat-slide-toggle
           [ngModel]="model.isEnabled"
@@ -77,7 +86,8 @@
             </p>
             <!--      <p [innerHTML]="T.G.EXTENSION_INFO|translate"></p>-->
           </div>
-    } }
+        }
+      }
       <!-- -->
       @if (issueProviderKey === 'JIRA') {
         <div [ngClass]="HelperClasses.isHideForAdvancedFeatures">
@@ -94,21 +104,24 @@
 
       @switch (issueProviderKey) {
         <!-- -->
-    @case ("JIRA") {
+        @case ('JIRA') {
           <jira-additonal-cfg
             [section]="configFormSection"
             [cfg]="model"
             (modelChange)="customCfgCmpSave($event)"
           ></jira-additonal-cfg>
           <!-- -->
-    } @case ("OPEN_PROJECT") {
+        }
+        @case ('OPEN_PROJECT') {
           <open-project-additional-cfg
             [section]="configFormSection"
             [cfg]="model"
             (modelChange)="customCfgCmpSave($event)"
           ></open-project-additional-cfg>
           <!-- -->
-    } } }
+        }
+      }
+    }
   </mat-dialog-content>
 
   <mat-dialog-actions align="end">

src/app/features/issue/issue-content/issue-content.component.html

@@ -3,32 +3,38 @@
     [issue]="issueData()"
     [task]="task"
   ></jira-issue-content>
-} @if (task?.issueType===GITHUB_TYPE) {
+}
+@if (task?.issueType === GITHUB_TYPE) {
   <github-issue-content
     [issue]="issueData()"
     [task]="task"
   ></github-issue-content>
-} @if (task?.issueType===REDMINE_TYPE) {
+}
+@if (task?.issueType === REDMINE_TYPE) {
   <redmine-issue-content
     [issue]="issueData()"
     [task]="task"
   ></redmine-issue-content>
-} @if (task?.issueType===GITLAB_TYPE) {
+}
+@if (task?.issueType === GITLAB_TYPE) {
   <gitlab-issue-content
     [issue]="issueData()"
     [task]="task"
   ></gitlab-issue-content>
-} @if (task?.issueType===CALDAV_TYPE) {
+}
+@if (task?.issueType === CALDAV_TYPE) {
   <caldav-issue-content
     [issue]="issueData()"
     [task]="task"
   ></caldav-issue-content>
-} @if (task?.issueType===OPEN_PROJECT_TYPE) {
+}
+@if (task?.issueType === OPEN_PROJECT_TYPE) {
   <open-project-issue-content
     [issue]="issueData()"
     [task]="task"
   ></open-project-issue-content>
-} @if (task?.issueType===GITEA_TYPE) {
+}
+@if (task?.issueType === GITEA_TYPE) {
   <gitea-issue-content
     [issue]="issueData()"
     [task]="task"

src/app/features/issue/issue-header/issue-header.component.html

@@ -1,15 +1,21 @@
 @if (task?.issueType === JIRA_TYPE) {
   <jira-issue-header [task]="task"></jira-issue-header>
-} @if (task?.issueType === GITHUB_TYPE) {
+}
+@if (task?.issueType === GITHUB_TYPE) {
   <github-issue-header [task]="task"></github-issue-header>
-} @if (task?.issueType === REDMINE_TYPE) {
+}
+@if (task?.issueType === REDMINE_TYPE) {
   <redmine-issue-header [task]="task"></redmine-issue-header>
-} @if (task?.issueType === GITLAB_TYPE) {
+}
+@if (task?.issueType === GITLAB_TYPE) {
   <gitlab-issue-header [task]="task"></gitlab-issue-header>
-} @if (task?.issueType === CALDAV_TYPE) {
+}
+@if (task?.issueType === CALDAV_TYPE) {
   <caldav-issue-header [task]="task"></caldav-issue-header>
-} @if (task?.issueType === OPEN_PROJECT_TYPE) {
+}
+@if (task?.issueType === OPEN_PROJECT_TYPE) {
   <open-project-issue-header [task]="task"></open-project-issue-header>
-} @if (task?.issueType === GITEA_TYPE) {
+}
+@if (task?.issueType === GITEA_TYPE) {
   <gitea-issue-header [task]="task"></gitea-issue-header>
 }

src/app/features/issue/providers/caldav/caldav-issue/caldav-issue-content/caldav-issue-content.component.html

@@ -18,7 +18,9 @@
     <table class="issue-table">
       <tr>
         <th>{{ T.F.CALDAV.ISSUE_CONTENT.SUMMARY | translate }}</th>
-        <td><strong>{{issue?.summary}}</strong></td>
+        <td>
+          <strong>{{ issue?.summary }}</strong>
+        </td>
       </tr>
       <tr>
         <th>{{ T.F.CALDAV.ISSUE_CONTENT.STATUS | translate }}</th>
@@ -35,7 +37,8 @@
             </mat-chip-listbox>
           </td>
         </tr>
-      } @if (issue?.note) {
+      }
+      @if (issue?.note) {
         <tr>
           <th>{{ T.F.CALDAV.ISSUE_CONTENT.DESCRIPTION | translate }}</th>
           <td class="issue-description">

src/app/features/issue/providers/caldav/caldav-issue/caldav-issue-header/caldav-issue-header.component.html

@@ -4,7 +4,8 @@
     style="margin-right: 8px"
     >update
   </mat-icon>
-} @if (!task()?.issueWasUpdated) {
+}
+@if (!task()?.issueWasUpdated) {
   <mat-icon
     style="margin-right: 8px"
     svgIcon="caldav"

src/app/features/issue/providers/gitea/gitea-issue/gitea-issue-content/gitea-issue-content.component.html

@@ -45,7 +45,8 @@
             >
           </td>
         </tr>
-      } @if (issue?.labels?.length) {
+      }
+      @if (issue?.labels?.length) {
         <tr>
           <th>{{ T.F.GITEA.ISSUE_CONTENT.LABELS | translate }}</th>
           <td>
@@ -56,7 +57,8 @@
             </mat-chip-listbox>
           </td>
         </tr>
-      } @if (issue?.body) {
+      }
+      @if (issue?.body) {
         <tr>
           <th>{{ T.F.GITEA.ISSUE_CONTENT.DESCRIPTION | translate }}</th>
           <td class="issue-description">

src/app/features/issue/providers/gitea/gitea-issue/gitea-issue-header/gitea-issue-header.component.html

@@ -4,7 +4,8 @@
     style="margin-right: 8px"
     >update
   </mat-icon>
-} @if (!task()?.issueWasUpdated) {
+}
+@if (!task()?.issueWasUpdated) {
   <mat-icon
     style="margin-right: 8px"
     svgIcon="gitea"

src/app/features/issue/providers/github/github-issue/github-issue-content/github-issue-content.component.html

@@ -41,18 +41,22 @@
             >
           </td>
         </tr>
-      } @if (issue?.labels?.length) {
+      }
+      @if (issue?.labels?.length) {
         <tr>
           <th>{{ T.F.GITHUB.ISSUE_CONTENT.LABELS | translate }}</th>
           <td>
             <mat-chip-listbox>
               @for (label of issue?.labels; track trackByIndex($index, label)) {
-            <mat-chip-option [title]="label.description">{{label.name}} </mat-chip-option>
+                <mat-chip-option [title]="label.description"
+                  >{{ label.name }}
+                </mat-chip-option>
               }
             </mat-chip-listbox>
           </td>
         </tr>
-      } @if (issue?.body && !isCollapsedIssueSummary()) {
+      }
+      @if (issue?.body && !isCollapsedIssueSummary()) {
         <tr>
           <th>{{ T.F.GITHUB.ISSUE_CONTENT.DESCRIPTION | translate }}</th>
           <td class="issue-description">
@@ -77,12 +81,19 @@
             >
               <mat-icon>download</mat-icon>
               @if (isCollapsedIssueSummary()) {
-          <span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
+                <span
-            >{{T.F.GITHUB.ISSUE_CONTENT.LOAD_DESCRIPTION_AND_ALL_COMMENTS|translate}}</span
+                  style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
+                  >{{
+                    T.F.GITHUB.ISSUE_CONTENT.LOAD_DESCRIPTION_AND_ALL_COMMENTS | translate
+                  }}</span
                 >
-          } @if (!isCollapsedIssueSummary()) {
+              }
-          {{T.F.GITHUB.ISSUE_CONTENT.LOAD_ALL_COMMENTS|translate:{ nr:
+              @if (!isCollapsedIssueSummary()) {
-          issue?.comments?.length } }} }
+                {{
+                  T.F.GITHUB.ISSUE_CONTENT.LOAD_ALL_COMMENTS
+                    | translate: { nr: issue?.comments?.length }
+                }}
+              }
             </button>
           </div>
           <h3 class="last-comment-headline">
@@ -107,8 +118,12 @@
               }
             </div>
           </div>
-      } @if (!isCollapsedIssueComments()) { @for (comment of
+        }
-      (issue?.comments|sort:'created_at'); track trackByIndex($index, comment)) {
+        @if (!isCollapsedIssueComments()) {
+          @for (
+            comment of issue?.comments | sort: 'created_at';
+            track trackByIndex($index, comment)
+          ) {
             <div class="comment">
               <!--<img [src]="comment.author.avatarUrl"-->
               <!--class="author-avatar">-->
@@ -128,7 +143,8 @@
                 }
               </div>
             </div>
-      } }
+          }
+        }
         <!--      <div-->
         <!--        *ngFor="let comment of (issue?.comments|sort:'created_at'); trackBy: trackByIndex"-->
         <!--        class="comment"-->

src/app/features/issue/providers/github/github-issue/github-issue-header/github-issue-header.component.html

@@ -4,7 +4,8 @@
     style="margin-right: 8px"
     >update
   </mat-icon>
-} @if (!task()?.issueWasUpdated) {
+}
+@if (!task()?.issueWasUpdated) {
   <mat-icon
     style="margin-right: 8px"
     svgIcon="github"

src/app/features/issue/providers/gitlab/dialog-gitlab-submit-worklog-for-day/dialog-gitlab-submit-worklog-for-day.component.html

@@ -18,7 +18,9 @@
     </div>
   }
 
-  <h3>For gitlab project: <strong>{{ (issueProviderCfg$|async)?.project }}</strong></h3>
+  <h3>
+    For gitlab project: <strong>{{ (issueProviderCfg$ | async)?.project }}</strong>
+  </h3>
 
   <div class="table-wrapper">
     <table
@@ -89,7 +91,10 @@
         mat-header-row
       ></tr>
       <tr
-        *matRowDef="let row; columns: ['title','timeTrackedAlreadyRemote','timeToSubmit']"
+        *matRowDef="
+          let row;
+          columns: ['title', 'timeTrackedAlreadyRemote', 'timeToSubmit']
+        "
         mat-row
       ></tr>
     </table>
@@ -97,8 +102,14 @@
 
   <div
     class="total-msg"
-    [innerHTML]="T.F.GITLAB.DIALOG_SUBMIT_WORKLOG.TOTAL_MSG|translate:{totalTimeToSubmit: totalTimeToSubmit$|async|msToString,
+    [innerHTML]="
-    nrOfTasksToSubmit: (tmpTasksToTrack$|async)?.length}"
+      T.F.GITLAB.DIALOG_SUBMIT_WORKLOG.TOTAL_MSG
+        | translate
+          : {
+              totalTimeToSubmit: totalTimeToSubmit$ | async | msToString,
+              nrOfTasksToSubmit: (tmpTasksToTrack$ | async)?.length,
+            }
+    "
   ></div>
 </mat-dialog-content>
 

src/app/features/issue/providers/gitlab/gitlab-issue/gitlab-issue-content/gitlab-issue-content.component.html

@@ -45,7 +45,8 @@
             >
           </td>
         </tr>
-      } @if (issue?.labels?.length) {
+      }
+      @if (issue?.labels?.length) {
         <tr>
           <th>{{ T.F.GITLAB.ISSUE_CONTENT.LABELS | translate }}</th>
           <td>
@@ -56,7 +57,8 @@
             </mat-chip-listbox>
           </td>
         </tr>
-      } @if (issue?.body) {
+      }
+      @if (issue?.body) {
         <tr>
           <th>{{ T.F.GITLAB.ISSUE_CONTENT.DESCRIPTION | translate }}</th>
           <td class="issue-description">
@@ -72,8 +74,10 @@
 
     @if (issue?.comments) {
       <div>
-      @for (comment of (issue?.comments|sort:'created_at'); track trackByIndex($index,
+        @for (
-      comment)) {
+          comment of issue?.comments | sort: 'created_at';
+          track trackByIndex($index, comment)
+        ) {
           <div class="comment">
             <div class="name-and-comment-content">
               <div>

src/app/features/issue/providers/gitlab/gitlab-issue/gitlab-issue-header/gitlab-issue-header.component.html

@@ -4,7 +4,8 @@
     style="margin-right: 8px"
     >update
   </mat-icon>
-} @if (!task()?.issueWasUpdated) {
+}
+@if (!task()?.issueWasUpdated) {
   <mat-icon
     style="margin-right: 8px"
     svgIcon="gitlab"

src/app/features/issue/providers/jira/jira-issue/jira-issue-content/jira-issue-content.component.html

@@ -19,9 +19,11 @@
           <li>
             @if (entry.author) {
               <em>{{ entry.author.displayName }}</em>
-        } {{T.F.JIRA.ISSUE_CONTENT.CHANGED|translate}}
+            }
+            {{ T.F.JIRA.ISSUE_CONTENT.CHANGED | translate }}
             <strong>{{ entry.field }}</strong>
-        {{T.F.JIRA.ISSUE_CONTENT.ON|translate}} {{entry.created|date:'short'}}
+            {{ T.F.JIRA.ISSUE_CONTENT.ON | translate }}
+            {{ entry.created | date: 'short' }}
           </li>
         }
       </ul>
@@ -63,11 +65,12 @@
       <tr>
         <th>{{ T.F.JIRA.ISSUE_CONTENT.WORKLOG | translate }}</th>
         <td>
-        {{(issue?.timespent * 1000)|msToString}} / {{(issue?.timeestimate *
+          {{ issue?.timespent * 1000 | msToString }} /
-        1000)|msToString}}
+          {{ issue?.timeestimate * 1000 | msToString }}
         </td>
       </tr>
-    } @if ((jiraSubTasks$|async); as jiraSubTasks) {
+    }
+    @if (jiraSubTasks$ | async; as jiraSubTasks) {
       <tr>
         <th>{{ T.F.JIRA.ISSUE_CONTENT.SUB_TASKS | translate }}</th>
         <td>
@@ -85,7 +88,8 @@
           </ul>
         </td>
       </tr>
-    } @if ((jiraRelatedIssues$|async); as relatedIssues) {
+    }
+    @if (jiraRelatedIssues$ | async; as relatedIssues) {
       <tr>
         <th>{{ T.F.JIRA.ISSUE_CONTENT.RELATED | translate }}</th>
         <td>
@@ -103,7 +107,8 @@
           </ul>
         </td>
       </tr>
-    } @if (issue?.components?.length) {
+    }
+    @if (issue?.components?.length) {
       <tr>
         <th>{{ T.F.JIRA.ISSUE_CONTENT.COMPONENTS | translate }}</th>
         <td>
@@ -116,7 +121,8 @@
           </mat-chip-listbox>
         </td>
       </tr>
-    } @if (issue?.description) {
+    }
+    @if (issue?.description) {
       <tr class="description-row">
         <th>{{ T.F.JIRA.ISSUE_CONTENT.DESCRIPTION | translate }}</th>
         <td>
@@ -144,8 +150,10 @@
       <tr>
         <th>{{ T.F.JIRA.ISSUE_CONTENT.COMMENTS | translate }}</th>
         <td>
-        @for (comment of (issue?.comments|sort:'created'); track trackByIndex($index,
+          @for (
-        comment)) {
+            comment of issue?.comments | sort: 'created';
+            track trackByIndex($index, comment)
+          ) {
             <div class="comment">
               <img
                 [src]="comment.author.avatarUrl"

src/app/features/issue/providers/jira/jira-issue/jira-issue-header/jira-issue-header.component.html

@@ -1,16 +1,19 @@
-@if ((isOnline$|async)) { @if (task()?.issueWasUpdated) {
+@if (isOnline$ | async) {
+  @if (task()?.issueWasUpdated) {
     <mat-icon
       color="accent"
       style="margin-right: 8px"
       >update
     </mat-icon>
-} @if (!task()?.issueWasUpdated) {
+  }
+  @if (!task()?.issueWasUpdated) {
     <mat-icon
       style="margin-right: 8px"
       svgIcon="jira"
     >
     </mat-icon>
-} } @else {
+  }
+} @else {
   <mat-icon
     [matTooltip]="'No internet!'"
     style="margin-right: 8px"

src/app/features/issue/providers/jira/jira-view-components/dialog-jira-add-worklog/dialog-jira-add-worklog.component.html

@@ -14,11 +14,12 @@
   <mat-dialog-content>
     <p>
       {{ T.F.JIRA.DIALOG_WORKLOG.SUBMIT_WORKLOG_FOR | translate }}
-      <strong>{{issue.key}} {{issue.summary}}</strong>.
+      <strong>{{ issue.key }} {{ issue.summary }}</strong
+      >.
     </p>
     <p>
       {{ T.F.JIRA.DIALOG_WORKLOG.CURRENTLY_LOGGED | translate }}
-      <strong>{{(timeLogged)|msToString}}</strong>
+      <strong>{{ timeLogged | msToString }}</strong>
     </p>
 
     <div class="form-wrapper">
@@ -62,7 +63,9 @@
               type="button"
               (click)="fill(opt.value)"
             >
-            {{opt.label|translate}} ({{(getTimeToLogForMode(opt.value)|msToString)}})
+              {{ opt.label | translate }} ({{
+                getTimeToLogForMode(opt.value) | msToString
+              }})
             </button>
           }
         </ng-template>

src/app/features/issue/providers/jira/jira-view-components/dialog-jira-transition/dialog-jira-transition.component.html

@@ -27,8 +27,10 @@
     <mat-select [(ngModel)]="chosenTransition">
       <!--<mat-option value="DO_NOT">Don't transition</mat-option>-->
       <!--<mat-option value="ALWAYS_ASK">Always open dialog</mat-option>-->
-      @for (transition of (availableTransitions$|async); track trackByIndex($index,
+      @for (
-      transition)) {
+        transition of availableTransitions$ | async;
+        track trackByIndex($index, transition)
+      ) {
         <mat-option [value]="transition">
           <!--<img [src]="transition.to.iconUrl">-->
           {{ transition.name }}

src/app/features/issue/providers/jira/jira-view-components/jira-cfg/jira-additional-cfg.component.html

@@ -28,7 +28,7 @@
           [autoActiveFirstOption]="true"
           [displayWith]="displayIssueWith"
         >
-        @if ((isLoading$|async)) {
+          @if (isLoading$ | async) {
             <mat-option
               [value]="issueSuggestionsCtrl.value"
               class="is-loading"
@@ -37,8 +37,10 @@
             </mat-option>
           }
           <!---->
-        @for (issue of (filteredIssueSuggestions$|async); track issue.issueData.id) {
+          @for (issue of filteredIssueSuggestions$ | async; track issue.issueData.id) {
-        <mat-option [value]="issue"><span>{{ issue?.title }}</span> </mat-option>
+            <mat-option [value]="issue"
+              ><span>{{ issue?.title }}</span>
+            </mat-option>
           }
         </mat-autocomplete>
       </mat-form-field>
@@ -50,7 +52,8 @@
             <!--        }-->
             @if (opt.key === 'IN_PROGRESS') {
               <label>{{ T.F.JIRA.CFG_CMP.IN_PROGRESS | translate }}</label>
-        } @if (opt.key==='DONE') {
+            }
+            @if (opt.key === 'DONE') {
               <label>{{ T.F.JIRA.CFG_CMP.DONE | translate }}</label>
             }
             <!-- TODO check for a better way to do this -->
@@ -60,7 +63,9 @@
               [ngModelOptions]="{ standalone: true }"
               [ngModel]="getTransition(opt.key)"
             >
-          <mat-option value="DO_NOT">{{ T.F.JIRA.CFG_CMP.DO_NOT|translate }}</mat-option>
+              <mat-option value="DO_NOT">{{
+                T.F.JIRA.CFG_CMP.DO_NOT | translate
+              }}</mat-option>
               <mat-option value="ALWAYS_ASK"
                 >{{ T.F.JIRA.CFG_CMP.ALWAYS_ASK | translate }}
               </mat-option>
@@ -105,8 +110,10 @@
         #storyPointAutoEl="matAutocomplete"
         [autoActiveFirstOption]="true"
       >
-        @for (field of (filteredCustomFieldSuggestions$|async); track
+        @for (
-        trackByCustomFieldId($index, field)) {
+          field of filteredCustomFieldSuggestions$ | async;
+          track trackByCustomFieldId($index, field)
+        ) {
           <mat-option [value]="field.id"
             ><span>{{ field?.id }}: {{ field?.name }}</span>
           </mat-option>

src/app/features/issue/providers/open-project/open-project-issue/open-project-issue-content/open-project-issue-content.component.html

@@ -32,7 +32,8 @@
           <th>{{ T.F.OPEN_PROJECT.ISSUE_CONTENT.TYPE | translate }}</th>
           <td>{{ issue?._embedded.type.name }}</td>
         </tr>
-      } @if (issue?._embedded.status) {
+      }
+      @if (issue?._embedded.status) {
         <tr>
           <th>{{ T.F.OPEN_PROJECT.ISSUE_CONTENT.STATUS | translate }}</th>
           <td>
@@ -43,12 +44,14 @@
             >{{ issue?._embedded.status.name }}
           </td>
         </tr>
-      } @if (issue?._embedded.assignee?.name) {
+      }
+      @if (issue?._embedded.assignee?.name) {
         <tr>
           <th>{{ T.F.OPEN_PROJECT.ISSUE_CONTENT.ASSIGNEE | translate }}</th>
           <td>{{ issue?._embedded.assignee.name }}</td>
         </tr>
-      } @if (issue?.description?.raw || issue?.description?.html) {
+      }
+      @if (issue?.description?.raw || issue?.description?.html) {
         <tr>
           <th>{{ T.F.OPEN_PROJECT.ISSUE_CONTENT.DESCRIPTION | translate }}</th>
           <td class="issue-description">

src/app/features/issue/providers/open-project/open-project-issue/open-project-issue-header/open-project-issue-header.component.html

@@ -4,7 +4,8 @@
     style="margin-right: 8px"
     >update
   </mat-icon>
-} @if (!task()?.issueWasUpdated) {
+}
+@if (!task()?.issueWasUpdated) {
   <mat-icon
     style="margin-right: 8px"
     svgIcon="open_project"

src/app/features/issue/providers/open-project/open-project-view-components/dialog-open-project-track-time/dialog-open-project-track-time.component.html

@@ -25,14 +25,16 @@
     </p>
     <p>
       {{ T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.CURRENTLY_LOGGED | translate }}
-      <strong>{{(timeLoggedForWorkPackage)|msToString}}</strong>
+      <strong>{{ timeLoggedForWorkPackage | msToString }}</strong>
     </p>
     <br />
     <br />
 
     <div class="form-wrapper">
       <mat-form-field>
-        <mat-label>{{T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.TIME_SPENT|translate}}</mat-label>
+        <mat-label>{{
+          T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.TIME_SPENT | translate
+        }}</mat-label>
         <input
           [(ngModel)]="timeSpent"
           inputDuration="optional"
@@ -70,7 +72,9 @@
               type="button"
               (click)="fill(opt.value)"
             >
-            {{opt.label|translate}} ({{(getTimeToLogForMode(opt.value)|msToString)}})
+              {{ opt.label | translate }} ({{
+                getTimeToLogForMode(opt.value) | msToString
+              }})
             </button>
           }
         </ng-template>
@@ -87,7 +91,9 @@
       }
 
       <mat-form-field>
-        <mat-label>{{T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.STARTED|translate}}</mat-label>
+        <mat-label>{{
+          T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.STARTED | translate
+        }}</mat-label>
         <input
           [(ngModel)]="started"
           matInput
@@ -95,18 +101,20 @@
           required
           type="datetime-local"
         />
-        <mat-error
+        <mat-error>{{
-          >{{T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.INVALID_DATE|translate}}</mat-error
+          T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.INVALID_DATE | translate
-        >
+        }}</mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>{{T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.ACTIVITY|translate}}</mat-label>
+        <mat-label>{{
+          T.F.OPEN_PROJECT.DIALOG_TRACK_TIME.ACTIVITY | translate
+        }}</mat-label>
         <mat-select
           [(ngModel)]="activityId"
           name="activity"
         >
-          @for (activity of (activities$|async); track activity) {
+          @for (activity of activities$ | async; track activity) {
             <mat-option [value]="activity.id"> {{ activity.name }} </mat-option>
           }
         </mat-select>

src/app/features/issue/providers/open-project/open-project-view-components/dialog-openproject-transition/dialog-open-project-transition.component.html

@@ -15,15 +15,19 @@
     <tr>
       <th>{{ T.F.OPEN_PROJECT.DIALOG_TRANSITION.CURRENT_STATUS | translate }}</th>
       <td>
-        {{ data.issue?._embedded?.status?.name ? data.issue?._embedded?.status?.name : '–'
+        {{
+          data.issue?._embedded?.status?.name ? data.issue?._embedded?.status?.name : '–'
         }}
       </td>
     </tr>
     <tr>
       <th>{{ T.F.OPEN_PROJECT.DIALOG_TRANSITION.CURRENT_ASSIGNEE | translate }}</th>
       <td>
-        {{ data.issue?._embedded?.assignee?.name ? data.issue?._embedded?.assignee?.name :
+        {{
-        '–' }}
+          data.issue?._embedded?.assignee?.name
+            ? data.issue?._embedded?.assignee?.name
+            : '–'
+        }}
       </td>
     </tr>
     <tr>
@@ -49,8 +53,10 @@
     <mat-select [(ngModel)]="chosenTransition">
       <!--<mat-option value="DO_NOT">Don't transition</mat-option>-->
       <!--<mat-option value="ALWAYS_ASK">Always open dialog</mat-option>-->
-      @for (transition of (availableTransitions$|async); track trackByIndex($index,
+      @for (
-      transition)) {
+        transition of availableTransitions$ | async;
+        track trackByIndex($index, transition)
+      ) {
         <mat-option [value]="transition">
           <!--<img [src]="transition.to.iconUrl">-->
           {{ transition.name }}

src/app/features/issue/providers/open-project/open-project-view-components/openproject-cfg/open-project-additional-cfg.component.html

@@ -1,5 +1,7 @@
 <form [formGroup]="form">
-  <h3 class="sub-section-heading">{{ T.F.OPEN_PROJECT.CFG_CMP.TRANSITION|translate }}</h3>
+  <h3 class="sub-section-heading">
+    {{ T.F.OPEN_PROJECT.CFG_CMP.TRANSITION | translate }}
+  </h3>
   <mat-slide-toggle
     [ngModel]="cfg.isTransitionIssuesEnabled"
     (ngModelChange)="partialModelChange({ isTransitionIssuesEnabled: $event })"
@@ -28,15 +30,18 @@
           [autoActiveFirstOption]="true"
           [displayWith]="displayIssueWith"
         >
-        @if ((isLoading$|async)) {
+          @if (isLoading$ | async) {
             <mat-option
               [value]="issueSuggestionsCtrl.value"
               class="is-loading"
             >
               <mat-spinner diameter="50"></mat-spinner>
             </mat-option>
-        } @for (issue of (filteredIssueSuggestions$|async); track issue.issueData.id) {
+          }
-        <mat-option [value]="issue"><span>{{ issue?.title }}</span> </mat-option>
+          @for (issue of filteredIssueSuggestions$ | async; track issue.issueData.id) {
+            <mat-option [value]="issue"
+              ><span>{{ issue?.title }}</span>
+            </mat-option>
           }
         </mat-autocomplete>
       </mat-form-field>
@@ -48,7 +53,8 @@
             <!--        } -->
             @if (opt.key === 'IN_PROGRESS') {
               <label> {{ T.F.OPEN_PROJECT.CFG_CMP.IN_PROGRESS | translate }} </label>
-        } @if (opt.key==='DONE') {
+            }
+            @if (opt.key === 'DONE') {
               <label> {{ T.F.OPEN_PROJECT.CFG_CMP.DONE | translate }} </label>
             }
             <mat-select

src/app/features/issue/providers/redmine/redmine-issue/redmine-issue-header/redmine-issue-header.component.html

@@ -4,7 +4,8 @@
     style="margin-right: 8px"
     >update
   </mat-icon>
-} @if (!task()?.issueWasUpdated) {
+}
+@if (!task()?.issueWasUpdated) {
   <mat-icon
     style="margin-right: 8px"
     svgIcon="redmine"

src/app/features/metric/evaluation-sheet/evaluation-sheet.component.html

@@ -1,7 +1,9 @@
 <div class="wrapper mat-elevation-z1">
   <help-section>
     <p>{{ T.F.METRIC.EVAL_FORM.HELP_P1 | translate }}</p>
-    <p><a routerLink="/metrics">{{T.F.METRIC.EVAL_FORM.HELP_LINK_TXT|translate}}</a></p>
+    <p>
+      <a routerLink="/metrics">{{ T.F.METRIC.EVAL_FORM.HELP_LINK_TXT | translate }}</a>
+    </p>
 
     <h3 class="mat-h3">{{ T.F.METRIC.EVAL_FORM.HELP_H1 | translate }}</h3>
     <p>{{ T.F.METRIC.EVAL_FORM.HELP_P2 | translate }}</p>
@@ -59,7 +61,7 @@
         (removeItem)="removeObstruction($event)"
         [label]="T.F.METRIC.EVAL_FORM.OBSTRUCTIONS | translate"
         [model]="metricForDay.obstructions"
-      [suggestions]="(obstructionService.obstructions$|async)"
+        [suggestions]="obstructionService.obstructions$ | async"
       ></chip-list-input>
       <chip-list-input
         (addItem)="addImprovement($event)"
@@ -67,25 +69,29 @@
         (removeItem)="removeImprovement($event)"
         [label]="T.F.METRIC.EVAL_FORM.IMPROVEMENTS | translate"
         [model]="metricForDay.improvements"
-      [suggestions]="(improvementService.improvements$|async)"
+        [suggestions]="improvementService.improvements$ | async"
       ></chip-list-input>
       <chip-list-input
         (addItem)="addImprovementTomorrow($event)"
         (addNewItem)="addNewImprovementTomorrow($event)"
         (additionalAction)="toggleImprovementRepeat($event)"
         (removeItem)="removeImprovementTomorrow($event)"
-      [additionalActionTooltipUnToggle]="T.F.METRIC.EVAL_FORM.DISABLE_REPEAT_EVERY_DAY|translate"
+        [additionalActionTooltipUnToggle]="
-      [additionalActionTooltip]="T.F.METRIC.EVAL_FORM.ENABLE_REPEAT_EVERY_DAY|translate"
+          T.F.METRIC.EVAL_FORM.DISABLE_REPEAT_EVERY_DAY | translate
+        "
+        [additionalActionTooltip]="
+          T.F.METRIC.EVAL_FORM.ENABLE_REPEAT_EVERY_DAY | translate
+        "
         [label]="T.F.METRIC.EVAL_FORM.IMPROVEMENTS_TOMORROW | translate"
         [model]="metricForDay.improvementsTomorrow"
-      [suggestions]="(improvementService.improvements$|async)"
+        [suggestions]="improvementService.improvements$ | async"
         [toggledItems]="improvementService.repeatedImprovementIds$ | async"
         additionalActionIcon="repeat"
       ></chip-list-input>
     </form>
   }
 </div>
-@if ((workContextService.isActiveWorkContextProject$|async)) {
+@if (workContextService.isActiveWorkContextProject$ | async) {
   <div style="text-align: center; margin-top: 8px; margin-bottom: 16px">
     <button
       (click)="addNote()"

src/app/features/metric/metric.component.html

@@ -11,7 +11,9 @@
         {{ T.PM.TITLE | translate }}
       </h1>
       <!--  <h2>Basic Metrics</h2>-->
-    <p><i>{{ sm.start }} – {{ sm.end }}</i></p>
+      <p>
+        <i>{{ sm.start }} – {{ sm.end }}</i>
+      </p>
       <div class="material-table">
         <table>
           <tr>
@@ -60,31 +62,36 @@
         </table>
       </div>
     </section>
-  } @if (!(metricService.hasData$|async)) {
+  }
-  <p style="margin-top: 32px">{{ T.F.METRIC.CMP.NO_ADDITIONAL_DATA_YET|translate }}</p>
+  @if (!(metricService.hasData$ | async)) {
-  } @if ((metricService.hasData$|async)) {
+    <p style="margin-top: 32px">
+      {{ T.F.METRIC.CMP.NO_ADDITIONAL_DATA_YET | translate }}
+    </p>
+  }
+  @if (metricService.hasData$ | async) {
     <section class="metric-metrics">
       <h1>{{ T.F.METRIC.CMP.GLOBAL_METRICS | translate }}</h1>
       <section class="pie-charts">
-      @if ((metricService.improvementCountsPieChartData$|async); as improvementCounts) {
+        @if (metricService.improvementCountsPieChartData$ | async; as improvementCounts) {
           <section>
             <h3>{{ T.F.METRIC.CMP.IMPROVEMENT_SELECTION_COUNT | translate }}</h3>
             <canvas
               [type]="pieChartType"
               [data]="improvementCounts"
-          [legend]="(improvementCounts?.datasets[0].data.length < 12)"
+              [legend]="improvementCounts?.datasets[0].data.length < 12"
               [options]="pieChartOptions"
               baseChart
             >
             </canvas>
           </section>
-      } @if ((metricService.obstructionCountsPieChartData$|async); as obstructionCounts) {
+        }
+        @if (metricService.obstructionCountsPieChartData$ | async; as obstructionCounts) {
           <section>
             <h3>{{ T.F.METRIC.CMP.OBSTRUCTION_SELECTION_COUNT | translate }}</h3>
             <canvas
               [type]="pieChartType"
               [data]="obstructionCounts"
-          [legend]="(obstructionCounts?.datasets[0].data.length < 12)"
+              [legend]="obstructionCounts?.datasets[0].data.length < 12"
               [options]="pieChartOptions"
               baseChart
             >
@@ -93,7 +100,7 @@
         }
       </section>
       <section class="line-charts">
-      @if ((productivityHappiness$|async); as productivityHappiness) {
+        @if (productivityHappiness$ | async; as productivityHappiness) {
           <section>
             <h3>{{ T.F.METRIC.CMP.MOOD_PRODUCTIVITY_OVER_TIME | translate }}</h3>
             <div class="chart-wrapper">
@@ -111,11 +118,12 @@
         }
       </section>
     </section>
-  } @if ((metricService.hasData$|async)) {
+  }
+  @if (metricService.hasData$ | async) {
     <section class="metric-metrics">
       <h2>{{ T.F.METRIC.CMP.SIMPLE_COUNTERS | translate }}</h2>
       <section class="line-charts">
-      @if ((simpleClickCounterData$|async); as simpleCounterClickData) {
+        @if (simpleClickCounterData$ | async; as simpleCounterClickData) {
           <section>
             <h3>{{ T.F.METRIC.CMP.SIMPLE_CLICK_COUNTERS_OVER_TIME | translate }}</h3>
             <div class="chart-wrapper">
@@ -132,7 +140,8 @@
               </div>
             </div>
           </section>
-      } @if ((simpleCounterStopWatchData$|async); as simpleCounterStopWatchData) {
+        }
+        @if (simpleCounterStopWatchData$ | async; as simpleCounterStopWatchData) {
           <section>
             <h3>{{ T.F.METRIC.CMP.SIMPLE_STOPWATCH_COUNTERS_OVER_TIME | translate }}</h3>
             <div class="chart-wrapper">

src/app/features/note/note/note.component.html

@@ -11,7 +11,8 @@
         (longPress)="editFullscreen($event)"
         class="note-img"
       />
-  } @if (!note.imgUrl) {
+    }
+    @if (!note.imgUrl) {
       <div class="content">
         <div
           (click)="editFullscreen($event)"
@@ -32,11 +33,13 @@
         >
           @if (!note.isPinnedToToday) {
             <mat-icon>wb_sunny</mat-icon>
-      } @if (note.isPinnedToToday) {
+          }
+          @if (note.isPinnedToToday) {
             <mat-icon svgIcon="remove_today"></mat-icon>
           }
         </button>
-    } @if (projectTag$|async; as projectTag) {
+      }
+      @if (projectTag$ | async; as projectTag) {
         <tag [tag]="projectTag"></tag>
       }
       <!--    <button mat-icon-button>-->
@@ -59,8 +62,12 @@
       mat-menu-item
     >
       <mat-icon>forward</mat-icon>
-      {{(note.projectId ? T.F.TASK.CMP.MOVE_TO_OTHER_PROJECT :
+      {{
-      T.F.TASK.CMP.ADD_TO_PROJECT)|translate}}
+        (note.projectId
+          ? T.F.TASK.CMP.MOVE_TO_OTHER_PROJECT
+          : T.F.TASK.CMP.ADD_TO_PROJECT
+        ) | translate
+      }}
     </button>
 
     @if (!note.imgUrl) {
@@ -70,10 +77,15 @@
       >
         @if (note.isLock) {
           <mat-icon>lock</mat-icon>
-      } @if (!note.isLock) {
+        }
+        @if (!note.isLock) {
           <mat-icon>lock_open</mat-icon>
-      } {{note.isLock ? (T.F.NOTE.NOTE_CMP.ENABLE_PARSE|translate) :
+        }
-      (T.F.NOTE.NOTE_CMP.DISABLE_PARSE|translate)}}
+        {{
+          note.isLock
+            ? (T.F.NOTE.NOTE_CMP.ENABLE_PARSE | translate)
+            : (T.F.NOTE.NOTE_CMP.DISABLE_PARSE | translate)
+        }}
       </button>
     }
 
@@ -87,8 +99,10 @@
 
     <mat-menu #projectMenu="matMenu">
       <ng-template matMenuContent>
-        @for (project of (moveToProjectList$|async); track trackByProjectId($index,
+        @for (
-        project)) {
+          project of moveToProjectList$ | async;
+          track trackByProjectId($index, project)
+        ) {
           <button
             (click)="moveNoteToProject(project.id)"
             mat-menu-item

src/app/features/planner/add-task-inline/add-task-inline.component.html

@@ -8,7 +8,8 @@
       {{ T.G.ADD | translate }}
     </button>
   </div>
-} @if (isShowAddTask) {
+}
+@if (isShowAddTask) {
   <add-task-bar
     [isElevated]="true"
     [isHideTagTitles]="true"

src/app/features/planner/add-task-panel-planner/add-task-panel-planner.component.html

@@ -33,7 +33,8 @@
         [cdkDragData]="task"
         [task]="task"
       ></planner-task>
-  } @if (allTasks.length === 0) {
+    }
+    @if (allTasks.length === 0) {
       <div class="empty">{{ T.F.PLANNER.NO_TASKS | translate }}</div>
     }
   </div>

src/app/features/planner/dialog-add-planned-tasks/dialog-add-planned-tasks.component.html

@@ -5,7 +5,7 @@
   <span>{{ T.F.PLANNER.D.ADD_PLANNED.TITLE | translate }}</span>
 </h1>
 
-@if ((day$|async); as day) {
+@if (day$ | async; as day) {
   <mat-dialog-content>
     <header>
       <!--<div class="day-estimate">{{ day.timeEstimate |roundDuration|msToString }}</div>-->
@@ -26,8 +26,10 @@
           ></planner-task>
         }
         <!-- -->
-      @for (repeatProjection of day.noStartTimeRepeatProjections; track
+        @for (
-      repeatProjection.id) {
+          repeatProjection of day.noStartTimeRepeatProjections;
+          track repeatProjection.id
+        ) {
           <planner-repeat-projection
             [repeatCfg]="repeatProjection.repeatCfg"
           ></planner-repeat-projection>
@@ -54,32 +56,40 @@
                 class="time"
                 (click)="editTaskReminderOrReScheduleIfPossible(scheduledItem.task)"
               >
-          <span>{{ (scheduledItem.start|roundDuration|date:'HH:mm') }}</span>
+                <span>{{ scheduledItem.start | roundDuration | date: 'HH:mm' }}</span>
                 <mat-icon>alarm</mat-icon>
               </div>
             } @else {
-        <div class="time">{{ (scheduledItem.start|roundDuration|date:'HH:mm') }}</div>
+              <div class="time">
+                {{ scheduledItem.start | roundDuration | date: 'HH:mm' }}
+              </div>
             }
             <!-- -->
-        @switch (scheduledItem.type) { @case (SCHEDULE_ITEM_TYPE.Task) {
+            @switch (scheduledItem.type) {
+              @case (SCHEDULE_ITEM_TYPE.Task) {
                 <planner-task
                   [task]="scheduledItem.task"
                   [day]="day.dayDate"
                 ></planner-task>
-        } @case (SCHEDULE_ITEM_TYPE.CalEvent) {
+              }
+              @case (SCHEDULE_ITEM_TYPE.CalEvent) {
                 <planner-calendar-event
                   [calendarEvent]="scheduledItem.calendarEvent"
                 ></planner-calendar-event>
-        } @case (SCHEDULE_ITEM_TYPE.RepeatProjection) {
+              }
+              @case (SCHEDULE_ITEM_TYPE.RepeatProjection) {
                 <planner-repeat-projection
                   [repeatCfg]="scheduledItem.repeatCfg"
                 ></planner-repeat-projection>
-        } }
+              }
+            }
           </div>
         }
         <!-- -->
         @if (day.scheduledIItems.length === 0) {
-      <div class="empty">{{ T.F.PLANNER.PLAN_VIEW.NO_SCHEDULED_ITEMS|translate }}</div>
+          <div class="empty">
+            {{ T.F.PLANNER.PLAN_VIEW.NO_SCHEDULED_ITEMS | translate }}
+          </div>
         }
       </div>
     </div>

src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.html

@@ -10,7 +10,7 @@
     <button
       mat-icon-button
       (click)="quickAccessBtnClick(0)"
-    [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_REMOVE_TODAY|translate)"
+      [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_REMOVE_TODAY | translate"
     >
       <mat-icon svgIcon="remove_today"></mat-icon>
     </button>
@@ -20,7 +20,7 @@
     <button
       mat-icon-button
       (click)="quickAccessBtnClick(1)"
-    [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_TODAY|translate)"
+      [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_TODAY | translate"
     >
       <mat-icon>wb_sunny</mat-icon>
     </button>
@@ -29,21 +29,21 @@
   <button
     mat-icon-button
     (click)="quickAccessBtnClick(2)"
-    [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_TOMORROW|translate)"
+    [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_TOMORROW | translate"
   >
     <mat-icon svgIcon="tomorrow"></mat-icon>
   </button>
   <button
     mat-icon-button
     (click)="quickAccessBtnClick(3)"
-    [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_WEEK|translate)"
+    [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_WEEK | translate"
   >
     <mat-icon svgIcon="next_week"></mat-icon>
   </button>
   <button
     mat-icon-button
     (click)="quickAccessBtnClick(4)"
-    [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_MONTH|translate)"
+    [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_MONTH | translate"
   >
     <mat-icon>bedtime</mat-icon>
   </button>
@@ -91,7 +91,7 @@
   @if (selectedTime) {
     <mat-form-field [@expandFade]>
       <mat-icon matPrefix>alarm</mat-icon>
-    <mat-label>{{ (T.F.TASK.D_SCHEDULE_TASK.REMIND_AT|translate) }}</mat-label>
+      <mat-label>{{ T.F.TASK.D_SCHEDULE_TASK.REMIND_AT | translate }}</mat-label>
       <mat-select
         [(ngModel)]="selectedReminderCfgId"
         name="type"
@@ -99,7 +99,7 @@
       >
         @for (remindOption of remindAvailableOptions; track remindOption.value) {
           <mat-option [value]="remindOption.value">
-        {{ (remindOption.label|translate) }}
+            {{ remindOption.label | translate }}
           </mat-option>
         }
       </mat-select>
@@ -126,7 +126,8 @@
         <mat-icon>alarm_off</mat-icon>
       } @else {
         <mat-icon>event_busy</mat-icon>
-    } {{ T.F.TASK.D_SCHEDULE_TASK.UNSCHEDULE|translate }}
+      }
+      {{ T.F.TASK.D_SCHEDULE_TASK.UNSCHEDULE | translate }}
     </button>
   }
 
@@ -139,6 +140,7 @@
       <mat-icon>alarm</mat-icon>
     } @else {
       <mat-icon>today</mat-icon>
-    } {{ T.F.TASK.D_SCHEDULE_TASK.SCHEDULE|translate }}
+    }
+    {{ T.F.TASK.D_SCHEDULE_TASK.SCHEDULE | translate }}
   </button>
 </mat-dialog-actions>

src/app/features/planner/planner-calendar-event/planner-calendar-event.component.html

@@ -4,4 +4,6 @@
   {{ calendarEvent().title }}
   <!--   {{event.start|date:'HH:mm'}} – {{(event.start + event.duration)|date:'HH:mm'}}-->
 </div>
-<div class="planner-time-remaining-shared">{{ calendarEvent().duration|msToString }}</div>
+<div class="planner-time-remaining-shared">
+  {{ calendarEvent().duration | msToString }}
+</div>

src/app/features/planner/planner-day/planner-day.component.html

@@ -2,7 +2,8 @@
   <div class="day-title">
     @if (day.isToday) {
       <mat-icon inline="true">wb_sunny</mat-icon>
-    } {{ day.dayDate|date:'EEE' }}
+    }
+    {{ day.dayDate | date: 'EEE' }}
     <span class="date">{{ day.dayDate | shortDate2 }}</span>
   </div>
   <!--<div class="day-estimate">{{ day.timeEstimate |roundDuration|msToString }}</div>-->
@@ -34,8 +35,10 @@
     }
 
     <!-- -->
-    @for (repeatProjection of day.noStartTimeRepeatProjections; track repeatProjection.id)
+    @for (
-    {
+      repeatProjection of day.noStartTimeRepeatProjections;
+      track repeatProjection.id
+    ) {
       <planner-repeat-projection
         [repeatCfg]="repeatProjection.repeatCfg"
       ></planner-repeat-projection>
@@ -86,22 +89,26 @@
         }
 
         <!-- -->
-      @switch (scheduledItem.type) { @case (SCHEDULE_ITEM_TYPE.Task) {
+        @switch (scheduledItem.type) {
+          @case (SCHEDULE_ITEM_TYPE.Task) {
             <planner-task
               cdkDrag
               [task]="scheduledItem.task"
               [day]="day.dayDate"
               [cdkDragData]="scheduledItem.task"
             ></planner-task>
-      } @case (SCHEDULE_ITEM_TYPE.CalEvent) {
+          }
+          @case (SCHEDULE_ITEM_TYPE.CalEvent) {
             <planner-calendar-event
               [calendarEvent]="scheduledItem.calendarEvent"
             ></planner-calendar-event>
-      } @case (SCHEDULE_ITEM_TYPE.RepeatProjection) {
+          }
+          @case (SCHEDULE_ITEM_TYPE.RepeatProjection) {
             <planner-repeat-projection
               [repeatCfg]="scheduledItem.repeatCfg"
             ></planner-repeat-projection>
-      } }
+          }
+        }
       </div>
     }
 

src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.html

@@ -1,6 +1,8 @@
 <div
   (click)="editTaskRepeatCfg()"
-  matTooltip="{{ T.F.PLANNER.EDIT_REPEATED_TASK|translate: {taskName: repeatCfg().title} }}"
+  matTooltip="{{
+    T.F.PLANNER.EDIT_REPEATED_TASK | translate: { taskName: repeatCfg().title }
+  }}"
 >
   <mat-icon svgIcon="repeat"></mat-icon>
   <div class="title">
@@ -8,11 +10,14 @@
     <!--   {{event.start|date:'HH:mm'}} – {{(event.start + event.duration)|date:'HH:mm'}}-->
   </div>
   <div class="planner-time-remaining-shared">
-    @if (overWriteTimeEstimate() > 0) { {{ overWriteTimeEstimate()|msToString }} <br />
+    @if (overWriteTimeEstimate() > 0) {
+      {{ overWriteTimeEstimate() | msToString }} <br />
       <span class="original-time-remaining"
         >({{ repeatCfg().defaultEstimate | msToString }})</span
       >
       <!--- -->
-    } @else { {{ repeatCfg().defaultEstimate|msToString }} }
+    } @else {
+      {{ repeatCfg().defaultEstimate | msToString }}
+    }
   </div>
 </div>

src/app/features/planner/planner-task/planner-task.component.html

@@ -13,7 +13,8 @@
       <div>
         @if (!isRepeatTaskCreatedToday) {
           <div class="repeat-date-badge">{{ task.created | shortDate2 }}</div>
-      } @if (task.repeatCfgId) {
+        }
+        @if (task.repeatCfgId) {
           <mat-icon
             [style.transform]="isCurrent ? 'scale(1.4)' : ''"
             svgIcon="repeat"
@@ -21,7 +22,8 @@
           </mat-icon>
         }
       </div>
-    } @if (task.issueId) {
+    }
+    @if (task.issueId) {
       <div>
         @if (task.issuePoints) {
           <div class="mini-badge bgc-primary">{{ task.issuePoints }}</div>

src/app/features/pomodoro/dialog-pomodoro-break/dialog-pomodoro-break.component.html

@@ -2,11 +2,14 @@
   @if (!(isManualPauseWork$ | async)) {
     <div>
       <p
-      [innerHTML]="T.F.POMODORO.FINISH_SESSION_X|translate:{nr: (currentCycle$|async)}"
+        [innerHTML]="
+          T.F.POMODORO.FINISH_SESSION_X | translate: { nr: (currentCycle$ | async) }
+        "
       ></p>
       <p>{{ T.F.POMODORO.ENJOY_YOURSELF | translate }}</p>
     </div>
-  } @if ((isManualPauseWork$|async)) {
+  }
+  @if (isManualPauseWork$ | async) {
     <div>
       <p>{{ T.F.POMODORO.BREAK_IS_DONE | translate }}</p>
     </div>
@@ -27,7 +30,7 @@
     {{ T.G.CLOSE | translate }}
   </button>
 
-  @if ((isManualPauseBreak$|async)) {
+  @if (isManualPauseBreak$ | async) {
     <button
       (click)="startBreak()"
       color="primary"
@@ -36,7 +39,8 @@
       <mat-icon>free_breakfast</mat-icon>
       <span>{{ T.F.POMODORO.START_BREAK | translate }}</span>
     </button>
-  } @if (!(isManualPauseWork$|async)) {
+  }
+  @if (!(isManualPauseWork$ | async)) {
     <button
       (click)="nextSession(true)"
       color="primary"
@@ -45,7 +49,8 @@
       <mat-icon>skip_next</mat-icon>
       <span>{{ T.F.POMODORO.SKIP_BREAK | translate }}</span>
     </button>
-  } @if ((isManualPauseWork$|async)) {
+  }
+  @if (isManualPauseWork$ | async) {
     <button
       (click)="nextSession()"
       color="primary"

src/app/features/procrastination/procrastination.component.html

@@ -12,10 +12,14 @@
         <div class="procrastination-graph">
           <div class="wrap">
             <div class="text-item">{{ T.F.PROCRASTINATION.INTRO.FEAR | translate }}</div>
-            <div class="text-item">{{T.F.PROCRASTINATION.INTRO.AVOIDING|translate}}</div>
+            <div class="text-item">
+              {{ T.F.PROCRASTINATION.INTRO.AVOIDING | translate }}
+            </div>
           </div>
           <mat-icon>sync</mat-icon>
-          <div class="text-item">{{T.F.PROCRASTINATION.INTRO.STRESSED|translate}}</div>
+          <div class="text-item">
+            {{ T.F.PROCRASTINATION.INTRO.STRESSED | translate }}
+          </div>
         </div>
       </section>
     </mat-tab>
@@ -93,7 +97,7 @@
       </section>
     </mat-tab>
 
-    @if ((taskService.currentTaskOrCurrentParent$|async); as currentTask) {
+    @if (taskService.currentTaskOrCurrentParent$ | async; as currentTask) {
       <mat-tab [label]="T.F.PROCRASTINATION.SPLIT_UP.TITLE | translate">
         <section class="tab-inner no-box">
           <p>{{ T.F.PROCRASTINATION.SPLIT_UP.INTRO | translate }}</p>

src/app/features/project/dialogs/create-project/dialog-create-project.component.html

@@ -1,7 +1,8 @@
 <h1 mat-dialog-title>
   @if (projectData.id) {
     <span>{{ T.F.PROJECT.D_CREATE.EDIT | translate }}</span>
-  } @if (!projectData.id) {
+  }
+  @if (!projectData.id) {
     <span>{{ T.F.PROJECT.D_CREATE.CREATE | translate }}</span>
   }
 </h1>

src/app/features/quick-history/quick-history.component.html

@@ -1,7 +1,7 @@
 <h1>{{ T.F.QUICK_HISTORY.PAGE_TITLE | translate }}</h1>
 
 <div
-  *ngIf="(worklogService.quickHistoryWeeks$|async) as weeks else spinner"
+  *ngIf="worklogService.quickHistoryWeeks$ | async as weeks; else spinner"
   [@fadeInSlow]
 >
   <div
@@ -11,26 +11,32 @@
     {{ T.F.QUICK_HISTORY.NO_DATA | translate }}
   </div>
 
-  <div *ngFor="let week of weeks; let j = index;">
+  <div *ngFor="let week of weeks; let j = index">
     <h2>
-      {{ T.F.QUICK_HISTORY.WEEK_TITLE|translate:{ nr: week.weekNr, timeSpent:
+      {{
-      (week.timeSpent|msToString) } }}
+        T.F.QUICK_HISTORY.WEEK_TITLE
+          | translate: { nr: week.weekNr, timeSpent: (week.timeSpent | msToString) }
+      }}
     </h2>
 
     <div class="days">
       <div
-        *ngFor="let day of week?.ent|keyvalue:sortDays trackBy: trackByDay; let i = index;"
+        *ngFor="
+          let day of week?.ent | keyvalue: sortDays;
+          trackBy: trackByDay;
+          let i = index
+        "
         class="day"
       >
         <div class="material-table">
           <div
-            (click)="visibility[i+(j*100)]=!visibility[i+(j*100)];"
+            (click)="visibility[i + j * 100] = !visibility[i + j * 100]"
             class="caption"
             mat-ripple
           >
             <div>
               <span
-                *ngIf="visibility[i+(j*100)]"
+                *ngIf="visibility[i + j * 100]"
                 [@fade]
                 >{{ T.F.WORKLOG.WEEK.TITLE | translate }}</span
               >
@@ -39,7 +45,7 @@
               <div class="title">
                 <h3 class="mat-h3">{{ day.value.dayStr }}</h3>
                 <div
-                  *ngIf="!visibility[i+(j*100)]"
+                  *ngIf="!visibility[i + j * 100]"
                   [@expandFade]
                   class="icon-indicator-bar"
                 >
@@ -48,23 +54,29 @@
                   <mat-icon>list</mat-icon>
                   <strong>{{ day.value.logEntries.length }}</strong>
                   <em *ngIf="day.value.workStart"
-                    ><span class="spacer"></span>{{
+                    ><span class="spacer"></span
-                    day.value.workStart|momentFormat:'HH:mm' }} - {{
+                    >{{ day.value.workStart | momentFormat: 'HH:mm' }} -
-                    day.value.workEnd|momentFormat:'HH:mm' }}</em
+                    {{ day.value.workEnd | momentFormat: 'HH:mm' }}</em
                   >
 
                   <div class="simple-counter-items">
                     <div
-                      *ngFor="let sc of simpleCounterService.enabledSimpleCounters$|async"
+                      *ngFor="
+                        let sc of simpleCounterService.enabledSimpleCounters$ | async
+                      "
                       class="simple-counter-item"
                     >
                       <mat-icon inline="true">{{ sc.icon }}</mat-icon>
                       @if (sc.type === 'StopWatch') {
                         <div class="count">
-                        {{ sc.countOnDay[day.value.dateStr] || 0|msToMinuteClockString }}
+                          {{
+                            sc.countOnDay[day.value.dateStr] || 0 | msToMinuteClockString
+                          }}
                         </div>
                       } @else {
-                      <div class="count">{{ sc.countOnDay[day.value.dateStr] || 0 }}</div>
+                        <div class="count">
+                          {{ sc.countOnDay[day.value.dateStr] || 0 }}
+                        </div>
                       }
                     </div>
                   </div>
@@ -73,7 +85,7 @@
             </div>
             <div class="with-icon">
               <mat-icon
-                *ngIf="visibility[i+(j*100)]"
+                *ngIf="visibility[i + j * 100]"
                 [@fade]
                 >timer
               </mat-icon>
@@ -81,12 +93,15 @@
           </div>
 
           <table
-            *ngIf="visibility[i+(j*100)]"
+            *ngIf="visibility[i + j * 100]"
             [@expandFade]
             class="task-summary-table"
           >
             <tr
-              *ngFor="let logEntry of filterWorklogDataForDay(day.value.logEntries); trackBy: trackByLogEntry;"
+              *ngFor="
+                let logEntry of filterWorklogDataForDay(day.value.logEntries);
+                trackBy: trackByLogEntry
+              "
             >
               <td
                 [class.isSubTask]="logEntry.task.parentId"
@@ -98,13 +113,19 @@
               <td class="worked">
                 <span
                   *ngIf="logEntry.task.subTaskIds && logEntry.task.subTaskIds.length > 0"
-                  >∑ {{ logEntry.task.timeSpentOnDay[day.value.dateStr]|msToClockString
+                  >∑
+                  {{
+                    logEntry.task.timeSpentOnDay[day.value.dateStr] | msToClockString
                   }}</span
                 >
                 <inline-input
-                  (changed)="updateTimeSpentTodayForTask(logEntry.task,day.value.dateStr, $event)"
+                  (changed)="
+                    updateTimeSpentTodayForTask(logEntry.task, day.value.dateStr, $event)
+                  "
                   *ngIf="!logEntry.task.subTaskIds || !logEntry.task.subTaskIds.length"
-                  [displayValue]="logEntry.task.timeSpentOnDay[day.value.dateStr]|msToClockString"
+                  [displayValue]="
+                    logEntry.task.timeSpentOnDay[day.value.dateStr] | msToClockString
+                  "
                   [type]="'duration'"
                   [value]="logEntry.task.timeSpentOnDay[day.value.dateStr]"
                 >

src/app/features/right-panel/right-panel.component.html

@@ -13,9 +13,11 @@
     <div class="right-panel">
       @if (panelContent === 'ADD_TASK_PANEL') {
         <issue-panel [@slideInFromRight]></issue-panel>
-      } @if (panelContent === 'NOTES') {
+      }
+      @if (panelContent === 'NOTES') {
         <notes [@slideInFromRight]></notes>
-      } @if (selectedTaskWithDelayForNone$|async; as selectedTaskWithDelayForNone) {
+      }
+      @if (selectedTaskWithDelayForNone$ | async; as selectedTaskWithDelayForNone) {
         <task-detail-panel
           [isOver]="isAlwaysOver() || (layoutService.isRightPanelOver$ | async)"
           [@taskDetailPanelTaskChange]="selectedTaskWithDelayForNone?.id"

src/app/features/schedule/dialog-timeline-setup/dialog-timeline-setup.component.html

@@ -13,7 +13,8 @@
         class="text"
         [innerHTML]="T.F.SCHEDULE.D_INITIAL.TEXT | translate"
       ></div>
-    } @if (!data?.isInfoShownInitially) {
+    }
+    @if (!data?.isInfoShownInitially) {
       <help-section>
         <div
           [innerHTML]="T.F.SCHEDULE.D_INITIAL.TEXT | translate"

src/app/features/schedule/schedule-event/schedule-event.component.html

@@ -7,28 +7,33 @@
         class="ico"
         inline="true"
       ></mat-icon>
-  } @case ('PLANNED_FOR_DAY') {
+    }
+    @case ('PLANNED_FOR_DAY') {
       <div class="day-of-month">{{ se.dayOfMonth }}</div>
-  } @case ('SCHEDULED_TASK') {
+    }
+    @case ('SCHEDULED_TASK') {
       <mat-icon
         class="ico"
         inline="true"
         >alarm
       </mat-icon>
-  } @case ('FLOW') {
+    }
+    @case ('FLOW') {
       <!--<div class="fake-ico">~</div>-->
       <mat-icon
         class="ico"
         inline="true"
         >wb_sunny
       </mat-icon>
-  } @case ('LUNCH_BREAK') {
+    }
+    @case ('LUNCH_BREAK') {
       <mat-icon
         class="ico"
         inline="true"
         >restaurant
       </mat-icon>
-  } @case ('CAL_PROJECTION') {
+    }
+    @case ('CAL_PROJECTION') {
       <mat-icon>{{ $any(se.data)?.icon || 'event' }}</mat-icon>
       <mat-icon>add</mat-icon>
     }
@@ -38,8 +43,9 @@
   }
   <!--- -->
 
-  @if (se.type === SVEType.ScheduledTask || se.type === SVEType.ScheduledRepeatProjection)
+  @if (
-  {
+    se.type === SVEType.ScheduledTask || se.type === SVEType.ScheduledRepeatProjection
+  ) {
     <div class="time-badge">{{ scheduledClockStr }}</div>
   }
 </div>
@@ -51,11 +57,17 @@
   <!--  {{se.id}} __ {{se.data?.id}} __-->
   <!-- -->
 
-  @if (se.type === SVEType.SplitTaskContinuedLast || se.type ===
+  @if (
-  SVEType.SplitTaskContinued || se.type === SVEType.RepeatProjectionSplitContinued ||
+    se.type === SVEType.SplitTaskContinuedLast ||
-  se.type === SVEType.RepeatProjectionSplitContinuedLast) { ...
+    se.type === SVEType.SplitTaskContinued ||
+    se.type === SVEType.RepeatProjectionSplitContinued ||
+    se.type === SVEType.RepeatProjectionSplitContinuedLast
+  ) {
+    ...
     <!-- -->
-  } @else { {{ title }} }
+  } @else {
+    {{ title }}
+  }
 </div>
 
 @if (task) {

src/app/features/schedule/schedule/schedule.component.html

@@ -79,14 +79,18 @@
     <div
       class="col"
       [attr.data-day]="day"
-    style="grid-column: {{ $index + 2 }}; grid-row: 1 / span {{($index === 0 ? currentTimeRow :endOfDayColRowStart) -1}}"
+      style="grid-column: {{ $index + 2 }}; grid-row: 1 / span {{
+        ($index === 0 ? currentTimeRow : endOfDayColRowStart) - 1
+      }}"
     >
       <div class="drop-label">{{ T.F.SCHEDULE.PLAN_START_DAY | translate }}</div>
     </div>
     <div
       class="col end-of-day"
       [attr.data-day]="day"
-    style="grid-column: {{ $index + 2 }}; grid-row: {{($index === 0 ? currentTimeRow :endOfDayColRowStart)}} / span {{totalRows - ($index === 0 ? currentTimeRow :endOfDayColRowStart)}}"
+      style="grid-column: {{ $index + 2 }}; grid-row: {{
+        $index === 0 ? currentTimeRow : endOfDayColRowStart
+      }} / span {{ totalRows - ($index === 0 ? currentTimeRow : endOfDayColRowStart) }}"
     >
       <div class="drop-label">{{ T.F.SCHEDULE.PLAN_END_DAY | translate }}</div>
     </div>
@@ -109,10 +113,14 @@
   }
 
   <!-- Events -->
-  @for (ev of (events$|async); track ev.id) {
+  @for (ev of events$ | async; track ev.id) {
     <!-- -->
-  @if (ev.type === SVEType.Task || ev.type === SVEType.SplitTask || ev.type ===
+    @if (
-  SVEType.TaskPlannedForDay || ev.type === SVEType.SplitTaskPlannedForDay) {
+      ev.type === SVEType.Task ||
+      ev.type === SVEType.SplitTask ||
+      ev.type === SVEType.TaskPlannedForDay ||
+      ev.type === SVEType.SplitTaskPlannedForDay
+    ) {
       <schedule-event
         class="draggable"
         cdkDrag
@@ -125,10 +133,11 @@
       ></schedule-event>
     } @else {
       <schedule-event [event]="ev"></schedule-event>
-  } }
+    }
+  }
 
   <!-- Excess tasks planned for day -->
-  @for (beyondBudgetDay of (beyondBudget$|async); track i; let i = $index) {
+  @for (beyondBudgetDay of beyondBudget$ | async; track i; let i = $index) {
     <!-- -->
     @if (beyondBudgetDay.length > 0) {
       <div
@@ -138,7 +147,9 @@
         <div
           class="excess-entries-header"
           [matTooltipPosition]="'above'"
-      [matTooltip]="'Tasks planned for day, but that are beyond the available time budget'"
+          [matTooltip]="
+            'Tasks planned for day, but that are beyond the available time budget'
+          "
         >
           <mat-icon>hourglass_disabled</mat-icon>
           {{ beyondBudgetDay.length }}

src/app/features/search-bar/search-bar.component.html

@@ -5,7 +5,7 @@
   class="search-form mat-elevation-z4"
 >
   <div class="input-wrapper">
-    @if ((isLoading$|async)) {
+    @if (isLoading$ | async) {
       <div class="spinner">
         <mat-spinner diameter="50"></mat-spinner>
       </div>
@@ -17,7 +17,7 @@
       (blur)="onBlur($event)"
       [formControl]="taskSuggestionsCtrl"
       [matAutocomplete]="autoEl"
-      [placeholder]="(T.F.SEARCH_BAR.PLACEHOLDER|translate)"
+      [placeholder]="T.F.SEARCH_BAR.PLACEHOLDER | translate"
       matInput
     />
 
@@ -33,8 +33,10 @@
 
   <div class="info-bar">
     <div class="info-text">
-      {{ (!tooManyResults ? T.F.SEARCH_BAR.INFO :
+      {{
-      T.F.SEARCH_BAR.TOO_MANY_RESULTS)|translate }}
+        (!tooManyResults ? T.F.SEARCH_BAR.INFO : T.F.SEARCH_BAR.TOO_MANY_RESULTS)
+          | translate
+      }}
     </div>
   </div>
 
@@ -44,7 +46,7 @@
     autoActiveFirstOption
     [displayWith]="getOptionText"
   >
-    @for (item of (filteredIssueSuggestions$|async); track trackByFn($index, item)) {
+    @for (item of filteredIssueSuggestions$ | async; track trackByFn($index, item)) {
       <mat-option
         (click)="navigateToItem(item)"
         class="search-mat-option"
@@ -56,7 +58,8 @@
         <span>{{ item?.titleHighlighted || item?.title }}</span>
         @if (item.issueType) {
           <mat-icon [svgIcon]="item.issueType | issueIcon"></mat-icon>
-      } @if (item.isArchiveTask) {
+        }
+        @if (item.isArchiveTask) {
           <mat-icon>archive</mat-icon>
         }
       </mat-option>

src/app/features/simple-counter/dialog-simple-counter-edit/dialog-simple-counter-edit.component.html

@@ -9,7 +9,8 @@
         <div>{{ T.F.SIMPLE_COUNTER.D_EDIT.CURRENT_STREAK | translate }}</div>
         <div>
           <strong
-          >{{ currentStreak() }} {{T.F.SIMPLE_COUNTER.D_EDIT.DAYS|translate}}</strong
+            >{{ currentStreak() }}
+            {{ T.F.SIMPLE_COUNTER.D_EDIT.DAYS | translate }}</strong
           >
         </div>
       </section>
@@ -17,12 +18,14 @@
       <section style="text-align: center; margin-bottom: 16px">
         <div>{{ T.F.SIMPLE_COUNTER.D_EDIT.DAILY_GOAL | translate }}</div>
         <div>
-        <strong
+          <strong>
-          >@if (data.simpleCounter.type === SimpleCounterType.StopWatch) { {{
+            @if (data.simpleCounter.type === SimpleCounterType.StopWatch) {
-          data.simpleCounter.streakMinValue|msToString }}
+              {{ data.simpleCounter.streakMinValue | msToString }}
               <!---->
-          } @else { {{ data.simpleCounter.streakMinValue }} }</strong
+            } @else {
-        >
+              {{ data.simpleCounter.streakMinValue }}
+            }
+          </strong>
         </div>
       </section>
     }
@@ -47,8 +50,10 @@
     }
 
     <div class="form-wrapper">
-      @if (data.simpleCounter.type === SimpleCounterType.ClickCounter ||
+      @if (
-      data.simpleCounter.type === SimpleCounterType.RepeatedCountdownReminder) {
+        data.simpleCounter.type === SimpleCounterType.ClickCounter ||
+        data.simpleCounter.type === SimpleCounterType.RepeatedCountdownReminder
+      ) {
         <mat-form-field>
           <mat-label>{{ T.F.SIMPLE_COUNTER.D_EDIT.L_COUNTER | translate }}</mat-label>
           <input

src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.html

@@ -16,7 +16,8 @@
       </button>
       @if (sc.countOnDay[todayStr()]) {
         <div class="label">{{ sc.countOnDay[todayStr()] | msToMinuteClockString }}</div>
-  } }
+      }
+    }
     <!----->
     @if (sc.type === SimpleCounterType.ClickCounter) {
       <button
@@ -34,14 +35,15 @@
       </button>
       @if (sc.countOnDay[todayStr()]) {
         <div class="label">{{ sc.countOnDay[todayStr()] }}</div>
-  } }
+      }
+    }
     <!----->
     @if (sc.type === SimpleCounterType.RepeatedCountdownReminder) {
       <button
         (click)="isTimeUp() ? countUpAndNextRepeatCountdownSession() : toggleStopwatch()"
         (contextmenu)="edit($event)"
         (longPress)="edit()"
-    [color]="(sc.isOn && !isTimeUp())? 'accent': ''"
+        [color]="sc.isOn && !isTimeUp() ? 'accent' : ''"
         [class.isTimeUp]="isTimeUp()"
         class="main-btn repeated-countdown"
         mat-mini-fab
@@ -53,8 +55,10 @@
       </button>
       @if (sc.isOn && (countdownTime$ | async); as countdownTime) {
         <div class="extra-label">{{ countdownTime | msToMinuteClockString }}</div>
-  } @if (sc.countOnDay[todayStr()] || isTimeUp()) {
+      }
-  <div class="label">{{ isTimeUp() ? "+" : sc.countOnDay[todayStr()] }}</div>
+      @if (sc.countOnDay[todayStr()] || isTimeUp()) {
-  } }
+        <div class="label">{{ isTimeUp() ? '+' : sc.countOnDay[todayStr()] }}</div>
+      }
+    }
   </div>
 }

src/app/features/tag/dialog-edit-tags/dialog-edit-tags-for-task.component.html

@@ -1,6 +1,9 @@
 <h1 mat-dialog-title>
-  {{isEdit ? (T.F.TAG.D_EDIT.EDIT|translate:{title: title}) :
+  {{
-  (T.F.TAG.D_EDIT.ADD|translate:{title: title})}}
+    isEdit
+      ? (T.F.TAG.D_EDIT.EDIT | translate: { title: title })
+      : (T.F.TAG.D_EDIT.ADD | translate: { title: title })
+  }}
 </h1>
 
 <mat-dialog-content>
@@ -14,7 +17,7 @@
       autoFocus
       [label]="T.F.TAG.D_EDIT.LABEL | translate"
       [model]="tagIds"
-      [suggestions]="(tagSuggestions$|async)"
+      [suggestions]="tagSuggestions$ | async"
       (ctrlEnterSubmit)="close()"
     ></chip-list-input>
   </div>

src/app/features/tag/tag-list/tag-list.component.html

@@ -1,4 +1,4 @@
-@if ((tags()?.length > 0)) {
+@if (tags()?.length > 0) {
   <div class="tags-container">
     <div class="tags">
       @for (tag of tags(); track tag.id) {

src/app/features/task-repeat-cfg/dialog-edit-task-repeat-cfg/dialog-edit-task-repeat-cfg.component.html

@@ -3,8 +3,11 @@
   class="dialog-help-wrapper"
 >
   <h1 mat-dialog-title>
-    {{isEdit ? (T.F.TASK_REPEAT.D_EDIT.EDIT|translate) :
+    {{
-    (T.F.TASK_REPEAT.D_EDIT.ADD|translate)}}
+      isEdit
+        ? (T.F.TASK_REPEAT.D_EDIT.EDIT | translate)
+        : (T.F.TASK_REPEAT.D_EDIT.ADD | translate)
+    }}
   </h1>
 
   <mat-dialog-content>
@@ -29,7 +32,7 @@
         (removeItem)="removeTag($event)"
         [label]="T.F.TASK_REPEAT.D_EDIT.TAG_LABEL | translate"
         [model]="repeatCfg.tagIds"
-        [suggestions]="(tagSuggestions$|async)"
+        [suggestions]="tagSuggestions$ | async"
       ></chip-list-input>
 
       <!--      <collapsible [title]="T.F.TASK_REPEAT.D_EDIT.ADVANCED_CFG|translate">-->

src/app/features/tasks/add-task-bar/add-task-bar.component.html

@@ -1,5 +1,6 @@
-@let shortSyntaxTags = (shortSyntaxTags$|async); @let activatedIssueTask =
+@let shortSyntaxTags = shortSyntaxTags$ | async;
-(activatedIssueTask$|async); @let inputVal = (inputVal$|async)||'';
+@let activatedIssueTask = activatedIssueTask$ | async;
+@let inputVal = (inputVal$ | async) || '';
 
 <form
   (submit)="$event.preventDefault(); addTask()"
@@ -12,7 +13,7 @@
   #origin="matAutocompleteOrigin"
 >
   <div class="input-wrapper">
-    @if ((isLoading())) {
+    @if (isLoading()) {
       <div class="spinner">
         <mat-spinner diameter="50"></mat-spinner>
       </div>
@@ -27,7 +28,8 @@
       [matAutocompleteConnectedTo]="origin"
       [mentionConfig]="mentionConfig$ | async"
       spellcheck="false"
-      [placeholder]="(doubleEnterCount() > 0)
+      [placeholder]="
+        doubleEnterCount() > 0
           ? (T.F.TASK.ADD_TASK_BAR.START | translate)
           : isAddToBottom()
             ? isAddToBacklog()
@@ -35,7 +37,8 @@
               : (T.F.TASK.ADD_TASK_BAR.ADD_TASK_TO_BOTTOM_OF_TODAY | translate)
             : isAddToBacklog()
               ? (T.F.TASK.ADD_TASK_BAR.ADD_TASK_TO_TOP_OF_BACKLOG | translate)
-            : (T.F.TASK.ADD_TASK_BAR.ADD_TASK_TO_TOP_OF_TODAY|translate)"
+              : (T.F.TASK.ADD_TASK_BAR.ADD_TASK_TO_TOP_OF_TODAY | translate)
+      "
       matInput
     />
 
@@ -87,7 +90,8 @@
             <mat-icon>search_off</mat-icon>
           }
         </button>
-      } @if (isAddToBacklogAvailable$|async) {
+      }
+      @if (isAddToBacklogAvailable$ | async) {
         <button
           (click)="isAddToBacklog.set(!isAddToBacklog())"
           [matTooltip]="T.F.TASK.ADD_TASK_BAR.TOGGLE_ADD_TO_BACKLOG_TODAY | translate"
@@ -107,25 +111,46 @@
   </div>
 
   <div class="info-bar">
-    @if (inputVal?.length > 0) { @if (!activatedIssueTask && !shortSyntaxTags?.length) {
+    @if (inputVal?.length > 0) {
+      @if (!activatedIssueTask && !shortSyntaxTags?.length) {
         <div class="info-text">{{ T.F.TASK.ADD_TASK_BAR.CREATE_TASK | translate }}</div>
-    } @if (activatedIssueTask) { @if (activatedIssueTask?.issueType) {
+      }
+      @if (activatedIssueTask) {
+        @if (activatedIssueTask?.issueType) {
           <div class="info-text add-existing">
             <mat-icon>playlist_add</mat-icon>
-      {{ T.F.TASK.ADD_TASK_BAR.ADD_ISSUE_TASK|translate:{ issueType:
+            {{
-      activatedIssueTask.issueType, issueNr: activatedIssueTask.taskIssueId ||
+              T.F.TASK.ADD_TASK_BAR.ADD_ISSUE_TASK
-      activatedIssueTask.issueData?.id } }}
+                | translate
+                  : {
+                      issueType: activatedIssueTask.issueType,
+                      issueNr:
+                        activatedIssueTask.taskIssueId ||
+                        activatedIssueTask.issueData?.id,
+                    }
+            }}
           </div>
-    } @if (activatedIssueTask.issueType=== undefined) {
+        }
+        @if (activatedIssueTask.issueType === undefined) {
           <div class="info-text add-existing">
             <mat-icon>playlist_add</mat-icon>
-      {{ T.F.TASK.ADD_TASK_BAR.ADD_EXISTING_TASK|translate: { taskTitle:
+            {{
-      activatedIssueTask.title } }}
+              T.F.TASK.ADD_TASK_BAR.ADD_EXISTING_TASK
+                | translate: { taskTitle: activatedIssueTask.title }
+            }}
           </div>
-    } } @if (!activatedIssueTask && shortSyntaxTags?.length) { @for (shortSyntaxTag of
+        }
-    (shortSyntaxTags); track shortSyntaxTag.title || shortSyntaxTag) {
+      }
+      @if (!activatedIssueTask && shortSyntaxTags?.length) {
+        @for (
+          shortSyntaxTag of shortSyntaxTags;
+          track shortSyntaxTag.title || shortSyntaxTag
+        ) {
           <tag [tag]="shortSyntaxTag"></tag>
-    } } } @if (inputVal.length === 0) {
+        }
+      }
+    }
+    @if (inputVal.length === 0) {
       <div class="info-text">{{ T.F.TASK.ADD_TASK_BAR.EXAMPLE | translate }}</div>
     }
   </div>
@@ -138,14 +163,18 @@
     (optionSelected)="addTask()"
     [displayWith]="displayWith"
   >
-    @for (item of (filteredIssueSuggestions$|async); track item.taskId || (item.issueData
+    @for (
-    && item.issueData.id)) {
+      item of filteredIssueSuggestions$ | async;
+      track item.taskId || (item.issueData && item.issueData.id)
+    ) {
       <mat-option [value]="item">
         @if (item.issueType) {
           <mat-icon [svgIcon]="item.issueType | issueIcon"></mat-icon>
-      } @if (!item.issueType && !item.ctx) {
+        }
+        @if (!item.issueType && !item.ctx) {
           <mat-icon>library_books</mat-icon>
-      } @if (item.ctx) {
+        }
+        @if (item.ctx) {
           <tag
             [tag]="item.ctx"
             [isHideTitle]="isHideTagTitles()"

src/app/features/tasks/dialog-add-time-estimate-for-other-day/dialog-add-time-estimate-for-other-day.component.html

@@ -14,8 +14,10 @@
       </help-section>
 
       <h3 class="mat-caption">
-        {{T.F.TASK.D_TIME_FOR_DAY.ADD_ENTRY_FOR|translate:{ date:
+        {{
-        (newEntry.date|date:'dd-MM-yyyy') || '' } }}
+          T.F.TASK.D_TIME_FOR_DAY.ADD_ENTRY_FOR
+            | translate: { date: (newEntry.date | date: 'dd-MM-yyyy') || '' }
+        }}
       </h3>
       <mat-form-field>
         <mat-label>{{ T.F.TASK.D_TIME_FOR_DAY.DATE | translate }}</mat-label>

src/app/features/tasks/dialog-time-estimate/dialog-time-estimate.component.html

@@ -39,13 +39,15 @@
           {{ T.F.TASK.D_TIME.ADD_FOR_OTHER_DAY | translate }}
         </button>
 
-        @for (strDate of timeSpentOnDayCopy|keys:'reverse':todayStr; track
+        @for (
-        trackByIndex($index, strDate)) {
+          strDate of timeSpentOnDayCopy | keys: 'reverse' : todayStr;
+          track trackByIndex($index, strDate)
+        ) {
           <div class="other-day">
             <mat-form-field>
-            <mat-label
+              <mat-label>{{
-              >{{T.F.TASK.D_TIME.TIME_SPENT_ON|translate:{date: strDate} }}</mat-label
+                T.F.TASK.D_TIME.TIME_SPENT_ON | translate: { date: strDate }
-            >
+              }}</mat-label>
               <input
                 [(ngModel)]="timeSpentOnDayCopy[strDate]"
                 inputDuration="optional"

src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.html

@@ -1,10 +1,12 @@
-@if ((tasks$|async); as tasks) {
+@if (tasks$ | async; as tasks) {
   <h1 mat-dialog-title>
     <mat-icon class="dialog-header-icon">alarm</mat-icon>
-  <span
+    <span>{{
-    >{{(isMultiple ? T.F.TASK.D_REMINDER_VIEW.DUE_TASKS :
+      (isMultiple
-    T.F.TASK.D_REMINDER_VIEW.DUE_TASK)|translate}}</span
+        ? T.F.TASK.D_REMINDER_VIEW.DUE_TASKS
-  >
+        : T.F.TASK.D_REMINDER_VIEW.DUE_TASK
+      ) | translate
+    }}</span>
   </h1>
   <mat-dialog-content>
     <div
@@ -83,7 +85,9 @@
                   {{ T.F.TASK.D_REMINDER_VIEW.RESCHEDULE_UNTIL_TOMORROW | translate }}
                 </button>
                 <button
-            [disabled]="!(task.projectId || task.parentId || task.tagIds.length > 0)"
+                  [disabled]="
+                    !(task.projectId || task.parentId || task.tagIds.length > 0)
+                  "
                   (click)="dismiss(task)"
                   mat-menu-item
                 >
@@ -115,8 +119,12 @@
         type="button"
       >
         <mat-icon>snooze</mat-icon>
-      {{(isMultiple ? T.F.TASK.D_REMINDER_VIEW.SNOOZE_ALL :
+        {{
-      T.F.TASK.D_REMINDER_VIEW.SNOOZE)|translate }}
+          (isMultiple
+            ? T.F.TASK.D_REMINDER_VIEW.SNOOZE_ALL
+            : T.F.TASK.D_REMINDER_VIEW.SNOOZE
+          ) | translate
+        }}
       </button>
       @if (!isMultiple && (isSingleOnToday$ | async)) {
         <button
@@ -129,7 +137,8 @@
           <mat-icon>check</mat-icon>
           {{ T.F.TASK.D_REMINDER_VIEW.DONE | translate }}
         </button>
-    } @if (!(isSingleOnToday$|async)) {
+      }
+      @if (!(isSingleOnToday$ | async)) {
         <button
           (click)="addAllToToday()"
           [disabled]="isDisableControls"
@@ -138,10 +147,15 @@
           type="button"
         >
           <mat-icon>wb_sunny</mat-icon>
-      {{(isMultiple ? T.F.TASK.D_REMINDER_VIEW.ADD_ALL_TO_TODAY :
+          {{
-      T.F.TASK.D_REMINDER_VIEW.ADD_TO_TODAY)|translate }}
+            (isMultiple
+              ? T.F.TASK.D_REMINDER_VIEW.ADD_ALL_TO_TODAY
+              : T.F.TASK.D_REMINDER_VIEW.ADD_TO_TODAY
+            ) | translate
+          }}
         </button>
-    } @if (!isMultiple||(isSingleOnToday$|async)) {
+      }
+      @if (!isMultiple || (isSingleOnToday$ | async)) {
         <button
           (click)="play()"
           [disabled]="isDisableControls"
@@ -150,7 +164,7 @@
           type="button"
         >
           <mat-icon>play_arrow</mat-icon>
-      {{(T.F.TASK.D_REMINDER_VIEW.START|translate)}}
+          {{ T.F.TASK.D_REMINDER_VIEW.START | translate }}
         </button>
       }
     </div>

src/app/features/tasks/select-task/select-task.component.html

@@ -10,7 +10,8 @@
   />
   @if (!isCreate) {
     <mat-icon matSuffix="">track_changes</mat-icon>
-  } @if (isCreate) {
+  }
+  @if (isCreate) {
     <mat-icon matSuffix="">add</mat-icon>
   }
 
@@ -32,7 +33,8 @@
           <!---->
           @if (!task.issueType && !projectMap[task.projectId]) {
             <mat-icon>library_books</mat-icon>
-      } @if (projectMap[task.projectId]) {
+          }
+          @if (projectMap[task.projectId]) {
             <tag [tag]="projectMap[task.projectId]"></tag>
           }
           <!---->

src/app/features/tasks/task-attachment/dialog-edit-attachment/dialog-edit-task-attachment.component.html

@@ -3,8 +3,12 @@
   (submit)="$event.preventDefault(); submit()"
 >
   <h1 mat-dialog-title>
-    {{ (attachmentCopy.id ? (T.F.ATTACHMENT.DIALOG_EDIT.EDIT_ATTACHMENT) :
+    {{
-    (T.F.ATTACHMENT.DIALOG_EDIT.ADD_ATTACHMENT)) |translate }}
+      (attachmentCopy.id
+        ? T.F.ATTACHMENT.DIALOG_EDIT.EDIT_ATTACHMENT
+        : T.F.ATTACHMENT.DIALOG_EDIT.ADD_ATTACHMENT
+      ) | translate
+    }}
   </h1>
 
   <mat-dialog-content>
@@ -20,7 +24,7 @@
         />
       </mat-form-field>
       <mat-form-field>
-        <mat-label>{{(T.G.TITLE|translate)}}</mat-label>
+        <mat-label>{{ T.G.TITLE | translate }}</mat-label>
         <input
           [(ngModel)]="attachmentCopy.title"
           autofocus="autofocus"
@@ -31,14 +35,14 @@
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>{{(T.F.ATTACHMENT.DIALOG_EDIT.SELECT_TYPE|translate)}}</mat-label>
+        <mat-label>{{ T.F.ATTACHMENT.DIALOG_EDIT.SELECT_TYPE | translate }}</mat-label>
         <mat-select
           [(ngModel)]="attachmentCopy.type"
           name="type"
           required="true"
         >
           @for (type of types; track trackByIndex($index, type)) {
-          <mat-option [value]="type.type">{{ (type.title|translate) }} </mat-option>
+            <mat-option [value]="type.type">{{ type.title | translate }} </mat-option>
           }
         </mat-select>
       </mat-form-field>

src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.html

@@ -17,11 +17,13 @@
         target="_blank"
         taskAttachmentLink
       >
-      @if (attachment.type!=='IMG' || isError[i]) { @if (attachment.icon) {
+        @if (attachment.type !== 'IMG' || isError[i]) {
+          @if (attachment.icon) {
             <mat-icon>{{ attachment.icon }} </mat-icon>
           }
           <div class="title">{{ attachment.title || attachment.path }}</div>
-      } @if (attachment.type==='IMG' && !isError[i]) {
+        }
+        @if (attachment.type === 'IMG' && !isError[i]) {
           <img
             (error)="isError[i] = true"
             [enlargeImg]="attachment.originalImgPath"
@@ -43,7 +45,8 @@
           >
             @if (attachment.type === 'IMG') {
               <mat-icon>search</mat-icon>
-        } @if (attachment.type!=='IMG') {
+            }
+            @if (attachment.type !== 'IMG') {
               <mat-icon>open_in_new</mat-icon>
             }
           </a>

src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.html

@@ -34,7 +34,7 @@
         mat-icon-button
         tabindex="0"
         (click)="quickAccessBtnClick(0)"
-      [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_REMOVE_TODAY|translate)"
+        [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_REMOVE_TODAY | translate"
       >
         <mat-icon svgIcon="remove_today"></mat-icon>
       </button>
@@ -45,7 +45,7 @@
         mat-icon-button
         tabindex="0"
         (click)="quickAccessBtnClick(1)"
-      [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_TODAY|translate)"
+        [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_TODAY | translate"
       >
         <mat-icon>wb_sunny</mat-icon>
       </button>
@@ -55,7 +55,7 @@
       mat-icon-button
       tabindex="0"
       (click)="quickAccessBtnClick(2)"
-      [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_TOMORROW|translate)"
+      [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_TOMORROW | translate"
     >
       <mat-icon svgIcon="tomorrow"></mat-icon>
     </button>
@@ -63,7 +63,7 @@
       mat-icon-button
       tabindex="0"
       (click)="quickAccessBtnClick(3)"
-      [matTooltip]="(T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_WEEK|translate)"
+      [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_WEEK | translate"
     >
       <mat-icon svgIcon="next_week"></mat-icon>
     </button>
@@ -78,15 +78,25 @@
     <button
       mat-icon-button
       tabindex="0"
-      [matTooltip]="(task.reminderId ? T.F.TASK.CMP.EDIT_SCHEDULED : T.F.TASK.CMP.SCHEDULE|translate) +  (kb.taskSchedule ? (' ['+kb.taskSchedule+ ']'):'')"
+      [matTooltip]="
+        (task.reminderId
+          ? T.F.TASK.CMP.EDIT_SCHEDULED
+          : (T.F.TASK.CMP.SCHEDULE | translate)) +
+        (kb.taskSchedule ? ' [' + kb.taskSchedule + ']' : '')
+      "
       (click)="scheduleTask()"
     >
       <mat-icon>today</mat-icon>
     </button>
   </div>
 
-  @if (isAdvancedControls() && IS_TOUCH_PRIMARY && !task.isDone && !isCurrent &&
+  @if (
-  !task.subTaskIds.length) {
+    isAdvancedControls() &&
+    IS_TOUCH_PRIMARY &&
+    !task.isDone &&
+    !isCurrent &&
+    !task.subTaskIds.length
+  ) {
     <button
       (click)="startTask()"
       mat-menu-item
@@ -100,8 +110,10 @@
       </span>
       <span class="key-i">{{ kb.togglePlay }}</span>
     </button>
-  } @if (isAdvancedControls() && !IS_TOUCH_PRIMARY && !task.isDone &&
+  }
-  !task.subTaskIds.length) {
+  @if (
+    isAdvancedControls() && !IS_TOUCH_PRIMARY && !task.isDone && !task.subTaskIds.length
+  ) {
     <button
       (click)="goToFocusMode()"
       mat-menu-item
@@ -112,8 +124,14 @@
       </span>
       <!--    <span class="key-i">{{ kb.goToFocusMode }}</span>-->
     </button>
-  } @if (isAdvancedControls() && IS_TOUCH_PRIMARY && !task.isDone && isCurrent &&
+  }
-  !task.subTaskIds.length) {
+  @if (
+    isAdvancedControls() &&
+    IS_TOUCH_PRIMARY &&
+    !task.isDone &&
+    isCurrent &&
+    !task.subTaskIds.length
+  ) {
     <button
       (click)="pauseTask()"
       mat-menu-item
@@ -124,7 +142,8 @@
       </span>
       <span class="key-i">{{ kb.togglePlay }}</span>
     </button>
-  } @if (IS_TOUCH_PRIMARY || !isAdvancedControls()) {
+  }
+  @if (IS_TOUCH_PRIMARY || !isAdvancedControls()) {
     <button
       (click)="toggleTaskDone()"
       mat-menu-item
@@ -134,12 +153,20 @@
           <mat-icon>undo</mat-icon>
         } @else {
           <mat-icon>check</mat-icon>
-      } {{ (task.isDone ? T.F.TASK.CMP.MARK_DONE : T.F.TASK.CMP.MARK_DONE)|translate }}
+        }
+        {{ (task.isDone ? T.F.TASK.CMP.MARK_DONE : T.F.TASK.CMP.MARK_DONE) | translate }}
       </span>
       <span class="key-i">{{ kb.taskToggleDone }}</span>
     </button>
-  } @if (isAdvancedControls() && IS_TOUCH_PRIMARY && !task.parentId && !task.isDone &&
+  }
-  isTodayTag && (task.projectId || task.tagIds?.length > 1)) {
+  @if (
+    isAdvancedControls() &&
+    IS_TOUCH_PRIMARY &&
+    !task.parentId &&
+    !task.isDone &&
+    isTodayTag &&
+    (task.projectId || task.tagIds?.length > 1)
+  ) {
     <button
       (click)="removeFromMyDay()"
       mat-menu-item
@@ -147,7 +174,8 @@
       <mat-icon svgIcon="remove_today"></mat-icon>
       {{ T.F.TASK.CMP.REMOVE_FROM_MY_DAY | translate }}
     </button>
-  } @if (!task.subTaskIds.length) {
+  }
+  @if (!task.subTaskIds.length) {
     <button
       (click)="estimateTime()"
       class="hide-xs"
@@ -183,7 +211,7 @@
 
   @if (isAdvancedControls() && !task.parentId && !task.isDone) {
     <button
-    (click)="addSubTask();"
+      (click)="addSubTask()"
       mat-menu-item
     >
       <span class="menuItemLeft">
@@ -195,7 +223,7 @@
   }
 
   <button
-    (click)="addAttachment();"
+    (click)="addAttachment()"
     class="hide-xs"
     mat-menu-item
   >
@@ -217,7 +245,8 @@
       <mat-icon [svgIcon]="task.issueType | issueIcon"></mat-icon>
       {{ T.F.TASK.CMP.OPEN_ISSUE | translate }}
     </a>
-  } @if (task.issueId && task.issueType !==ICAL_TYPE) {
+  }
+  @if (task.issueId && task.issueType !== ICAL_TYPE) {
     <button
       (click)="updateIssueData()"
       mat-menu-item
@@ -225,10 +254,16 @@
       <mat-icon [svgIcon]="task.issueType | issueIcon"></mat-icon>
       {{ T.F.TASK.CMP.UPDATE_ISSUE_DATA | translate }}
     </button>
-  } @if (isAdvancedControls() && !task.parentId && !isBacklog && task.projectId &&
+  }
-  (isShowMoveFromAndToBacklogBtns$|async)) {
+  @if (
+    isAdvancedControls() &&
+    !task.parentId &&
+    !isBacklog &&
+    task.projectId &&
+    (isShowMoveFromAndToBacklogBtns$ | async)
+  ) {
     <button
-    (click)="moveToBacklog();"
+      (click)="moveToBacklog()"
       mat-menu-item
     >
       <span class="menuItemLeft">
@@ -237,10 +272,16 @@
       </span>
       <span class="key-i">{{ kb.moveToBacklog }}</span>
     </button>
-  } @if (isAdvancedControls() && !task.parentId && isBacklog && task.projectId &&
+  }
-  (isShowMoveFromAndToBacklogBtns$|async)) {
+  @if (
+    isAdvancedControls() &&
+    !task.parentId &&
+    isBacklog &&
+    task.projectId &&
+    (isShowMoveFromAndToBacklogBtns$ | async)
+  ) {
     <button
-    (click)="moveToToday();"
+      (click)="moveToToday()"
       mat-menu-item
     >
       <span class="menuItemLeft">
@@ -269,18 +310,23 @@
     >
       <span class="menuItemLeft">
         <mat-icon>forward</mat-icon>
-      {{ (task.projectId ? T.F.TASK.CMP.MOVE_TO_OTHER_PROJECT :
+        {{
-      T.F.TASK.CMP.ADD_TO_PROJECT)|translate }}
+          (task.projectId
+            ? T.F.TASK.CMP.MOVE_TO_OTHER_PROJECT
+            : T.F.TASK.CMP.ADD_TO_PROJECT
+          ) | translate
+        }}
       </span>
       <span class="key-i">{{ kb.taskMoveToProject }}</span>
     </button>
-  } @if (task.parentId) {
+  }
+  @if (task.parentId) {
     <button
       (click)="convertToMainTask()"
       mat-menu-item
     >
       <mat-icon>subdirectory_arrow_left</mat-icon>
-    {{ (T.F.TASK.CMP.CONVERT_TO_PARENT_TASK)|translate }}
+      {{ T.F.TASK.CMP.CONVERT_TO_PARENT_TASK | translate }}
     </button>
   }
 
@@ -291,8 +337,10 @@
   >
     <span class="menuItemLeft">
       <mat-icon class="color-warn-i">delete_forever</mat-icon>
-      {{ (task.repeatCfgId ? T.F.TASK.CMP.DELETE_REPEAT_INSTANCE :
+      {{
-      T.F.TASK.CMP.DELETE)|translate }}
+        (task.repeatCfgId ? T.F.TASK.CMP.DELETE_REPEAT_INSTANCE : T.F.TASK.CMP.DELETE)
+          | translate
+      }}
     </span>
     <span class="key-i">{{ kb.taskDelete }}</span>
   </button>
@@ -303,8 +351,10 @@
   (closed)="focusRelatedTaskOrNext()"
 >
   <ng-template matMenuContent>
-    @for (project of (moveToProjectList$|async); track trackByProjectId($index, project))
+    @for (
-    {
+      project of moveToProjectList$ | async;
+      track trackByProjectId($index, project)
+    ) {
       <button
         (click)="moveTaskToProject(project.id)"
         mat-menu-item

src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.html

@@ -28,7 +28,8 @@
     }
     <ng-content select="[input-additional]"></ng-content>
   </section>
-} @if (type==='panel') {
+}
+@if (type === 'panel') {
   <mat-expansion-panel [expanded]="expanded">
     <mat-expansion-panel-header (click)="focusEl()">
       <mat-panel-title>

src/app/features/tasks/task-detail-panel/task-detail-panel.component.html

@@ -11,7 +11,8 @@
       <!--      <mat-icon>more_vert</mat-icon>-->
       <!--    </button>-->
     </header>
-  } @if (!task.parentId && ((layoutService.isRightPanelOver$|async) || isDialogMode)) {
+  }
+  @if (!task.parentId && ((layoutService.isRightPanelOver$ | async) || isDialogMode)) {
     <task-detail-item
       (collapseParent)="collapseParent()"
       (keyPress)="onItemKeyPress($event)"
@@ -20,10 +21,9 @@
     >
       <ng-container panel-header>
         <mat-icon class="panel-header-icon">list</mat-icon>
-      <span
+        <span>{{
-        >{{T.F.TASK.ADDITIONAL_INFO.SUB_TASKS|translate:{nr: task.subTasks?.length}
+          T.F.TASK.ADDITIONAL_INFO.SUB_TASKS | translate: { nr: task.subTasks?.length }
-        }}</span
+        }}</span>
-      >
       </ng-container>
       <ng-container panel-content>
         @if (task.subTasks && task.subTasks.length) {
@@ -31,8 +31,8 @@
             @if (task.subTasks?.length) {
               <task-list
                 [@expand]
-          [isHideAll]="(task._showSubTasksMode!==ShowSubTasksMode.Show)"
+                [isHideAll]="task._showSubTasksMode !== ShowSubTasksMode.Show"
-          [isHideDone]="(task._showSubTasksMode===ShowSubTasksMode.HideDone)"
+                [isHideDone]="task._showSubTasksMode === ShowSubTasksMode.HideDone"
                 [listModelId]="task.id"
                 [parentId]="task.id"
                 [tasks]="task.subTasks"
@@ -52,10 +52,13 @@
         </div>
       </ng-container>
     </task-detail-item>
-  } @if (task.parentId) {
+  }
+  @if (task.parentId) {
     <task-detail-item
       (collapseParent)="collapseParent()"
-    (editActionTriggered)="taskService.setSelectedIdToParentAndSwitchContextIfNecessary(task)"
+      (editActionTriggered)="
+        taskService.setSelectedIdToParentAndSwitchContextIfNecessary(task)
+      "
       (keyPress)="onItemKeyPress($event)"
       [inputIcon]="'arrow_forward'"
       class="input-item --estimate"
@@ -71,7 +74,8 @@
         <span>{{ (taskService.getByIdOnce$(task.parentId) | async)?.title }}</span>
       </ng-container>
     </task-detail-item>
-  } @if (!task.subTasks?.length) {
+  }
+  @if (!task.subTasks?.length) {
     <task-detail-item
       (collapseParent)="collapseParent()"
       (editActionTriggered)="estimateTime()"
@@ -97,19 +101,21 @@
         </ng-container>
       </ng-container>
     </task-detail-item>
-  } @if ((plannerService.plannedTaskDayMap$|async); as plannedTaskDayMap) {
+  }
+  @if (plannerService.plannedTaskDayMap$ | async; as plannedTaskDayMap) {
     <task-detail-item
       (collapseParent)="collapseParent()"
       (editActionTriggered)="scheduleTask()"
       (keyPress)="onItemKeyPress($event)"
-    [inputIcon]="(task.reminderId|| (plannedTaskDayMap||{})[task.id]) ? 'edit': 'add'"
+      [inputIcon]="task.reminderId || (plannedTaskDayMap || {})[task.id] ? 'edit' : 'add'"
       class="input-item"
     >
       <ng-container input-title>
         <mat-icon>alarm</mat-icon>
-      @if ((task.reminderId|| (plannedTaskDayMap||{})[task.id])) {
+        @if (task.reminderId || (plannedTaskDayMap || {})[task.id]) {
           <span>{{ T.F.TASK.ADDITIONAL_INFO.SCHEDULED_AT | translate }}</span>
-      } @if (!(task.reminderId|| (plannedTaskDayMap||{})[task.id])) {
+        }
+        @if (!(task.reminderId || (plannedTaskDayMap || {})[task.id])) {
           <span>{{ T.F.TASK.ADDITIONAL_INFO.SCHEDULE_TASK | translate }}</span>
         }
       </ng-container>
@@ -122,14 +128,16 @@
           >
             {{ reminderData.remindAt | date: 'short' }}
           </div>
-      } @if ((plannedTaskDayMap||{})[task.id]) {
+        }
+        @if ((plannedTaskDayMap || {})[task.id]) {
           <div class="reminder-value">
             {{ (plannedTaskDayMap || {})[task.id] | date: 'shortDate' }}
           </div>
         }
       </ng-container>
     </task-detail-item>
-  } @if (task.issueId && task.issueType !==ICAL_TYPE) {
+  }
+  @if (task.issueId && task.issueType !== ICAL_TYPE) {
     <task-detail-item
       (collapseParent)="collapseParent()"
       (keyPress)="onItemKeyPress($event)"
@@ -142,7 +150,8 @@
       <ng-container panel-content>
         @if (!(isIssueDataLoadedForCurrentType$ | async)) {
           <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
-      } @if (issueData && (isIssueDataLoadedForCurrentType$|async)) {
+        }
+        @if (issueData && (isIssueDataLoadedForCurrentType$ | async)) {
           <issue-content
             [@expandFadeInOnly]
             [issueData]="issueData"
@@ -167,9 +176,11 @@
         <mat-icon>checklist</mat-icon>
         Checklist
         <!-- -->
-      } @else { @if (task.notes) {
+      } @else {
+        @if (task.notes) {
           <mat-icon>chat</mat-icon>
-      } @if (!task.notes) {
+        }
+        @if (!task.notes) {
           <mat-icon>chat_bubble_outline</mat-icon>
         }
         <span>{{ T.F.TASK.ADDITIONAL_INFO.NOTES | translate }}</span>
@@ -201,10 +212,10 @@
     >
       <ng-container panel-header>
         <mat-icon>attachment</mat-icon>
-      <span
+        <span>{{
-        >{{T.F.TASK.ADDITIONAL_INFO.ATTACHMENTS|translate:{ nr: issueAttachments?.length +
+          T.F.TASK.ADDITIONAL_INFO.ATTACHMENTS
-        localAttachments?.length } }}</span
+            | translate: { nr: issueAttachments?.length + localAttachments?.length }
-      >
+        }}</span>
       </ng-container>
       <ng-container panel-content>
         <div
@@ -217,7 +228,8 @@
               [isDisableControls]="true"
               [taskId]="task.id"
             ></task-attachment-list>
-        } @if (issueAttachments?.length && localAttachments?.length) {
+          }
+          @if (issueAttachments?.length && localAttachments?.length) {
             <h3
               class="mat-h3"
               style="margin-bottom: 0"
@@ -241,7 +253,8 @@
         </div>
       </ng-container>
     </task-detail-item>
-  } @if (!issueAttachments?.length && !localAttachments?.length) {
+  }
+  @if (!issueAttachments?.length && !localAttachments?.length) {
     <task-detail-item
       (collapseParent)="collapseParent()"
       (editActionTriggered)="addAttachment()"
@@ -255,7 +268,8 @@
       </ng-container>
       <ng-container input-value></ng-container>
     </task-detail-item>
-  } @if (!task.parentId && !task.issueId) {
+  }
+  @if (!task.parentId && !task.issueId) {
     <task-detail-item
       (collapseParent)="collapseParent()"
       (editActionTriggered)="editTaskRepeatCfg()"

src/app/features/tasks/task-list/task-list.component.html

@@ -26,7 +26,9 @@
   [cdkDropListEnterPredicate]="enterPredicate"
   [cdkDropListData]="dropModelDataForList()"
   (cdkDropListDropped)="drop(filteredTasks(), $event)"
-  [@taskList]="(dropListService.isBlockAniAfterDrop$|async) ? 'BLOCK' : filteredTasks()?.length"
+  [@taskList]="
+    (dropListService.isBlockAniAfterDrop$ | async) ? 'BLOCK' : filteredTasks()?.length
+  "
   [attr.data-id]="listModelId()"
   class="task-list-inner"
 >

src/app/features/tasks/task-summary-table/task-summary-table.component.html

@@ -22,7 +22,8 @@
         >
           @if (task.repeatCfgId) {
             <mat-icon class="repeat-task-icon">repeat </mat-icon>
-          } @if (task.parentId) {
+          }
+          @if (task.parentId) {
             <span>–</span>
           }
           <inline-input
@@ -54,7 +55,8 @@
             [value]="task.timeSpentOnDay[day()]"
           >
           </inline-input>
-        } @if (task.subTaskIds?.length) {
+        }
+        @if (task.subTaskIds?.length) {
           <span>{{ task.timeSpentOnDay[day()] | msToClockString }}</span>
         }
       </td>
@@ -121,11 +123,20 @@
     </ng-container>
 
     <tr
-      *matHeaderRowDef="['title','timeSpentToday', 'timeSpentTotal', 'timeEstimate', 'done']"
+      *matHeaderRowDef="[
+        'title',
+        'timeSpentToday',
+        'timeSpentTotal',
+        'timeEstimate',
+        'done',
+      ]"
       mat-header-row
     ></tr>
     <tr
-      *matRowDef="let row; columns: ['title','timeSpentToday', 'timeSpentTotal','timeEstimate', 'done']"
+      *matRowDef="
+        let row;
+        columns: ['title', 'timeSpentToday', 'timeSpentTotal', 'timeEstimate', 'done']
+      "
       mat-row
     ></tr>
   </table>

src/app/features/tasks/task-summary-tables/task-summary-tables.component.html

@@ -9,12 +9,15 @@
         <mat-icon>timer</mat-icon>
         @if (!isShowYesterday()) {
           <div>{{ project.timeSpentToday | msToString }}</div>
-    } @if (isShowYesterday()) {
+        }
+        @if (isShowYesterday()) {
           <div>
             {{ project.timeSpentToday > 0 ? (project.timeSpentToday | msToString) : '' }}
             <!---->
             @if (project.timeSpentYesterday && project.timeSpentYesterday > 0) {
-      ({{project.timeSpentYesterday|msToString}} {{T.G.YESTERDAY|translate}}) }
+              ({{ project.timeSpentYesterday | msToString }}
+              {{ T.G.YESTERDAY | translate }})
+            }
           </div>
         }
       </div>

src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.html

@@ -1,7 +1,9 @@
 @if (!task().isDone && !isCurrent() && !task().subTasks?.length) {
   <button
     (click)="parent.startTask()"
-  title="{{T.F.TASK.CMP.TRACK_TIME|translate}} {{kb.togglePlay?'['+kb.togglePlay+']':''}}"
+    title="{{ T.F.TASK.CMP.TRACK_TIME | translate }} {{
+      kb.togglePlay ? '[' + kb.togglePlay + ']' : ''
+    }}"
     class="ico-btn start-task-btn"
     color=""
     mat-icon-button
@@ -11,27 +13,34 @@
       svgIcon="play"
     ></mat-icon>
   </button>
-} @if (!task().isDone && isCurrent() && !task().subTasks?.length) {
+}
+@if (!task().isDone && isCurrent() && !task().subTasks?.length) {
   <button
     (click)="parent.pauseTask()"
-  title="{{T.F.TASK.CMP.TRACK_TIME_STOP|translate}} {{kb.togglePlay?'['+kb.togglePlay+']':''}}"
+    title="{{ T.F.TASK.CMP.TRACK_TIME_STOP | translate }} {{
+      kb.togglePlay ? '[' + kb.togglePlay + ']' : ''
+    }}"
     class="ico-btn"
     color="accent"
     mat-icon-button
   >
     <mat-icon>pause</mat-icon>
   </button>
-} @if (isShowAddToToday()) {
+}
+@if (isShowAddToToday()) {
   <button
     (click)="parent.addToMyDay()"
-  title="{{T.F.TASK.CMP.ADD_TO_MY_DAY|translate}} {{kb.moveToTodaysTasks?'['+kb.moveToTodaysTasks+']':''}}"
+    title="{{ T.F.TASK.CMP.ADD_TO_MY_DAY | translate }} {{
+      kb.moveToTodaysTasks ? '[' + kb.moveToTodaysTasks + ']' : ''
+    }}"
     class="ico-btn"
     color=""
     mat-icon-button
   >
     <mat-icon>wb_sunny</mat-icon>
   </button>
-} @if (isShowRemoveFromToday()) {
+}
+@if (isShowRemoveFromToday()) {
   <button
     (click)="parent.removeFromMyDay()"
     [title]="T.F.TASK.CMP.REMOVE_FROM_MY_DAY | translate"
@@ -41,21 +50,28 @@
   >
     <mat-icon svgIcon="remove_today"></mat-icon>
   </button>
-} @if (!task().isDone) {
+}
+@if (!task().isDone) {
   <button
     (click)="parent.toggleTaskDone()"
-  title="{{T.F.TASK.CMP.TOGGLE_DONE|translate}} {{kb.taskToggleDone?'['+kb.taskToggleDone+']':''}}"
+    title="{{ T.F.TASK.CMP.TOGGLE_DONE | translate }} {{
+      kb.taskToggleDone ? '[' + kb.taskToggleDone + ']' : ''
+    }}"
     class="ico-btn task-done-btn"
     color=""
     mat-icon-button
   >
     <mat-icon>check</mat-icon>
   </button>
-} @if (!task().notes && (!task().issueId||task().issueType===ICAL_TYPE) && !isSelected())
+}
-{
+@if (
+  !task().notes && (!task().issueId || task().issueType === ICAL_TYPE) && !isSelected()
+) {
   <button
     (click)="parent.toggleShowDetailPanel()"
-  title="{{T.F.TASK.CMP.TOGGLE_DETAIL_PANEL|translate}} {{kb.taskToggleDetailPanelOpen?'['+kb.taskToggleDetailPanelOpen+']':''}}"
+    title="{{ T.F.TASK.CMP.TOGGLE_DETAIL_PANEL | translate }} {{
+      kb.taskToggleDetailPanelOpen ? '[' + kb.taskToggleDetailPanelOpen + ']' : ''
+    }}"
     class="ico-btn show-additional-info-btn"
     color=""
     mat-icon-button

src/app/features/tasks/task/task.component.html

@@ -1,11 +1,13 @@
-@let t = task(); @if (IS_TOUCH_PRIMARY) {
+@let t = task();
+@if (IS_TOUCH_PRIMARY) {
   <div
     #blockLeftEl
     class="block-left bg-400"
   >
     @if (!t.isDone) {
       <mat-icon>check</mat-icon>
-  } @if (t.isDone) {
+    }
+    @if (t.isDone) {
       <mat-icon>undo</mat-icon>
     }
   </div>
@@ -14,15 +16,22 @@
     class="block-right bg-400"
   >
     <!--NOTE: non observable should be enough as we only need the initial value-->
-  @if (isTodayListActive()) { @if (!(t.repeatCfgId)) {
+    @if (isTodayListActive()) {
+      @if (!t.repeatCfgId) {
         <mat-icon>alarm</mat-icon>
-  } @if ((t.repeatCfgId)) {
+      }
+      @if (t.repeatCfgId) {
         <mat-icon svgIcon="repeat"></mat-icon>
-  } } @if (!isTodayListActive()) { @if (!isTodayTag()) {
+      }
+    }
+    @if (!isTodayListActive()) {
+      @if (!isTodayTag()) {
         <mat-icon>wb_sunny</mat-icon>
-  } @if (isTodayTag() && (t.projectId || t.tagIds?.length > 1)) {
+      }
+      @if (isTodayTag() && (t.projectId || t.tagIds?.length > 1)) {
         <mat-icon svgIcon="remove_today"></mat-icon>
-  } }
+      }
+    }
   </div>
 }
 
@@ -91,7 +100,8 @@
             <div>
               @if (!isRepeatTaskCreatedToday()) {
                 <div class="repeat-date-badge">{{ t.created | shortDate2 }}</div>
-            } @if (t.repeatCfgId) {
+              }
+              @if (t.repeatCfgId) {
                 <mat-icon
                   [style.transform]="isCurrent() ? 'scale(1.4)' : ''"
                   svgIcon="repeat"
@@ -99,7 +109,8 @@
                 </mat-icon>
               }
             </div>
-          } @if (t.issueId) {
+          }
+          @if (t.issueId) {
             <div>
               @if (t.issuePoints) {
                 <div class="mini-badge bgc-primary">{{ t.issuePoints }}</div>
@@ -111,7 +122,10 @@
       </div>
 
       <div
-        (click)="IS_TOUCH_PRIMARY && (t.title.length ? toggleShowDetailPanel($event) : focusTitleForEdit())"
+        (click)="
+          IS_TOUCH_PRIMARY &&
+            (t.title.length ? toggleShowDetailPanel($event) : focusTitleForEdit())
+        "
         class="title-and-tags-wrapper"
       >
         @if (!isInSubTaskList() && t.parentId) {
@@ -122,7 +136,7 @@
 
         <task-title
           [resetToLastExternalValueTrigger]="t"
-          [style.pointer-events]="IS_TOUCH_PRIMARY && (t.title.length) ? 'none' : 'auto'"
+          [style.pointer-events]="IS_TOUCH_PRIMARY && t.title.length ? 'none' : 'auto'"
           #taskTitleEditEl
           (valueEdited)="updateTaskTitleIfChanged($event)"
           [value]="t.title"
@@ -154,7 +168,8 @@
               class="time-val"
             ></div>
           </div>
-        } @if (t.subTasks?.length) {
+        }
+        @if (t.subTasks?.length) {
           <div class="time">
             <div class="time-val">
               <mat-icon
@@ -186,7 +201,8 @@
             [isSelected]="isSelected()"
             class="hover-controls"
           ></task-hover-controls>
-        } @if (t.attachments?.length || t.issueAttachmentNr) {
+        }
+        @if (t.attachments?.length || t.issueAttachmentNr) {
           <button
             (click)="toggleShowAttachments()"
             [title]="T.F.TASK.CMP.TOGGLE_ATTACHMENTS | translate"
@@ -196,7 +212,8 @@
           >
             <mat-icon>attach_file</mat-icon>
           </button>
-        } @if (t.reminderId) {
+        }
+        @if (t.reminderId) {
           <button
             (click)="scheduleTask()"
             [title]="T.F.TASK.CMP.EDIT_SCHEDULED | translate"
@@ -210,7 +227,8 @@
               [innerHTML]="t.plannedAt | shortPlannedAt"
             ></div>
           </button>
-        } @if (((plannerService.plannedTaskDayMap$|async)||{})[t.id]; as plannedAtDay) {
+        }
+        @if (((plannerService.plannedTaskDayMap$ | async) || {})[t.id]; as plannedAtDay) {
           <button
             (click)="scheduleTask()"
             [title]="T.F.TASK.CMP.SCHEDULE | translate"
@@ -227,7 +245,11 @@
           @if (t.notes || (t.issueId && t.issueType !== ICAL_TYPE) || isSelected()) {
             <button
               (click)="toggleShowDetailPanel()"
-            title="{{T.F.TASK.CMP.TOGGLE_DETAIL_PANEL|translate}}  {{kb.taskToggleDetailPanelOpen?'['+kb.taskToggleDetailPanelOpen+']':''}}"
+              title="{{ T.F.TASK.CMP.TOGGLE_DETAIL_PANEL | translate }}  {{
+                kb.taskToggleDetailPanelOpen
+                  ? '[' + kb.taskToggleDetailPanelOpen + ']'
+                  : ''
+              }}"
               [class.closeBtn]="!t.issueWasUpdated && isSelected()"
               class="ico-btn show-additional-info-btn"
               color=""
@@ -235,9 +257,11 @@
             >
               @if (!t.issueWasUpdated && !isSelected()) {
                 <mat-icon>chat</mat-icon>
-            } @if (!t.issueWasUpdated && isSelected()) {
+              }
+              @if (!t.issueWasUpdated && isSelected()) {
                 <mat-icon>close</mat-icon>
-            } @if (t.issueWasUpdated) {
+              }
+              @if (t.issueWasUpdated) {
                 <mat-icon
                   class="updated-icon"
                   color="accent"
@@ -256,7 +280,8 @@
       [cssClass]="'bg-accent'"
       [progress]="progress()"
     ></progress-bar>
-  } @if (t.subTasks?.length) {
+  }
+  @if (t.subTasks?.length) {
     <div class="sub-tasks">
       @if (t.subTasks?.length) {
         <button
@@ -266,20 +291,22 @@
           color=""
           mat-mini-fab
         >
-      @if ((t._showSubTasksMode===ShowSubTasksMode.HideAll)) {
+          @if (t._showSubTasksMode === ShowSubTasksMode.HideAll) {
             <mat-icon>add </mat-icon>
-      } @if ((t._showSubTasksMode!==ShowSubTasksMode.HideAll)) {
+          }
+          @if (t._showSubTasksMode !== ShowSubTasksMode.HideAll) {
             <mat-icon
-        [class.isHideDoneTasks]="(t._showSubTasksMode===ShowSubTasksMode.HideDone)"
+              [class.isHideDoneTasks]="t._showSubTasksMode === ShowSubTasksMode.HideDone"
               >remove
             </mat-icon>
           }
         </button>
-    } @if (t.subTasks?.length) {
+      }
+      @if (t.subTasks?.length) {
         <task-list
           [@expand]
-      [isHideAll]="(t._showSubTasksMode!==ShowSubTasksMode.Show)"
+          [isHideAll]="t._showSubTasksMode !== ShowSubTasksMode.Show"
-      [isHideDone]="(t._showSubTasksMode===ShowSubTasksMode.HideDone)"
+          [isHideDone]="t._showSubTasksMode === ShowSubTasksMode.HideDone"
           [isSubTaskList]="true"
           [listModelId]="t.id"
           [parentId]="t.id"
@@ -288,7 +315,8 @@
         ></task-list>
       }
     </div>
-  } @if (isDragOver) {
+  }
+  @if (isDragOver) {
     <div class="bgc-accent drag-over-msg">
       <mat-icon>add</mat-icon>
       {{ T.F.TASK.CMP.DROP_ATTACHMENT | translate: { title: t.title } }}
@@ -309,7 +337,7 @@
   (closed)="focusSelf()"
 >
   <ng-template matMenuContent>
-    @for (project of (moveToProjectList()); track trackByProjectId($index, project)) {
+    @for (project of moveToProjectList(); track trackByProjectId($index, project)) {
       <button
         (click)="moveTaskToProject(project.id)"
         mat-menu-item

src/app/features/tasks/tasks-by-tag/tasks-by-tag.component.html

@@ -1,7 +1,7 @@
 <h3>{{ T.PDS.TIME_SPENT_TODAY_BY_TAG | translate }}</h3>
 <table>
   <tbody>
-    @for (tagWithTimeSpent of (tagsWithTimeSpent$|async); track tagWithTimeSpent.id) {
+    @for (tagWithTimeSpent of tagsWithTimeSpent$ | async; track tagWithTimeSpent.id) {
       <tr>
         <td>
           <tag

src/app/features/tracking-reminder/dialog-tracking-reminder/dialog-tracking-reminder.component.html

@@ -16,7 +16,8 @@
     <div class="track-to-label">
       @if (!isCreate) {
         <span>{{ T.F.TIME_TRACKING.D_TRACKING_REMINDER.TRACK_TO | translate }}</span>
-      } @if (isCreate) {
+      }
+      @if (isCreate) {
         <span
           [innerHTML]="T.F.TIME_TRACKING.D_TRACKING_REMINDER.CREATE_AND_TRACK | translate"
         ></span>
@@ -46,9 +47,11 @@
     >
       @if (!isCreate) {
         <mat-icon>track_changes</mat-icon>
-      } @if (isCreate) {
+      }
+      @if (isCreate) {
         <mat-icon>add</mat-icon>
-      } {{T.F.TIME_TRACKING.D_TRACKING_REMINDER.TASK|translate}}
+      }
+      {{ T.F.TIME_TRACKING.D_TRACKING_REMINDER.TASK | translate }}
     </button>
   </div>
 </form>

src/app/features/work-view/backlog/backlog.component.html

@@ -1,5 +1,5 @@
 <div class="wrapper">
-  @if ((ready$|async)) {
+  @if (ready$ | async) {
     <div class="task-list-wrapper">
       <task-list
         [isBacklog]="true"

src/app/features/work-view/work-view.component.html

@@ -11,20 +11,26 @@
         cdkScrollable
       >
         <header class="work-view-header">
-        @if (!(isPlanningMode()) && (estimateRemainingToday() || workingToday())) {
+          @if (!isPlanningMode() && (estimateRemainingToday() || workingToday())) {
             <div
               @fade
               class="status-bar"
             >
               <div
                 class="item"
-            matTooltip="{{T.WW.TODAY_REMAINING|translate}} ~{{todayRemainingInProject()|msToString}}"
+                matTooltip="{{ T.WW.TODAY_REMAINING | translate }} ~{{
-            [matTooltipDisabled]="!(workContextService.isActiveWorkContextProject$|async)"
+                  todayRemainingInProject() | msToString
+                }}"
+                [matTooltipDisabled]="
+                  !(workContextService.isActiveWorkContextProject$ | async)
+                "
                 matTooltipPosition="above"
               >
                 <span class="label">{{ T.WW.ESTIMATE_REMAINING | translate }}</span>
                 <span class="no-wrap">
-              ~<strong class="time-val">{{ estimateRemainingToday()|msToString }}</strong>
+                  ~<strong class="time-val">{{
+                    estimateRemainingToday() | msToString
+                  }}</strong>
                   <mat-icon
                     style="margin-left: 2px"
                     svgIcon="estimate_remaining"
@@ -34,9 +40,11 @@
               <div class="item">
                 <span class="label">{{ T.WW.WORKING_TODAY | translate }}</span>
                 <span class="no-wrap">
-              <strong class="time-val">{{ workingToday()|msToString }}</strong>@if
+                  <strong class="time-val">{{ workingToday() | msToString }}</strong>
-              ((workContextService.workingTodayArchived$|async); as workingTodayArchived)
+                  @if (
-              {
+                    workContextService.workingTodayArchived$ | async;
+                    as workingTodayArchived
+                  ) {
                     <span [matTooltip]="T.WW.WORKING_TODAY_ARCHIVED | translate"
                       >(+{{ workingTodayArchived | msToString }})</span
                     >
@@ -48,8 +56,8 @@
                 <div class="item hide-xs">
                   <span class="label">{{ T.WW.WITHOUT_BREAK | translate }} </span>
                   <span class="no-wrap">
-              <strong class="time-val"
+                    <strong class="time-val">{{
-                >{{ takeABreakService.timeWorkingWithoutABreak$|async|msToString
+                      takeABreakService.timeWorkingWithoutABreak$ | async | msToString
                     }}</strong
                     ><mat-icon>timer</mat-icon>
                   </span>
@@ -68,17 +76,22 @@
                 </div>
               }
             </div>
-        } @if ((isPlanningMode())) {
+          }
+          @if (isPlanningMode()) {
             <div class="planning-mode-header">
-          @if (!(undoneTasks()?.length)) {
+              @if (!undoneTasks()?.length) {
-          <h3 class="planning-mode-header mat-h3">{{ T.WW.ADD_SOME_TASKS|translate }}</h3>
+                <h3 class="planning-mode-header mat-h3">
-          } @if (undoneTasks()?.length) {
+                  {{ T.WW.ADD_SOME_TASKS | translate }}
+                </h3>
+              }
+              @if (undoneTasks()?.length) {
                 <div class="status-bar">
                   <div class="item">
                     <span class="label">{{ T.WW.TIME_ESTIMATED | translate }}</span>
                     <span class="no-wrap">
                       <strong class="time-val"
-                  >~{{ workContextService.estimateRemainingToday$|async|msToString
+                        >~{{
+                          workContextService.estimateRemainingToday$ | async | msToString
                         }}</strong
                       >
                       <mat-icon>timer</mat-icon>
@@ -89,11 +102,11 @@
             </div>
           }
         </header>
-      @if ((improvementService.hasLastTrackedImprovements$|async)) {
+        @if (improvementService.hasLastTrackedImprovements$ | async) {
           <improvement-banner [@expandFade]></improvement-banner>
         }
         <div class="task-list-wrapper">
-        @if (!(isPlanningMode()) && !(workContextService.isHasTasksToWorkOn$|async)) {
+          @if (!isPlanningMode() && !(workContextService.isHasTasksToWorkOn$ | async)) {
             <div
               @expandFade
               class="add-more-or-finish"
@@ -109,7 +122,7 @@
                   <mat-icon>playlist_add</mat-icon>
                   {{ T.WW.ADD_MORE | translate }}
                 </button>
-            @if ((workContextService.isToday$|async)) {
+                @if (workContextService.isToday$ | async) {
                   <button
                     [matTooltip]="T.WW.FINISH_DAY_TOOLTIP | translate"
                     color="primary"
@@ -120,8 +133,11 @@
                     <mat-icon>done_all</mat-icon>
                     {{ T.WW.FINISH_DAY | translate }}
                   </button>
-            } @if (!(workContextService.isToday$|async) &&
+                }
-            (workContextService.activeWorkContextType==='PROJECT')) {
+                @if (
+                  !(workContextService.isToday$ | async) &&
+                  workContextService.activeWorkContextType === 'PROJECT'
+                ) {
                   <button
                     [matTooltip]="T.WW.FINISH_DAY_TOOLTIP | translate"
                     color="primary"
@@ -132,8 +148,11 @@
                     <mat-icon>done_all</mat-icon>
                     {{ T.WW.FINISH_DAY_FOR_PROJECT | translate }}
                   </button>
-            } @if (!(workContextService.isToday$|async) &&
+                }
-            (workContextService.activeWorkContextType==='TAG')) {
+                @if (
+                  !(workContextService.isToday$ | async) &&
+                  workContextService.activeWorkContextType === 'TAG'
+                ) {
                   <button
                     [matTooltip]="T.WW.FINISH_DAY_TOOLTIP | translate"
                     color="primary"
@@ -147,7 +166,8 @@
                 }
               </div>
             </div>
-        } @if ((isPlanningMode())) {
+          }
+          @if (isPlanningMode()) {
             <div
               @expandFade
               class="planning-mode-content"
@@ -178,7 +198,7 @@
             listId="PARENT"
             listModelId="UNDONE"
           ></task-list>
-        @if (!(isPlanningMode()) || (doneTasks())?.length) {
+          @if (!isPlanningMode() || doneTasks()?.length) {
             <div @expand>
               <h2 class="mat-h2 completed-tasks-heading">
                 {{ T.WW.COMPLETED_TASKS | translate }}
@@ -192,7 +212,7 @@
               ></task-list>
               <div class="finish-day-button-wrapper">
                 <!-- NOTE: tabindex is same as for tasks -->
-            @if ((workContextService.isToday$|async)) {
+                @if (workContextService.isToday$ | async) {
                   <button
                     [matTooltip]="T.WW.FINISH_DAY_TOOLTIP | translate"
                     color="primary"
@@ -203,8 +223,11 @@
                     <mat-icon>done_all</mat-icon>
                     {{ T.WW.FINISH_DAY | translate }}
                   </button>
-            } @if (!(workContextService.isToday$|async) &&
+                }
-            (workContextService.activeWorkContextType==='PROJECT')) {
+                @if (
+                  !(workContextService.isToday$ | async) &&
+                  workContextService.activeWorkContextType === 'PROJECT'
+                ) {
                   <button
                     [matTooltip]="T.WW.FINISH_DAY_TOOLTIP | translate"
                     color="primary"
@@ -215,8 +238,11 @@
                     <mat-icon>done_all</mat-icon>
                     {{ T.WW.FINISH_DAY_FOR_PROJECT | translate }}
                   </button>
-            } @if (!(workContextService.isToday$|async) &&
+                }
-            (workContextService.activeWorkContextType==='TAG')) {
+                @if (
+                  !(workContextService.isToday$ | async) &&
+                  workContextService.activeWorkContextType === 'TAG'
+                ) {
                   <button
                     [matTooltip]="T.WW.FINISH_DAY_TOOLTIP | translate"
                     color="primary"
@@ -236,7 +262,7 @@
       @if (isShowBacklog()) {
         <div
           #splitBottomEl
-      [style.user-focus]="(splitInputPos===100)? 'none':''"
+          [style.user-focus]="splitInputPos === 100 ? 'none' : ''"
           class="backlog"
         >
           <split

src/app/features/worklog/dialog-worklog-export/dialog-worklog-export.component.html

@@ -1,6 +1,8 @@
 <h1 mat-dialog-title>
-  {{ (isSingleDay ? T.F.WORKLOG.D_EXPORT_TITLE_SINGLE :
+  {{
-  T.F.WORKLOG.D_EXPORT_TITLE)|translate:{day: strStart, start: strStart, end: strEnd} }}
+    (isSingleDay ? T.F.WORKLOG.D_EXPORT_TITLE_SINGLE : T.F.WORKLOG.D_EXPORT_TITLE)
+      | translate: { day: strStart, start: strStart, end: strEnd }
+  }}
 </h1>
 
 <worklog-export

src/app/features/worklog/worklog-export/worklog-export.component.html

@@ -50,7 +50,9 @@
                 >
                   <mat-option><em>remove</em></mat-option>
                   @for (colOpt of colOpts; track colOpt) {
-              <mat-option [value]="colOpt.id"> {{colOpt.title|translate}} </mat-option>
+                    <mat-option [value]="colOpt.id">
+                      {{ colOpt.title | translate }}
+                    </mat-option>
                   }
                 </mat-select>
               </td>
@@ -95,7 +97,7 @@
           </div>
         </div>
         <div class="col">
-          @if ((isWorklogExport())) {
+          @if (isWorklogExport()) {
             <mat-form-field class="md-block">
               <label>{{ T.F.WORKLOG.EXPORT.SEPARATE_TASKS_BY | translate }}</label>
               <input

src/app/features/worklog/worklog-week/worklog-week.component.html

@@ -1,15 +1,19 @@
 <!--<pre><code>{{(worklogService.currentWeek$|async|json)}}</code></pre>-->
 
-@if ((worklogService.currentWeek$|async); as currentWeek) {
+@if (worklogService.currentWeek$ | async; as currentWeek) {
   <div>
     <div class="days">
       <div
-      *ngFor="let day of currentWeek?.ent|keyvalue:sortDays trackBy: trackByDay; let i = index;"
+        *ngFor="
+          let day of currentWeek?.ent | keyvalue: sortDays;
+          trackBy: trackByDay;
+          let i = index
+        "
         class="day"
       >
         <div class="material-table">
           <div
-          (click)="visibility[i]=!visibility[i];"
+            (click)="visibility[i] = !visibility[i]"
             class="caption"
             mat-ripple
           >
@@ -38,16 +42,23 @@
                       >
                     }
                     <div class="simple-counter-items">
-                  @for (sc of simpleCounterService.enabledSimpleCounters$|async; track sc)
+                      @for (
-                  {
+                        sc of simpleCounterService.enabledSimpleCounters$ | async;
+                        track sc
+                      ) {
                         <div class="simple-counter-item">
                           <mat-icon inline="true">{{ sc.icon }}</mat-icon>
                           @if (sc.type === 'StopWatch') {
                             <div class="count">
-                      {{sc.countOnDay[day.value.dateStr] || 0|msToMinuteClockString}}
+                              {{
+                                sc.countOnDay[day.value.dateStr] || 0
+                                  | msToMinuteClockString
+                              }}
                             </div>
                           } @else {
-                    <div class="count">{{sc.countOnDay[day.value.dateStr] || 0}}</div>
+                            <div class="count">
+                              {{ sc.countOnDay[day.value.dateStr] || 0 }}
+                            </div>
                           }
                         </div>
                       }
@@ -67,8 +78,10 @@
               [@expandFade]
               class="task-summary-table"
             >
-          @for (logEntry of day.value.logEntries; track trackByLogEntry($index, logEntry))
+              @for (
-          {
+                logEntry of day.value.logEntries;
+                track trackByLogEntry($index, logEntry)
+              ) {
                 <tr>
                   <td
                     [class.isSubTask]="logEntry.task.parentId"
@@ -78,15 +91,30 @@
                     <span class="task-title">{{ logEntry.task.title }}</span>
                   </td>
                   <td class="worked">
-              @if (logEntry.task.subTaskIds && logEntry.task.subTaskIds.length>0) {
+                    @if (
+                      logEntry.task.subTaskIds && logEntry.task.subTaskIds.length > 0
+                    ) {
                       <span
                         >∑
-                {{logEntry.task.timeSpentOnDay[day.value.dateStr]|msToClockString}}</span
+                        {{
+                          logEntry.task.timeSpentOnDay[day.value.dateStr]
+                            | msToClockString
+                        }}</span
                       >
-              } @if (!logEntry.task.subTaskIds || !logEntry.task.subTaskIds.length) {
+                    }
+                    @if (!logEntry.task.subTaskIds || !logEntry.task.subTaskIds.length) {
                       <inline-input
-                (changed)="updateTimeSpentTodayForTask(logEntry.task,day.value.dateStr, $event)"
+                        (changed)="
-                [displayValue]="logEntry.task.timeSpentOnDay[day.value.dateStr]|msToClockString"
+                          updateTimeSpentTodayForTask(
+                            logEntry.task,
+                            day.value.dateStr,
+                            $event
+                          )
+                        "
+                        [displayValue]="
+                          logEntry.task.timeSpentOnDay[day.value.dateStr]
+                            | msToClockString
+                        "
                         [type]="'duration'"
                         [value]="logEntry.task.timeSpentOnDay[day.value.dateStr]"
                       >

src/app/features/worklog/worklog.component.html

@@ -7,14 +7,14 @@
   [@fadeInSlow]
 >
   <h1 class="mat-headline-5 total-time">
-    {{ T.F.WORKLOG.CMP.TOTAL_TIME|translate }} <br /><strong
+    {{ T.F.WORKLOG.CMP.TOTAL_TIME | translate }} <br /><strong>{{
-      >{{ wData.totalTimeSpent|msToString }}</strong
+      wData.totalTimeSpent | msToString
-    >
+    }}</strong>
   </h1>
 
   <div class="years">
     <div
-      *ngFor="let year of (wData.worklog|keyvalue:sortWorklogItems); trackBy: trackByKey;"
+      *ngFor="let year of wData.worklog | keyvalue: sortWorklogItems; trackBy: trackByKey"
       class="year"
     >
       <h1
@@ -23,16 +23,21 @@
       ></h1>
       <div class="year-time-spent">
         {{ T.F.WORKLOG.CMP.MONTH_WORKED | translate }}
-        <strong>{{ year.value.monthWorked }}</strong><br />
+        <strong>{{ year.value.monthWorked }}</strong
+        ><br />
         {{ T.F.WORKLOG.CMP.DAYS_WORKED | translate }}
-        <strong>{{ year.value.daysWorked }}</strong><br />
+        <strong>{{ year.value.daysWorked }}</strong
+        ><br />
         {{ T.F.WORKLOG.CMP.TOTAL_TIME | translate }}
         <strong [innerHtml]="year.value.timeSpent | msToString"></strong>
       </div>
 
       <div class="months">
         <div
-          *ngFor="let month of year.value.ent|keyvalue:sortWorklogItems; trackBy: trackByKey;"
+          *ngFor="
+            let month of year.value.ent | keyvalue: sortWorklogItems;
+            trackBy: trackByKey
+          "
           class="month"
         >
           <h2 class="month-title mat-headline-5">
@@ -51,7 +56,8 @@
 
           <div class="month-time-spent">
             {{ T.F.WORKLOG.CMP.DAYS_WORKED | translate }}
-            <strong>{{ month.value.daysWorked }}</strong><br />
+            <strong>{{ month.value.daysWorked }}</strong
+            ><br />
             {{ T.F.WORKLOG.CMP.TOTAL_TIME | translate }}
             <strong [innerHtml]="month.value.timeSpent | msToString"></strong>
           </div>
@@ -66,11 +72,19 @@
                   <h3 class="week-title mat-h4">
                     {{ T.F.WORKLOG.CMP.WEEK_NR | translate: { nr: week.weekNr } }}
                   </h3>
-                  <div>{{ (week.timeSpent|msToString) }}</div>
+                  <div>{{ week.timeSpent | msToString }}</div>
                 </div>
                 <button
                   (click)="exportData(month.value, year.key, month.key, week.weekNr)"
-                  [matTooltip]="week.start+'.-'+week.end+'. Days: '+ week.daysWorked+', Time: '+(week.timeSpent|msToString)"
+                  [matTooltip]="
+                    week.start +
+                    '.-' +
+                    week.end +
+                    '. Days: ' +
+                    week.daysWorked +
+                    ', Time: ' +
+                    (week.timeSpent | msToString)
+                  "
                   aria-label="export data"
                   class="mat-elevation-z1"
                   color=""
@@ -89,11 +103,17 @@
                     <th></th>
                   </tr>
                   <ng-container
-                    *ngFor="let worklogForDay of week.ent|keyvalue:sortWorklogItemsReverse; trackBy: trackByKey;"
+                    *ngFor="
+                      let worklogForDay of week.ent | keyvalue: sortWorklogItemsReverse;
+                      trackBy: trackByKey
+                    "
                     class="day"
                   >
                     <tr
-                      (click)="expanded[worklogForDay.value.dateStr]=!expanded[worklogForDay.value.dateStr];"
+                      (click)="
+                        expanded[worklogForDay.value.dateStr] =
+                          !expanded[worklogForDay.value.dateStr]
+                      "
                       [class.isExpanded]="expanded[worklogForDay.value.dateStr]"
                       class="week-row"
                     >
@@ -119,7 +139,10 @@
                         >
                           <table class="task-summary-table">
                             <tr
-                              *ngFor="let logEntry of worklogForDay.value.logEntries; trackBy: trackByForLogEntry;"
+                              *ngFor="
+                                let logEntry of worklogForDay.value.logEntries;
+                                trackBy: trackByForLogEntry
+                              "
                               [id]="'t-' + logEntry.task.id"
                               tabindex="0"
                             >
@@ -130,8 +153,14 @@
                                 <div
                                   *ngIf="workContextService.isToday"
                                   class="project-color"
-                                  [title]="(allProjectsColorAndTitle[logEntry.task.projectId])?.title"
+                                  [title]="
-                                  [style.background]="(allProjectsColorAndTitle[logEntry.task.projectId])?.color"
+                                    allProjectsColorAndTitle[logEntry.task.projectId]
+                                      ?.title
+                                  "
+                                  [style.background]="
+                                    allProjectsColorAndTitle[logEntry.task.projectId]
+                                      ?.color
+                                  "
                                 ></div>
                                 <mat-icon
                                   *ngIf="logEntry.task.repeatCfgId"
@@ -143,25 +172,52 @@
                               </td>
                               <td class="worked">
                                 <span
-                                  *ngIf="logEntry.task.subTaskIds && logEntry.task.subTaskIds.length>0"
+                                  *ngIf="
-                                  >∑ {{
+                                    logEntry.task.subTaskIds &&
-                                  logEntry.task.timeSpentOnDay[worklogForDay.value.dateStr]|msToClockString
+                                    logEntry.task.subTaskIds.length > 0
+                                  "
+                                  >∑
+                                  {{
+                                    logEntry.task.timeSpentOnDay[
+                                      worklogForDay.value.dateStr
+                                    ] | msToClockString
                                   }}</span
                                 >
                                 <inline-input
-                                  (changed)="updateTimeSpentTodayForTask(logEntry.task,worklogForDay.value.dateStr, $event)"
+                                  (changed)="
-                                  *ngIf="!logEntry.task.subTaskIds || !logEntry.task.subTaskIds.length"
+                                    updateTimeSpentTodayForTask(
-                                  [displayValue]="logEntry.task.timeSpentOnDay[worklogForDay.value.dateStr]|msToClockString"
+                                      logEntry.task,
+                                      worklogForDay.value.dateStr,
+                                      $event
+                                    )
+                                  "
+                                  *ngIf="
+                                    !logEntry.task.subTaskIds ||
+                                    !logEntry.task.subTaskIds.length
+                                  "
+                                  [displayValue]="
+                                    logEntry.task.timeSpentOnDay[
+                                      worklogForDay.value.dateStr
+                                    ] | msToClockString
+                                  "
                                   [type]="'duration'"
-                                  [value]="logEntry.task.timeSpentOnDay[worklogForDay.value.dateStr]"
+                                  [value]="
+                                    logEntry.task.timeSpentOnDay[
+                                      worklogForDay.value.dateStr
+                                    ]
+                                  "
                                 >
                                 </inline-input>
                               </td>
                               <td class="actions">
                                 <button
-                                  (click)="restoreTask(logEntry.task);"
+                                  (click)="restoreTask(logEntry.task)"
-                                  *ngIf="!logEntry.task?.parentId && !logEntry.isNoRestore"
+                                  *ngIf="
-                                  [title]="T.F.WORKLOG.CMP.RESTORE_TASK_FROM_ARCHIVE|translate"
+                                    !logEntry.task?.parentId && !logEntry.isNoRestore
+                                  "
+                                  [title]="
+                                    T.F.WORKLOG.CMP.RESTORE_TASK_FROM_ARCHIVE | translate
+                                  "
                                   aria-label="restore"
                                   color=""
                                   mat-icon-button