Migrate templates to self-closing tags

Automated conversion with: ng generate @angular/core:self-closing-tag
2026-06-14 03:30:14 +00:00 · 2025-09-12 23:47:00 +01:00
parent 9e93d5b131
commit 718b07cf19
215 changed files with 659 additions and 1005 deletions
@@ -234,8 +234,7 @@ On the example of a work package, this following code snippet would create an ed
 ```html
@if (workPackage) {
  <edit-form [resource]="workPackage">
-      <op-editable-attribute-field [resource]="workPackage" fieldName="subject">
-      </op-editable-attribute-field>
+      <op-editable-attribute-field [resource]="workPackage" fieldName="subject"/>
  </edit-form>
 }
 ```
@@ -59,8 +59,7 @@ import { CurrentProjectService } from 'core-app/core/current-project/current-pro
  hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
  template: `
    <wp-embedded-table [queryProps]="queryProps"
-                       [configuration]="tableConfiguration">
-    </wp-embedded-table>
+                       [configuration]="tableConfiguration" />
  `,
  standalone: false,
 })
@@ -22,7 +22,7 @@
    [class.-input-focused]="expanded"
    (click)="handleClick($event)"
    >
-    <op-icon icon-classes="icon5 icon-search ellipsis"></op-icon>
+    <op-icon icon-classes="icon5 icon-search ellipsis" />
  </button>
  <op-autocompleter
    #select
@@ -34,7 +34,7 @@ export const appBaseSelector = 'openproject-base';
  selector: appBaseSelector,
  template: `
    <div class="openproject-base--ui-view">
-      <ui-view></ui-view>
+      <ui-view />
    </div>
  `,
  standalone: false,
@@ -1,11 +1,9 @@
 <div class="type-form-conf-group">
  <div class="group-head">
    <span class="group-handle icon-drag-handle"></span>
-    <op-group-edit-in-place
-      [name]="group.name"
+    <op-group-edit-in-place [name]="group.name"
      (onValueChange)="rename($event)"
-      class="group-name">
-    </op-group-edit-in-place>
+      class="group-name" />
    <span class="delete-group icon-small icon-close" (click)="deleteGroup.emit()"></span>
  </div>
  <div class="attributes" dragula="attributes" [(dragulaModel)]="group.attributes">
@@ -1,16 +1,14 @@
 <div class="type-form-conf-group type-form-query-group">
    <div class="group-head">
        <span class="group-handle icon-drag-handle"></span>
-        <op-group-edit-in-place
-                [name]="group.name"
+        <op-group-edit-in-place [name]="group.name"
                (onValueChange)="rename($event)"
-                class="group-name">
-        </op-group-edit-in-place>
+                class="group-name" />
        <span class="delete-group icon-small icon-close" (click)="deleteGroup.emit()"></span>
    </div>
    <div class="type-form-query">
        <span class="type-form-query-group--edit-button" (click)="editQuery.emit()">
-          <op-icon icon-classes="button--icon icon-edit"></op-icon>
+          <op-icon icon-classes="button--icon icon-edit" />
            {{ text.edit_query }}
        </span>
    </div>
@@ -5,7 +5,7 @@
        <button type="button -primary"
          class="form-configuration--reset button"
          (click)="resetToDefault($event)">
-          <op-icon icon-classes="button--icon icon-undo"></op-icon>
+          <op-icon icon-classes="button--icon icon-undo" />
          <span class="button--text" [textContent]="text.reset"></span>
        </button>
      </li>
@@ -13,9 +13,9 @@
        <li
          class="toolbar-item drop-down">
          <a class="form-configuration--add-group button -primary" aria-haspopup="true">
-            <op-icon icon-classes="button--icon icon-add"></op-icon>
+            <op-icon icon-classes="button--icon icon-add" />
            <span class="button--text" [textContent]="text.label_group"></span>
-            <op-icon icon-classes="button--dropdown-indicator"></op-icon>
+            <op-icon icon-classes="button--dropdown-indicator" />
          </a>
          <ul class="menu-drop-down-container">
            <li>
@@ -48,18 +48,14 @@
    <div id="draggable-groups" dragula="groups" [(dragulaModel)]="groups">
      @for (group of groups; track group) {
        @if (group.type === 'attribute') {
-          <op-type-form-attribute-group
-            (removeAttribute)="deactivateAttribute($event)"
+          <op-type-form-attribute-group (removeAttribute)="deactivateAttribute($event)"
            (deleteGroup)="deleteGroup(group)"
-            [group]="group">
-          </op-type-form-attribute-group>
+            [group]="group" />
        }
        @if (group.type === 'query') {
-          <op-type-form-query-group
-            (editQuery)="editQuery(group)"
+          <op-type-form-query-group (editQuery)="editQuery(group)"
            (deleteGroup)="deleteGroup(group)"
-            [group]="group">
-          </op-type-form-query-group>
+            [group]="group" />
        }
      }
    </div>
@@ -13,8 +13,7 @@
          (change)="onGalleryChanged($event)"
          (imagesReady)="selectViewpointInGallery()"
          (previewOpen)="galleryPreviewOpen()"
-          (previewClose)="galleryPreviewClose()">
-        </ngx-gallery>
+          (previewClose)="galleryPreviewClose()" />
      </div>
    }
    @if (viewerVisible && createAllowed) {
@@ -22,7 +21,7 @@
        [title]="text.add_viewpoint"
        class="button"
        (click)="saveViewpoint(workPackage)">
-        <op-icon icon-classes="button--icon icon-add"></op-icon>
+        <op-icon icon-classes="button--icon icon-add" />
        <span class="button--text"> {{text.viewpoint}} </span>
      </a>
    }
@@ -12,16 +12,13 @@
      [configuration]="wpTableConfiguration"
      (itemClicked)="handleWorkPackageClicked($event)"
      (stateLinkClicked)="openStateLink($event)"
-      class="work-packages-split-view--tabletimeline-content">
-    </wp-table>
+      class="work-packages-split-view--tabletimeline-content" />
  </div>
 }

@if (showResizer) {
-  <wp-resizer
-    elementClass="work-packages-partitioned-page--content-right"
-    localStorageKey="openProject-splitViewFlexBasis">
-  </wp-resizer>
+  <wp-resizer elementClass="work-packages-partitioned-page--content-right"
+    localStorageKey="openProject-splitViewFlexBasis" />
 }

 <!-- GRID representation of the WP -->
@@ -32,8 +29,7 @@
    <wp-grid [configuration]="wpTableConfiguration"
      [showResizer]="false"
      (itemClicked)="handleWorkPackageClicked($event)"
-      (stateLinkClicked)="openStateLink($event)">
-    </wp-grid>
+      (stateLinkClicked)="openStateLink($event)" />
  </div>
 }

@@ -41,6 +37,6 @@
@if (tableInformationLoaded) {
  <div class="work-packages-split-view--tabletimeline-footer hide-when-print"
    >
-    <wp-table-pagination></wp-table-pagination>
+    <wp-table-pagination />
  </div>
 }
@@ -1,9 +1,7 @@
@if (showViewer$ | async) {
-  <op-ifc-viewer
-  ></op-ifc-viewer>
+  <op-ifc-viewer />
 }

@if ((showViewer$ | async) === false) {
-  <op-bcf-list
-  ></op-bcf-list>
+  <op-bcf-list />
 }
@@ -1,5 +1,4 @@
@if (showWorkPackages$ | async) {
-  <op-bcf-list
-    [showResizer]="true"
-  ></op-bcf-list>
+  <op-bcf-list [showResizer]="true"
+   />
 }
@@ -47,7 +47,7 @@ import { JobStatusModalService } from 'core-app/features/job-status/job-status-m
       class="button export-bcf-button"
       [attr.href]="exportLink"
       (click)="showDelayedExport($event)">
-      <op-icon icon-classes="button--icon icon-export"></op-icon>
+      <op-icon icon-classes="button--icon icon-export" />
      <span class="button--text"> {{text.export}} </span>
    </a>
  `,
@@ -36,7 +36,7 @@ import { BcfPathHelperService } from 'core-app/features/bim/bcf/helper/bcf-path-
    <a [title]="text.import_hover"
      (click)="handleClick()"
      class="button import-bcf-button">
-      <op-icon icon-classes="button--icon icon-import"></op-icon>
+      <op-icon icon-classes="button--icon icon-import" />
      <span class="button--text"> {{text.import}} </span>
    </a>
  `,
@@ -35,7 +35,7 @@ import { StateService } from '@uirouter/core';
    <a [title]="text.refresh_hover"
       class="button refresh-button"
       (click)="refresh()">
-      <op-icon icon-classes="button--icon icon-workflow"></op-icon>
+      <op-icon icon-classes="button--icon icon-workflow" />
    </a>
  `,
  selector: 'op-refresh-button',
@@ -36,7 +36,7 @@ import { IfcModelsDataService } from 'core-app/features/bim/ifc_models/pages/vie
      <a
        class="button"
        [href]="manageIFCPath">
-        <op-icon icon-classes="button--icon icon-settings2"></op-icon>
+        <op-icon icon-classes="button--icon icon-settings2" />
        <span class="button--text"
          [textContent]="text.manage"
        aria-hidden="true"></span>
@@ -36,12 +36,12 @@ import { BcfViewService } from 'core-app/features/bim/ifc_models/pages/viewer/bc
      <button class="button"
        id="bcf-view-toggle-button"
        opBcfViewDropdown>
-        <op-icon icon-classes="button--icon {{bcfView.icon[current]}}"></op-icon>
+        <op-icon icon-classes="button--icon {{bcfView.icon[current]}}" />
        <span class="button--text"
          aria-hidden="true"
          [textContent]="bcfView.text[current]">
        </span>
-        <op-icon icon-classes="button--icon icon-small icon-pulldown"></op-icon>
+        <op-icon icon-classes="button--icon icon-small icon-pulldown" />
      </button>
    }
    `,
@@ -38,7 +38,7 @@
                  type="button"
                  (click)="onNewActionCreated()">
                  <span class="icon-context">
-                    <op-icon icon-classes="icon-plus icon-context"></op-icon>
+                    <op-icon icon-classes="icon-plus icon-context" />
                    {{ text.button_create }} {{ ngSelectComponent.ngSelectInstance.searchTerm }}
                  </span>
                </button>
@@ -1,11 +1,10 @@
@if (user) {
  <div class="op-assignee-board-header">
    @if (user.id) {
-      <op-principal
-        [principal]="user"
+      <op-principal [principal]="user"
        [hideName]="true"
        size="mini"
-      ></op-principal>
+       />
    }
    <h2 class="editable-toolbar-title--fixed">
      <small [textContent]="text.assignee"></small>
@@ -1 +1 @@
-<op-filter-container></op-filter-container>
+<op-filter-container />
@@ -1,7 +1,5 @@
@if (canDelete()) {
  <ng-container class="board-list--more-menu">
-    <icon-triggered-context-menu
-      [menuItemsFactory]="menuItems">
-    </icon-triggered-context-menu>
+    <icon-triggered-context-menu [menuItemsFactory]="menuItems" />
  </ng-container>
 }
@@ -14,29 +14,24 @@
    <div class="op-board-list--header"
      data-test-selector="op-board-list--header">
      @if (headerComponent) {
-        <ndc-dynamic
-          [ndcDynamicComponent]="headerComponent"
-          [ndcDynamicInputs]="{ resource: actionResource }">
-        </ndc-dynamic>
+        <ndc-dynamic [ndcDynamicComponent]="headerComponent"
+          [ndcDynamicInputs]="{ resource: actionResource }" />
      }
      <h3 class="toolbar-title--container">
        @if (!headerComponent) {
-          <editable-toolbar-title
-            [title]="query.name"
+          <editable-toolbar-title [title]="query.name"
            [smallHeader]="true"
            [inFlight]="inFlight"
            (onSave)="renameQuery(query, $event)"
            [editable]="canRename"
            [initialFocus]="initiallyFocused"
-            class="-small">
-          </editable-toolbar-title>
+            class="-small" />
        }
      </h3>
      <board-list-menu class="op-board-list--menu"
        data-test-selector="op-board-list--menu"
        [board]="board"
-        (onRemove)="deleteList()">
-      </board-list-menu>
+        (onRemove)="deleteList()" />
    </div>
    <div class="op-board-list--query-container drop-zone"
      [ngClass]="{ '-with-create-button': board.isAction || showAddButton }">
@@ -47,7 +42,7 @@
            data-tour-selector="op-board-list--card-dropdown-add-button"
            class="op-board-list--add-button op-board-list--card-dropdown-button button"
            op-addCardDropdown>
-            <op-icon icon-classes="icon-small icon-add"></op-icon>
+            <op-icon icon-classes="icon-small icon-add" />
          </button>
        }
      </div>
@@ -59,8 +54,7 @@
        [highlightingMode]="board.highlightingMode"
        [showStatusButton]="showCardStatusButton()"
        (itemClicked)="openFullViewOnDoubleClick($event)"
-        (stateLinkClicked)="openStateLink($event)">
-      </wp-card-view>
+        (stateLinkClicked)="openStateLink($event)" />
    </div>
  }
  @if (loadingError) {
@@ -1,10 +1,9 @@
@if ((board$ | async); as board) {
  @if (!board.isFree) {
-    <op-enterprise-banner-frame
-      class="boards-list--enterprise-banner"
+    <op-enterprise-banner-frame class="boards-list--enterprise-banner"
      feature="board_view"
      [dismissable]="true"
-    ></op-enterprise-banner-frame>
+     />
  }
  @if (available) {
    <div
@@ -30,8 +29,7 @@
          <board-list [resource]="boardWidget"
            [board]="board"
            (onRemove)="removeList(board, boardWidget)"
-            (visibilityChange)="changeVisibilityOfList(board, boardWidget, $event)">
-          </board-list>
+            (visibilityChange)="changeVisibilityOfList(board, boardWidget, $event)" />
        </div>
      }
      @if (showHiddenListWarning) {
@@ -45,7 +43,7 @@
        <div class="boards-list--add-item -no-text-select"
          (click)="addList(board)">
          <div class="boards-list--add-item-text">
-            <op-icon icon-classes="icon-add icon-context"></op-icon>
+            <op-icon icon-classes="icon-add icon-context" />
            <span [textContent]="text.addList"></span>
          </div>
        </div>
@@ -1,5 +1,4 @@
-<op-autocompleter
-  [appendTo]="appendToContainer"
+<op-autocompleter [appendTo]="appendToContainer"
  classes="wp-inline-create--reference-autocompleter"
  [closeOnSelect]="false"
  [placeholder]="text.placeholder"
@@ -7,4 +6,4 @@
  [getOptionsFn]="autocompleterOptions.getOptionsFn"
  (close)="cancel()"
  (change)="addWorkPackageToQuery($event)"
-></op-autocompleter>
+ />
@@ -9,7 +9,7 @@ import { Observable } from 'rxjs';
            class="button last board--settings-dropdown toolbar-icon"
            boardsToolbarMenu
            [boardsToolbarMenu-resource]="board$ | async">
-      <op-icon icon-classes="button--icon icon-show-more"></op-icon>
+      <op-icon icon-classes="button--icon icon-show-more" />
    </button>
  `,
  standalone: false,
@@ -14,7 +14,7 @@ import {
@Component({
  selector: 'boards-entry',
  hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
-  template: '<ui-view></ui-view>',
+  template: '<ui-view />',
  providers: [
    BoardConfigurationService,
    BoardStatusActionService,
@@ -10,7 +10,7 @@
      [attr.aria-label]="text.logTime"
      (click)="addEventToday()"
      >
-      <op-icon icon-classes="button--icon icon-log_time"></op-icon>
+      <op-icon icon-classes="button--icon icon-log_time" />
      <span
        class="button--text"
        [textContent]="text.logTime"
@@ -20,10 +20,9 @@
  }
  @if ((calendarOptions$ | async); as calendarOptions) {
    @if (calendarOptions) {
-      <full-calendar
-        #ucCalendar
+      <full-calendar #ucCalendar
        [options]="calendarOptions"
-      ></full-calendar>
+       />
    }
  }
 </div>
@@ -4,10 +4,9 @@
  [attr.data-indicator-name]="'table'">
  @if ((calendarOptions$ | async); as calendarOptions) {
    @if (calendarOptions) {
-      <full-calendar
-        #ucCalendar
+      <full-calendar #ucCalendar
        [options]="calendarOptions"
-      ></full-calendar>
+       />
    }
  }
  @if (static) {
@@ -1,7 +1,5 @@
@if (visible) {
-  <turbo-frame
-    [id]="frameID"
+  <turbo-frame [id]="frameID"
    [src]="frameURL"
-    >
-  </turbo-frame>
+     />
 }
@@ -9,8 +9,7 @@
          itemSize="100"
          class="op-ian-center--viewport"
          >
-          <op-in-app-notification-entry
-            *cdkVirtualFor="let records of notifications$ | async; trackBy: trackNotificationGroups; templateCacheSize: 0"
+          <op-in-app-notification-entry *cdkVirtualFor="let records of notifications$ | async; trackBy: trackNotificationGroups; templateCacheSize: 0"
            class="op-ian-item"
            [class.op-ian-item_expanded]="records[0].expanded"
            [class.op-ian-item_read]="records[0].readIAN === true"
@@ -20,7 +19,7 @@
            attr.data-test-selector="op-ian-notification-item-{{records[0].id}}"
            [attr.data-qa-ian-read]="records[0].readIAN === true || undefined"
            [attr.data-qa-ian-selected]="(selectedWorkPackage$ | async) === idFromLink(records[0]._links.resource.href)"
-          ></op-in-app-notification-entry>
+           />
        </cdk-virtual-scroll-viewport>
      } @else {
        <div class="op-ian-center--loading-indicator">
@@ -6,13 +6,12 @@
    @if (last && actors.length > 1 && actors.length < 4) {
      <span textContent=" {{ text.and }} "></span>
    }
-    <op-principal
-      class="op-ian-item--actors"
+    <op-principal class="op-ian-item--actors"
      [principal]="actor"
      [hideName]="false"
      [hideAvatar]="true"
      [link]="!deviceService.isMobile"
-    ></op-principal>
+     />
    @if ((idx === 0 && actors.length > 2) || (idx === 1 && actors.length > 3)) {
      <span [textContent]="', '"></span>
    }
@@ -8,7 +8,7 @@
      class="op-ian-item--top-line"
      >
      <div class="op-ian-item--status">
-        <op-in-app-notification-status [status]="workPackage.status"></op-in-app-notification-status>
+        <op-in-app-notification-status [status]="workPackage.status" />
      </div>
      <a
        class="op-ian-item--work-package-id-link spot-link"
@@ -89,15 +89,13 @@
  }
  @if (!hasReminderAlert) {
    @if (showDateAlert) {
-      <op-in-app-notification-date-alert
-        [aggregatedNotifications]="aggregatedNotifications"
-      ></op-in-app-notification-date-alert>
+      <op-in-app-notification-date-alert [aggregatedNotifications]="aggregatedNotifications"
+       />
    }
    @if (!showDateAlert) {
-      <op-in-app-notification-actors-line
-        [notification]="notification"
+      <op-in-app-notification-actors-line [notification]="notification"
        [aggregatedNotifications]="aggregatedNotifications"
-      ></op-in-app-notification-actors-line>
+       />
    }
  }
 </div>
@@ -1,13 +1,9 @@
@if (hasDateAlert) {
-  <op-in-app-notification-date-alert
-    [aggregatedNotifications]="dateAlerts">
-  </op-in-app-notification-date-alert>
+  <op-in-app-notification-date-alert [aggregatedNotifications]="dateAlerts" />
 }
@if (!hasDateAlert) {
-  <op-in-app-notification-relative-time
-    [notification]="reminderAlert"
-    [hasActorByLine]="false">
-  </op-in-app-notification-relative-time>
+  <op-in-app-notification-relative-time [notification]="reminderAlert"
+    [hasActorByLine]="false" />
 }

 <span
@@ -5,7 +5,7 @@
    (click)="onAddNewClick($event)"
    >
    <span class="icon-context">
-      <op-icon icon-classes="icon-user-plus icon-context"></op-icon>
+      <op-icon icon-classes="icon-user-plus icon-context" />
      {{text.button}}
    </span>
  </button>
@@ -4,8 +4,7 @@
  ></div>
 }
@if (!loading && step === Steps.ProjectSelection) {
-  <op-ium-project-selection
-    [project]="project"
+  <op-ium-project-selection [project]="project"
    [type]="type"
    (save)="onProjectSelectionSave($event)"
    (close)="closeMe()"
@@ -13,12 +12,11 @@
    cdkFocusInitial
    cdkTrapFocus
    [cdkTrapFocusAutoCapture]="true"
-  ></op-ium-project-selection>
+   />
 }

@if (!loading && step === Steps.Principal) {
-  <op-ium-principal
-    [project]="project"
+  <op-ium-principal [project]="project"
    [roleData]="role"
    [messageData]="message"
    [principalData]="principalData"
@@ -30,12 +28,11 @@
    cdkFocusInitial
    cdkTrapFocus
    [cdkTrapFocusAutoCapture]="true"
-  ></op-ium-principal>
+   />
 }

@if (!loading && step === Steps.Summary) {
-  <op-ium-summary
-    [project]="project"
+  <op-ium-summary [project]="project"
    [principalData]="principalData"
    [type]="type"
    [role]="role"
@@ -47,12 +44,11 @@
    cdkFocusInitial
    cdkTrapFocus
    [cdkTrapFocusAutoCapture]="true"
-  ></op-ium-summary>
+   />
 }

@if (!loading && step === Steps.Success) {
-  <op-ium-success
-    [principal]="principalData.principal"
+  <op-ium-success [principal]="principalData.principal"
    [project]="project"
    [type]="type"
    [createdNewPrincipal]="createdNewPrincipal"
@@ -62,5 +58,5 @@
    cdkFocusInitial
    cdkTrapFocus
    [cdkTrapFocusAutoCapture]="true"
-  ></op-ium-success>
+   />
 }
@@ -51,7 +51,7 @@
    <!--Invite a new user by email-->
    @if (canInviteByEmail$ | async) {
      <div>
-        <op-icon icon-classes="icon-mail1 icon-context"></op-icon>
+        <op-icon icon-classes="icon-mail1 icon-context" />
        <b>{{ text.inviteNewUser }}</b>
        {{ input }}
      </div>
@@ -60,7 +60,7 @@
    <!--Create a new placeholder by name-->
    @if (canCreateNewPlaceholder$ | async) {
      <div>
-        <op-icon icon-classes="icon-add icon-context"></op-icon>
+        <op-icon icon-classes="icon-add icon-context" />
        <b>{{ text.createNewPlaceholder }}</b>
        {{ input }}
      </div>
@@ -13,13 +13,12 @@
      required
      >
      @if (!(hasPrincipalSelected && isNewPrincipal)) {
-        <op-ium-principal-search
-          [spotFormBinding]="principalControl"
+        <op-ium-principal-search [spotFormBinding]="principalControl"
          [type]="type"
          [project]="project"
          slot="input"
          (createNew)="createNewFromInput($event)"
-        ></op-ium-principal-search>
+         />
      }

      @if (isNewPrincipal && type === PrincipalType.User) {
@@ -59,22 +58,20 @@
    </spot-form-field>

    @if (isNewPrincipal && type === PrincipalType.User && userDynamicFieldConfig.schema) {
-      <op-dynamic-form
-        [dynamicFormGroup]="dynamicFieldsControl"
+      <op-dynamic-form [dynamicFormGroup]="dynamicFieldsControl"
        [settings]="userDynamicFieldConfig"
        [formUrl]="apiV3Service.users.form.path"
        [handleSubmit]="false"
-      ></op-dynamic-form>
+       />
    }

    <spot-form-field
      [label]="text.role.label()"
      required
      >
-      <op-ium-role-search
-        [spotFormBinding]="roleControl"
+      <op-ium-role-search [spotFormBinding]="roleControl"
        slot="input"
-      ></op-ium-role-search>
+       />
      <p
        class="spot-form-field--description"
        slot="action"
@@ -117,7 +114,7 @@
        class="button button_no-margin spot-action-bar--action"
        (click)="back.emit()"
        >
-        <op-icon icon-classes="button--icon icon-arrow-left1"></op-icon>
+        <op-icon icon-classes="button--icon icon-arrow-left1" />
        {{ text.principal.backButton }}
      </button>
    </div>
@@ -12,13 +12,12 @@
      [label]="text.project.label"
      required
      >
-      <op-project-autocompleter
-        slot="input"
+      <op-project-autocompleter slot="input"
        formControlName="project"
        [filters]="APIFiltersForProjects"
        [mapResultsFn]="projectFilterFn.bind(this)"
        appendTo=".spot-modal-overlay"
-      ></op-project-autocompleter>
+       />

      @if (projectControl.errors?.lackingPermission) {
        <div
@@ -48,11 +47,10 @@
    </spot-form-field>

    <spot-form-field>
-      <op-option-list
-        [options]="typeOptions"
+      <op-option-list [options]="typeOptions"
        formControlName="type"
        slot="input"
-      ></op-option-list>
+       />

      @if (projectAndTypeForm?.dirty && typeControl?.invalid) {
        <div
@@ -37,7 +37,7 @@
        class="button button_no-margin spot-action-bar--action"
        (click)="back.emit()"
        >
-        <op-icon icon-classes="button--icon icon-arrow-left1"></op-icon>
+        <op-icon icon-classes="button--icon icon-arrow-left1" />
        {{ text.backButton }}
      </button>
    </div>
@@ -17,8 +17,7 @@
      class="op-add-existing-pane--results"
      >
      @for (wp of currentWorkPackages$ | async; track wp) {
-        <wp-single-card
-          [workPackage]="wp"
+        <wp-single-card [workPackage]="wp"
          [selectedWhenOpen]="true"
          [showInfoButton]="true"
          [disabledInfo]="showDisabledText(wp)"
@@ -28,7 +27,7 @@
          (stateLinkClicked)="openStateLink($event)"
          (cardClicked)="workPackagesCalendar.onCardClicked($event)"
          (cardDblClicked)="workPackagesCalendar.onCardDblClicked($event)"
-        ></wp-single-card>
+         />
      }
    </div>
  } @else {
@@ -1,8 +1,7 @@
-<op-autocompleter
-  data-test-selector="tp-add-assignee"
+<op-autocompleter data-test-selector="tp-add-assignee"
  (change)="selectUser($event)"
  [fetchDataDirectly]="true"
  [getOptionsFn]="getOptionsFn"
  resource="users"
  appendTo="body"
-></op-autocompleter>
+ />
@@ -11,18 +11,16 @@
      data-test-selector="op-team-planner--add-existing-toggle"
      data-tour-selector="op-team-planner--add-existing-toggle"
      (click)="toggleAddExistingPane()">
-      <op-icon icon-classes="icon-add button--icon"></op-icon>
+      <op-icon icon-classes="icon-add button--icon" />
      <span
        class="button--text"
        [textContent]="text.add_existing">
      </span>
    </button>
    @if ((showAddExistingPane | async)) {
-      <op-add-existing-pane
-        class="op-team-planner--add-existing-pane"
+      <op-add-existing-pane class="op-team-planner--add-existing-pane"
        data-test-selector="add-existing-pane"
-        >
-      </op-add-existing-pane>
+         />
    }
    <button
      type="button"
@@ -35,7 +33,7 @@
      <span class="button--text ellipsis"
        [textContent]="currentViewTitle"
      aria-hidden="true"></span>
-      <op-icon icon-classes="button--icon icon-small icon-pulldown hidden-for-mobile"></op-icon>
+      <op-icon icon-classes="button--icon icon-small icon-pulldown hidden-for-mobile" />
    </button>
  }

@@ -57,11 +55,10 @@
              <div
                class="tp-assignee"
                >
-                <op-principal
-                  [principal]="resource.extendedProps.principal"
+                <op-principal [principal]="resource.extendedProps.principal"
                  class="tp-assignee--principal op-principal_wrapped"
                  [hideName]="isMobile"
-                ></op-principal>
+                 />
                <button
                  type="button"
                  class="tp-assignee--remove"
@@ -69,31 +66,27 @@
                  [attr.aria-label]="text.remove_assignee"
                  [attr.data-qa-remove-assignee]="resource.extendedProps.principal.id"
                  >
-                  <op-icon icon-classes="icon-remove"></op-icon>
+                  <op-icon icon-classes="icon-remove" />
                </button>
              </div>
            }
            @if (resource && !resource.extendedProps.principal && resource.id.startsWith('skeleton')) {
-              <op-principal-loading-skeleton
-              ></op-principal-loading-skeleton>
+              <op-principal-loading-skeleton />
            }
            @if (resource && !resource.extendedProps.principal && !resource.id.startsWith('skeleton')) {
-              <op-tp-add-assignee
-                (selectAssignee)="addAssignee($event)"
+              <op-tp-add-assignee (selectAssignee)="addAssignee($event)"
                [alreadySelected]="principalIds$ | async"
-              ></op-tp-add-assignee>
+               />
            }
          </ng-template>
          <ng-template #eventContent let-event="$implicit.event">
            @if (event.source && event.source.id === 'skeleton') {
-              <op-wp-loading-skeleton
-                [viewBox]="event.extendedProps.viewBox"
+              <op-wp-loading-skeleton [viewBox]="event.extendedProps.viewBox"
                class="op-team-planner--wp-loading-skeleton"
-              ></op-wp-loading-skeleton>
+               />
            }
            @if ((!event.source || event.source.id === 'work_packages') && event.extendedProps.workPackage; as wp) {
-              <wp-single-card
-                [workPackage]="wp"
+              <wp-single-card [workPackage]="wp"
                [selectedWhenOpen]="true"
                [orientation]="'horizontal'"
                [highlightingMode]="'type'"
@@ -108,7 +101,7 @@
                (cardClicked)="workPackagesCalendar.onCardClicked($event)"
                (cardDblClicked)="workPackagesCalendar.onCardDblClicked($event)"
                (cardContextMenu)="workPackagesCalendar.showEventContextMenu($event)"
-              ></wp-single-card>
+               />
            }
          </ng-template>
        </full-calendar>
@@ -128,7 +121,7 @@
            data-test-selector="op-team-planner--empty-state-button"
            (click)="showAssigneeAddRow()"
            >
-            <op-icon icon-classes="icon-add button--icon"></op-icon>
+            <op-icon icon-classes="icon-add button--icon" />
            <span
              class="button--text"
              [textContent]="text.add_assignee">
@@ -150,7 +143,7 @@
            data-test-selector="tp-assignee-add-button"
            data-tour-selector="tp-assignee-add-button"
            >
-            <op-icon icon-classes="icon-add button--icon"></op-icon>
+            <op-icon icon-classes="icon-add button--icon" />
            <span
              class="button--text"
              [textContent]="text.add_assignee">
@@ -13,13 +13,12 @@
  }

  @if (active) {
-    <op-project-autocompleter
-      (change)="selectProject($event)"
+    <op-project-autocompleter (change)="selectProject($event)"
      (keydown.escape)="active = false"
      [filters]="APIFilters"
      [mapResultsFn]="this.mapProjectsFn.bind(this)"
      [placeholder]="text.please_select"
      dropdownPosition="top"
-    ></op-project-autocompleter>
+     />
  }
 </div>
@@ -172,10 +172,9 @@
    </div>
  }

-  <op-enterprise-banner-frame
-    feature="date_alerts"
+  <op-enterprise-banner-frame feature="date_alerts"
    [dismissable]="true"
-  ></op-enterprise-banner-frame>
+   />

  <div class="op-form--section-header">
    <h3 class="op-form--section-header-title">{{ text.alsoNotifyFor.title }}</h3>
@@ -244,12 +243,11 @@
  </div>

  @if (userId) {
-    <op-notification-settings-table
-      [userId]="userId"
+    <op-notification-settings-table [userId]="userId"
      [settings]="form.controls.projectSettings"
      formArrayName="projectSettings"
      class="op-notification-settings-page--table"
-    ></op-notification-settings-table>
+     />
  }

  <div class="generic-table--action-buttons">
@@ -270,10 +270,9 @@
 }

@if (userId) {
-  <op-notification-setting-inline-create
-    [userId]="userId"
+  <op-notification-setting-inline-create [userId]="userId"
    [settings]="settings"
    (selected)="addProjectSettings($event)"
    data-test-selector="notification-setting-inline-create"
-  ></op-notification-setting-inline-create>
+   />
 }
@@ -4,10 +4,10 @@
    (ngSubmit)="saveChanges()"
    class="op-form"
    >
-    <op-immediate-reminder-settings class="op-form--fieldset"></op-immediate-reminder-settings>
-    <op-reminder-settings-daily-time class="op-form--fieldset"></op-reminder-settings-daily-time>
-    <op-workdays-settings class="op-form--fieldset"></op-workdays-settings>
-    <op-email-alerts-settings class="op-form--fieldset"></op-email-alerts-settings>
+    <op-immediate-reminder-settings class="op-form--fieldset" />
+    <op-reminder-settings-daily-time class="op-form--fieldset" />
+    <op-workdays-settings class="op-form--fieldset" />
+    <op-email-alerts-settings class="op-form--fieldset" />
    <div class="op-form--submit">
      <button
        class="button -primary"
@@ -15,10 +15,9 @@
  </spot-selector-field>

  @if ((enabled$ | async)) {
-    <op-basic-range-date-picker
-      [required]="enabled$ | async"
+    <op-basic-range-date-picker [required]="enabled$ | async"
      [value]="selectedDates$ | async"
      (valueChange)="setDates($event)"
-    ></op-basic-range-date-picker>
+     />
  }
 </div>
@@ -56,7 +56,7 @@
            type="button"
            (click)="removeTime(selectedTimes, i)"
            attr.data-test-selector="op-settings-daily-time--remove-{{i + 1}}">
-            <op-icon icon-classes="icon-small icon-remove icon4"></op-icon>
+            <op-icon icon-classes="icon-small icon-remove icon4" />
          </button>
        }
      </div>
@@ -17,5 +17,5 @@
    </spot-selector-field>
  }

-  <op-pause-reminders></op-pause-reminders>
+  <op-pause-reminders />
 </ng-container>
@@ -5,5 +5,5 @@
  [title]="text.goBack"
  (click)="goBack()"
 >
-  <op-icon icon-classes="op-back-button--icon button--icon icon-back-up"></op-icon>
+  <op-icon icon-classes="op-back-button--icon button--icon icon-back-up" />
 </button>
@@ -5,7 +5,7 @@
      accesskey="3"
      [disabled]="saving"
      (click)="save()">
-    <op-icon icon-classes="button--icon icon-checkmark"></op-icon>
+    <op-icon icon-classes="button--icon icon-checkmark" />
    <span class="button--text" [textContent]="text.save"></span>
  </button>
  <button
@@ -13,7 +13,7 @@
      class="button"
      accesskey="7"
      (click)="cancel()">
-    <op-icon icon-classes="button--icon icon-close"></op-icon>
+    <op-icon icon-classes="button--icon icon-close" />
    <span class="button--text" [textContent]="text.cancel"></span>
  </button>
 </div>
@@ -1,8 +1,7 @@
 <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
 <label id="div-values-{{filter.id}}">
-  <spot-switch
-    name="v[{{filter.name}}]"
+  <spot-switch name="v[{{filter.name}}]"
    [ngModel]="value"
    (ngModelChange)="onFilterUpdated($event)"
-  ></spot-switch>
+   />
 </label>
@@ -19,11 +19,10 @@
      class="hide-when-print"
      >
      @if (!!filters) {
-        <op-query-filters
-          [filters]="filters"
+        <op-query-filters [filters]="filters"
          [showCloseFilter]="true"
          (filtersChanged)="replaceIfComplete($event)"
-        ></op-query-filters>
+         />
      }
    </div>
  }
@@ -1,5 +1,4 @@
-<op-basic-single-date-picker
-  [id]="'values-' + filter.id"
+<op-basic-single-date-picker [id]="'values-' + filter.id"
  [name]="'v[' + filter.id + ']'"
  class="advanced-filters--date-field"
  required="true"
@@ -8,7 +7,7 @@
  [value]="isoDateFormatter(value)"

  [opAutofocus]="shouldFocus"
-></op-basic-single-date-picker>
+ />

@if (isTimeZoneDifferent) {
  <span
@@ -1,23 +1,21 @@
-<op-basic-single-date-picker
-  (valueChange)="parseBegin($event)"
+<op-basic-single-date-picker (valueChange)="parseBegin($event)"
  [value]="isoDateFormatter(begin)"
  [opAutofocus]="shouldFocus"
  required="true"
  [id]="'values-' + filter.id + '-begin'"
  [name]="'v[' + filter.id + ']-begin'"
  classes="advanced-filters--date-field"
-></op-basic-single-date-picker>
+ />

 <span class="advanced-filters--affix" [textContent]="text.spacer">
 </span>

-<op-basic-single-date-picker
-  (valueChange)="parseEnd($event)"
+<op-basic-single-date-picker (valueChange)="parseEnd($event)"
  [value]="isoDateFormatter(end)"
  [id]="'values-' + filter.id + '-end'"
  [name]="'v[' + filter.id + ']-end'"
  classes="advanced-filters--date-field"
-></op-basic-single-date-picker>
+ />

@if (isTimeZoneDifferent) {
  <span
@@ -1,9 +1,8 @@
-<op-basic-single-date-picker
-  [id]="'values-' + filter.id"
+<op-basic-single-date-picker [id]="'values-' + filter.id"
  [name]="'v[' + filter.id + ']'"
  class="advanced-filters--date-field"
  [opAutofocus]="shouldFocus"
  (valueChange)="valueChanged($event)"
  [value]="formatter(value)"
  [required]="true"
-></op-basic-single-date-picker>
+ />
@@ -1,9 +1,8 @@
-<op-basic-range-date-picker
-  [id]="'values-' + filter.id"
+<op-basic-range-date-picker [id]="'values-' + filter.id"
  [name]="'v[' + filter.id + ']'"
  class="advanced-filters--date-field"

  [value]="value"
  (valueChange)="value = $event"
  [opAutofocus]="shouldFocus"
-></op-basic-range-date-picker>
+ />
@@ -2,8 +2,7 @@
  class="inline-label ng-select-container"
  id="div-values-{{filter.id}}"
 >
-  <op-project-autocompleter
-    [model]="filter.values"
+  <op-project-autocompleter [model]="filter.values"
    [focusDirectly]="shouldFocus"
    [multiple]="true"
    [appendTo]="'body'"
@@ -11,5 +10,5 @@
    class="advanced-filters--ng-select -multi-select"
    (change)="onChange($event)"
    [filters]="additionalProjectApiFilters"
-  ></op-project-autocompleter>
+   />
 </div>
@@ -1,8 +1,7 @@
 <div class="inline-label ng-select-container"
     id="div-values-{{filter.id}}">

-  <op-autocompleter
-    appendTo="body"
+  <op-autocompleter appendTo="body"
    class="advanced-filters--ng-select -multi-select"
    [id]="'values-' + filter.id"
    [getOptionsFn]="autocompleterFn"
@@ -20,5 +19,5 @@
    [compareWith]="compareByHref"
    [trackByFn]="itemTracker"
    (change)="setValues($event)"
-  ></op-autocompleter>
+   />
 </div>
@@ -2,8 +2,7 @@
  class="inline-label ng-select-container"
  id="div-values-{{filter.id}}"
 >
-  <op-autocompleter
-    appendTo="body"
+  <op-autocompleter appendTo="body"
    class="advanced-filters--ng-select -multi-select"
    [id]="'values-' + filter.id"
    [items]="availableOptions"
@@ -18,5 +17,5 @@
    [trackByFn]="itemTracker"
    bindLabel="name"
    (change)="setValues($event)"
-  ></op-autocompleter>
+   />
 </div>
@@ -47,11 +47,10 @@
    }

    @if (valueType === '[1]Boolean') {
-      <op-filter-boolean-value
-        (filterChanged)="onFilterUpdated($event)"
+      <op-filter-boolean-value (filterChanged)="onFilterUpdated($event)"
        [shouldFocus]="shouldFocus"
        [filter]="filter"
-      ></op-filter-boolean-value>
+       />
    }
  </div>
  <!-- Values -->
@@ -59,75 +58,65 @@
    <div class="advanced-filters--filter-value">
      @switch (valueType) {
        @case ('[1]Integer') {
-          <op-filter-integer-value
-            (filterChanged)="onFilterUpdated($event)"
+          <op-filter-integer-value (filterChanged)="onFilterUpdated($event)"
            [shouldFocus]="shouldFocus"
            [filter]="filter"
-          ></op-filter-integer-value>
+           />
        }
        @case ('[1]Date') {
-          <op-filter-date-value
-            (filterChanged)="onFilterUpdated($event)"
+          <op-filter-date-value (filterChanged)="onFilterUpdated($event)"
            [shouldFocus]="shouldFocus"
            [filter]="filter"
-          ></op-filter-date-value>
+           />
        }
        @case ('[2]Date') {
-          <op-filter-dates-value
-            (filterChanged)="onFilterUpdated($event)"
+          <op-filter-dates-value (filterChanged)="onFilterUpdated($event)"
            [shouldFocus]="shouldFocus"
            [filter]="filter"
-          ></op-filter-dates-value>
+           />
        }
        @case ('[1]DateTime') {
-          <op-filter-date-time-value
-            (filterChanged)="onFilterUpdated($event)"
+          <op-filter-date-time-value (filterChanged)="onFilterUpdated($event)"
            [shouldFocus]="shouldFocus"
            [filter]="filter"
-          ></op-filter-date-time-value>
+           />
        }
        @case ('[2]DateTime') {
-          <op-filter-date-times-value
-            [shouldFocus]="shouldFocus"
+          <op-filter-date-times-value [shouldFocus]="shouldFocus"
            (filterChanged)="onFilterUpdated($event)"
            [filter]="filter"
-          ></op-filter-date-times-value>
+           />
        }
        @case ('[1]String') {
-          <op-filter-string-value
-            (filterChanged)="onFilterUpdated($event)"
+          <op-filter-string-value (filterChanged)="onFilterUpdated($event)"
            [shouldFocus]="shouldFocus"
            [filter]="filter"
-          ></op-filter-string-value>
+           />
        }
        @case ('[1]Float') {
-          <op-filter-string-value
-            (filterChanged)="onFilterUpdated($event)"
+          <op-filter-string-value (filterChanged)="onFilterUpdated($event)"
            [shouldFocus]="shouldFocus"
            [filter]="filter"
-          ></op-filter-string-value>
+           />
        }
        @case ('[]Project') {
-          <op-filter-project
-            (filterChanged)="onFilterUpdated($event)"
+          <op-filter-project (filterChanged)="onFilterUpdated($event)"
            [shouldFocus]="shouldFocus"
            [filter]="filter"
-          ></op-filter-project>
+           />
        }
        @default {
          @if (filter.currentSchema.loadedAllowedValues()) {
-            <op-filter-toggled-multiselect-value
-              (filterChanged)="onFilterUpdated($event)"
+            <op-filter-toggled-multiselect-value (filterChanged)="onFilterUpdated($event)"
              [shouldFocus]="shouldFocus"
              [filter]="filter"
-            ></op-filter-toggled-multiselect-value>
+             />
          }
          @if (!filter.currentSchema.loadedAllowedValues()) {
-            <op-filter-searchable-multiselect-value
-              (filterChanged)="onFilterUpdated($event)"
+            <op-filter-searchable-multiselect-value (filterChanged)="onFilterUpdated($event)"
              [shouldFocus]="shouldFocus"
              [filter]="filter"
-            ></op-filter-searchable-multiselect-value>
+             />
          }
        }
      }
@@ -147,7 +136,7 @@
      [title]="text.button_delete"
      (click)="removeThisFilter()"
      >
-      <op-icon icon-classes="icon-close advanced-filters--remove-filter-icon"></op-icon>
+      <op-icon icon-classes="icon-close advanced-filters--remove-filter-icon" />
    </button>
  </div>
 </ng-container>
@@ -17,9 +17,7 @@
          [attr.title]="text.filter_by_text">
        </label>
        <div class="advanced-filters--filter-value">
-          <wp-filter-by-text-input
-            (deactivateFilter)="deactivateFilter($event)">
-          </wp-filter-by-text-input>
+          <wp-filter-by-text-input (deactivateFilter)="deactivateFilter($event)" />
        </div>
      </li>
      <li class="advanced-filters--spacer"></li>
@@ -42,7 +40,7 @@
      <li class="advanced-filters--add-filter">
        <!-- Add filters -->
        <label for="add_filter_select" aria-hidden="true" class="advanced-filters--add-filter-label">
-          <op-icon icon-classes="icon-add icon4"></op-icon>
+          <op-icon icon-classes="icon-add icon4" />
          {{ text.label_filter_add }}:
        </label>
        <label for="add_filter_select" class="sr-only">
@@ -65,8 +63,7 @@
            (change)="onFilterAdded($event)"
            id="add_filter_select"
            bindLabel="name"
-            appendTo="body">
-          </ng-select>
+            appendTo="body" />
        </div>
      </li>
    </ul>
@@ -17,10 +17,9 @@

    <span class="spot-icon spot-icon_dropdown"></span>
  </button>
-  <op-baseline
-    [visible]="opened"
+  <op-baseline [visible]="opened"
    [showActionBar]="true"
    slot="body"
    (submitted)="opened = false"
-  ></op-baseline>
+   />
 </spot-drop-modal>
@@ -2,10 +2,9 @@
  [class.op-baseline--header_banner-active]="!available"
  [class.op-baseline_tab]="!showActionBar">

-  <op-enterprise-banner-frame
-    feature="baseline_comparison"
+  <op-enterprise-banner-frame feature="baseline_comparison"
    [dismissable]="true"
-  ></op-enterprise-banner-frame>
+   />
  @if (available) {
    <span
      class="spot-body-small" [textContent]="text.header_description"
@@ -171,14 +170,12 @@
      </div>
    }
    @if (selectedFilter === 'aSpecificDate' || selectedFilter === 'betweenTwoSpecificDates') {
-      <op-datepicker-sheet
-        class="op-baseline--datepicker"
+      <op-datepicker-sheet class="op-baseline--datepicker"
        [dates]="selectedFilter === 'betweenTwoSpecificDates' ? selectedDates : [selectedDates[0]]"
        [mode]="selectedFilter === 'betweenTwoSpecificDates' ? 'range' : 'single'"
        [isDisabled]="futureDateComparer()"
        (datesSelected)="selectedDates = $event"
-        >
-      </op-datepicker-sheet>
+         />
    }
    @if (showActionBar) {
      <div class="spot-action-bar"
@@ -202,6 +199,6 @@
    }
  </form>
 } @else {
-  <op-baseline-loading></op-baseline-loading>
+  <op-baseline-loading />
 }

@@ -19,7 +19,7 @@
      @if (!parent) {
        <span [textContent]="text.set_parent"></span>
      }
-      <op-icon icon-classes="icon-small {{ parent ? 'icon-edit icon5 icon-no-color' : 'icon-add icon4' }}"></op-icon>
+      <op-icon icon-classes="icon-small {{ parent ? 'icon-edit icon5 icon-no-color' : 'icon-add icon4' }}" />
    </button>
  }
  @if (canModifyParent() && parent) {
@@ -29,18 +29,16 @@
      [title]="text.remove_parent"
      (click)="updateParent(null)"
      >
-      <op-icon icon-classes="icon-small icon-no-color icon-remove icon4"></op-icon>
+      <op-icon icon-classes="icon-small icon-no-color icon-remove icon4" />
    </button>
  }
 }

@if (active) {
-  <wp-relations-autocomplete
-    [placeholder]="text.set_or_remove_parent"
+  <wp-relations-autocomplete [placeholder]="text.set_or_remove_parent"
    [workPackage]="workPackage"
    (cancel)="close()"
    (change)="updateParent($event)"
    data-test-selector="wp-relations-autocomplete"
-    filterCandidatesFor="parent">
-  </wp-relations-autocomplete>
+    filterCandidatesFor="parent" />
 }
@@ -24,7 +24,7 @@
      }
      <li
        [ngClass]="{ 'op-wp-breadcrumb--active-parent-select': inputActive, 'icon4 icon-small icon-arrow-right5': !inputActive && hierarchyCount > 1 }">
-        <wp-breadcrumb-parent (onSwitch)="updateActiveInput($event)" [workPackage]="workPackage"></wp-breadcrumb-parent>
+        <wp-breadcrumb-parent (onSwitch)="updateActiveInput($event)" [workPackage]="workPackage" />
      </li>
    </ul>
  </div>
@@ -6,5 +6,5 @@
        [attr.title]="label"
        [attr.accesskey]="accessKey"
        (click)="performAction($event)">
-  <op-icon icon-classes="{{ iconClass }} button--icon"></op-icon>
+  <op-icon icon-classes="{{ iconClass }} button--icon" />
 </button>
@@ -9,7 +9,7 @@
  [ngClass]="{ '-active': isActive }"
  data-test-selector="wp-filter-button"
  >
-  <op-icon icon-classes="{{ iconClass }} button--icon"></op-icon>
+  <op-icon icon-classes="{{ iconClass }} button--icon" />
  <span class="button--text">
    {{ buttonText }}
    @if (initialized) {
@@ -33,9 +33,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
    <button class="button"
            id="wp-fold-toggle-button"
            wpGroupToggleDropdown>
-      <op-icon icon-classes="button--icon icon-outline"></op-icon>
+      <op-icon icon-classes="button--icon icon-outline" />
      <span class="button--text"></span>
-      <op-icon icon-classes="button--icon icon-small icon-pulldown"></op-icon>
+      <op-icon icon-classes="button--icon icon-small icon-pulldown" />
    </button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5,5 +5,5 @@
        opSettingsContextMenu-query="query"
        [hideTableOptions]="hideTableOptions"
        [showCalendarSharingOption]="showCalendarSharingOption">
-  <op-icon icon-classes="button--icon icon-show-more"></op-icon>
+  <op-icon icon-classes="button--icon icon-show-more" />
 </button>
@@ -18,7 +18,7 @@
        <span
          class="op-wp-status-button--text button--text"
          >
-          <op-icon icon-classes="button--icon icon-locked"></op-icon>
+          <op-icon icon-classes="button--icon icon-locked" />
        </span>
      }
      <span
@@ -26,7 +26,7 @@
        aria-hidden="true"
        [textContent]="status.name"
      ></span>
-      <op-icon icon-classes="button--icon icon-small icon-pulldown"></op-icon>
+      <op-icon icon-classes="button--icon icon-small icon-pulldown" />
    </button>
  </div>
 }
@@ -8,7 +8,7 @@
        [ngClass]="getAutoZoomToggleClass()"
        [attr.title]="text.zoomAuto"
        (click)="enableAutoZoom()">
-        <op-icon icon-classes="icon-zoom-auto button--icon"></op-icon>
+        <op-icon icon-classes="icon-zoom-auto button--icon" />
      </button>
    </li>
  }
@@ -20,7 +20,7 @@
        [attr.title]="text.zoomOut"
        [disabled]="isMaxLevel"
        (click)="updateZoomWithDelta(1)">
-        <op-icon icon-classes="icon-zoom-out button--icon"></op-icon>
+        <op-icon icon-classes="icon-zoom-out button--icon" />
      </button>
    </li>
  }
@@ -32,7 +32,7 @@
        [attr.title]="text.zoomIn"
        [disabled]="isMinLevel"
        (click)="updateZoomWithDelta(-1)">
-        <op-icon icon-classes="icon-zoom-in button--icon"></op-icon>
+        <op-icon icon-classes="icon-zoom-in button--icon" />
      </button>
    </li>
  }
@@ -6,8 +6,7 @@
      class="wp-inline-create--reference-container">
      <ndc-dynamic [ndcDynamicComponent]="referenceClass"
        [ndcDynamicInjector]="injector"
-        [ndcDynamicOutputs]="referenceOutputs">
-      </ndc-dynamic>
+        [ndcDynamicOutputs]="referenceOutputs" />
    </div>
  }

@@ -24,8 +23,7 @@
      [orientation]="orientation"
      [shrinkOnMobile]="shrinkOnMobile"
      (onRemove)="removeCard(wp)"
-      (stateLinkClicked)="stateLinkClicked.emit($event)">
-    </wp-single-card>
+      (stateLinkClicked)="stateLinkClicked.emit($event)" />
    @if (shrinkOnMobile) {
      <hr
        class="form--separator hidden-for-desktop">
@@ -35,7 +33,7 @@

@if (showEmptyResultsBox && isResultEmpty) {
  <div>
-    <op-no-results [title]="text.noResults.title" [description]="text.noResults.description"></op-no-results>
+    <op-no-results [title]="text.noResults.title" [description]="text.noResults.description" />
  </div>
 }

@@ -25,7 +25,7 @@
          data-test-selector="op-wp-single-card--details-button"
          [title]="text.detailsView"
          (click)="emitStateLinkClicked($event, workPackage, true)">
-          <op-icon icon-classes="icon3 icon-info2"></op-icon>
+          <op-icon icon-classes="icon3 icon-info2" />
        </button>
      }

@@ -36,17 +36,15 @@
          [class.-show]="isNewResource(workPackage)"
          [title]="text.removeCard"
          (click)="onRemoved(workPackage)">
-          <op-icon icon-classes="icon-context icon-close"></op-icon>
+          <op-icon icon-classes="icon-context icon-close" />
        </button>
      }

      @if (disabledInfo && disabledInfo.text.length > 0) {
-        <op-icon
-          [attr.data-tooltip]="disabledInfo.text"
+        <op-icon [attr.data-tooltip]="disabledInfo.text"
          class="-multiline op-wp-single-card--card-action op-wp-single-card--card-action_closed"
          [ngClass]="'tooltip--' + disabledInfo.orientation"
-          icon-classes="icon-context icon-not-supported">
-        </op-icon>
+          icon-classes="icon-context icon-not-supported" />
      }
    </div>
  </div>
@@ -59,12 +57,10 @@
        <op-editable-attribute-field [resource]="workPackage"
          [wrapperClasses]="'work-packages--type-selector'"
          [fieldName]="'type'"
-          class="op-wp-single-card-content--type">
-        </op-editable-attribute-field>
+          class="op-wp-single-card-content--type" />
        <op-editable-attribute-field [resource]="workPackage"
          fieldName="subject"
-          class="op-wp-single-card-content--subject -bold">
-        </op-editable-attribute-field>
+          class="op-wp-single-card-content--subject -bold" />
      </div>
    </edit-form>
  }
@@ -90,12 +86,10 @@
          <span
            class="op-wp-single-card--content-inline-date"
            >
-            <display-field
-              [resource]="workPackage"
+            <display-field [resource]="workPackage"
              [displayFieldOptions]="{ writable: false, dateFormat: 'MMM DD, YYYY', placeholder: '' }"
              fieldName="startDate"
-              containerType="single-view">
-            </display-field>
+              containerType="single-view" />
            -
          </span>
        }
@@ -117,12 +111,10 @@
            class="op-wp-single-card--content-inline-date"
            >
            -
-            <display-field
-              [resource]="workPackage"
+            <display-field [resource]="workPackage"
              [displayFieldOptions]="{ writable: false, dateFormat: 'MMM DD, YYYY', placeholder: '' }"
              fieldName="dueDate"
-              containerType="single-view">
-            </display-field>
+              containerType="single-view" />
          </span>
        }
      </span>
@@ -133,12 +125,10 @@
      }
      <div class="op-wp-single-card--content-status-baseline">
        @if (showStatusButton) {
-          <wp-status-button
-            [workPackage]="workPackage"
+          <wp-status-button [workPackage]="workPackage"
            [small]="true"
            class="op-wp-single-card--content-status"
-            >
-          </wp-status-button>
+             />
        }
        @if (baselineIcon(workPackage) !== null) {
          <span
@@ -150,24 +140,21 @@
        }
      </div>
      @if (workPackage.assignee) {
-        <op-principal
-          [principal]="workPackage.assignee"
+        <op-principal [principal]="workPackage.assignee"
          [hideName]="true"
          [link]="false"
          size="mini"
          class="op-wp-single-card--content-assignee"
          data-test-selector="op-wp-single-card--content-assignee"
-        ></op-principal>
+         />
      }
      @if (!showAsInlineCard && (workPackage.startDate || workPackage.dueDate)) {
-        <display-field
-          [resource]="workPackage"
+        <display-field [resource]="workPackage"
          [displayFieldOptions]="{ writable: false, dateFormat: 'MMM DD, YYYY', placeholder: '' }"
          [displayClass]="combinedDateDisplayField"
          fieldName="dueDate"
          class="op-wp-single-card--content-dates"
-          containerType="single-view">
-        </display-field>
+          containerType="single-view" />
      }
    </div>
  }
@@ -14,13 +14,11 @@
  </span>
  @if (valueVisible) {
    <span class="form--text-field-container -slim">
-      <op-basic-single-date-picker
-        [id]="fieldId + '_visible'"
+      <op-basic-single-date-picker [id]="fieldId + '_visible'"
        [name]="fieldId + '_input'"
        [value]="fieldValue"
        (valueChange)="updateField($event)"
-        classes="form--text-field">
-      </op-basic-single-date-picker>
+        classes="form--text-field" />
    </span>
  }
  <input type="hidden"
@@ -1,9 +1,7 @@
@if (available) {
  @for (action of actions; track action.href) {
-    <wp-custom-action
-      [workPackage]="workPackage"
+    <wp-custom-action [workPackage]="workPackage"
      [action]="action"
-      class="custom-action">
-    </wp-custom-action>
+      class="custom-action" />
  }
 }
@@ -1,24 +1,20 @@
 <div class="work-packages--details-toolbar">
-  <wp-watcher-button [workPackage]="workPackage">
-  </wp-watcher-button>
+  <wp-watcher-button [workPackage]="workPackage" />

  @if (displayNotificationsButton) {
-    <op-work-package-mark-notification-button
-      [workPackage]="workPackage"
+    <op-work-package-mark-notification-button [workPackage]="workPackage"
      data-test-selector="mark-notification-read-button"
-    ></op-work-package-mark-notification-button>
+     />
  }

  @if (displayShareButton$ | async) {
    <wp-share-button [workPackage]="workPackage"
-      >
-    </wp-share-button>
+       />
  }

  @if (displayReminderButton$ | async) {
    <wp-reminder-button [workPackage]="workPackage"
-      >
-    </wp-reminder-button>
+       />
  }

  <button class="button dropdown-relative"
@@ -3,5 +3,5 @@
  (click)="activate($event)"
  tabindex="-1"
  attr.data-test-selector="{{fieldName}}">
-  <ng-content></ng-content>
+  <ng-content />
 </span>
@@ -16,19 +16,18 @@
              > *</span>
            }
          </wp-replacement-label>
-          <attribute-help-text [attribute]="descriptor.name" [attributeScope]="'WorkPackage'"></attribute-help-text>
+          <attribute-help-text [attribute]="descriptor.name" [attributeScope]="'WorkPackage'" />
        </div>
      }
      @if (!descriptor.multiple && descriptor.field) {
        <div
          class="wp-attribute-group--attribute-value-container attributes-key-value--value-container"
          >
-          <op-editable-attribute-field
-            [ngClass]="{'wp-edit-formattable-field': descriptor.field!.isFormattable }"
+          <op-editable-attribute-field [ngClass]="{'wp-edit-formattable-field': descriptor.field!.isFormattable }"
            [resource]="workPackage"
            [isDropTarget]="descriptor.field!.isFormattable"
            [fieldName]="descriptor.field!.name"
-          ></op-editable-attribute-field>
+           />
        </div>
      }
    }
@@ -56,14 +56,13 @@ import { WorkPackageViewOutputs } from 'core-app/features/work-packages/routing/
      (stateLinkClicked)="stateLinkClicked.emit($event)"
      [showEmptyResultsBox]="true"
      [showInfoButton]="true"
-      [shrinkOnMobile]="true">
-    </wp-card-view>
+      [shrinkOnMobile]="true" />
    
    @if (showResizer) {
      <div
        class="hidden-for-mobile hide-when-print">
        <wp-resizer [elementClass]="resizerClass"
-        [localStorageKey]="resizerStorageKey"></wp-resizer>
+        [localStorageKey]="resizerStorageKey" />
      </div>
    }
    `,
@@ -46,7 +46,7 @@
        [attr.colspan]="colspan"
        class="wp-inline-reference-row-td -no-highlighting"
        >
-        <ng-container *ngComponentOutlet="referenceClass; injector: injector"></ng-container>
+        <ng-container *ngComponentOutlet="referenceClass; injector: injector" />
      </td>
    </tr>
  }
@@ -2,20 +2,19 @@
  <div
    class="work-package--new-state work-packages--new work-packages--show-view toolbar-container"
    >
-    <op-breadcrumbs
-      [items]="breadcrumbItems()"
-    ></op-breadcrumbs>
+    <op-breadcrumbs [items]="breadcrumbItems()"
+     />
    <edit-form [resource]="newWorkPackage"
      [skippedFields]="['status', 'type']"
      [inEditMode]="true"
      (onSaved)="onSaved($event)">
      <div class="toolbar">
        <div class="title-container">
-          <wp-type-status [workPackage]="newWorkPackage"></wp-type-status>
+          <wp-type-status [workPackage]="newWorkPackage" />
        </div>
        <ul class="toolbar-items hide-when-print">
          <li class="toolbar-item hidden-for-tablet">
-            <opce-zen-mode-toggle-button></opce-zen-mode-toggle-button>
+            <opce-zen-mode-toggle-button />
          </li>
          <li class="toolbar-item hidden-for-tablet">
            <button id="create-wp-menu-button"
@@ -28,10 +27,8 @@
        </ul>
      </div>
      <wp-single-view [workPackage]="newWorkPackage"
-        [showProject]="copying">
-      </wp-single-view>
-      <wp-edit-actions-bar (onCancel)="cancelAndBackToList()">
-      </wp-edit-actions-bar>
+        [showProject]="copying" />
+      <wp-edit-actions-bar (onCancel)="cancelAndBackToList()" />
    </edit-form>
  </div>
 }
@@ -8,7 +8,7 @@
      (onSaved)="onSaved($event)">
      <div class="work-packages--details-content -create-mode">
        <div class="work-packages--new-details-header">
-          <wp-type-status [workPackage]="newWorkPackage"></wp-type-status>
+          <wp-type-status [workPackage]="newWorkPackage" />
          <div class="wp--details--switch-fullscreen-wrapper">
            <a (click)="switchToFullscreen()"
              class="work-packages-show-view-button wp--details--switch-fullscreen ">
@@ -17,17 +17,14 @@
          </div>
        </div>
        <wp-single-view [workPackage]="newWorkPackage"
-          [showProject]="copying">
-        </wp-single-view>
+          [showProject]="copying" />
      </div>
      <div class="work-packages--details-toolbar-container">
-        <wp-edit-actions-bar
-          (onCancel)="cancelAndBackToList()">
-        </wp-edit-actions-bar>
+        <wp-edit-actions-bar (onCancel)="cancelAndBackToList()" />
      </div>
      <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
        <wp-resizer [elementClass]="'work-packages-partitioned-page--content-right'"
-        [localStorageKey]="'openProject-splitViewFlexBasis'"></wp-resizer>
+        [localStorageKey]="'openProject-splitViewFlexBasis'" />
      </div>
    </edit-form>
  </div>
@@ -2,14 +2,12 @@
     data-indicator-name="relationAddChild">
  <div class="wp-relations-create--form wp-relations--add-form">
    <div class="wp-relations-input-section">
-      <wp-relations-autocomplete
-          [workPackage]="workPackage"
+      <wp-relations-autocomplete [workPackage]="workPackage"
          (change)="onSelected($event)"
          [filters]="queryFilters"
          [filterCandidatesFor]="relationType"
          data-test-selector="wp-relations-autocomplete"
-          hiddenOverflowContainer=".work-packages-full-view--split-left">
-      </wp-relations-autocomplete>
+          hiddenOverflowContainer=".work-packages-full-view--split-left" />
    </div>
    <div class="wp-relations-controls-section relation-row">
      <button
@@ -17,7 +15,7 @@
          class="spot-link wp-create-relation--cancel"
          (click)="cancel()"
      >
-        <op-icon icon-classes="icon-remove icon-no-color" [icon-title]="text.abort"></op-icon>
+        <op-icon icon-classes="icon-remove icon-no-color" [icon-title]="text.abort" />
      </button>
    </div>
  </div>
@@ -19,6 +19,5 @@
                                        columnMenuEnabled: false,
                                        contextMenuEnabled: false,
                                        projectIdentifier: idFromLink(workPackage.project.href),
-                                        projectContext: false }" >
-  </wp-embedded-table>
+                                        projectContext: false }"  />
 }
@@ -66,7 +66,7 @@
      ></a>
      @if (relatedWorkPackage) {
        <edit-form [resource]="relatedWorkPackage">
-          <op-editable-attribute-field [resource]="relatedWorkPackage" fieldName="status"></op-editable-attribute-field>
+          <op-editable-attribute-field [resource]="relatedWorkPackage" fieldName="status" />
        </edit-form>
      }
      <div
@@ -79,10 +79,9 @@
          [title]="text.description_label"
          (click)="userInputs.showRelationInfo = !userInputs.showRelationInfo"
          >
-          <op-icon
-            icon-classes="icon-info1 icon-no-color -padded wp-relations--icon wp-relations--description-icon"
+          <op-icon icon-classes="icon-info1 icon-no-color -padded wp-relations--icon wp-relations--description-icon"
            [icon-title]="text.toggleDescription"
-          ></op-icon>
+           />
        </button>
        @if (!!relation.delete) {
          <button
@@ -92,10 +91,9 @@
            [title]="text.removeButton"
            (click)="removeRelation()"
            >
-            <op-icon
-              icon-classes="icon-remove icon-no-color -padded wp-relations--icon"
+            <op-icon icon-classes="icon-remove icon-no-color -padded wp-relations--icon"
              [icon-title]="text.removeButton"
-            ></op-icon>
+             />
          </button>
        }
      </div>
@@ -125,13 +123,12 @@
              (keyup)="handleDescriptionKey($event)"
              [(ngModel)]="userInputs.newRelationText"
            ></textarea>
-            <edit-field-controls
-              [fieldController]="fieldController"
+            <edit-field-controls [fieldController]="fieldController"
              (onSave)="saveDescription()"
              (onCancel)="cancelDescriptionEdit()"
              [saveTitle]="text.save"
              [cancelTitle]="text.cancel"
-            ></edit-field-controls>
+             />
          </div>
        }
      </div>
@@ -40,14 +40,12 @@
          </select>
        </div>
        <div class="grid-content medium-8">
-          <wp-relations-autocomplete
-            [workPackage]="workPackage"
+          <wp-relations-autocomplete [workPackage]="workPackage"
            (change)="onSelected($event)"
            (cancel)="toggleRelationsCreateForm()"
            [hiddenOverflowContainer]="'.work-packages-tab-view--overflow'"
            [selectedRelationType]="selectedRelationType"
-            data-test-selector="wp-relations-autocomplete">
-          </wp-relations-autocomplete>
+            data-test-selector="wp-relations-autocomplete" />
        </div>
        <div class="grid-content medium-1 collapse wp-relations-controls-section relation-row">
          <button
@@ -55,7 +53,7 @@
            class="spot-link wp-create-relation--cancel"
            (click)="toggleRelationsCreateForm()"
            >
-            <op-icon icon-classes="icon-remove icon-no-color -padded" [icon-title]="text.abort"></op-icon>
+            <op-icon icon-classes="icon-remove icon-no-color -padded" [icon-title]="text.abort" />
          </button>
        </div>
      </div>
@@ -27,11 +27,10 @@
    class="relation-container"
    >
    @for (relatedWorkPackage of relatedWorkPackages; track relatedWorkPackage) {
-      <wp-relation-row
-        [workPackage]="workPackage"
+      <wp-relation-row [workPackage]="workPackage"
        [groupByWorkPackageType]="groupByWorkPackageType"
        [relatedWorkPackage]="relatedWorkPackage"
-      ></wp-relation-row>
+       />
    }
  </div>
 }
@@ -8,10 +8,8 @@
        </h3>
      </div>
    </div>
-    <wp-children-query
-      [workPackage]="workPackage"
+    <wp-children-query [workPackage]="workPackage"
      [addExistingChildEnabled]="true"
-      [query]="childrenQueryProps">
-    </wp-children-query>
+      [query]="childrenQueryProps" />
  </div>
 }
@@ -15,11 +15,10 @@
          <span class="op-tab-content--header-text" [textContent]="text.attachments.label"></span>
        </div>
      }
-      <op-attachments
-        [resource]="workPackage"
+      <op-attachments [resource]="workPackage"
        (attachmentRemoved)="attachmentRemoved()"
        (attachmentAdded)="attachmentAdded()"
-      ></op-attachments>
+       />
    </section>
  }

@@ -28,14 +27,13 @@
      data-test-selector="op-tab-content--tab-section"
      class="op-tab-content--tab-section"
      >
-      <op-storage
-        [resource]="workPackage"
+      <op-storage [resource]="workPackage"
        [projectStorage]="storage"
        [allowUploading]="allowManageFileLinks$ | async"
        [allowLinking]="allowManageFileLinks$ | async"
        (fileRemoved)="attachmentRemoved()"
        (fileAdded)="attachmentAdded()"
-      ></op-storage>
+       />
    </section>
  }
 </div>
@@ -1,4 +1,4 @@
@if (workPackage) {
  <wp-single-view [workPackage]="workPackage"
-  ></wp-single-view>
+   />
 }
@@ -2,7 +2,7 @@
  <div class="detail-panel-description detail-panel--relations detail-panel--autocomplete-target"
    >
    <div class="detail-panel-description-content">
-      <wp-relations [workPackage]="workPackage"></wp-relations>
+      <wp-relations [workPackage]="workPackage" />
    </div>
  </div>
 }
@@ -12,22 +12,19 @@
      [ngClass]="{'-read-only': !allowedToRemove}">

      @for (watcher of watching; track watcher.href) {
-        <op-wp-watcher-entry
-          [watcher]="watcher">
-        </op-wp-watcher-entry>
+        <op-wp-watcher-entry [watcher]="watcher" />
      }
    </div>
    <div class="work-package--watchers-lookup hide-when-print"
      [hidden]="!allowedToAdd">
      <form name="watcherForm" novalidate>
-        <op-user-autocompleter
-          (change)="addWatcher($event)"
+        <op-user-autocompleter (change)="addWatcher($event)"
          [url]="availableWatchersPath"
          [resetOnChange]="true"
          [focusDirectly]="false"
          appendTo="body"
          class="wp-watcher--autocomplete"
-        ></op-user-autocompleter>
+         />
      </form>
    </div>
  </div>
@@ -1,11 +1,10 @@
 <div class="op-wp-watcher form--selected-value--container" opFocusWithin="button">
  <span class="op-wp-watcher--form form--selected-value">
-    <op-principal
-      [principal]="watcher"
+    <op-principal [principal]="watcher"
      [link]="true"
      size="mini"
      data-test-selector="op-wp-watcher-name"
-    ></op-principal>
+     />
  </span>
  <button
    type="button"
@@ -13,6 +12,6 @@
    [title]="text.remove"
    (click)="remove()"
  >
-    <op-icon icon-classes="icon-remove"></op-icon>
+    <op-icon icon-classes="icon-remove" />
  </button>
 </div>
@@ -8,19 +8,17 @@
        >
        <op-editable-attribute-field [resource]="workPackage"
          [wrapperClasses]="'-no-label'"
-        [fieldName]="'subject'"></op-editable-attribute-field>
+        [fieldName]="'subject'" />
      </div>
    }
    <div class="wp-info-wrapper">
      @if (!isNewResource) {
-        <wp-status-button
-          [workPackage]="workPackage">
-        </wp-status-button>
+        <wp-status-button [workPackage]="workPackage" />
      }
      @if (!isNewResource) {
        <attribute-help-text [attribute]="'status'"
          [attributeScope]="'WorkPackage'"
-        ></attribute-help-text>
+         />
      }
      @if (!isNewResource) {
        <div class="work-packages--info-row"
@@ -31,15 +29,15 @@
          because otherwise the browser would add a second space after it -->
          <span>&nbsp;</span>
          <op-user-link class="user-link"
-          [user]="workPackage.author"></op-user-link>
+          [user]="workPackage.author" />
          <span>.&nbsp;</span>
          <span [textContent]="text.infoRow.lastUpdatedOn"></span>
          <span>&nbsp;</span>
-          <op-date-time [dateTimeValue]="workPackage.updatedAt"></op-date-time>
+          <op-date-time [dateTimeValue]="workPackage.updatedAt" />
          <span>.</span>
        </div>
      }
-      <wp-custom-actions [workPackage]="workPackage" class="custom-actions"></wp-custom-actions>
+      <wp-custom-actions [workPackage]="workPackage" class="custom-actions" />
    </div>
    @if (projectContext && projectContext.field) {
      <div class="attributes-group -project-context __overflowing_element_container __overflowing_project_context"
@@ -59,11 +57,11 @@
                  }
                </wp-replacement-label>
                <attribute-help-text [attribute]="descriptor.name"
-                [attributeScope]="'WorkPackage'"></attribute-help-text>
+                [attributeScope]="'WorkPackage'" />
              </div>
              <div class="attributes-key-value--value-container">
                <op-editable-attribute-field [resource]="workPackage"
-                [fieldName]="descriptor.name"></op-editable-attribute-field>
+                [fieldName]="descriptor.name" />
              </div>
            </div>
          }
@@ -81,16 +79,14 @@
    }
    @for (component of prependedAttributeGroupComponents(); track component) {
      <ndc-dynamic [ndcDynamicComponent]="component"
-        [ndcDynamicInputs]="{ workPackage: workPackage }">
-      </ndc-dynamic>
+        [ndcDynamicInputs]="{ workPackage: workPackage }" />
    }
    <div class="attributes-group description-group">
      <div class="single-attribute work-packages--details--description">
        <op-editable-attribute-field [fieldName]="'description'"
          [resource]="workPackage"
          [isDropTarget]="true"
-          [wrapperClasses]="'-no-label'">
-        </op-editable-attribute-field>
+          [wrapperClasses]="'-no-label'" />
      </div>
    </div>
    @for (group of groupedFields; track group.name) {
@@ -106,8 +102,7 @@
            <ndc-dynamic [ndcDynamicComponent]="attributeGroupComponent(group)"
                   [ndcDynamicInputs]="{ workPackage: workPackage,
                                         group: group,
-                                         query: group.query }">
-            </ndc-dynamic>
+                                         query: group.query }" />
          </ng-container>
        }
        @if (!group.isolated) {
@@ -119,8 +114,7 @@
          </div>
          <ndc-dynamic [ndcDynamicComponent]="attributeGroupComponent(group)"
            [ndcDynamicInjector]="injector"
-            [ndcDynamicInputs]="{ workPackage: workPackage, group: group }">
-          </ndc-dynamic>
+            [ndcDynamicInputs]="{ workPackage: workPackage, group: group }" />
        }
      </div>
    }
@@ -138,23 +132,20 @@
          <span class="op-tab-content--header-text" [textContent]="text.attachments.label"></span>
        </div>
        <ndc-dynamic [ndcDynamicComponent]="attachmentListComponent()"
-          [ndcDynamicInputs]="{ resource: workPackage }">
-        </ndc-dynamic>
+          [ndcDynamicInputs]="{ resource: workPackage }" />
        @if (workPackage.canAddAttachments) {
          <ndc-dynamic [ndcDynamicComponent]="attachmentUploadComponent()"
            [ndcDynamicInputs]="{ resource: workPackage }"
-            >
-          </ndc-dynamic>
+             />
        }
      </div>
    }
    @for (storage of projectStorages | async; track storage) {
-      <op-storage
-        [resource]="workPackage"
+      <op-storage [resource]="workPackage"
        [projectStorage]="storage"
        [allowLinking]="true"
        [allowUploading]="true"
-      ></op-storage>
+       />
    }
  </div>
 }
@@ -6,14 +6,12 @@
    <div class="work-packages--type-selector work-packages--subject-element">
      <op-editable-attribute-field [resource]="workPackage"
        [wrapperClasses]="'work-packages--type-selector work-packages--subject-element -no-label'"
-        [fieldName]="'type'">
-      </op-editable-attribute-field>
+        [fieldName]="'type'" />
    </div>
    <div class="work-packages--details--subject work-packages--subject-element">
      <op-editable-attribute-field [resource]="workPackage"
        [wrapperClasses]="'work-packages--details--subject work-packages--subject-element -no-label'"
-        [fieldName]="'subject'">
-      </op-editable-attribute-field>
+        [fieldName]="'subject'" />
    </div>
  </div>
 }
@@ -4,5 +4,5 @@
    [title]="text.configureTable"
    (click)="openTableConfigurationModal()"
 >
-  <op-icon icon-classes="icon-button icon-small icon-no-color icon-settings"></op-icon>
+  <op-icon icon-classes="icon-button icon-small icon-no-color icon-settings" />
 </button>
@@ -5,11 +5,9 @@
                              [inputPlaceholder]="text.inputPlaceholder"
                              [dragAreaLabel]="text.inputDragLabel"
                              [id]="'columns-select'"
-                              (onChange)="updateSelected($event)">
-  </op-draggable-autocompleter>
+                              (onChange)="updateSelected($event)" />
 </div>

-<op-enterprise-banner-frame
-  feature="work_package_query_relation_columns"
+<op-enterprise-banner-frame feature="work_package_query_relation_columns"
  [dismissable]="true"
-></op-enterprise-banner-frame>
+ />
@@ -1,5 +1,4 @@
@if (!!filters) {
-  <op-query-filters
-    (filtersChanged)="filters = $event"
-  [filters]="filters"></op-query-filters>
+  <op-query-filters (filtersChanged)="filters = $event"
+  [filters]="filters" />
 }
@@ -1,8 +1,7 @@
 <div>
-  <op-enterprise-banner-frame
-    feature="conditional_highlighting"
+  <op-enterprise-banner-frame feature="conditional_highlighting"
    [dismissable]="false"
-  ></op-enterprise-banner-frame>
+   />

  <form>
    <p [textContent]="text.highlighting_mode.description"></p>
@@ -32,8 +31,7 @@
                     bindLabel="name"
                     name="highlighting_attributes"
                     placeholder="{{ text.highlighting_mode.inline_all_attributes }}"
-                     appendTo="body">
-          </ng-select>
+                     appendTo="body" />
        </div>
      </div>
    </div>
@@ -63,8 +61,7 @@
                     name="selected_attribute"
                     appendTo="body"
                     id="selected_attribute"
-                     class="form--select-field">
-          </ng-select>
+                     class="form--select-field" />
        </div>
      </div>
    </div>
@@ -9,16 +9,14 @@
  <div class="spot-modal--body spot-container">

    @if (!!prependModalComponent) {
-      <ng-container *ngComponentOutlet="prependModalComponent; injector: injector"></ng-container>
+      <ng-container *ngComponentOutlet="prependModalComponent; injector: injector" />
    }

    @if (tabPortalHost) {
-      <op-scrollable-tabs
-        [tabs]="availableTabs"
+      <op-scrollable-tabs [tabs]="availableTabs"
        [currentTabId]="tabPortalHost.currentTab?.id"
        (tabSelected)="switchTo($event)"
-        >
-      </op-scrollable-tabs>
+         />
    }
    <div class="tab-content" #tabContentOutlet></div>
  </div>
--- a/Show More
+++ b/Show More