From ac3940634732a1b7a24cc3929e960b493732c381 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Tue, 13 Aug 2024 19:19:09 +0200
Subject: [PATCH 01/12] Replace dynamic bootstrapped components with angular
 elements

---
 app/helpers/application_helper.rb             |  32 +--
 app/helpers/custom_fields_helper.rb           |   4 +-
 app/views/admin/backups/show.html.erb         |   2 +-
 .../settings/projects_settings/show.html.erb  |  15 +-
 .../_enterprise_feature_hint.html.erb         |   2 +-
 .../show.html.erb                             |   2 +-
 app/views/attribute_help_texts/_tab.html.erb  |   2 +-
 .../augmented/_collapsible_section.html.erb   |   6 +-
 .../colors/_color_autocomplete_field.html.erb |   2 +-
 app/views/common/_tabs.html.erb               |   2 +-
 app/views/common/upsale.html.erb              |   2 +-
 app/views/custom_actions/_form.html.erb       |   9 +-
 app/views/custom_styles/show.html.erb         |   6 +-
 app/views/enterprises/_current.html.erb       |   4 +-
 app/views/enterprises/_info.html.erb          |   2 +-
 app/views/filters/_boolean.html.erb           |   2 +-
 .../filters/date/_between_dates.html.erb      |   4 +-
 app/views/filters/date/_on_date.html.erb      |   2 +-
 .../homescreen/blocks/_new_features.html.erb  |   2 +-
 app/views/layouts/base.html.erb               |  10 +-
 app/views/members/_member_form.html.erb       |   2 +-
 .../repositories/_repository_header.html.erb  |   8 +-
 app/views/search/index.html.erb               |   6 +-
 app/views/statuses/_form.html.erb             |   2 +-
 .../types/form/_form_configuration.html.erb   |   6 +-
 app/views/versions/show.html.erb              |   4 +-
 app/views/wiki/_page_form.html.erb            |   2 +-
 app/views/work_packages/bulk/edit.html.erb    |   4 +-
 app/views/work_packages/moves/new.html.erb    |   4 +-
 .../application-architecture/README.md        |   2 +-
 frontend/.eslintrc.js                         |   2 +
 frontend/src/app/app.module.ts                | 138 +++++++++--
 ...al-search-work-packages-entry.component.ts |  46 ----
 .../global-search-work-packages.component.ts  |  28 ++-
 .../openproject-global-search.module.ts       |   4 -
 .../tabs/global-search-tabs.component.ts      |  12 +-
 .../title/global-search-title.component.ts    |  13 +-
 .../main-menu/main-menu-toggle.component.ts   |   7 +-
 .../setup/global-dynamic-components.const.ts  | 215 ------------------
 .../components/admin/backup.component.ts      |  12 +-
 .../setup/globals/dynamic-bootstrapper.ts     | 129 -----------
 frontend/src/app/core/setup/init-globals.ts   |   1 -
 .../editable-query-props.component.ts         |  11 +-
 .../type-form-configuration.component.ts      |   4 +-
 .../ee-active-saved-trial.component.ts        |   3 +-
 .../enterprise/enterprise-base.component.ts   |   3 +-
 .../free-trial-button.component.ts            |  11 +-
 .../blocks/new-features.component.ts          |   4 +-
 .../in-app-notification-bell.component.ts     |   3 +-
 .../app/features/plugins/plugin-context.ts    |  26 +--
 .../user/user-activity.component.ts           |  13 +-
 .../zen-mode-toggle-button.component.ts       |   3 +-
 .../custom-date-action-admin.component.ts     |   7 +-
 .../components/wp-new/wp-new-full-view.html   |   2 +-
 .../routing/wp-full-view/wp-full-view.html    |   4 +-
 .../static-attribute-help-text.component.ts   |   3 +-
 .../collapsible-section.component.ts          |   7 +-
 .../colors/colors-autocompleter.component.ts  |   7 +-
 .../copy-to-clipboard.component.ts            |  10 +-
 .../basic-single-date-picker.component.ts     |  13 +-
 .../modal-single-date-picker.component.html   |   2 +-
 .../modal-single-date-picker.component.ts     |  19 +-
 .../dynamic-bootstrap.component.html          |   4 -
 .../dynamic-bootstrap.component.spec.ts       |  57 -----
 .../dynamic-bootstrap.component.ts            |  41 ----
 .../dynamic-bootstrap.module.ts               |   8 -
 .../ckeditor-augmented-textarea.component.ts  |   2 -
 .../ckeditor/ckeditor-preview.service.ts      |  26 +--
 .../enterprise-banner.component.ts            |  12 +-
 .../enterprise-page.component.html            |   2 +-
 .../enterprise-page.component.ts              |  12 +-
 .../formattable-display-field.module.ts       |   4 -
 .../grids/grid/page/grid-page.component.html  |   2 +-
 .../custom-text/custom-text.component.ts      |  10 +-
 .../wp-overview/wp-overview.component.html    |   4 +-
 .../header-project-select.component.ts        |   3 +-
 .../add-section-dropdown.component.ts         |   7 +-
 .../hide-section-link.component.ts            |   3 +-
 .../show-section-dropdown.component.ts        |  63 -----
 .../modal/modal-overlay.component.ts          |   8 +-
 .../no-results/no-results.component.ts        |  11 +-
 .../op-non-working-days-list.component.html   |   5 +-
 .../op-non-working-days-list.component.ts     |   3 +-
 .../persistent-toggle.component.ts            |   3 +-
 .../resizer/main-menu-resizer.component.ts    |  11 +-
 .../storage-information.html                  |   4 +-
 .../storage-login-button.component.ts         |  11 +-
 .../content-tabs/content-tabs.component.ts    |  11 +-
 .../edit/trigger-actions-entry.component.ts   |  20 +-
 .../toaster/toasts-container.component.ts     |   7 +-
 .../overview/wp-overview-graph.component.ts   |   7 +-
 frontend/src/app/shared/shared.module.ts      |  47 ++--
 .../drop-modal/drop-modal-portal.component.ts |  12 +-
 .../components/switch/switch.component.ts     |   9 +-
 .../text_formatting/filters/macro_filter.rb   |   3 +-
 .../filters/macros/github_pull_request.rb     |  48 ++++
 .../menu_manager/top_menu/projects_menu.rb    |   2 +-
 lib/redmine/menu_manager/top_menu_helper.rb   |   2 +-
 lib/tabular_form_builder.rb                   |   2 +-
 .../default.html.erb                          |  12 +-
 .../avatars/users/_local_avatars.html.erb     |   2 +-
 .../avatar-upload-form.component.ts           |  11 +-
 modules/avatars/frontend/module/main.ts       |   5 -
 .../app/views/rb_sprints/_sprint.html.erb     |   4 +-
 .../augment/cost-subform.augment.service.ts   |   8 -
 .../costs/app/views/cost_types/index.html.erb |   2 +-
 modules/costs/app/views/costlog/edit.html.erb |   4 +-
 .../costs/app/views/my/timer/_menu.html.erb   |   2 +-
 .../frontend/module/main.ts                   |  20 +-
 .../pull-request-macro.component.ts           |   3 -
 modules/reporting/lib/widget/filters/date.rb  |   4 +-
 .../reporting/lib/widget/reporting_widget.rb  |   1 +
 .../reporting/lib/widget/table/entry_table.rb |   8 +-
 .../_project_folder_form.html.erb             |   4 +-
 spec/lib/custom_field_form_builder_spec.rb    |   6 +-
 spec/lib/tabular_form_builder_spec.rb         |   4 +-
 spec/support/capybara_browser_logs.rb         |   2 +-
 spec/support/pages/custom_fields.rb           |   2 +-
 spec/support/pages/notifications/center.rb    |   2 +-
 119 files changed, 453 insertions(+), 1053 deletions(-)
 delete mode 100644 frontend/src/app/core/global_search/global-search-work-packages-entry.component.ts
 delete mode 100644 frontend/src/app/core/setup/global-dynamic-components.const.ts
 delete mode 100644 frontend/src/app/core/setup/globals/dynamic-bootstrapper.ts
 delete mode 100644 frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.html
 delete mode 100644 frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.spec.ts
 delete mode 100644 frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.ts
 delete mode 100644 frontend/src/app/shared/components/dynamic-bootstrap/dynamic-bootstrap.module.ts
 delete mode 100644 frontend/src/app/shared/components/hide-section/show-section-dropdown.component.ts
 create mode 100644 lib/open_project/text_formatting/filters/macros/github_pull_request.rb

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index e42b67248862..341888e7390d 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -174,7 +174,7 @@ def labeled_check_box_tags(name, collection, options = {})
   def html_hours(text)
     text.gsub(%r{(\d+)\.(\d+)},
               '<span class="hours hours-int">\1</span><span class="hours hours-dec">.\2</span>')
-      .html_safe
+        .html_safe
   end
 
   def authoring(created, author, options = {})
@@ -202,7 +202,7 @@ def time_tag(time)
     else
       datetime = time.acts_like?(:time) ? time.xmlschema : time.iso8601
       content_tag(:time, text, datetime:,
-                               title: format_time(time), class: "timestamp")
+                  title: format_time(time), class: "timestamp")
     end
   end
 
@@ -253,18 +253,18 @@ def accesskey(s)
   # Same as Rails' simple_format helper without using paragraphs
   def simple_format_without_paragraph(text)
     text.to_s
-      .gsub(/\r\n?/, "\n")                    # \r\n and \r -> \n
-      .gsub(/\n\n+/, "<br /><br />")          # 2+ newline  -> 2 br
-      .gsub(/([^\n]\n)(?=[^\n])/, '\1<br />') # 1 newline   -> br
-      .html_safe
+        .gsub(/\r\n?/, "\n") # \r\n and \r -> \n
+        .gsub(/\n\n+/, "<br /><br />") # 2+ newline  -> 2 br
+        .gsub(/([^\n]\n)(?=[^\n])/, '\1<br />') # 1 newline   -> br
+        .html_safe
   end
 
   def lang_options_for_select(blank = true)
     auto = if blank && (valid_languages - all_languages) == (all_languages - valid_languages)
-             [["(auto)", ""]]
-           else
-             []
-           end
+      [["(auto)", ""]]
+    else
+      []
+    end
 
     mapped_languages = valid_languages.map { |lang| translate_language(lang) }
 
@@ -347,7 +347,7 @@ def current_layout
   def progress_bar(pcts, options = {})
     pcts = Array(pcts).map(&:round)
     closed = pcts[0]
-    done   = pcts[1] || 0
+    done = pcts[1] || 0
     width = options[:width] || "100px;"
     legend = options[:legend] || ""
     total_progress = options[:hide_total_progress] ? "" : t(:total_progress)
@@ -356,7 +356,7 @@ def progress_bar(pcts, options = {})
     content_tag :span do
       progress = content_tag :span, class: "progress-bar", style: "width: #{width}" do
         concat content_tag(:span, "", class: "inner-progress closed", style: "width: #{closed}%")
-        concat content_tag(:span, "", class: "inner-progress done",   style: "width: #{done}%")
+        concat content_tag(:span, "", class: "inner-progress done", style: "width: #{done}%")
       end
       progress + content_tag(:span, "#{legend}#{percent_sign} #{total_progress}", class: "progress-bar-legend")
     end
@@ -369,8 +369,10 @@ def checked_image(checked = true)
   end
 
   def calendar_for(*_args)
-    ActiveSupport::Deprecation.warn "calendar_for has been removed. Please use the op-basic-single-date-picker angular component instead",
-                                    caller
+    ActiveSupport::Deprecation.warn(
+      "calendar_for has been removed. Please use the opce-basic-single-date-picker angular component instead",
+      caller
+    )
   end
 
   def locale_first_day_of_week
@@ -435,7 +437,7 @@ def permitted_params
   def translate_language(lang_code)
     # rename in-context translation language name for the language select box
     if lang_code.to_sym == Redmine::I18n::IN_CONTEXT_TRANSLATION_CODE &&
-       ::I18n.locale != Redmine::I18n::IN_CONTEXT_TRANSLATION_CODE
+      ::I18n.locale != Redmine::I18n::IN_CONTEXT_TRANSLATION_CODE
       [Redmine::I18n::IN_CONTEXT_TRANSLATION_NAME, lang_code.to_s]
     else
       [I18n.t("cldr.language_name", locale: lang_code), lang_code.to_s]
diff --git a/app/helpers/custom_fields_helper.rb b/app/helpers/custom_fields_helper.rb
index fa2e4b641e9d..6d16917b3631 100644
--- a/app/helpers/custom_fields_helper.rb
+++ b/app/helpers/custom_fields_helper.rb
@@ -72,7 +72,7 @@ def custom_field_tag(name, custom_value)
 
     tag = case field_format.try(:edit_as)
           when "date"
-            angular_component_tag "op-basic-single-date-picker",
+            angular_component_tag "opce-basic-single-date-picker",
                                   inputs: {
                                     required: custom_field.is_required,
                                     value: custom_value.value,
@@ -150,7 +150,7 @@ def custom_field_tag_for_bulk_edit(name, custom_field, project = nil)
 
     case field_format.try(:edit_as)
     when "date"
-      angular_component_tag "op-modal-single-date-picker",
+      angular_component_tag "opce-modal-single-date-picker",
                             inputs: {
                               id: field_id,
                               name: field_name
diff --git a/app/views/admin/backups/show.html.erb b/app/views/admin/backups/show.html.erb
index 4c9d15683957..1b6f6fa64d16 100644
--- a/app/views/admin/backups/show.html.erb
+++ b/app/views/admin/backups/show.html.erb
@@ -90,7 +90,7 @@ See COPYRIGHT and LICENSE files for more details.
 <% end %>
 
 <% if @backup_token.present? %>
-<%= tag :backup, data: {
+<%= angular_component_tag "opce-backup", data: {
   'job-status-id': @job_status_id,
   'last-backup-date': @last_backup_date,
   'last-backup-attachment-id': @last_backup_attachment_id,
diff --git a/app/views/admin/settings/projects_settings/show.html.erb b/app/views/admin/settings/projects_settings/show.html.erb
index aabbee95cf61..f8ee4cf5648e 100644
--- a/app/views/admin/settings/projects_settings/show.html.erb
+++ b/app/views/admin/settings/projects_settings/show.html.erb
@@ -61,14 +61,13 @@ See COPYRIGHT and LICENSE files for more details.
       </div>
       <span class="form--field-container">
         <span class="form--text-field-container">
-          <%= content_tag 'editable-query-props',
-                          '',
-                          data: {
-                            name: 'settings[project_gantt_query]',
-                            id: 'settings_project_gantt_query',
-                            query: ::Projects::GanttQueryGeneratorService.current_query,
-                            'url-params': 'true'
-                          }
+          <%= angular_component_tag 'opce-editable-query-props',
+                                    data: {
+                                      name: 'settings[project_gantt_query]',
+                                      id: 'settings_project_gantt_query',
+                                      query: ::Projects::GanttQueryGeneratorService.current_query,
+                                      'url-params': 'true'
+                                    }
           %>
         </span>
       </span>
diff --git a/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb b/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb
index 88daaf178482..d82dc602b7c1 100644
--- a/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb
+++ b/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb
@@ -1,7 +1,7 @@
 <% unless EnterpriseToken.allows_to?(ee_feature) %>
   <span class="form--field -indented">
     <%=
-    angular_component_tag 'op-enterprise-banner',
+    angular_component_tag 'opce-enterprise-banner',
                           inputs: {
                             collapsible: true,
                             textMessage: explanation,
diff --git a/app/views/admin/settings/working_days_and_hours_settings/show.html.erb b/app/views/admin/settings/working_days_and_hours_settings/show.html.erb
index 6dd8ceaac2ba..80f82d5479fc 100644
--- a/app/views/admin/settings/working_days_and_hours_settings/show.html.erb
+++ b/app/views/admin/settings/working_days_and_hours_settings/show.html.erb
@@ -90,7 +90,7 @@ See COPYRIGHT and LICENSE files for more details.
       <p>
         <%= t("working_days.instance_wide_info") %>
       </p>
-      <%= angular_component_tag "op-non-working-days-list",
+      <%= angular_component_tag "opce-non-working-days-list",
                                 data: { modified_non_working_days: @modified_non_working_days } %>
 
     </fieldset>
diff --git a/app/views/attribute_help_texts/_tab.html.erb b/app/views/attribute_help_texts/_tab.html.erb
index edc64251d148..1da41bb295ac 100644
--- a/app/views/attribute_help_texts/_tab.html.erb
+++ b/app/views/attribute_help_texts/_tab.html.erb
@@ -42,7 +42,7 @@
                           edit_attribute_help_text_path(attribute_help_text) %>
             </td>
             <td>
-              <%= angular_component_tag 'attribute-help-text',
+              <%= angular_component_tag 'opce-attribute-help-text',
                                         inputs: {
                                           helpTextId: attribute_help_text.id,
                                           attribute: attribute_help_text.attribute_name,
diff --git a/app/views/augmented/_collapsible_section.html.erb b/app/views/augmented/_collapsible_section.html.erb
index b223a5c174aa..4b9986a9ffd9 100644
--- a/app/views/augmented/_collapsible_section.html.erb
+++ b/app/views/augmented/_collapsible_section.html.erb
@@ -1,6 +1,6 @@
-<collapsible-section-augment initially-expanded="<%= initiallyExpanded %>"
+<opce-collapsible-section-augment initially-expanded="<%= initiallyExpanded %>"
                              section-title="<%= title %>">
-</collapsible-section-augment>
-<div class="collapsible-section-augment--body" hidden>
+</opce-collapsible-section-augment>
+<div class="opce-collapsible-section-augment--body" hidden>
   <%= capture(&block) %>
 </div>
diff --git a/app/views/colors/_color_autocomplete_field.html.erb b/app/views/colors/_color_autocomplete_field.html.erb
index e0c6ee7820a1..7f62de55413c 100644
--- a/app/views/colors/_color_autocomplete_field.html.erb
+++ b/app/views/colors/_color_autocomplete_field.html.erb
@@ -7,7 +7,7 @@
   </label>
   <div class="form--field-container">
     <%= form.hidden_field :color_id %>
-    <%= content_tag('colors-autocompleter',
+    <%= content_tag('opce-colors-autocompleter',
                     '',
                     class: "colors-autocomplete form--select-container " + "#{container_class.present? ? container_class : '-middle'}",
                     data: { colors: options_for_colors(object),
diff --git a/app/views/common/_tabs.html.erb b/app/views/common/_tabs.html.erb
index 85c1c9a57684..d451fb41ac04 100644
--- a/app/views/common/_tabs.html.erb
+++ b/app/views/common/_tabs.html.erb
@@ -29,7 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 <% gon.contentTabs = { tabs: tabs.to_json.html_safe, selected: selected_tab.to_json.html_safe } %>
 
 <% if with_tab_nav %>
-  <content-tabs></content-tabs>
+  <opce-content-tabs></opce-content-tabs>
 <% end %>
 
 <%= content_tag 'div',
diff --git a/app/views/common/upsale.html.erb b/app/views/common/upsale.html.erb
index 503f19ece9dd..227ee9e63f1f 100644
--- a/app/views/common/upsale.html.erb
+++ b/app/views/common/upsale.html.erb
@@ -56,5 +56,5 @@
       <%= spot_icon('enterprise-addons') %>
       <span class="button--text"><%= t('admin.enterprise.buttons.upgrade') %></span>
     <% end %>
-    <free-trial-button></free-trial-button>
+    <opce-free-trial-button></opce-free-trial-button>
 </div>
diff --git a/app/views/custom_actions/_form.html.erb b/app/views/custom_actions/_form.html.erb
index 0c6909b28086..b1e2620f55a7 100644
--- a/app/views/custom_actions/_form.html.erb
+++ b/app/views/custom_actions/_form.html.erb
@@ -66,7 +66,8 @@
           <% elsif %i(date_property).include?(action.type) %>
             <div class="form--field-container">
               <% date = action.values.first %>
-              <%= tag 'custom-date-action-admin', data: { 'field-value': date.try(:iso8601) || date, 'field-name': input_name } %>
+              <%= angular_component_tag 'opce-custom-date-action-admin',
+                                        data: { 'field-value': date.try(:iso8601) || date, 'field-name': input_name } %>
             </div>
           <% elsif %i(string_property text_property).include?(action.type) %>
             <div class="form--field-container">
@@ -101,7 +102,7 @@
                                           step: 1 %>
             </div>
           <% end %>
-          <hide-section-link data-section-name="<%= action.key %>"></hide-section-link>
+          <opce-hide-section-link data-section-name="<%= action.key %>"></opce-hide-section-link>
         </div>
       </section>
     <% end %>
@@ -116,8 +117,8 @@
     </label>
     <span class="form--field-container">
       <span class="form--text-field-container -middle">
-        <add-section-dropdown data-html-id="custom-actions-form--add-action">
-        </add-section-dropdown>
+        <opce-add-section-dropdown data-html-id="custom-actions-form--add-action">
+        </opce-add-section-dropdown>
       </span>
     </span>
   </div>
diff --git a/app/views/custom_styles/show.html.erb b/app/views/custom_styles/show.html.erb
index 1368cf54c11d..9ffedb2176f1 100644
--- a/app/views/custom_styles/show.html.erb
+++ b/app/views/custom_styles/show.html.erb
@@ -156,10 +156,10 @@ See COPYRIGHT and LICENSE files for more details.
 <% end %>
 
 <% custom_export_expanded = @custom_style.id && (@custom_style.export_logo.present? || @custom_style.export_cover.present? || @custom_style.export_cover_text_color.present?) %>
-<collapsible-section-augment initially-expanded="<%= custom_export_expanded %>"
+<opce-collapsible-section-augment initially-expanded="<%= custom_export_expanded %>"
                              section-title="<%= I18n.t(:label_custom_pdf_export_settings) %>">
-</collapsible-section-augment>
-<div class="collapsible-section-augment--body" hidden>
+</opce-collapsible-section-augment>
+<div class="opce-collapsible-section-augment--body" hidden>
 
   <%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>
     <section class="form--section">
diff --git a/app/views/enterprises/_current.html.erb b/app/views/enterprises/_current.html.erb
index 238c3a707627..06eb4e6d5256 100644
--- a/app/views/enterprises/_current.html.erb
+++ b/app/views/enterprises/_current.html.erb
@@ -1,4 +1,4 @@
-<enterprise-active-saved-trial
+<opce-enterprise-active-saved-trial
   data-subscriber="<%= @current_token.subscriber %>"
   data-email="<%= @current_token.mail %>"
   data-company="<%= @current_token.try(:company) %>"
@@ -9,7 +9,7 @@
   data-is-expired="<%= @current_token.expired?(reprieve: false) %>"
   data-reprieve-days-left="<%= @current_token.reprieve_days_left %>"
 >
-</enterprise-active-saved-trial>
+</opce-enterprise-active-saved-trial>
 
 <%= form_tag(enterprise_path,
              method: :delete,
diff --git a/app/views/enterprises/_info.html.erb b/app/views/enterprises/_info.html.erb
index e805153655b8..14ac77975146 100644
--- a/app/views/enterprises/_info.html.erb
+++ b/app/views/enterprises/_info.html.erb
@@ -34,7 +34,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="upsale--information-container">
   <div class='upsale-information'>
-    <enterprise-base></enterprise-base>
+    <opce-enterprise-base></opce-enterprise-base>
   </div>
 
   <div class='upsale-actions'>
diff --git a/app/views/filters/_boolean.html.erb b/app/views/filters/_boolean.html.erb
index 14e336108f18..983afb848aa9 100644
--- a/app/views/filters/_boolean.html.erb
+++ b/app/views/filters/_boolean.html.erb
@@ -1,7 +1,7 @@
 <label class="advanced-filters--filter-value"
        data-filter--filters-form-target="filterValueContainer"
        data-filter-name="<%= filter.name %>">
-  <%= angular_component_tag 'spot-switch',
+  <%= angular_component_tag 'opce-spot-switch',
                             inputs: {
                               name: "v-" + filter.class.key.to_s,
                               checked: filter.values.first != 'f',
diff --git a/app/views/filters/date/_between_dates.html.erb b/app/views/filters/date/_between_dates.html.erb
index ea25818fb2a7..b1b0f46240a9 100644
--- a/app/views/filters/date/_between_dates.html.erb
+++ b/app/views/filters/date/_between_dates.html.erb
@@ -1,6 +1,6 @@
 <div class="between-dates">
   <span><%= t(:label_date_from) %>:</span>
-  <%= angular_component_tag 'op-basic-single-date-picker',
+  <%= angular_component_tag 'opce-basic-single-date-picker',
                             inputs: {
                               value: from_value,
                               id: "between-dates-from-value-#{filter.name}",
@@ -8,7 +8,7 @@
                             }
   %>
   <span><%= t(:label_date_to) %>:</span>
-  <%= angular_component_tag 'op-basic-single-date-picker',
+  <%= angular_component_tag 'opce-basic-single-date-picker',
                             inputs: {
                               value: to_value,
                               id: "between-dates-to-value-#{filter.name}",
diff --git a/app/views/filters/date/_on_date.html.erb b/app/views/filters/date/_on_date.html.erb
index 01f1ade947c1..7cc2a8fbd352 100644
--- a/app/views/filters/date/_on_date.html.erb
+++ b/app/views/filters/date/_on_date.html.erb
@@ -1,6 +1,6 @@
 <div class="on-date">
   <div class="form--field-container -visible-overflow">
-    <%= angular_component_tag 'op-basic-single-date-picker',
+    <%= angular_component_tag 'opce-basic-single-date-picker',
                               inputs: {
                                 value: value,
                                 id: "on-date-value-#{filter.name}",
diff --git a/app/views/homescreen/blocks/_new_features.html.erb b/app/views/homescreen/blocks/_new_features.html.erb
index a84a40236383..d005bbc7e571 100644
--- a/app/views/homescreen/blocks/_new_features.html.erb
+++ b/app/views/homescreen/blocks/_new_features.html.erb
@@ -1,3 +1,3 @@
 <%= render 'homescreen/blocks/header', title: t(:label_new_features) %>
 
-<homescreen-new-features-block></homescreen-new-features-block>
+<opce-homescreen-new-features-block></opce-homescreen-new-features-block>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index f156ae23e787..3fc45b8b3903 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -62,9 +62,9 @@ See COPYRIGHT and LICENSE files for more details.
     </p>
   </div>
 </noscript>
-<op-toasts-container></op-toasts-container>
-<op-modal-overlay></op-modal-overlay>
-<spot-drop-modal-portal></spot-drop-modal-portal>
+<opce-toasts-container></opce-toasts-container>
+<opce-modal-overlay></opce-modal-overlay>
+<opce-spot-drop-modal-portal></opce-spot-drop-modal-portal>
 <% main_menu = render_main_menu(local_assigns.fetch(:menu_name, nil), @project) %>
 <% side_displayed = content_for?(:sidebar) || content_for?(:main_menu) || !main_menu.blank? %>
 <% initial_classes = initial_menu_classes(side_displayed, show_decoration) %>
@@ -75,7 +75,7 @@ See COPYRIGHT and LICENSE files for more details.
         <h1 class="hidden-for-sighted">
           <%= t(:label_top_menu) %>
         </h1>
-        <main-menu-toggle></main-menu-toggle>
+        <opce-main-menu-toggle></opce-main-menu-toggle>
         <a href="" class="hidden-for-sighted skip-navigation-link"
            id="skip-navigation--content"
            aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
@@ -102,7 +102,7 @@ See COPYRIGHT and LICENSE files for more details.
         data-application-target="dynamic"
       >
         <h1 class="hidden-for-sighted"><%= t(:label_main_menu) %></h1>
-        <main-menu-resizer></main-menu-resizer>
+        <opce-main-menu-resizer></opce-main-menu-resizer>
         <div id="menu-sidebar">
           <%= main_menu %>
           <%= content_for :main_menu %>
diff --git a/app/views/members/_member_form.html.erb b/app/views/members/_member_form.html.erb
index 2f861fb4a092..b5ce3f3ca198 100644
--- a/app/views/members/_member_form.html.erb
+++ b/app/views/members/_member_form.html.erb
@@ -72,7 +72,7 @@ See COPYRIGHT and LICENSE files for more details.
         <div class="form--field">
           <%= styled_label_tag :member_role_ids do %>
             <%= content_tag :span, t(:label_role_search) %>
-            <%= angular_component_tag 'attribute-help-text',
+            <%= angular_component_tag 'opce-attribute-help-text',
                                       inputs: {
                                         attribute: 'members',
                                         attributeScope: 'Project'
diff --git a/app/views/repositories/_repository_header.html.erb b/app/views/repositories/_repository_header.html.erb
index 81e20bd99845..c4ceadb34974 100644
--- a/app/views/repositories/_repository_header.html.erb
+++ b/app/views/repositories/_repository_header.html.erb
@@ -27,7 +27,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<persistent-toggle data-identifier="repository.checkout_instructions"></persistent-toggle>
+<opce-persistent-toggle data-identifier="repository.checkout_instructions"></opce-persistent-toggle>
 <%= toolbar title: t('repositories.named_repository',
                      vendor_name: @repository.class.vendor_name) do %>
   <% if @instructions && @instructions.available? %>
@@ -40,9 +40,9 @@ See COPYRIGHT and LICENSE files for more details.
            value="<%= @instructions.checkout_url(true) %>"
            readonly>
     <% csp_onclick('this.focus(); this.select();', '#repository-checkout-url') %>
-    <copy-to-clipboard click-target=".repository-checkout-copy-button"
+    <opce-copy-to-clipboard click-target=".repository-checkout-copy-button"
                        clipboard-target="#repository-checkout-url">
-    </copy-to-clipboard>
+    </opce-copy-to-clipboard>
     <button class="repository-checkout-copy-button toolbar-input--affix toolbar-input-group--affix -append"
             title="<%= t(:button_copy_to_clipboard) %>">
       <%= op_icon('icon-copy') %>
@@ -82,5 +82,3 @@ See COPYRIGHT and LICENSE files for more details.
   <%= render partial: 'checkout_instructions',
              locals: { repository: @repository, instructions: @instructions } %>
 <% end %>
-
-
diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index 4646329ee85f..92da85f9c56d 100644
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@@ -32,12 +32,12 @@ See COPYRIGHT and LICENSE files for more details.
 
 <% end %>
 
-<global-search-title></global-search-title>
+<opce-global-search-title></opce-global-search-title>
 
-<global-search-tabs></global-search-tabs>
+<opce-global-search-tabs></opce-global-search-tabs>
 
 <% if params[:work_packages].present? %>
-  <global-search-work-packages-entry></global-search-work-packages-entry>
+  <opce-global-search-work-packages></opce-global-search-work-packages>
 <% else %>
 
   <h3><%= t(:label_result_plural) %> (<%= @results_count&.values&.sum || 0 %>)</h3>
diff --git a/app/views/statuses/_form.html.erb b/app/views/statuses/_form.html.erb
index 0f2f43fc165a..ccc96b2d68d0 100644
--- a/app/views/statuses/_form.html.erb
+++ b/app/views/statuses/_form.html.erb
@@ -44,7 +44,7 @@ See COPYRIGHT and LICENSE files for more details.
     <% if disabled %>
       <div class="form--field-instructions -no-italic -xwide">
         <%=
-          angular_component_tag "op-enterprise-banner",
+          angular_component_tag "opce-enterprise-banner",
                                 inputs: {
                                   collapsible: true,
                                   textMessage: t("text_wp_status_read_only_html"),
diff --git a/app/views/types/form/_form_configuration.html.erb b/app/views/types/form/_form_configuration.html.erb
index 8646594c899d..8d4551607bdf 100644
--- a/app/views/types/form/_form_configuration.html.erb
+++ b/app/views/types/form/_form_configuration.html.erb
@@ -34,12 +34,12 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="grid-block -visible-overflow wrap">
       <div class="grid-content -visible-overflow small-12 large-10">
         <% if EnterpriseToken.show_banners? %>
-          <%= angular_component_tag 'op-no-results',
+          <%= angular_component_tag 'opce-no-results',
                                     inputs: {
                                       title: t('text_form_configuration') + t('text_custom_field_hint_activate_per_project'),
                                     }
           %>
-          <%= angular_component_tag 'op-enterprise-banner',
+          <%= angular_component_tag 'opce-enterprise-banner',
                                     inputs: {
                                       collapsible: true,
                                       opReferrer: 'form-configuration',
@@ -55,7 +55,7 @@ See COPYRIGHT and LICENSE files for more details.
 
         <% no_filter_query = ::API::V3::Queries::QueryParamsRepresenter.new(Query.new_default.tap { |q| q.filters = [] }).to_json %>
         <%= f.hidden_field :attribute_groups, value: '', class: 'admin-type-form--hidden-field'  %>
-        <%= content_tag('admin-type-form-configuration',
+        <%= content_tag('opce-admin-type-form-configuration',
                         '',
                         data: {
                             'active-groups': form_attributes[:actives],
diff --git a/app/views/versions/show.html.erb b/app/views/versions/show.html.erb
index 25b6c95d35e1..b1c43a297acc 100644
--- a/app/views/versions/show.html.erb
+++ b/app/views/versions/show.html.erb
@@ -109,10 +109,10 @@ See COPYRIGHT and LICENSE files for more details.
 
   <% if @version.work_packages.count > 0 %>
     <div class="widget-box -thin -wider">
-      <wp-overview-graph
+      <opce-wp-overview-graph
         global-scope='<%= @version.systemwide? %>'
         initial-filters='<%= version_wp_overview_graph_initial_filters(@version) %>'>
-      </wp-overview-graph>
+      </opce-wp-overview-graph>
     </div>
   <% end %>
 </div>
diff --git a/app/views/wiki/_page_form.html.erb b/app/views/wiki/_page_form.html.erb
index 9b55008f36fc..8614f12f9dbf 100644
--- a/app/views/wiki/_page_form.html.erb
+++ b/app/views/wiki/_page_form.html.erb
@@ -4,7 +4,7 @@
 
 <%= editable_toolbar(form: f, field_name: :title) do %>
   <li class="toolbar-item">
-    <zen-mode-toggle-button></zen-mode-toggle-button>
+    <opce-zen-mode-toggle-button></opce-zen-mode-toggle-button>
   </li>
 <% end %>
 
diff --git a/app/views/work_packages/bulk/edit.html.erb b/app/views/work_packages/bulk/edit.html.erb
index 33dcfa74cb66..cfb90829141f 100644
--- a/app/views/work_packages/bulk/edit.html.erb
+++ b/app/views/work_packages/bulk/edit.html.erb
@@ -151,7 +151,7 @@ See COPYRIGHT and LICENSE files for more details.
           <div class="form--field">
             <%= styled_label_tag :work_package_start_date, WorkPackage.human_attribute_name(:start_date) %>
             <div class="form--field-container -visible-overflow">
-              <%= angular_component_tag 'op-basic-single-date-picker',
+              <%= angular_component_tag 'opce-basic-single-date-picker',
                                         inputs: {
                                           id: "work_package_start_date",
                                           name: "work_package[start_date]"
@@ -162,7 +162,7 @@ See COPYRIGHT and LICENSE files for more details.
           <div class="form--field">
             <%= styled_label_tag :work_package_due_date, WorkPackage.human_attribute_name(:due_date) %>
             <div class="form--field-container -visible-overflow">
-              <%= angular_component_tag 'op-basic-single-date-picker',
+              <%= angular_component_tag 'opce-basic-single-date-picker',
                                         inputs: {
                                           id: "work_package_due_date",
                                           name: "work_package[due_date]"
diff --git a/app/views/work_packages/moves/new.html.erb b/app/views/work_packages/moves/new.html.erb
index db732055f370..921b0724c6ba 100644
--- a/app/views/work_packages/moves/new.html.erb
+++ b/app/views/work_packages/moves/new.html.erb
@@ -156,7 +156,7 @@ See COPYRIGHT and LICENSE files for more details.
           <div class="form--field">
             <label class="form--label" for='start_date'><%= WorkPackage.human_attribute_name(:start_date) %></label>
             <div class="form--field-container -visible-overflow">
-              <%= angular_component_tag 'op-basic-single-date-picker',
+              <%= angular_component_tag 'opce-basic-single-date-picker',
                                         inputs: {
                                           id: "start_date",
                                           name: "start_date"
@@ -167,7 +167,7 @@ See COPYRIGHT and LICENSE files for more details.
           <div class="form--field">
             <label class="form--label" for='due_date'><%= WorkPackage.human_attribute_name(:due_date) %></label>
             <div class="form--field-container -visible-overflow">
-              <%= angular_component_tag 'op-basic-single-date-picker',
+              <%= angular_component_tag 'opce-basic-single-date-picker',
                                         inputs: {
                                           id: "due_date",
                                           name: "due_date"
diff --git a/docs/development/application-architecture/README.md b/docs/development/application-architecture/README.md
index 15a23acfae9a..2c3334808782 100644
--- a/docs/development/application-architecture/README.md
+++ b/docs/development/application-architecture/README.md
@@ -217,7 +217,7 @@ A response that is fully controlled by Rails but extended by some Angular compon
 
 3. The rendered response is returned to the Browser and Angular is initialized globally once in [`frontend/src/main.ts`](https://github.com/opf/openproject/blob/dev/frontend/src/main.ts#L48-L49).
 
-4. A global service, the [`DynamicBootstrapper`](https://github.com/opf/openproject/blob/dev/frontend/src/app/core/setup/globals/dynamic-bootstrapper.ts), looks for eligible components to bootstrap in the rendered template and forces the global angular application to bootstrap this component. This may result in many dom-separated components in the page to be bootstrapped by Angular for dynamic content.
+4. Dynamic components in Angular are registered as [custom elements](https://angular.dev/guide/elements) so they can be used throughout the page as web components.
 
 5. This triggers the [`FormConfigurationComponent`](https://github.com/opf/openproject/blob/dev/frontend/src/app/features/admin/types/type-form-configuration.component.ts) to be initialized and allows the application to include a highly dynamic component (drag & drop organization of attributes) to be used on an admin form that otherwise has no connection to Angular.
 
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 79d2b8796959..8e1c4fb6f5ce 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -176,6 +176,8 @@ module.exports = {
 
         // It's common in Angular to wrap even pure functions in classes for injection purposes
         "class-methods-use-this": "off",
+
+        "spaced-comment": "off",
       },
     },
     {
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 86d3af6284ed..ea2170288496 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { APP_INITIALIZER, ApplicationRef, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ApplicationRef, DoBootstrap, Injector, NgModule } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
 import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -38,7 +38,6 @@ import { OpenprojectFieldsModule } from 'core-app/shared/components/fields/openp
 import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpSpotModule } from 'core-app/spot/spot.module';
 import { OpDragScrollDirective } from 'core-app/shared/directives/op-drag-scroll/op-drag-scroll.directive';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
 import { OpenprojectWorkPackagesModule } from 'core-app/features/work-packages/openproject-work-packages.module';
 import { OpenprojectAttachmentsModule } from 'core-app/shared/components/attachments/openproject-attachments.module';
 import { OpenprojectEditorModule } from 'core-app/shared/components/editor/openproject-editor.module';
@@ -92,8 +91,6 @@ import { MainMenuResizerComponent } from 'core-app/shared/components/resizer/res
 import { OpenprojectTabsModule } from 'core-app/shared/components/tabs/openproject-tabs.module';
 import { OpenprojectAdminModule } from 'core-app/features/admin/openproject-admin.module';
 import { OpenprojectHalModule } from 'core-app/features/hal/openproject-hal.module';
-import { globalDynamicComponents } from 'core-app/core/setup/global-dynamic-components.const';
-import { HookService } from 'core-app/features/plugins/hook-service';
 import { OpenprojectPluginsModule } from 'core-app/features/plugins/openproject-plugins.module';
 import { LinkedPluginsModule } from 'core-app/features/plugins/linked-plugins.module';
 import {
@@ -171,12 +168,79 @@ import {
 import {
   WorkPackageSplitViewEntryComponent,
 } from 'core-app/features/work-packages/routing/wp-split-view/wp-split-view-entry.component';
-import { InAppNotificationsDateAlertsUpsaleComponent } from 'core-app/features/in-app-notifications/date-alerts-upsale/ian-date-alerts-upsale.component';
+import {
+  InAppNotificationsDateAlertsUpsaleComponent,
+} from 'core-app/features/in-app-notifications/date-alerts-upsale/ian-date-alerts-upsale.component';
 import { ShareUpsaleComponent } from 'core-app/features/enterprise/share-upsale/share-upsale.component';
 import {
   StorageLoginButtonComponent,
 } from 'core-app/shared/components/storages/storage-login-button/storage-login-button.component';
 import { OpCustomModalOverlayComponent } from 'core-app/shared/components/modal/custom-modal-overlay.component';
+import { TimerAccountMenuComponent } from 'core-app/shared/components/time_entries/timer/timer-account-menu.component';
+import {
+  RemoteFieldUpdaterComponent,
+} from 'core-app/shared/components/remote-field-updater/remote-field-updater.component';
+import {
+  OpModalSingleDatePickerComponent,
+} from 'core-app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component';
+import { SpotDropModalPortalComponent } from 'core-app/spot/components/drop-modal/drop-modal-portal.component';
+import { OpModalOverlayComponent } from 'core-app/shared/components/modal/modal-overlay.component';
+import {
+  InAppNotificationBellComponent,
+} from 'core-app/features/in-app-notifications/bell/in-app-notification-bell.component';
+import { BackupComponent } from 'core-app/core/setup/globals/components/admin/backup.component';
+import {
+  EditableQueryPropsComponent,
+} from 'core-app/features/admin/editable-query-props/editable-query-props.component';
+import {
+  TriggerActionsEntryComponent,
+} from 'core-app/shared/components/time_entries/edit/trigger-actions-entry.component';
+import {
+  WorkPackageOverviewGraphComponent,
+} from 'core-app/shared/components/work-package-graphs/overview/wp-overview-graph.component';
+import {
+  EEActiveSavedTrialComponent,
+} from 'core-app/features/enterprise/enterprise-active-trial/ee-active-saved-trial.component';
+import { FreeTrialButtonComponent } from 'core-app/features/enterprise/free-trial-button/free-trial-button.component';
+import { EnterpriseBaseComponent } from 'core-app/features/enterprise/enterprise-base.component';
+import { NoResultsComponent } from 'core-app/shared/components/no-results/no-results.component';
+import {
+  OpNonWorkingDaysListComponent,
+} from 'core-app/shared/components/op-non-working-days-list/op-non-working-days-list.component';
+import { EnterpriseBannerComponent } from 'core-app/shared/components/enterprise-banner/enterprise-banner.component';
+import {
+  CollapsibleSectionComponent,
+} from 'core-app/shared/components/collapsible-section/collapsible-section.component';
+import { CopyToClipboardComponent } from 'core-app/shared/components/copy-to-clipboard/copy-to-clipboard.component';
+import { GlobalSearchTitleComponent } from 'core-app/core/global_search/title/global-search-title.component';
+import { ContentTabsComponent } from 'core-app/shared/components/tabs/content-tabs/content-tabs.component';
+import {
+  AddSectionDropdownComponent,
+} from 'core-app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component';
+import {
+  HideSectionLinkComponent,
+} from 'core-app/shared/components/hide-section/hide-section-link/hide-section-link.component';
+import { PersistentToggleComponent } from 'core-app/shared/components/persistent-toggle/persistent-toggle.component';
+import { TypeFormConfigurationComponent } from 'core-app/features/admin/types/type-form-configuration.component';
+import { ToastsContainerComponent } from 'core-app/shared/components/toaster/toasts-container.component';
+import { GlobalSearchWorkPackagesComponent } from 'core-app/core/global_search/global-search-work-packages.component';
+import {
+  CustomDateActionAdminComponent,
+} from 'core-app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component';
+import { HomescreenNewFeaturesBlockComponent } from 'core-app/features/homescreen/blocks/new-features.component';
+import { GlobalSearchTabsComponent } from 'core-app/core/global_search/tabs/global-search-tabs.component';
+import {
+  ZenModeButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component';
+import { ColorsAutocompleterComponent } from 'core-app/shared/components/colors/colors-autocompleter.component';
+import {
+  StaticAttributeHelpTextComponent,
+} from 'core-app/shared/components/attribute-help-texts/static-attribute-help-text.component';
+import {
+  AvatarUploadFormComponent,
+} from 'core-app/features/plugins/linked/openproject-avatars/avatar-upload-form/avatar-upload-form.component';
+import { appBaseSelector, ApplicationBaseComponent } from 'core-app/core/routing/base/application-base.component';
+import { SpotSwitchComponent } from 'core-app/spot/components/switch/switch.component';
 
 export function initializeServices(injector:Injector) {
   return () => {
@@ -324,27 +388,16 @@ export function initializeServices(injector:Injector) {
     OpDragScrollDirective,
   ],
 })
-export class OpenProjectModule {
+export class OpenProjectModule implements DoBootstrap {
   // noinspection JSUnusedGlobalSymbols
   ngDoBootstrap(appRef:ApplicationRef) {
-    // Register global dynamic components
-    // this is necessary to ensure they are not tree-shaken
-    // (if they are not used anywhere in Angular, they would be removed)
-    DynamicBootstrapper.register(...globalDynamicComponents);
-
-    // Perform global dynamic bootstrapping of our entry components
-    // that are in the current DOM response.
-    DynamicBootstrapper.bootstrapOptionalDocument(appRef, document);
-    this.registerCustomElements(appRef.injector);
+    // Try to bootstrap a dynamic root element
+    const root = document.querySelector(appBaseSelector);
+    if (root) {
+      appRef.bootstrap(ApplicationBaseComponent, root);
+    }
 
-    // Call hook service to allow modules to bootstrap additional elements.
-    // We can't use ngDoBootstrap in nested modules since they are not called.
-    const hookService = (appRef as any)._injector.get(HookService);
-    hookService
-      .call('openProjectAngularBootstrap')
-      .forEach((results:{ selector:string, cls:any }[]) => {
-        DynamicBootstrapper.bootstrapOptionalDocument(appRef, document, results);
-      });
+    this.registerCustomElements(appRef.injector);
   }
 
   private registerCustomElements(injector:Injector) {
@@ -364,6 +417,7 @@ export class OpenProjectModule {
     registerCustomElement('opce-ckeditor-augmented-textarea', CkeditorAugmentedTextareaComponent, { injector });
     registerCustomElement('opce-draggable-autocompleter', DraggableAutocompleteComponent, { injector });
     registerCustomElement('opce-attribute-help-text', AttributeHelpTextComponent, { injector });
+    registerCustomElement('opce-static-attribute-help-text', StaticAttributeHelpTextComponent, { injector });
     registerCustomElement('opce-exclusion-info', OpExclusionInfoComponent, { injector });
     registerCustomElement('opce-attachments', OpAttachmentsComponent, { injector });
     registerCustomElement('opce-storage-login-button', StorageLoginButtonComponent, { injector });
@@ -380,5 +434,43 @@ export class OpenProjectModule {
     registerCustomElement('opce-ian-date-alerts-upsale', InAppNotificationsDateAlertsUpsaleComponent, { injector });
     registerCustomElement('opce-share-upsale', ShareUpsaleComponent, { injector });
     registerCustomElement('opce-wp-split-view', WorkPackageSplitViewEntryComponent, { injector });
+    registerCustomElement('opce-timer-account-menu', TimerAccountMenuComponent, { injector });
+    registerCustomElement('opce-remote-field-updater', RemoteFieldUpdaterComponent, { injector });
+    registerCustomElement('opce-modal-single-date-picker', OpModalSingleDatePickerComponent, { injector });
+    registerCustomElement('opce-basic-single-date-picker', OpBasicSingleDatePickerComponent, { injector });
+    registerCustomElement('opce-storage-login-button', StorageLoginButtonComponent, { injector });
+    registerCustomElement('opce-spot-drop-modal-portal', SpotDropModalPortalComponent, { injector });
+    registerCustomElement('opce-spot-switch', SpotSwitchComponent, { injector });
+    registerCustomElement('opce-modal-overlay', OpModalOverlayComponent, { injector });
+    registerCustomElement('opce-in-app-notification-bell', InAppNotificationBellComponent, { injector });
+    registerCustomElement('opce-backup', BackupComponent, { injector });
+    registerCustomElement('opce-editable-query-props', EditableQueryPropsComponent, { injector });
+    registerCustomElement('opce-time-entry-trigger-actions', TriggerActionsEntryComponent, { injector });
+    registerCustomElement('opce-wp-overview-graph', WorkPackageOverviewGraphComponent, { injector });
+    registerCustomElement('opce-header-project-select', OpHeaderProjectSelectComponent, { injector });
+    registerCustomElement('opce-enterprise-active-saved-trial', EEActiveSavedTrialComponent, { injector });
+    registerCustomElement('opce-free-trial-button', FreeTrialButtonComponent, { injector });
+    registerCustomElement('opce-enterprise-base', EnterpriseBaseComponent, { injector });
+    registerCustomElement('opce-no-results', NoResultsComponent, { injector });
+    registerCustomElement('opce-non-working-days-list', OpNonWorkingDaysListComponent, { injector });
+    registerCustomElement('opce-enterprise-banner', EnterpriseBannerComponent, { injector });
+    registerCustomElement('opce-collapsible-section-augment', CollapsibleSectionComponent, { injector });
+    registerCustomElement('opce-main-menu-toggle', MainMenuToggleComponent, { injector });
+    registerCustomElement('opce-main-menu-resizer', MainMenuResizerComponent, { injector });
+    registerCustomElement('opce-copy-to-clipboard', CopyToClipboardComponent, { injector });
+    registerCustomElement('opce-global-search-title', GlobalSearchTitleComponent, { injector });
+    registerCustomElement('opce-content-tabs', ContentTabsComponent, { injector });
+    registerCustomElement('opce-add-section-dropdown', AddSectionDropdownComponent, { injector });
+    registerCustomElement('opce-hide-section-link', HideSectionLinkComponent, { injector });
+    registerCustomElement('opce-persistent-toggle', PersistentToggleComponent, { injector });
+    registerCustomElement('opce-admin-type-form-configuration', TypeFormConfigurationComponent, { injector });
+    registerCustomElement('opce-toasts-container', ToastsContainerComponent, { injector });
+    registerCustomElement('opce-global-search-work-packages', GlobalSearchWorkPackagesComponent, { injector });
+    registerCustomElement('opce-custom-date-action-admin', CustomDateActionAdminComponent, { injector });
+    registerCustomElement('opce-homescreen-new-features-block', HomescreenNewFeaturesBlockComponent, { injector });
+    registerCustomElement('opce-global-search-tabs', GlobalSearchTabsComponent, { injector });
+    registerCustomElement('opce-zen-mode-toggle-button', ZenModeButtonComponent, { injector });
+    registerCustomElement('opce-colors-autocompleter', ColorsAutocompleterComponent, { injector });
+    registerCustomElement('opce-avatar-upload-form', AvatarUploadFormComponent, { injector });
   }
 }
diff --git a/frontend/src/app/core/global_search/global-search-work-packages-entry.component.ts b/frontend/src/app/core/global_search/global-search-work-packages-entry.component.ts
deleted file mode 100644
index 36a254c9146f..000000000000
--- a/frontend/src/app/core/global_search/global-search-work-packages-entry.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-//-- copyright
-// OpenProject is an open source project management software.
-// Copyright (C) the OpenProject GmbH
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See COPYRIGHT and LICENSE files for more details.
-//++
-
-import { Component } from '@angular/core';
-import {
-  WorkPackageIsolatedQuerySpaceDirective,
-} from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
-
-export const globalSearchWorkPackagesSelectorEntry = 'global-search-work-packages-entry';
-
-/**
- * An entry component to be rendered by Rails which opens an isolated query space
- * for the work package search embedded table.
- */
-@Component({
-  selector: globalSearchWorkPackagesSelectorEntry,
-  hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
-  template: '<global-search-work-packages></global-search-work-packages>',
-})
-export class GlobalSearchWorkPackagesEntryComponent {
-}
diff --git a/frontend/src/app/core/global_search/global-search-work-packages.component.ts b/frontend/src/app/core/global_search/global-search-work-packages.component.ts
index 79538726cced..38cb7edcd259 100644
--- a/frontend/src/app/core/global_search/global-search-work-packages.component.ts
+++ b/frontend/src/app/core/global_search/global-search-work-packages.component.ts
@@ -27,26 +27,42 @@
 //++
 
 import {
-  AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  Renderer2,
 } from '@angular/core';
 import { FocusHelperService } from 'core-app/shared/directives/focus/focus-helper';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
 import { GlobalSearchService } from 'core-app/core/global_search/services/global-search.service';
 import { UrlParamsHelperService } from 'core-app/features/work-packages/components/wp-query/url-params-helper';
-import { WorkPackageTableConfigurationObject } from 'core-app/features/work-packages/components/wp-table/wp-table-configuration';
+import {
+  WorkPackageTableConfigurationObject
+} from 'core-app/features/work-packages/components/wp-table/wp-table-configuration';
 import { IsolatedQuerySpace } from 'core-app/features/work-packages/directives/query-space/isolated-query-space';
-import { WorkPackageViewFiltersService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-filters.service';
+import {
+  WorkPackageViewFiltersService
+} from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-filters.service';
 import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 import { combineLatest } from 'rxjs';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
-import { WorkPackageFiltersService } from 'core-app/features/work-packages/components/filters/wp-filters/wp-filters.service';
+import {
+  WorkPackageFiltersService
+} from 'core-app/features/work-packages/components/filters/wp-filters/wp-filters.service';
+import {
+  WorkPackageIsolatedQuerySpaceDirective
+} from "core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive";
 
-export const globalSearchWorkPackagesSelector = 'global-search-work-packages';
 
 @Component({
-  selector: globalSearchWorkPackagesSelector,
+  selector: 'opce-global-search-work-packages',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
   template: `
     <wp-embedded-table *ngIf="!resultsHidden"
                        [queryProps]="queryProps"
diff --git a/frontend/src/app/core/global_search/openproject-global-search.module.ts b/frontend/src/app/core/global_search/openproject-global-search.module.ts
index 642ea9dc2794..5b14b2b0cf4a 100644
--- a/frontend/src/app/core/global_search/openproject-global-search.module.ts
+++ b/frontend/src/app/core/global_search/openproject-global-search.module.ts
@@ -33,9 +33,6 @@ import { GlobalSearchWorkPackagesComponent } from 'core-app/core/global_search/g
 import { GlobalSearchTabsComponent } from 'core-app/core/global_search/tabs/global-search-tabs.component';
 import { GlobalSearchTitleComponent } from 'core-app/core/global_search/title/global-search-title.component';
 import { GlobalSearchService } from 'core-app/core/global_search/services/global-search.service';
-import {
-  GlobalSearchWorkPackagesEntryComponent,
-} from 'core-app/core/global_search/global-search-work-packages-entry.component';
 import {
   OpenprojectAutocompleterModule,
 } from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
@@ -54,7 +51,6 @@ import { RecentItemsService } from 'core-app/core/recent-items.service';
   ],
   declarations: [
     GlobalSearchInputComponent,
-    GlobalSearchWorkPackagesEntryComponent,
     GlobalSearchWorkPackagesComponent,
     GlobalSearchTabsComponent,
     GlobalSearchTitleComponent,
diff --git a/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts b/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts
index a93478f3ff87..e71ebd37d064 100644
--- a/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts
+++ b/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts
@@ -26,24 +26,16 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  Injector,
-  OnInit,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnDestroy, OnInit, } from '@angular/core';
 import { StateService } from '@uirouter/core';
 import { Subscription } from 'rxjs';
 import { GlobalSearchService } from 'core-app/core/global_search/services/global-search.service';
 import { ScrollableTabsComponent } from 'core-app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component';
 import { TabDefinition } from 'core-app/shared/components/tabs/tab.interface';
 
-export const globalSearchTabsSelector = 'global-search-tabs';
 
 @Component({
-  selector: globalSearchTabsSelector,
+  selector: 'opce-global-search-tabs',
   templateUrl: '../../../shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/core/global_search/title/global-search-title.component.ts b/frontend/src/app/core/global_search/title/global-search-title.component.ts
index 96385ff5932a..5457936ed405 100644
--- a/frontend/src/app/core/global_search/title/global-search-title.component.ts
+++ b/frontend/src/app/core/global_search/title/global-search-title.component.ts
@@ -25,14 +25,7 @@
 //
 // See COPYRIGHT and LICENSE files for more details.
 //++
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Injector,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Injector, Input, OnInit, } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { combineLatest } from 'rxjs';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
@@ -41,10 +34,8 @@ import { CurrentProjectService } from 'core-app/core/current-project/current-pro
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 
-export const globalSearchTitleSelector = 'global-search-title';
-
 @Component({
-  selector: 'global-search-title',
+  selector: 'opce-global-search-title',
   templateUrl: './global-search-title.component.html',
 })
 export class GlobalSearchTitleComponent extends UntilDestroyedMixin implements OnInit {
diff --git a/frontend/src/app/core/main-menu/main-menu-toggle.component.ts b/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
index 129343eb4f72..1bb85b01673a 100644
--- a/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
+++ b/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
@@ -26,9 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit, } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
@@ -36,10 +34,9 @@ import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destr
 import { MainMenuToggleService } from './main-menu-toggle.service';
 import { TopMenuService } from 'core-app/core/top-menu/top-menu.service';
 
-export const mainMenuToggleSelector = 'main-menu-toggle';
 
 @Component({
-  selector: mainMenuToggleSelector,
+  selector: 'opce-main-menu-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'op-app-menu op-main-menu-toggle',
diff --git a/frontend/src/app/core/setup/global-dynamic-components.const.ts b/frontend/src/app/core/setup/global-dynamic-components.const.ts
deleted file mode 100644
index 006b5c52b797..000000000000
--- a/frontend/src/app/core/setup/global-dynamic-components.const.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-import { OptionalBootstrapDefinition } from 'core-app/core/setup/globals/dynamic-bootstrapper';
-import { appBaseSelector, ApplicationBaseComponent } from 'core-app/core/routing/base/application-base.component';
-import {
-  ColorsAutocompleterComponent,
-  colorsAutocompleterSelector,
-} from 'core-app/shared/components/colors/colors-autocompleter.component';
-import {
-  ZenModeButtonComponent,
-  zenModeComponentSelector,
-} from 'core-app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component';
-import {
-  GlobalSearchWorkPackagesComponent,
-  globalSearchWorkPackagesSelector,
-} from 'core-app/core/global_search/global-search-work-packages.component';
-import {
-  CustomDateActionAdminComponent,
-  customDateActionAdminSelector,
-} from 'core-app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component';
-import {
-  GlobalSearchWorkPackagesEntryComponent,
-  globalSearchWorkPackagesSelectorEntry,
-} from 'core-app/core/global_search/global-search-work-packages-entry.component';
-import {
-  ToastsContainerComponent,
-  toastsContainerSelector,
-} from 'core-app/shared/components/toaster/toasts-container.component';
-import {
-  CkeditorAugmentedTextareaComponent,
-  ckeditorAugmentedTextareaSelector,
-} from 'core-app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component';
-import {
-  PersistentToggleComponent,
-  persistentToggleSelector,
-} from 'core-app/shared/components/persistent-toggle/persistent-toggle.component';
-import {
-  HideSectionLinkComponent,
-  hideSectionLinkSelector,
-} from 'core-app/shared/components/hide-section/hide-section-link/hide-section-link.component';
-import {
-  ShowSectionDropdownComponent,
-  showSectionDropdownSelector,
-} from 'core-app/shared/components/hide-section/show-section-dropdown.component';
-import {
-  AddSectionDropdownComponent,
-  addSectionDropdownSelector,
-} from 'core-app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component';
-import {
-  ContentTabsComponent,
-  contentTabsSelector,
-} from 'core-app/shared/components/tabs/content-tabs/content-tabs.component';
-import {
-  CopyToClipboardComponent,
-  copyToClipboardSelector,
-} from 'core-app/shared/components/copy-to-clipboard/copy-to-clipboard.component';
-import {
-  collapsibleSectionAugmentSelector,
-  CollapsibleSectionComponent,
-} from 'core-app/shared/components/collapsible-section/collapsible-section.component';
-import {
-  headerProjectSelectSelector,
-  OpHeaderProjectSelectComponent,
-} from 'core-app/shared/components/header-project-select/header-project-select.component';
-import {
-  RemoteFieldUpdaterComponent,
-  remoteFieldUpdaterSelector,
-} from 'core-app/shared/components/remote-field-updater/remote-field-updater.component';
-import {
-  WorkPackageOverviewGraphComponent,
-  wpOverviewGraphSelector,
-} from 'core-app/shared/components/work-package-graphs/overview/wp-overview-graph.component';
-import {
-  GlobalSearchTitleComponent,
-  globalSearchTitleSelector,
-} from 'core-app/core/global_search/title/global-search-title.component';
-import {
-  GlobalSearchTabsComponent,
-  globalSearchTabsSelector,
-} from 'core-app/core/global_search/tabs/global-search-tabs.component';
-import {
-  TriggerActionsEntryComponent,
-  triggerActionsEntryComponentSelector,
-} from 'core-app/shared/components/time_entries/edit/trigger-actions-entry.component';
-import {
-  AttributeHelpTextComponent,
-  attributeHelpTextSelector,
-} from 'core-app/shared/components/attribute-help-texts/attribute-help-text.component';
-import { SpotSwitchComponent, spotSwitchSelector } from 'core-app/spot/components/switch/switch.component';
-import { BackupComponent, backupSelector } from 'core-app/core/setup/globals/components/admin/backup.component';
-import {
-  EnterpriseBaseComponent,
-  enterpriseBaseSelector,
-} from 'core-app/features/enterprise/enterprise-base.component';
-import {
-  FreeTrialButtonComponent,
-  freeTrialButtonSelector,
-} from 'core-app/features/enterprise/free-trial-button/free-trial-button.component';
-import {
-  EnterpriseBannerComponent,
-  enterpriseBannerSelector,
-} from 'core-app/shared/components/enterprise-banner/enterprise-banner.component';
-import {
-  EnterprisePageComponent,
-  enterprisePageSelector,
-} from 'core-app/shared/components/enterprise-page/enterprise-page.component';
-import {
-  nonWorkingDaysListSelector,
-  OpNonWorkingDaysListComponent,
-} from 'core-app/shared/components/op-non-working-days-list/op-non-working-days-list.component';
-import {
-  EEActiveSavedTrialComponent,
-  enterpriseActiveSavedTrialSelector,
-} from 'core-app/features/enterprise/enterprise-active-trial/ee-active-saved-trial.component';
-import { NoResultsComponent, noResultsSelector } from 'app/shared/components/no-results/no-results.component';
-import {
-  HomescreenNewFeaturesBlockComponent,
-  homescreenNewFeaturesBlockSelector,
-} from 'core-app/features/homescreen/blocks/new-features.component';
-import { MainMenuToggleComponent, mainMenuToggleSelector } from 'core-app/core/main-menu/main-menu-toggle.component';
-import {
-  MainMenuResizerComponent,
-  mainMenuResizerSelector,
-} from 'core-app/shared/components/resizer/resizer/main-menu-resizer.component';
-import {
-  adminTypeFormConfigurationSelector,
-  TypeFormConfigurationComponent,
-} from 'core-app/features/admin/types/type-form-configuration.component';
-import {
-  EditableQueryPropsComponent,
-  editableQueryPropsSelector,
-} from 'core-app/features/admin/editable-query-props/editable-query-props.component';
-import {
-  InAppNotificationBellComponent,
-  opInAppNotificationBellSelector,
-} from 'core-app/features/in-app-notifications/bell/in-app-notification-bell.component';
-import {
-  OpModalOverlayComponent,
-  opModalOverlaySelector,
-} from 'core-app/shared/components/modal/modal-overlay.component';
-import {
-  OpModalSingleDatePickerComponent,
-  opModalSingleDatePickerSelector,
-} from 'core-app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component';
-import {
-  OpBasicSingleDatePickerComponent,
-  opBasicSingleDatePickerSelector,
-} from 'core-app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component';
-import {
-  SpotDropModalPortalComponent,
-  spotDropModalPortalComponentSelector,
-} from 'core-app/spot/components/drop-modal/drop-modal-portal.component';
-import {
-  StaticAttributeHelpTextComponent,
-  staticAttributeHelpTextSelector,
-} from 'core-app/shared/components/attribute-help-texts/static-attribute-help-text.component';
-import {
-  opStorageLoginButtonSelector,
-  StorageLoginButtonComponent,
-} from 'core-app/shared/components/storages/storage-login-button/storage-login-button.component';
-import {
-  TimerAccountMenuComponent,
-  timerAccountSelector,
-} from 'core-app/shared/components/time_entries/timer/timer-account-menu.component';
-
-export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
-  { selector: appBaseSelector, cls: ApplicationBaseComponent },
-  { selector: attributeHelpTextSelector, cls: AttributeHelpTextComponent },
-  { selector: staticAttributeHelpTextSelector, cls: StaticAttributeHelpTextComponent },
-  { selector: colorsAutocompleterSelector, cls: ColorsAutocompleterComponent },
-  { selector: zenModeComponentSelector, cls: ZenModeButtonComponent },
-  { selector: globalSearchTabsSelector, cls: GlobalSearchTabsComponent },
-  { selector: globalSearchWorkPackagesSelector, cls: GlobalSearchWorkPackagesComponent },
-  { selector: homescreenNewFeaturesBlockSelector, cls: HomescreenNewFeaturesBlockComponent },
-  { selector: customDateActionAdminSelector, cls: CustomDateActionAdminComponent },
-  { selector: globalSearchWorkPackagesSelectorEntry, cls: GlobalSearchWorkPackagesEntryComponent },
-  { selector: toastsContainerSelector, cls: ToastsContainerComponent },
-  { selector: adminTypeFormConfigurationSelector, cls: TypeFormConfigurationComponent },
-  { selector: ckeditorAugmentedTextareaSelector, cls: CkeditorAugmentedTextareaComponent, embeddable: true },
-  { selector: persistentToggleSelector, cls: PersistentToggleComponent },
-  { selector: hideSectionLinkSelector, cls: HideSectionLinkComponent },
-  { selector: showSectionDropdownSelector, cls: ShowSectionDropdownComponent },
-  { selector: addSectionDropdownSelector, cls: AddSectionDropdownComponent },
-  { selector: contentTabsSelector, cls: ContentTabsComponent },
-  { selector: globalSearchTitleSelector, cls: GlobalSearchTitleComponent },
-  { selector: copyToClipboardSelector, cls: CopyToClipboardComponent },
-  { selector: mainMenuResizerSelector, cls: MainMenuResizerComponent },
-  { selector: mainMenuToggleSelector, cls: MainMenuToggleComponent },
-  { selector: collapsibleSectionAugmentSelector, cls: CollapsibleSectionComponent },
-  { selector: enterpriseBannerSelector, cls: EnterpriseBannerComponent },
-  { selector: nonWorkingDaysListSelector, cls: OpNonWorkingDaysListComponent },
-  { selector: enterprisePageSelector, cls: EnterprisePageComponent },
-  { selector: noResultsSelector, cls: NoResultsComponent },
-  { selector: enterpriseBaseSelector, cls: EnterpriseBaseComponent },
-  { selector: freeTrialButtonSelector, cls: FreeTrialButtonComponent },
-  { selector: enterpriseActiveSavedTrialSelector, cls: EEActiveSavedTrialComponent },
-  { selector: headerProjectSelectSelector, cls: OpHeaderProjectSelectComponent },
-  { selector: wpOverviewGraphSelector, cls: WorkPackageOverviewGraphComponent },
-  { selector: triggerActionsEntryComponentSelector, cls: TriggerActionsEntryComponent, embeddable: true },
-  { selector: editableQueryPropsSelector, cls: EditableQueryPropsComponent },
-  { selector: backupSelector, cls: BackupComponent },
-  { selector: opInAppNotificationBellSelector, cls: InAppNotificationBellComponent },
-
-  { selector: opModalOverlaySelector, cls: OpModalOverlayComponent },
-  { selector: spotDropModalPortalComponentSelector, cls: SpotDropModalPortalComponent },
-  { selector: spotSwitchSelector, cls: SpotSwitchComponent },
-  { selector: opStorageLoginButtonSelector, cls: StorageLoginButtonComponent },
-
-  { selector: opModalSingleDatePickerSelector, cls: OpModalSingleDatePickerComponent, embeddable: true },
-  { selector: opBasicSingleDatePickerSelector, cls: OpBasicSingleDatePickerComponent, embeddable: true },
-
-  // It is important to initialize the remoteFieldUpdaterSelector after the datepickers,
-  // because we need to access the input field of the datepickers inside the remoteFieldUpdaterSelector
-  { selector: remoteFieldUpdaterSelector, cls: RemoteFieldUpdaterComponent },
-
-  { selector: timerAccountSelector, cls: TimerAccountMenuComponent },
-];
diff --git a/frontend/src/app/core/setup/globals/components/admin/backup.component.ts b/frontend/src/app/core/setup/globals/components/admin/backup.component.ts
index 917a7fe2f784..19060a8745fa 100644
--- a/frontend/src/app/core/setup/globals/components/admin/backup.component.ts
+++ b/frontend/src/app/core/setup/globals/components/admin/backup.component.ts
@@ -26,14 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Injector,
-  ViewChild,
-} from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Injector, ViewChild, } from '@angular/core';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
@@ -44,10 +37,9 @@ import { OpenProjectBackupService } from 'core-app/core/backup/op-backup.service
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { HalError } from 'core-app/features/hal/services/hal-error';
 
-export const backupSelector = 'backup';
 
 @Component({
-  selector: backupSelector,
+  selector: 'opce-backup',
   templateUrl: './backup.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/core/setup/globals/dynamic-bootstrapper.ts b/frontend/src/app/core/setup/globals/dynamic-bootstrapper.ts
deleted file mode 100644
index b2ed5fbaa357..000000000000
--- a/frontend/src/app/core/setup/globals/dynamic-bootstrapper.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-// -- copyright
-// OpenProject is an open source project management software.
-// Copyright (C) the OpenProject GmbH
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See COPYRIGHT and LICENSE files for more details.
-
-import { ComponentType } from '@angular/cdk/portal';
-import { ApplicationRef } from '@angular/core';
-import { debugLog } from 'core-app/shared/helpers/debug_output';
-
-/**
- * Optional bootstrap definition to allow selecting all matching
- * DOM nodes to manually bootstrap them.
- *
- * This differs from Angular's bootstrap module definition since it expects these
- * entries to be present on ALL pages. This is never the case for our optional
- * bootstrapped components.
- */
-export interface OptionalBootstrapDefinition {
-  // The DOM selector used to locate an optional node
-  selector:string;
-  // The component class tied to it.
-  cls:ComponentType<any>;
-  // Whether the component may be embeddable in dynamically generated responses
-  // e.g., previews
-  embeddable?:boolean;
-}
-
-/**
- * Static lookup table for dynamically bootstrapped components within our application
- */
-export class DynamicBootstrapper {
-  private static optionalBoostrapComponents:OptionalBootstrapDefinition[] = [];
-
-  /**
-   * Register an optional bootstrap component to be dynamically bootstrapped
-   * whenever it occurs in the initially loaded DOM.
-   *
-   * @param {OptionalBootstrapDefinition} definition
-   */
-  public static register(...defs:OptionalBootstrapDefinition[]) {
-    this.optionalBoostrapComponents.push(...defs);
-  }
-
-  /**
-   * Perform bootstrapping of matched elements within the given document.
-   *
-   * @param {ApplicationRef} appRef The application reference to lookup elements.
-   * @param {Document} doc The document element
-   * @param {OptionalBootstrapDefinition[]|undefined} definitions An optional set of components to bootstrap
-   */
-  public static bootstrapOptionalDocument(appRef:ApplicationRef, doc:Document, definitions = this.optionalBoostrapComponents) {
-    this.performBootstrap(appRef, doc, false, definitions);
-  }
-
-  /**
-   * Perform bootstrapping of embeddable elements within the given node.
-   *
-   * @param {ApplicationRef} appRef The application reference to lookup elements.
-   * @param {HTMLElement} element A node to bootstrap elements within.
-   * @param {OptionalBootstrapDefinition[]|undefined} definitions An optional set of components to bootstrap
-   */
-  public static bootstrapOptionalEmbeddable(appRef:ApplicationRef, element:HTMLElement, definitions = this.optionalBoostrapComponents) {
-    // Delay the execution to avoid bootstrapping the embedded components while
-    // the app is running the Change Detection. This was throwing "ApplicationRef.tick
-    // is called recursively" error because of bootstrapOptionalEmbeddable and
-    // bootstrapOptionalDocument were called too close (ie: ckEditor macros).
-    Promise.resolve().then(() => this.performBootstrap(appRef, element, true, definitions));
-  }
-
-  /**
-   * Get embeddable components
-   */
-  public static getEmbeddable() {
-    return this.optionalBoostrapComponents.filter((el) => el.embeddable);
-  }
-
-  /**
-   * Bootstrap within a given document (globally, all components available) or within an element (embeddable compoennts
-   * only).
-   *
-   * @param {ApplicationRef} appRef
-   * @param {Document | HTMLElement} root
-   * @param {boolean} embedded
-   */
-  private static performBootstrap(appRef:ApplicationRef, root:Document|HTMLElement, embedded:boolean, definitions:OptionalBootstrapDefinition[]) {
-    definitions
-      .forEach((el) => {
-        // Skip non-embeddable components in an embedded bootstrap.
-        if (embedded && !el.embeddable) {
-          return;
-        }
-
-        const elements = root.querySelectorAll(el.selector);
-        for (let i = 0; i < elements.length; i++) {
-          const target = elements[i];
-
-          if (!embedded && target.closest('[op-dynamic-bootstrap]')) {
-            debugLog(`Skipping nested bootstrap ${el.selector} in %O`, target);
-            return;
-          }
-
-          appRef.bootstrap(el.cls, target);
-          target.setAttribute('op-dynamic-bootstrap', 'true');
-        }
-      });
-  }
-}
diff --git a/frontend/src/app/core/setup/init-globals.ts b/frontend/src/app/core/setup/init-globals.ts
index 3558d044bd10..1dc8d4a6f4b4 100644
--- a/frontend/src/app/core/setup/init-globals.ts
+++ b/frontend/src/app/core/setup/init-globals.ts
@@ -30,5 +30,4 @@ import 'hammerjs';
 
 // Global scripts previously part of the application.js
 // Avoid require.context since that crashes angular regularly
-import './globals/dynamic-bootstrapper';
 import './globals/openproject';
diff --git a/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts b/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts
index 8197f534dbb8..51486f66dda1 100644
--- a/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts
+++ b/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts
@@ -1,14 +1,13 @@
-import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { ExternalQueryConfigurationService } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
+import {
+  ExternalQueryConfigurationService
+} from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
 import { UrlParamsHelperService } from 'core-app/features/work-packages/components/wp-query/url-params-helper';
 
-export const editableQueryPropsSelector = 'editable-query-props';
 
 @Component({
-  selector: editableQueryPropsSelector,
+  selector: 'opce-editable-query-props',
   templateUrl: './editable-query-props.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/features/admin/types/type-form-configuration.component.ts b/frontend/src/app/features/admin/types/type-form-configuration.component.ts
index 9400bd0a1f9a..b2618d6cb3de 100644
--- a/frontend/src/app/features/admin/types/type-form-configuration.component.ts
+++ b/frontend/src/app/features/admin/types/type-form-configuration.component.ts
@@ -30,11 +30,11 @@ export interface TypeGroup {
   type:TypeGroupType;
 }
 
-export const adminTypeFormConfigurationSelector = 'admin-type-form-configuration';
+
 export const emptyTypeGroup = '__empty';
 
 @Component({
-  selector: adminTypeFormConfigurationSelector,
+  selector: 'opce-admin-type-form-configuration',
   templateUrl: './type-form-configuration.html',
   providers: [
     TypeBannerService,
diff --git a/frontend/src/app/features/enterprise/enterprise-active-trial/ee-active-saved-trial.component.ts b/frontend/src/app/features/enterprise/enterprise-active-trial/ee-active-saved-trial.component.ts
index 891076f79f52..cdbe0554bae7 100644
--- a/frontend/src/app/features/enterprise/enterprise-active-trial/ee-active-saved-trial.component.ts
+++ b/frontend/src/app/features/enterprise/enterprise-active-trial/ee-active-saved-trial.component.ts
@@ -30,10 +30,9 @@ import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { EEActiveTrialBase } from 'core-app/features/enterprise/enterprise-active-trial/ee-active-trial.base';
 
-export const enterpriseActiveSavedTrialSelector = 'enterprise-active-saved-trial';
 
 @Component({
-  selector: enterpriseActiveSavedTrialSelector,
+  selector: 'opce-enterprise-active-saved-trial',
   templateUrl: './ee-active-trial.component.html',
   styleUrls: ['./ee-active-trial.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/features/enterprise/enterprise-base.component.ts b/frontend/src/app/features/enterprise/enterprise-base.component.ts
index 1546ce4922bf..19a4f45e84a4 100644
--- a/frontend/src/app/features/enterprise/enterprise-base.component.ts
+++ b/frontend/src/app/features/enterprise/enterprise-base.component.ts
@@ -32,10 +32,9 @@ import { EnterpriseTrialModalComponent } from 'core-app/features/enterprise/ente
 import { OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { EnterpriseTrialService } from 'core-app/features/enterprise/enterprise-trial.service';
 
-export const enterpriseBaseSelector = 'enterprise-base';
 
 @Component({
-  selector: enterpriseBaseSelector,
+  selector: 'enterprise-base',
   templateUrl: './enterprise-base.component.html',
   styleUrls: ['./enterprise-base.component.sass'],
 })
diff --git a/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts b/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts
index e1e03356ed5b..73caea8b37fe 100644
--- a/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts
+++ b/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts
@@ -26,13 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Injector,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit, } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { EnterpriseTrialModalComponent } from 'core-app/features/enterprise/enterprise-modal/enterprise-trial.modal';
 import { OpModalService } from 'core-app/shared/components/modal/modal.service';
@@ -43,14 +37,13 @@ import { HttpClient } from '@angular/common/http';
 import { GonService } from 'core-app/core/gon/gon.service';
 import { IEnterpriseData } from 'core-app/features/enterprise/enterprise-trial.model';
 
-export const freeTrialButtonSelector = 'free-trial-button';
 
 export interface EETrialKey {
   created:string;
   value:string;
 }
 @Component({
-  selector: freeTrialButtonSelector,
+  selector: 'opce-free-trial-button',
   templateUrl: './free-trial-button.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/features/homescreen/blocks/new-features.component.ts b/frontend/src/app/features/homescreen/blocks/new-features.component.ts
index 38f9dbe0fba7..2079a0ed843d 100644
--- a/frontend/src/app/features/homescreen/blocks/new-features.component.ts
+++ b/frontend/src/app/features/homescreen/blocks/new-features.component.ts
@@ -32,8 +32,6 @@ import { BcfRestApi } from 'core-app/features/bim/bcf/bcf-constants.const';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { imagePath } from 'core-app/shared/helpers/images/path-helper';
 
-export const homescreenNewFeaturesBlockSelector = 'homescreen-new-features-block';
-
 // The key used in the I18n files to distinguish between versions.
 const OpVersionI18n = '14_4';
 
@@ -59,7 +57,7 @@ const featureTeaserImage = `${OpVersionI18n}_features.png`;
       <a [href]="teaserWebsiteUrl" target="_blank">{{ text.learnAbout }}</a>
     </div>
   `,
-  selector: homescreenNewFeaturesBlockSelector,
+  selector: 'opce-homescreen-new-features-block',
   styleUrls: ['./new-features.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/features/in-app-notifications/bell/in-app-notification-bell.component.ts b/frontend/src/app/features/in-app-notifications/bell/in-app-notification-bell.component.ts
index 3266e8cbe9f2..417a2534b2b1 100644
--- a/frontend/src/app/features/in-app-notifications/bell/in-app-notification-bell.component.ts
+++ b/frontend/src/app/features/in-app-notifications/bell/in-app-notification-bell.component.ts
@@ -7,10 +7,9 @@ import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service';
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 
-export const opInAppNotificationBellSelector = 'op-in-app-notification-bell';
 
 @Component({
-  selector: opInAppNotificationBellSelector,
+  selector: 'opce-in-app-notification-bell',
   templateUrl: './in-app-notification-bell.component.html',
   styleUrls: ['./in-app-notification-bell.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/features/plugins/plugin-context.ts b/frontend/src/app/features/plugins/plugin-context.ts
index 181976dfa9be..1a2afbebff1d 100644
--- a/frontend/src/app/features/plugins/plugin-context.ts
+++ b/frontend/src/app/features/plugins/plugin-context.ts
@@ -1,17 +1,20 @@
-import { ApplicationRef, Injector, NgZone } from '@angular/core';
+import { Injector, NgZone } from '@angular/core';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { ExternalQueryConfigurationService } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
+import {
+  ExternalQueryConfigurationService
+} from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
 import { OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { DisplayField } from 'core-app/shared/components/fields/display/display-field.module';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import idFromLink from 'core-app/features/hal/helpers/id-from-link';
 import { DisplayFieldService } from 'core-app/shared/components/fields/display/display-field.service';
 import { EditFieldService } from 'core-app/shared/components/fields/edit/edit-field.service';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
 import { States } from 'core-app/core/states/states.service';
 import { CKEditorPreviewService } from 'core-app/shared/components/editor/components/ckeditor/ckeditor-preview.service';
-import { ExternalRelationQueryConfigurationService } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.service';
+import {
+  ExternalRelationQueryConfigurationService
+} from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.service';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -22,7 +25,9 @@ import { HookService } from 'core-app/features/plugins/hook-service';
 import { PathHelperService } from '../../core/path-helper/path-helper.service';
 import { HTMLSanitizeService } from '../../core/html-sanitize/html-sanitize.service';
 import { DynamicContentModalComponent } from '../../shared/components/modals/modal-wrapper/dynamic-content.modal';
-import { PasswordConfirmationModalComponent } from '../../shared/components/modals/request-for-confirmation/password-confirmation.modal';
+import {
+  PasswordConfirmationModalComponent
+} from '../../shared/components/modals/request-for-confirmation/password-confirmation.modal';
 import { DomAutoscrollService } from 'core-app/shared/helpers/drag-and-drop/dom-autoscroll.service';
 import { AttachmentsResourceService } from 'core-app/core/state/attachments/attachments.service';
 import { HttpClient } from '@angular/common/http';
@@ -101,15 +106,4 @@ export class OpenProjectPluginContext {
   public runInZone(cb:() => void) {
     this.zone.run(cb);
   }
-
-  /**
-   * Bootstrap a dynamically embeddable component
-   * @param element
-   */
-  public bootstrap(element:HTMLElement) {
-    DynamicBootstrapper.bootstrapOptionalEmbeddable(
-      this.injector.get(ApplicationRef),
-      element,
-    );
-  }
 }
diff --git a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts b/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts
index 15e60a19aa76..a40f604d9e18 100644
--- a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts
@@ -35,14 +35,19 @@ import {
   Component,
   ElementRef,
   Injector,
-  Input, NgZone,
+  Input,
+  NgZone,
   OnInit,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
-import { WorkPackageCommentFieldHandler } from 'core-app/features/work-packages/components/work-package-comment/work-package-comment-field-handler';
-import { WorkPackagesActivityService } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/wp-activity.service';
+import {
+  WorkPackageCommentFieldHandler
+} from 'core-app/features/work-packages/components/work-package-comment/work-package-comment-field-handler';
+import {
+  WorkPackagesActivityService
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/wp-activity.service';
 import { CommentService } from 'core-app/features/work-packages/components/wp-activity/comment-service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { UserResource } from 'core-app/features/hal/resources/user-resource';
@@ -255,6 +260,6 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
   }
 
   private updateCommentText() {
-    this.postedComment = this.activity.comment.html;
+    this.postedComment = this.sanitization.bypassSecurityTrustHtml(this.activity.comment.html);
   }
 }
diff --git a/frontend/src/app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component.ts b/frontend/src/app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component.ts
index 4f0c96f5cfd8..acfc0949a075 100644
--- a/frontend/src/app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component.ts
@@ -34,12 +34,11 @@ import { Screenfull } from 'screenfull';
 import { AbstractWorkPackageButtonComponent } from '../wp-buttons.module';
 
 const screenfull:Screenfull = sfimport as any;
-export const zenModeComponentSelector = 'zen-mode-toggle-button';
 
 @Component({
   templateUrl: '../wp-button.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: zenModeComponentSelector,
+  selector: 'opce-zen-mode-toggle-button',
 })
 export class ZenModeButtonComponent extends AbstractWorkPackageButtonComponent {
   public buttonId = 'work-packages-zen-mode-toggle-button';
diff --git a/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts b/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts
index 13c1537de50a..407ba4de615e 100644
--- a/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts
@@ -26,15 +26,12 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ApplicationRef, ChangeDetectorRef, Component, ElementRef, OnInit,
-} from '@angular/core';
+import { ApplicationRef, ChangeDetectorRef, Component, ElementRef, OnInit, } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
-export const customDateActionAdminSelector = 'custom-date-action-admin';
 
 @Component({
-  selector: customDateActionAdminSelector,
+  selector: 'opce-custom-date-action-admin',
   templateUrl: './custom-date-action-admin.html',
 })
 export class CustomDateActionAdminComponent implements OnInit {
diff --git a/frontend/src/app/features/work-packages/components/wp-new/wp-new-full-view.html b/frontend/src/app/features/work-packages/components/wp-new/wp-new-full-view.html
index 62ab62ccb4a0..235c38a6dcb0 100644
--- a/frontend/src/app/features/work-packages/components/wp-new/wp-new-full-view.html
+++ b/frontend/src/app/features/work-packages/components/wp-new/wp-new-full-view.html
@@ -11,7 +11,7 @@
       </div>
       <ul class="toolbar-items hide-when-print">
         <li class="toolbar-item hidden-for-tablet">
-          <zen-mode-toggle-button></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"
diff --git a/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html b/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html
index da5a80a1405c..68482fef358b 100644
--- a/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html
+++ b/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html
@@ -49,8 +49,8 @@
           ></op-work-package-mark-notification-button>
         </li>
         <li class="toolbar-item hidden-for-tablet">
-          <zen-mode-toggle-button>
-          </zen-mode-toggle-button>
+          <opce-zen-mode-toggle-button>
+          </opce-zen-mode-toggle-button>
         </li>
         <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
           <button class="button dropdown-relative toolbar-icon"
diff --git a/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.component.ts b/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.component.ts
index 34f5b10953df..42489cfd8873 100644
--- a/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.component.ts
+++ b/frontend/src/app/shared/components/attribute-help-texts/static-attribute-help-text.component.ts
@@ -40,10 +40,9 @@ import { populateInputsFromDataset } from 'core-app/shared/components/dataset-in
 import { OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { StaticAttributeHelpTextModalComponent } from './static-attribute-help-text.modal';
 
-export const staticAttributeHelpTextSelector = 'op-static-attribute-help-text';
 
 @Component({
-  selector: staticAttributeHelpTextSelector,
+  selector: 'opce-static-attribute-help-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './static-attribute-help-text.component.html',
 })
diff --git a/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts b/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts
index a014750e8d54..9c1b6ce0e24f 100644
--- a/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts
+++ b/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts
@@ -26,14 +26,11 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  Component, ElementRef, OnInit, ViewChild,
-} from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, } from '@angular/core';
 
-export const collapsibleSectionAugmentSelector = 'collapsible-section-augment';
 
 @Component({
-  selector: collapsibleSectionAugmentSelector,
+  selector: 'opce-opce-collapsible-section-augment',
   templateUrl: './collapsible-section.html',
 })
 export class CollapsibleSectionComponent implements OnInit {
diff --git a/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts b/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts
index 0fde38d79dca..e4c034f70e47 100644
--- a/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts
+++ b/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts
@@ -27,10 +27,11 @@
 //++
 
 import { Component, ElementRef, OnInit } from '@angular/core';
-import { Highlighting } from 'core-app/features/work-packages/components/wp-fast-table/builders/highlighting/highlighting.functions';
+import {
+  Highlighting
+} from 'core-app/features/work-packages/components/wp-fast-table/builders/highlighting/highlighting.functions';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
-export const colorsAutocompleterSelector = 'colors-autocompleter';
 
 @Component({
   template: `
@@ -50,7 +51,7 @@ export const colorsAutocompleterSelector = 'colors-autocompleter';
       </ng-template>
     </ng-select>
   `,
-  selector: colorsAutocompleterSelector,
+  selector: 'opce-colors-autocompleter',
 })
 export class ColorsAutocompleterComponent implements OnInit {
   public options:any[];
diff --git a/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts b/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
index a54b068f4829..d7322f779db0 100644
--- a/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
+++ b/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -26,22 +26,16 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  Component,
-  ChangeDetectionStrategy,
-  ElementRef,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit, } from '@angular/core';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
 import { CopyToClipboardService } from './copy-to-clipboard.service';
 
-export const copyToClipboardSelector = 'copy-to-clipboard';
 
 @Component({
   template: '',
-  selector: copyToClipboardSelector,
+  selector: 'opce-copy-to-clipboard',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
diff --git a/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.ts b/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.ts
index 3c720d6435aa..130ab9e59b10 100644
--- a/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.ts
+++ b/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.ts
@@ -43,14 +43,8 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
-import {
-  onDayCreate,
-  validDate,
-} from 'core-app/shared/components/datepicker/helpers/date-modal.helpers';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { onDayCreate, validDate } from 'core-app/shared/components/datepicker/helpers/date-modal.helpers';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { DatePicker } from '../datepicker';
 import flatpickr from 'flatpickr';
@@ -58,10 +52,9 @@ import { DayElement } from 'flatpickr/dist/types/instance';
 import { populateInputsFromDataset } from '../../dataset-inputs';
 import { DeviceService } from 'core-app/core/browser/device.service';
 
-export const opBasicSingleDatePickerSelector = 'op-basic-single-date-picker';
 
 @Component({
-  selector: opBasicSingleDatePickerSelector,
+  selector: 'op-basic-single-date-picker',
   templateUrl: './basic-single-date-picker.component.html',
   styleUrls: ['../styles/datepicker.modal.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html
index 8ed5a87a897d..5b35f2ec620a 100644
--- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html
+++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html
@@ -1,7 +1,7 @@
 <spot-drop-modal
   [opened]="opened"
   (closed)="opened = false"
-  data-test-selector="op-modal-single-date-picker"
+  data-test-selector="opce-modal-single-date-picker"
 >
   <ng-content
     slot="trigger"
diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
index 71665ad833cd..b0d6152b7666 100644
--- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
+++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
@@ -42,27 +42,20 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
-import {
-  onDayCreate,
-  parseDate,
-  setDates,
-} from 'core-app/shared/components/datepicker/helpers/date-modal.helpers';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, } from '@angular/forms';
+import { onDayCreate, parseDate, setDates, } from 'core-app/shared/components/datepicker/helpers/date-modal.helpers';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { DatePicker } from '../datepicker';
 import flatpickr from 'flatpickr';
 import { DayElement } from 'flatpickr/dist/types/instance';
 import { populateInputsFromDataset } from '../../dataset-inputs';
 import { debounce } from 'lodash';
-import { SpotDropModalTeleportationService } from 'core-app/spot/components/drop-modal/drop-modal-teleportation.service';
-
-export const opModalSingleDatePickerSelector = 'op-modal-single-date-picker';
+import {
+  SpotDropModalTeleportationService
+} from 'core-app/spot/components/drop-modal/drop-modal-teleportation.service';
 
 @Component({
-  selector: opModalSingleDatePickerSelector,
+  selector: 'opce-modal-single-date-picker',
   templateUrl: './modal-single-date-picker.component.html',
   styleUrls: ['../styles/datepicker.modal.sass', './modal-single-date-picker.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.html b/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.html
deleted file mode 100644
index 9351db2af0b3..000000000000
--- a/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div
-  [innerHtml]="innerHtml"
-  class="op-uc-container"
-></div>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.spec.ts b/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.spec.ts
deleted file mode 100644
index 63ca11d1fd2f..000000000000
--- a/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.spec.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { ApplicationRef, Component, DebugElement } from '@angular/core';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
-import { DynamicBootstrapComponent } from './dynamic-bootstrap.component';
-
-// Stub component to bootstrap dynamically
-@Component({
-  selector: 'op-test',
-  template: '<div class="dynamic-component-div"></div>',
-})
-export class TestComponent {}
-
-// Stub DynamicBootstrapper so we can pass the stub component definition
-class TestDynamicBootstrapper extends DynamicBootstrapper {
-  static bootstrapOptionalEmbeddable(appRef:ApplicationRef, element:HTMLElement) {
-    DynamicBootstrapper.bootstrapOptionalEmbeddable(appRef, element, [{ selector: 'op-test', cls: TestComponent, embeddable: true }]);
-  }
-}
-
-describe('DynamicBootstrapComponent', () => {
-  let component:DynamicBootstrapComponent;
-  let fixture:ComponentFixture<DynamicBootstrapComponent>;
-  let element:DebugElement;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        DynamicBootstrapComponent,
-        TestComponent,
-      ],
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DynamicBootstrapComponent);
-    component = fixture.componentInstance;
-    element = fixture.debugElement;
-
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render HTML strings and bootstrap Angular directives', fakeAsync(() => {
-    // Overwrite with the stub dynamicBootstrapper
-    component.dynamicBootstrapper = TestDynamicBootstrapper;
-    component.HTML = '<op-test></op-test>';
-
-    fixture.detectChanges();
-    tick();
-
-    expect(element.nativeElement.querySelector('.dynamic-component-div')).toBeTruthy();
-  }));
-});
diff --git a/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.ts b/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.ts
deleted file mode 100644
index 93df98f0fc01..000000000000
--- a/frontend/src/app/shared/components/dynamic-bootstrap/component/dynamic-bootstrap/dynamic-bootstrap.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Allows to dynamically render an HTML string into any HTML node, dynamically
- * bootstrapping all its Angular components and directives.
- *
- * ```
- *  <op-dynamic-bootstrap HTML="<macro data-id="1" data-detailed="false" title="Macro nº1"></macro>">
- *  </op-dynamic-bootstrap>
- * ```
- * @module
- * @public
- */
-import {
-  ApplicationRef, Component, ElementRef, Input,
-} from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
-
-@Component({
-  selector: 'op-dynamic-bootstrap',
-  templateUrl: './dynamic-bootstrap.component.html',
-})
-export class DynamicBootstrapComponent {
-  /*
-  * HTML string to be rendered.
-  */
-  @Input()
-  set HTML(templateString:string) {
-    this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(templateString);
-    this.dynamicBootstrapper.bootstrapOptionalEmbeddable(this.appRef, this.elementRef.nativeElement);
-  }
-
-  innerHtml:SafeHtml;
-
-  dynamicBootstrapper = DynamicBootstrapper;
-
-  constructor(
-    readonly domSanitizer:DomSanitizer,
-    readonly elementRef:ElementRef,
-    readonly appRef:ApplicationRef,
-  ) { }
-}
diff --git a/frontend/src/app/shared/components/dynamic-bootstrap/dynamic-bootstrap.module.ts b/frontend/src/app/shared/components/dynamic-bootstrap/dynamic-bootstrap.module.ts
deleted file mode 100644
index 97d4745fbcd5..000000000000
--- a/frontend/src/app/shared/components/dynamic-bootstrap/dynamic-bootstrap.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DynamicBootstrapComponent } from './component/dynamic-bootstrap/dynamic-bootstrap.component';
-
-@NgModule({
-  declarations: [DynamicBootstrapComponent],
-  exports: [DynamicBootstrapComponent],
-})
-export class DynamicBootstrapModule { }
diff --git a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts
index 7352921fa6e0..e6d82bc52d32 100644
--- a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts
+++ b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts
@@ -50,10 +50,8 @@ import { AttachmentCollectionResource } from 'core-app/features/hal/resources/at
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 import { navigator } from '@hotwired/turbo';
 
-export const ckeditorAugmentedTextareaSelector = 'ckeditor-augmented-textarea';
 
 @Component({
-  selector: ckeditorAugmentedTextareaSelector,
   templateUrl: './ckeditor-augmented-textarea.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
index cc40a33db0fb..8d2ec30c9a5d 100644
--- a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
+++ b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
@@ -26,16 +26,15 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable, Injector,
-} from '@angular/core';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
+import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable, Injector, } from '@angular/core';
 
 @Injectable()
 export class CKEditorPreviewService {
-  constructor(private readonly componentFactoryResolver:ComponentFactoryResolver,
+  constructor(
+    private readonly componentFactoryResolver:ComponentFactoryResolver,
     private readonly appRef:ApplicationRef,
-    private readonly injector:Injector) {
+    private readonly injector:Injector,
+  ) {
   }
 
   /**
@@ -50,21 +49,6 @@ export class CKEditorPreviewService {
     hostElement.innerHTML = preview;
     const refs:ComponentRef<any>[] = [];
 
-    DynamicBootstrapper
-      .getEmbeddable()
-      .forEach((entry) => {
-        const matchedElements = hostElement.querySelectorAll(entry.selector);
-
-        for (let i = 0, l = matchedElements.length; i < l; i++) {
-          const factory = this.componentFactoryResolver.resolveComponentFactory(entry.cls);
-          const componentRef = factory.create(this.injector, [], matchedElements[i]);
-
-          refs.push(componentRef);
-          this.appRef.attachView(componentRef.hostView);
-          componentRef.changeDetectorRef.detectChanges();
-        }
-      });
-
     return () => {
       refs.forEach((ref) => {
         this.appRef.detachView(ref.hostView);
diff --git a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
index 86918626bb46..82052c1fb1d3 100644
--- a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
+++ b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
@@ -1,11 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Injector,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, Input, OnInit, } from '@angular/core';
 import { BannersService } from 'core-app/core/enterprise/banners.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { imagePath } from 'core-app/shared/helpers/images/path-helper';
@@ -14,10 +7,9 @@ import { PathHelperService } from 'core-app/core/path-helper/path-helper.service
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 import { pricingUrl } from 'core-app/core/setup/globals/constants.const';
 
-export const enterpriseBannerSelector = 'op-enterprise-banner';
 
 @Component({
-  selector: enterpriseBannerSelector,
+  selector: 'op-enterprise-banner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./enterprise-banner.component.sass'],
   templateUrl: './enterprise-banner.component.html',
diff --git a/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.html b/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.html
index a048cfbd9c2d..378703234353 100644
--- a/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.html
+++ b/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.html
@@ -47,5 +47,5 @@ <h2 [textContent]="feature_title"></h2>
     <span class="spot-icon spot-icon_enterprise-addons"></span>
     {{ text.upgrade }}
   </a>
-  <free-trial-button></free-trial-button>
+  <opce-free-trial-button></opce-free-trial-button>
 </div>
diff --git a/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts b/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts
index 74c2f4808078..0c12e1444f91 100644
--- a/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts
+++ b/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts
@@ -1,18 +1,12 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { imagePath } from 'core-app/shared/helpers/images/path-helper';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
-import { pricingUrl, contactUrl } from 'core-app/core/setup/globals/constants.const';
+import { contactUrl, pricingUrl } from 'core-app/core/setup/globals/constants.const';
 
-export const enterprisePageSelector = 'op-enterprise-page';
 
 @Component({
-  selector: enterprisePageSelector,
+  selector: 'op-enterprise-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './enterprise-page.component.html',
 })
diff --git a/frontend/src/app/shared/components/fields/display/field-types/formattable-display-field.module.ts b/frontend/src/app/shared/components/fields/display/field-types/formattable-display-field.module.ts
index 993104f44048..36d5fbf5edc9 100644
--- a/frontend/src/app/shared/components/fields/display/field-types/formattable-display-field.module.ts
+++ b/frontend/src/app/shared/components/fields/display/field-types/formattable-display-field.module.ts
@@ -28,7 +28,6 @@
 
 import { DisplayField } from 'core-app/shared/components/fields/display/display-field.module';
 import { ApplicationRef } from '@angular/core';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { ExpressionService } from 'core-app/core/expression/expression.service';
 
@@ -53,9 +52,6 @@ export class FormattableDisplayField extends DisplayField {
 
     element.innerHTML = '';
     element.appendChild(div);
-
-    // Allow embeddable rendered content
-    DynamicBootstrapper.bootstrapOptionalEmbeddable(this.appRef, div);
   }
 
   get placeholder():string {
diff --git a/frontend/src/app/shared/components/grids/grid/page/grid-page.component.html b/frontend/src/app/shared/components/grids/grid/page/grid-page.component.html
index 7ae64efdbf72..01a5002f85d8 100644
--- a/frontend/src/app/shared/components/grids/grid/page/grid-page.component.html
+++ b/frontend/src/app/shared/components/grids/grid/page/grid-page.component.html
@@ -7,7 +7,7 @@ <h2 [textContent]="text.title"></h2>
 
       <ul class="op-grid-page--toolbar-items toolbar-items hidden-for-mobile">
         <li class="toolbar-item hidden-for-tablet">
-          <zen-mode-toggle-button></zen-mode-toggle-button>
+          <opce-zen-mode-toggle-button></opce-zen-mode-toggle-button>
         </li>
       </ul>
   </div>
diff --git a/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts b/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts
index bb43ba20a5f5..9b2605731bf2 100644
--- a/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts
+++ b/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts
@@ -12,13 +12,14 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
-import { CustomTextEditFieldService } from 'core-app/shared/components/grids/widgets/custom-text/custom-text-edit-field.service';
+import {
+  CustomTextEditFieldService
+} from 'core-app/shared/components/grids/widgets/custom-text/custom-text-edit-field.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { filter } from 'rxjs/operators';
 import { GridAreaService } from 'core-app/shared/components/grids/grid/area.service';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
 
 @Component({
   templateUrl: './custom-text.component.html',
@@ -137,11 +138,6 @@ export class WidgetCustomTextComponent extends AbstractWidgetComponent implement
 
   private memorizeCustomText() {
     this.customText = this.sanitization.bypassSecurityTrustHtml(this.handler.htmlText);
-
-    // Allow embeddable rendered content
-    setTimeout(() => {
-      DynamicBootstrapper.bootstrapOptionalEmbeddable(this.appRef, this.displayContainer.nativeElement);
-    }, 100);
   }
 
   private clickedElementIsLinkWithinDisplayContainer(event:any) {
diff --git a/frontend/src/app/shared/components/grids/widgets/wp-overview/wp-overview.component.html b/frontend/src/app/shared/components/grids/widgets/wp-overview/wp-overview.component.html
index b112df723526..7da705aeca7e 100644
--- a/frontend/src/app/shared/components/grids/widgets/wp-overview/wp-overview.component.html
+++ b/frontend/src/app/shared/components/grids/widgets/wp-overview/wp-overview.component.html
@@ -8,7 +8,7 @@
   </widget-menu>
 </widget-header>
 
-<wp-overview-graph
+<opce-wp-overview-graph
     class='grid--widget-content -no-overflow'
     [groupBy]="'type'">
-</wp-overview-graph>
+</opce-wp-overview-graph>
diff --git a/frontend/src/app/shared/components/header-project-select/header-project-select.component.ts b/frontend/src/app/shared/components/header-project-select/header-project-select.component.ts
index 8da1e71b942c..a91c8b3f444f 100644
--- a/frontend/src/app/shared/components/header-project-select/header-project-select.component.ts
+++ b/frontend/src/app/shared/components/header-project-select/header-project-select.component.ts
@@ -46,10 +46,9 @@ import { ApiV3Filter } from 'core-app/shared/helpers/api-v3/api-v3-filter-builde
 import { IHALCollection } from 'core-app/core/apiv3/types/hal-collection.type';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 
-export const headerProjectSelectSelector = 'op-header-project-select';
 
 @Component({
-  selector: headerProjectSelectSelector,
+  selector: 'opce-header-project-select',
   templateUrl: './header-project-select.component.html',
   styleUrls: ['./header-project-select.component.sass'],
   encapsulation: ViewEncapsulation.None,
diff --git a/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts b/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts
index 926e40037978..66dca3c40060 100644
--- a/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts
+++ b/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts
@@ -27,9 +27,7 @@
 //++
 
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import {
-  Component, ElementRef, OnInit, ViewChild,
-} from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, } from '@angular/core';
 import {
   HideSectionDefinition,
   HideSectionService,
@@ -37,10 +35,9 @@ import {
 import { trackByProperty } from 'core-app/shared/helpers/angular/tracking-functions';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 
-export const addSectionDropdownSelector = 'add-section-dropdown';
 
 @Component({
-  selector: addSectionDropdownSelector,
+  selector: 'opce-add-section-dropdown',
   templateUrl: './add-section-dropdown.component.html',
 })
 export class AddSectionDropdownComponent extends UntilDestroyedMixin implements OnInit {
diff --git a/frontend/src/app/shared/components/hide-section/hide-section-link/hide-section-link.component.ts b/frontend/src/app/shared/components/hide-section/hide-section-link/hide-section-link.component.ts
index eb12c7f7b9b2..d9d00618bd6e 100644
--- a/frontend/src/app/shared/components/hide-section/hide-section-link/hide-section-link.component.ts
+++ b/frontend/src/app/shared/components/hide-section/hide-section-link/hide-section-link.component.ts
@@ -30,10 +30,9 @@ import { Component, ElementRef, OnInit } from '@angular/core';
 import { HideSectionService } from 'core-app/shared/components/hide-section/hide-section.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
-export const hideSectionLinkSelector = 'hide-section-link';
 
 @Component({
-  selector: hideSectionLinkSelector,
+  selector: 'opce-hide-section-link',
   templateUrl: './hide-section-link.component.html',
 })
 export class HideSectionLinkComponent implements OnInit {
diff --git a/frontend/src/app/shared/components/hide-section/show-section-dropdown.component.ts b/frontend/src/app/shared/components/hide-section/show-section-dropdown.component.ts
deleted file mode 100644
index 99c965c6fb65..000000000000
--- a/frontend/src/app/shared/components/hide-section/show-section-dropdown.component.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-//-- copyright
-// OpenProject is an open source project management software.
-// Copyright (C) the OpenProject GmbH
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See COPYRIGHT and LICENSE files for more details.
-//++
-
-import { Component, ElementRef, OnInit } from '@angular/core';
-import { HideSectionService } from './hide-section.service';
-
-export const showSectionDropdownSelector = 'show-section-dropdown';
-
-@Component({
-  selector: showSectionDropdownSelector,
-  template: '',
-})
-export class ShowSectionDropdownComponent implements OnInit {
-  public optValue:string; // value of option for which hide-section should be visible
-
-  public hideSecWithName:string; // section-name of hide-section
-
-  constructor(private HideSection:HideSectionService,
-    private elementRef:ElementRef) {
-  }
-
-  ngOnInit() {
-    const element = jQuery(this.elementRef.nativeElement);
-    this.optValue = element.data('optValue');
-    this.hideSecWithName = element.data('hideSecWithName');
-
-    const target = jQuery(this.elementRef.nativeElement).prev();
-    target.on('change', (event) => {
-      const selectedOption = jQuery('option:selected', event.target);
-
-      if (selectedOption.val() !== this.optValue) {
-        this.HideSection.hide(this.hideSecWithName);
-      } else {
-        this.HideSection.show(this.hideSecWithName);
-      }
-    });
-  }
-}
diff --git a/frontend/src/app/shared/components/modal/modal-overlay.component.ts b/frontend/src/app/shared/components/modal/modal-overlay.component.ts
index d7e1c0c857cf..50cd8fe72b81 100644
--- a/frontend/src/app/shared/components/modal/modal-overlay.component.ts
+++ b/frontend/src/app/shared/components/modal/modal-overlay.component.ts
@@ -34,10 +34,7 @@ import {
   ElementRef,
   ViewChild,
 } from '@angular/core';
-import {
-  CdkPortalOutlet,
-  ComponentPortal,
-} from '@angular/cdk/portal';
+import { CdkPortalOutlet, ComponentPortal, } from '@angular/cdk/portal';
 import { combineLatest } from 'rxjs';
 import { distinctUntilChanged, filter } from 'rxjs/operators';
 
@@ -46,10 +43,9 @@ import { OpModalComponent } from 'core-app/shared/components/modal/modal.compone
 import { ModalData, OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { PortalOutletTarget } from 'core-app/shared/components/modal/portal-outlet-target.enum';
 
-export const opModalOverlaySelector = 'op-modal-overlay';
 
 @Component({
-  selector: opModalOverlaySelector,
+  selector: 'opce-modal-overlay',
   templateUrl: './modal-overlay.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/shared/components/no-results/no-results.component.ts b/frontend/src/app/shared/components/no-results/no-results.component.ts
index e8b40635e3ae..a503d8266de8 100644
--- a/frontend/src/app/shared/components/no-results/no-results.component.ts
+++ b/frontend/src/app/shared/components/no-results/no-results.component.ts
@@ -26,20 +26,13 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, } from '@angular/core';
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 
-export const noResultsSelector = 'op-no-results';
 
 @Component({
   templateUrl: './no-results.component.html',
-  selector: noResultsSelector,
+  selector: 'op-no-results',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
diff --git a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html
index acd7caeec965..c3c033361fca 100644
--- a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html
+++ b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html
@@ -19,7 +19,7 @@
 <div
   class="op-non-working-days-list--add-button"
 >
-  <op-modal-single-date-picker
+  <opce-modal-single-date-picker
     id="test"
     name="test"
     [showIgnoreNonWorkingDays]="false"
@@ -54,6 +54,5 @@
       <span class="spot-icon spot-icon_add"></span>
       <span [textContent]="text.add_non_working_day"></span>
     </button>
-  </op-modal-single-date-picker>
+  </opce-modal-single-date-picker>
 </div>
-
diff --git a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts
index bcadd684b7fe..96b85136348a 100644
--- a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts
+++ b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts
@@ -30,7 +30,6 @@ import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import * as moment from 'moment-timezone';
 import allLocales from '@fullcalendar/core/locales-all';
 
-export const nonWorkingDaysListSelector = 'op-non-working-days-list';
 
 export interface INonWorkingDay {
   id:string|null;
@@ -40,7 +39,7 @@ export interface INonWorkingDay {
 }
 
 @Component({
-  selector: nonWorkingDaysListSelector,
+  selector: 'opce-non-working-days-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./op-non-working-days-list.component.sass'],
diff --git a/frontend/src/app/shared/components/persistent-toggle/persistent-toggle.component.ts b/frontend/src/app/shared/components/persistent-toggle/persistent-toggle.component.ts
index 73124c27a4ea..2b461c6a9647 100644
--- a/frontend/src/app/shared/components/persistent-toggle/persistent-toggle.component.ts
+++ b/frontend/src/app/shared/components/persistent-toggle/persistent-toggle.component.ts
@@ -28,10 +28,9 @@
 
 import { Component, ElementRef, OnInit } from '@angular/core';
 
-export const persistentToggleSelector = 'persistent-toggle';
 
 @Component({
-  selector: persistentToggleSelector,
+  selector: 'opce-persistent-toggle',
   template: '',
 })
 export class PersistentToggleComponent implements OnInit {
diff --git a/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts b/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts
index efc11cdc6d9a..afd1c0e3c08d 100644
--- a/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts
+++ b/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts
@@ -26,23 +26,16 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 
 import { ResizeDelta } from 'core-app/shared/components/resizer/resizer.component';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { MainMenuToggleService } from 'core-app/core/main-menu/main-menu-toggle.service';
 
-export const mainMenuResizerSelector = 'main-menu-resizer';
 
 @Component({
-  selector: mainMenuResizerSelector,
+  selector: 'opce-main-menu-resizer',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <op-resizer class="main-menu--resizer"
diff --git a/frontend/src/app/shared/components/storages/storage-information/storage-information.html b/frontend/src/app/shared/components/storages/storage-information/storage-information.html
index b399aee676d6..fe26c1dbca1a 100644
--- a/frontend/src/app/shared/components/storages/storage-information/storage-information.html
+++ b/frontend/src/app/shared/components/storages/storage-information/storage-information.html
@@ -19,8 +19,8 @@
   *ngIf="content.login"
   class="button-box"
 >
-  <op-storage-login-button
+  <opce-storage-login-button
     class="op-files-tab--storage-info-box-button"
     [input]="content.login"
-  ></op-storage-login-button>
+  ></opce-storage-login-button>
 </div>
diff --git a/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts b/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts
index 3c9b838fe4c4..6a74bfe03490 100644
--- a/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts
+++ b/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts
@@ -26,13 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -41,10 +35,9 @@ import { IStorageLoginInput } from 'core-app/shared/components/storages/storage-
 import { storageLocaleString } from 'core-app/shared/components/storages/functions/storages.functions';
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 
-export const opStorageLoginButtonSelector = 'op-storage-login-button';
 
 @Component({
-  selector: opStorageLoginButtonSelector,
+  selector: 'opce-storage-login-button',
   templateUrl: 'storage-login-button.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts b/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts
index 7f0d845965eb..ab5ce2b9389f 100644
--- a/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts
+++ b/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts
@@ -26,20 +26,13 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Injector,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector, } from '@angular/core';
 import { GonService } from 'core-app/core/gon/gon.service';
 import { StateService } from '@uirouter/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ScrollableTabsComponent } from 'core-app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component';
 import { TabDefinition } from 'core-app/shared/components/tabs/tab.interface';
 
-export const contentTabsSelector = 'content-tabs';
 
 interface GonTab extends TabDefinition {
   partial:string;
@@ -47,7 +40,7 @@ interface GonTab extends TabDefinition {
 }
 
 @Component({
-  selector: 'op-content-tabs',
+  selector: 'opce-content-tabs',
   templateUrl: '../scrollable-tabs/scrollable-tabs.component.html',
   styleUrls: ['./content-tabs.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts b/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts
index b7a69bb25baa..79242faa3268 100644
--- a/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts
+++ b/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts
@@ -1,26 +1,18 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Injector,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector, } from '@angular/core';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { TimeEntryEditService } from 'core-app/shared/components/time_entries/edit/edit.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
-import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
+import {
+  HalResourceEditingService
+} from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { TimeEntryResource } from 'core-app/features/hal/resources/time-entry-resource';
-import {
-  Observable,
-  switchMap,
-} from 'rxjs';
+import { Observable, switchMap, } from 'rxjs';
 
-export const triggerActionsEntryComponentSelector = 'time-entry--trigger-actions-entry';
 
 @Component({
-  selector: triggerActionsEntryComponentSelector,
+  selector: 'opce-time-entry-trigger-actions',
   template: `
     <a (click)="editTimeEntry()"
        [title]="text.edit"
diff --git a/frontend/src/app/shared/components/toaster/toasts-container.component.ts b/frontend/src/app/shared/components/toaster/toasts-container.component.ts
index 4c6df54f4d39..6f8492c01e77 100644
--- a/frontend/src/app/shared/components/toaster/toasts-container.component.ts
+++ b/frontend/src/app/shared/components/toaster/toasts-container.component.ts
@@ -26,13 +26,10 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { IToast, ToastService } from './toast.service';
 
-export const toastsContainerSelector = 'op-toasts-container';
 
 @Component({
   template: `
@@ -43,7 +40,7 @@ export const toastsContainerSelector = 'op-toasts-container';
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: toastsContainerSelector,
+  selector: 'opce-toasts-container',
 })
 export class ToastsContainerComponent extends UntilDestroyedMixin implements OnInit {
   public stack:IToast[] = [];
diff --git a/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts b/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts
index 39f4db7dba64..fa8c996263ca 100644
--- a/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts
+++ b/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts
@@ -13,16 +13,17 @@ import {
 } from 'core-app/shared/components/work-package-graphs/embedded/wp-embedded-graph.component';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ChartOptions } from 'chart.js';
-import { WpGraphConfigurationService } from 'core-app/shared/components/work-package-graphs/configuration/wp-graph-configuration.service';
+import {
+  WpGraphConfigurationService
+} from 'core-app/shared/components/work-package-graphs/configuration/wp-graph-configuration.service';
 import {
   WpGraphConfiguration,
   WpGraphQueryParams,
 } from 'core-app/shared/components/work-package-graphs/configuration/wp-graph-configuration';
 
-export const wpOverviewGraphSelector = 'wp-overview-graph';
 
 @Component({
-  selector: wpOverviewGraphSelector,
+  selector: 'opce-wp-overview-graph',
   templateUrl: './wp-overview-graph.template.html',
   styleUrls: ['./wp-overview-graph.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 9c56bc7b3469..afa6221fc2ac 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -26,10 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 import { FormsModule } from '@angular/forms';
-import {
-  Injector,
-  NgModule,
-} from '@angular/core';
+import { Injector, NgModule, } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
 import { UIRouterGlobals } from '@uirouter/core';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -42,13 +39,21 @@ import { DynamicModule } from 'ng-dynamic-component';
 import { UIRouterModule } from '@uirouter/angular';
 import { OpSpotModule } from 'core-app/spot/spot.module';
 import { CurrentUserModule } from 'core-app/core/current-user/current-user.module';
-import { OpenprojectAutocompleterModule } from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
+import {
+  OpenprojectAutocompleterModule
+} from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
 import { IconModule } from 'core-app/shared/components/icon/icon.module';
 import { AttributeHelpTextModule } from 'core-app/shared/components/attribute-help-texts/attribute-help-text.module';
-import { IconTriggeredContextMenuComponent } from 'core-app/shared/components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component';
+import {
+  IconTriggeredContextMenuComponent
+} from 'core-app/shared/components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
-import { SortHeaderDirective } from 'core-app/features/work-packages/components/wp-table/sort-header/sort-header.directive';
-import { ZenModeButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component';
+import {
+  SortHeaderDirective
+} from 'core-app/features/work-packages/components/wp-table/sort-header/sort-header.directive';
+import {
+  ZenModeButtonComponent
+} from 'core-app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component';
 import { OPContextMenuComponent } from 'core-app/shared/components/op-context-menu/op-context-menu.component';
 import { OpenprojectPrincipalRenderingModule } from 'core-app/shared/components/principal/principal-rendering.module';
 import { FocusModule } from 'core-app/shared/directives/focus/focus.module';
@@ -59,17 +64,16 @@ import { HomescreenNewFeaturesBlockComponent } from 'core-app/features/homescree
 import { TablePaginationComponent } from 'core-app/shared/components/table-pagination/table-pagination.component';
 import { HookService } from 'core-app/features/plugins/hook-service';
 import { StaticQueriesService } from 'core-app/shared/components/op-view-select/op-static-queries.service';
-import {
-  highlightColSelector,
-  OpHighlightColDirective,
-} from './directives/highlight-col/highlight-col.directive';
+import { highlightColSelector, OpHighlightColDirective, } from './directives/highlight-col/highlight-col.directive';
 import { CopyToClipboardService } from './components/copy-to-clipboard/copy-to-clipboard.service';
 import { CopyToClipboardComponent } from './components/copy-to-clipboard/copy-to-clipboard.component';
 import { OpDateTimeComponent } from './components/date/op-date-time.component';
 import { ToastComponent } from './components/toaster/toast.component';
 
 // Old datepickers
-import { OpMultiDatePickerComponent } from 'core-app/shared/components/datepicker/multi-date-picker/multi-date-picker.component';
+import {
+  OpMultiDatePickerComponent
+} from 'core-app/shared/components/datepicker/multi-date-picker/multi-date-picker.component';
 
 import { ToastsContainerComponent } from './components/toaster/toasts-container.component';
 import { UploadProgressComponent } from './components/toaster/upload-progress.component';
@@ -78,18 +82,22 @@ import { CollapsibleSectionComponent } from './components/collapsible-section/co
 import { NoResultsComponent } from './components/no-results/no-results.component';
 import { EditableToolbarTitleComponent } from './components/editable-toolbar-title/editable-toolbar-title.component';
 import { PersistentToggleComponent } from './components/persistent-toggle/persistent-toggle.component';
-import { AddSectionDropdownComponent } from './components/hide-section/add-section-dropdown/add-section-dropdown.component';
+import {
+  AddSectionDropdownComponent
+} from './components/hide-section/add-section-dropdown/add-section-dropdown.component';
 import { HideSectionLinkComponent } from './components/hide-section/hide-section-link/hide-section-link.component';
 import { RemoteFieldUpdaterComponent } from './components/remote-field-updater/remote-field-updater.component';
-import { ShowSectionDropdownComponent } from './components/hide-section/show-section-dropdown.component';
-import { DynamicBootstrapModule } from './components/dynamic-bootstrap/dynamic-bootstrap.module';
 import { OpOptionListComponent } from './components/option-list/option-list.component';
 import { OpProjectIncludeComponent } from './components/project-include/project-include.component';
 import { OpProjectIncludeListComponent } from './components/project-include/list/project-include-list.component';
 import { OpLoadingProjectListComponent } from './components/searchable-project-list/loading-project-list.component';
-import { OpNonWorkingDaysListComponent } from './components/op-non-working-days-list/op-non-working-days-list.component';
+import {
+  OpNonWorkingDaysListComponent
+} from './components/op-non-working-days-list/op-non-working-days-list.component';
 import { ViewsResourceService } from 'core-app/core/state/views/views.service';
-import { OpenprojectContentLoaderModule } from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
+import {
+  OpenprojectContentLoaderModule
+} from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import { OpDatePickerModule } from 'core-app/shared/components/datepicker/datepicker.module';
@@ -133,7 +141,6 @@ export function bootstrapModule(injector:Injector):void {
     NgSelectModule,
     NgOptionHighlightModule,
 
-    DynamicBootstrapModule,
     OpenprojectPrincipalRenderingModule,
     OpenprojectContentLoaderModule,
     OpenprojectAutocompleterModule,
@@ -158,7 +165,6 @@ export function bootstrapModule(injector:Injector):void {
     AttributeHelpTextModule,
     FormsModule,
     NgOptionHighlightModule,
-    DynamicBootstrapModule,
     OpenprojectPrincipalRenderingModule,
     OpenprojectAutocompleterModule,
     OpenprojectContentLoaderModule,
@@ -244,7 +250,6 @@ export function bootstrapModule(injector:Injector):void {
 
     PersistentToggleComponent,
     HideSectionLinkComponent,
-    ShowSectionDropdownComponent,
     AddSectionDropdownComponent,
     RemoteFieldUpdaterComponent,
 
diff --git a/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts b/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts
index a1a3e04bf332..161f10b9b0fb 100644
--- a/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts
+++ b/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts
@@ -1,22 +1,18 @@
 import {
-  OnInit,
   AfterViewChecked,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   HostBinding,
-  ChangeDetectorRef,
+  OnInit,
 } from '@angular/core';
-import {
-  SpotDropModalTeleportationService,
-  TeleportInstance,
-} from './drop-modal-teleportation.service';
+import { SpotDropModalTeleportationService, TeleportInstance, } from './drop-modal-teleportation.service';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 
-export const spotDropModalPortalComponentSelector = 'spot-drop-modal-portal';
 
 @Component({
-  selector: spotDropModalPortalComponentSelector,
+  selector: 'opce-spot-drop-modal-portal',
   template: '<ng-container *ngTemplateOutlet="template"></ng-container>',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/spot/components/switch/switch.component.ts b/frontend/src/app/spot/components/switch/switch.component.ts
index f0e549b1b5eb..e3b22e911597 100644
--- a/frontend/src/app/spot/components/switch/switch.component.ts
+++ b/frontend/src/app/spot/components/switch/switch.component.ts
@@ -10,18 +10,13 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 
 export type SpotSwitchState = boolean;
 
-export const spotSwitchSelector = 'spot-switch';
-
 @Component({
-  selector: spotSwitchSelector,
+  selector: 'spot-switch',
   templateUrl: './switch.component.html',
   providers: [{
     provide: NG_VALUE_ACCESSOR,
diff --git a/lib/open_project/text_formatting/filters/macro_filter.rb b/lib/open_project/text_formatting/filters/macro_filter.rb
index c61215200d6e..f801ba2d03be 100644
--- a/lib/open_project/text_formatting/filters/macro_filter.rb
+++ b/lib/open_project/text_formatting/filters/macro_filter.rb
@@ -92,5 +92,6 @@ def macro_applies?(macro_class, element)
   OpenProject::TextFormatting::Filters::Macros::CreateWorkPackageLink,
   OpenProject::TextFormatting::Filters::Macros::IncludeWikiPage,
   OpenProject::TextFormatting::Filters::Macros::EmbeddedTable,
-  OpenProject::TextFormatting::Filters::Macros::ChildPages
+  OpenProject::TextFormatting::Filters::Macros::ChildPages,
+  OpenProject::TextFormatting::Filters::Macros::GithubPullRequest
 )
diff --git a/lib/open_project/text_formatting/filters/macros/github_pull_request.rb b/lib/open_project/text_formatting/filters/macros/github_pull_request.rb
new file mode 100644
index 000000000000..db1030b634ba
--- /dev/null
+++ b/lib/open_project/text_formatting/filters/macros/github_pull_request.rb
@@ -0,0 +1,48 @@
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module OpenProject::TextFormatting::Filters::Macros
+  module GithubPullRequest
+    CUSTOM_ELEMENT = "opce-github-pull-request".freeze
+    HTML_CLASS = "github_pull_request".freeze
+
+    module_function
+
+    def identifier
+      HTML_CLASS
+    end
+
+    def apply(macro, **)
+      macro.name = CUSTOM_ELEMENT
+    end
+
+    def is?(macro)
+      macro["class"].include?(HTML_CLASS)
+    end
+  end
+end
diff --git a/lib/redmine/menu_manager/top_menu/projects_menu.rb b/lib/redmine/menu_manager/top_menu/projects_menu.rb
index caaa8e9d7ff7..e8876aba1403 100644
--- a/lib/redmine/menu_manager/top_menu/projects_menu.rb
+++ b/lib/redmine/menu_manager/top_menu/projects_menu.rb
@@ -38,7 +38,7 @@ def render_projects_top_menu_node
 
   def render_projects_dropdown
     content_tag(:li, class: "op-app-menu--item") do
-      angular_component_tag("op-header-project-select")
+      angular_component_tag("opce-header-project-select")
     end
   end
 
diff --git a/lib/redmine/menu_manager/top_menu_helper.rb b/lib/redmine/menu_manager/top_menu_helper.rb
index 1859b708e27e..1881d9b12bf4 100644
--- a/lib/redmine/menu_manager/top_menu_helper.rb
+++ b/lib/redmine/menu_manager/top_menu_helper.rb
@@ -92,7 +92,7 @@ def render_notification_top_menu_node
     return "".html_safe if Setting.notifications_hidden?
 
     content_tag("li", class: "op-app-menu--item", title: I18n.t("mail.notification.center")) do
-      angular_component_tag "op-in-app-notification-bell",
+      angular_component_tag "opce-in-app-notification-bell",
                             inputs: {
                               interval: Setting.notifications_polling_interval
                             }
diff --git a/lib/tabular_form_builder.rb b/lib/tabular_form_builder.rb
index fa97bab69f10..88576b7869cd 100644
--- a/lib/tabular_form_builder.rb
+++ b/lib/tabular_form_builder.rb
@@ -117,7 +117,7 @@ def date_picker(field, options = {})
     end
 
     label = label_for_field(field, label_options)
-    input = angular_component_tag("op-basic-single-date-picker",
+    input = angular_component_tag("opce-basic-single-date-picker",
                                   class: options[:class],
                                   inputs:)
     (label + container_wrap_field(input, :date_picker, options))
diff --git a/lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb b/lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb
index 672cfe08c288..79186a66d139 100644
--- a/lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb
+++ b/lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb
@@ -1,13 +1,13 @@
-<collapsible-section-augment initially-expanded="true"
+<opce-collapsible-section-augment initially-expanded="true"
                              section-title="My section title">
 
-</collapsible-section-augment>
-<div class="collapsible-section-augment--body" hidden>
+</opce-collapsible-section-augment>
+<div class="opce-collapsible-section-augment--body" hidden>
   <p><strong>Initially expanded</strong></p>
 </div>
 
-<collapsible-section-augment section-title="My closed section title">
-</collapsible-section-augment>
-<div class="collapsible-section-augment--body" hidden>
+<opce-collapsible-section-augment section-title="My closed section title">
+</opce-collapsible-section-augment>
+<div class="opce-collapsible-section-augment--body" hidden>
   <p><strong>Initially closed</strong></p>
 </div>
diff --git a/modules/avatars/app/views/avatars/users/_local_avatars.html.erb b/modules/avatars/app/views/avatars/users/_local_avatars.html.erb
index 531907f84a53..8b7fca499085 100644
--- a/modules/avatars/app/views/avatars/users/_local_avatars.html.erb
+++ b/modules/avatars/app/views/avatars/users/_local_avatars.html.erb
@@ -30,5 +30,5 @@
         </div>
       </div>
     </div>
-    <avatar-upload-form target="<%= @target_avatar_path %>" method="PUT"></avatar-upload-form>
+    <opce-avatar-upload-form target="<%= @target_avatar_path %>" method="PUT"></opce-avatar-upload-form>
 </fieldset>
diff --git a/modules/avatars/frontend/module/avatar-upload-form/avatar-upload-form.component.ts b/modules/avatars/frontend/module/avatar-upload-form/avatar-upload-form.component.ts
index 324f720b0649..677b0e3454d2 100644
--- a/modules/avatars/frontend/module/avatar-upload-form/avatar-upload-form.component.ts
+++ b/modules/avatars/frontend/module/avatar-upload-form/avatar-upload-form.component.ts
@@ -26,14 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, } from '@angular/core';
 
 import { resizeFile } from 'core-app/shared/helpers/images/resizer';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
@@ -44,7 +37,7 @@ import { AvatarUploadFile, AvatarUploadService } from '../avatar-upload.service'
 import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
-  selector: 'avatar-upload-form',
+  selector: 'opce-avatar-upload-form',
   templateUrl: './avatar-upload-form.html',
   providers: [{ provide: OpUploadService, useClass: AvatarUploadService }],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/modules/avatars/frontend/module/main.ts b/modules/avatars/frontend/module/main.ts
index 9454534db802..5707cca48574 100644
--- a/modules/avatars/frontend/module/main.ts
+++ b/modules/avatars/frontend/module/main.ts
@@ -26,7 +26,6 @@
 
 import { Injector, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HookService } from 'core-app/features/plugins/hook-service';
 import { AvatarUploadFormComponent } from './avatar-upload-form/avatar-upload-form.component';
 
 @NgModule({
@@ -39,9 +38,5 @@ import { AvatarUploadFormComponent } from './avatar-upload-form/avatar-upload-fo
 })
 export class PluginModule {
   constructor(injector:Injector) {
-    const hookService = injector.get(HookService);
-    hookService.register('openProjectAngularBootstrap', () => [
-      { selector: 'avatar-upload-form', cls: AvatarUploadFormComponent },
-    ]);
   }
 }
diff --git a/modules/backlogs/app/views/rb_sprints/_sprint.html.erb b/modules/backlogs/app/views/rb_sprints/_sprint.html.erb
index 9055f2fd94a3..e50d04d0addb 100644
--- a/modules/backlogs/app/views/rb_sprints/_sprint.html.erb
+++ b/modules/backlogs/app/views/rb_sprints/_sprint.html.erb
@@ -52,14 +52,14 @@ See COPYRIGHT and LICENSE files for more details.
 
   <% if User.current.allowed_in_project?(:update_sprints, @project) %>
     <div class="editors permanent">
-      <%= angular_component_tag "op-basic-single-date-picker",
+      <%= angular_component_tag "opce-basic-single-date-picker",
                                 inputs: {
                                   value: sprint.effective_date,
                                   inputClassNames: 'effective_date editor',
                                   id: "effective_date_#{sprint.id}",
                                   name: :effective_date
                                 } %>
-      <%= angular_component_tag "op-basic-single-date-picker",
+      <%= angular_component_tag "opce-basic-single-date-picker",
                                 inputs: {
                                   value: sprint.start_date,
                                   inputClassNames: 'start_date editor',
diff --git a/modules/budgets/frontend/module/augment/cost-subform.augment.service.ts b/modules/budgets/frontend/module/augment/cost-subform.augment.service.ts
index 574728afd228..6c93f684f68e 100644
--- a/modules/budgets/frontend/module/augment/cost-subform.augment.service.ts
+++ b/modules/budgets/frontend/module/augment/cost-subform.augment.service.ts
@@ -27,7 +27,6 @@
 //++
 
 import { Injectable } from "@angular/core";
-import { OpenProjectPluginContext } from 'core-app/features/plugins/plugin-context';
 
 @Injectable()
 export class CostSubformAugmentService {
@@ -60,11 +59,6 @@ export class CostSubformAugmentService {
         container.append(row);
         rowIndex += 1;
 
-        window.OpenProject.getPluginContext()
-          .then((pluginContext:OpenProjectPluginContext) => {
-            pluginContext.bootstrap(row[0]);
-          });
-
         setTimeout(() => container.find('.subform-row:last-child input:first').focus(), 10)
 
         return false;
@@ -72,5 +66,3 @@ export class CostSubformAugmentService {
     });
   }
 }
-
-
diff --git a/modules/costs/app/views/cost_types/index.html.erb b/modules/costs/app/views/cost_types/index.html.erb
index beb8b9d04907..4e0d119c86ea 100644
--- a/modules/costs/app/views/cost_types/index.html.erb
+++ b/modules/costs/app/views/cost_types/index.html.erb
@@ -56,7 +56,7 @@ See COPYRIGHT and LICENSE files for more details.
           <li class="simple-filters--filter">
             <%= styled_label_tag :fixed_date, t(:'attributes.fixed_date'), class: 'simple-filters--filter-name' %>
             <div class='simple-filters--filter-value'>
-              <%= angular_component_tag 'op-basic-single-date-picker',
+              <%= angular_component_tag 'opce-basic-single-date-picker',
                                         inputs: {
                                           value: @fixed_date,
                                           id: :start_date,
diff --git a/modules/costs/app/views/costlog/edit.html.erb b/modules/costs/app/views/costlog/edit.html.erb
index 9233e5cfb070..bcbcd54cca80 100644
--- a/modules/costs/app/views/costlog/edit.html.erb
+++ b/modules/costs/app/views/costlog/edit.html.erb
@@ -38,9 +38,9 @@ See COPYRIGHT and LICENSE files for more details.
   :post :
   :put %>
 
-<remote-field-updater data-url="<%= url_for(controller: :budgets, action: :update_material_budget_item, project_id: @cost_entry.project) %>"
+<opce-remote-field-updater data-url="<%= url_for(controller: :budgets, action: :update_material_budget_item, project_id: @cost_entry.project) %>"
                       data-mode="json">
-</remote-field-updater>
+</opce-remote-field-updater>
 <%= labelled_tabular_form_for @cost_entry, url: url, html: { method: method } do |f| %>
   <%= error_messages_for 'cost_entry' %>
   <%= back_url_hidden_field_tag %>
diff --git a/modules/costs/app/views/my/timer/_menu.html.erb b/modules/costs/app/views/my/timer/_menu.html.erb
index 393d9436e9bb..4dbdc7a89443 100644
--- a/modules/costs/app/views/my/timer/_menu.html.erb
+++ b/modules/costs/app/views/my/timer/_menu.html.erb
@@ -1 +1 @@
-<%= angular_component_tag 'op-timer-account-menu' %>
+<%= angular_component_tag 'opce-timer-account-menu' %>
diff --git a/modules/github_integration/frontend/module/main.ts b/modules/github_integration/frontend/module/main.ts
index 45f0f92edede..2133ff879baa 100644
--- a/modules/github_integration/frontend/module/main.ts
+++ b/modules/github_integration/frontend/module/main.ts
@@ -24,13 +24,12 @@
 //
 // See COPYRIGHT and LICENSE files for more details.
 
-import {
-  Injector,
-  NgModule,
-} from '@angular/core';
+import { Injector, NgModule, } from '@angular/core';
 import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectTabsModule } from 'core-app/shared/components/tabs/openproject-tabs.module';
-import { WorkPackageTabsService } from 'core-app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-tabs.service';
+import {
+  WorkPackageTabsService
+} from 'core-app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-tabs.service';
 import { GitHubTabComponent } from './github-tab/github-tab.component';
 import { TabHeaderComponent } from './tab-header/tab-header.component';
 import { TabPrsComponent } from './tab-prs/tab-prs.component';
@@ -41,12 +40,9 @@ import { WorkPackageResource } from 'core-app/features/hal/resources/work-packag
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { GithubPullRequestResourceService } from './state/github-pull-request.service';
-import {
-  githubPullRequestMacroSelector,
-  PullRequestMacroComponent,
-} from './pull-request/pull-request-macro.component';
-import { DynamicBootstrapper } from 'core-app/core/setup/globals/dynamic-bootstrapper';
+import { PullRequestMacroComponent, } from './pull-request/pull-request-macro.component';
 import { PullRequestStateComponent } from './pull-request/pull-request-state.component';
+import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 export function workPackageGithubPrsCount(
   workPackage:WorkPackageResource,
@@ -101,8 +97,6 @@ export function initializeGithubIntegrationPlugin(injector:Injector) {
 export class PluginModule {
   constructor(injector:Injector) {
     initializeGithubIntegrationPlugin(injector);
-    DynamicBootstrapper.register(
-      { selector: githubPullRequestMacroSelector, cls: PullRequestMacroComponent, embeddable: true },
-    );
+    registerCustomElement('opce-github-pull-request', PullRequestMacroComponent, { injector });
   }
 }
diff --git a/modules/github_integration/frontend/module/pull-request/pull-request-macro.component.ts b/modules/github_integration/frontend/module/pull-request/pull-request-macro.component.ts
index d952bcf5db34..2e05a4282d66 100644
--- a/modules/github_integration/frontend/module/pull-request/pull-request-macro.component.ts
+++ b/modules/github_integration/frontend/module/pull-request/pull-request-macro.component.ts
@@ -38,10 +38,7 @@ import { map } from 'rxjs/operators';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { PullRequestState } from './pull-request-state.component';
 
-export const githubPullRequestMacroSelector = 'macro.github_pull_request';
-
 @Component({
-  selector: githubPullRequestMacroSelector,
   templateUrl: './pull-request-macro.component.html',
   styleUrls: ['./pull-request-macro.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/modules/reporting/lib/widget/filters/date.rb b/modules/reporting/lib/widget/filters/date.rb
index 73fc96529abb..c4764876c264 100644
--- a/modules/reporting/lib/widget/filters/date.rb
+++ b/modules/reporting/lib/widget/filters/date.rb
@@ -41,7 +41,7 @@ def render
                          class: "hidden-for-sighted"
 
       arg1 = content_tag :span, id: "#{id_prefix}arg_1" do
-        text1 = angular_component_tag "op-basic-single-date-picker",
+        text1 = angular_component_tag "opce-basic-single-date-picker",
                                       inputs: {
                                         value: filter.values.first.to_s,
                                         id: "#{id_prefix}arg_1_val",
@@ -55,7 +55,7 @@ def render
                          class: "hidden-for-sighted"
 
       arg2 = content_tag :span, id: "#{id_prefix}arg_2", class: "advanced-filters--filter-value2" do
-        text2 = angular_component_tag "op-basic-single-date-picker",
+        text2 = angular_component_tag "opce-basic-single-date-picker",
                                       inputs: {
                                         value: filter.values.second.to_s,
                                         id: "#{id_prefix}arg_2_val",
diff --git a/modules/reporting/lib/widget/reporting_widget.rb b/modules/reporting/lib/widget/reporting_widget.rb
index a4552f65ca95..9be484e4a3fb 100644
--- a/modules/reporting/lib/widget/reporting_widget.rb
+++ b/modules/reporting/lib/widget/reporting_widget.rb
@@ -34,6 +34,7 @@ class Widget::ReportingWidget < ActionView::Base
   include ActionView::Helpers::OutputSafetyHelper
   include Rails.application.routes.url_helpers
   include ApplicationHelper
+  include AngularHelper
   include ReportingHelper
   include Redmine::I18n
 
diff --git a/modules/reporting/lib/widget/table/entry_table.rb b/modules/reporting/lib/widget/table/entry_table.rb
index a1fa09ec7e11..dfb95fcb419f 100644
--- a/modules/reporting/lib/widget/table/entry_table.rb
+++ b/modules/reporting/lib/widget/table/entry_table.rb
@@ -162,19 +162,19 @@ def icons(result)
 
           icons << link_to(icon_wrapper("icon-context icon-delete", I18n.t(:button_delete)),
                            action_for(result, action: "destroy")
-                              .reverse_merge(authenticity_token: form_authenticity_token),
+                             .reverse_merge(authenticity_token: form_authenticity_token),
                            data: { confirm: I18n.t(:text_are_you_sure) },
                            method: :delete,
                            class: "no-decoration-on-hover",
                            title: I18n.t(:button_delete))
         else
-          icons = content_tag(:"time-entry--trigger-actions-entry",
-                              "",
-                              data: { entry: result["id"] })
+          icons = angular_component_tag("opce-time-entry-trigger-actions",
+                                        data: { entry: result["id"] })
         end
       end
     end
     icons
   end
+
   # rubocop:enable Metrics/AbcSize
 end
diff --git a/modules/storages/app/views/storages/project_settings/_project_folder_form.html.erb b/modules/storages/app/views/storages/project_settings/_project_folder_form.html.erb
index d667e379aadc..3811901d3d2d 100644
--- a/modules/storages/app/views/storages/project_settings/_project_folder_form.html.erb
+++ b/modules/storages/app/views/storages/project_settings/_project_folder_form.html.erb
@@ -68,7 +68,7 @@ See COPYRIGHT and LICENSE files for more details.
   <%= styled_label_tag :project_folder_mode,
                        class: "-bold -flex" do %>
     <%= t(:"storages.label_project_folder") %>
-    <%= angular_component_tag 'op-static-attribute-help-text',
+    <%= angular_component_tag 'opce-static-attribute-help-text',
                               inputs: {
                                 title: t(:"storages.label_project_folder"),
                                 content: t(:"storages.help_texts.project_folder"),
@@ -133,7 +133,7 @@ See COPYRIGHT and LICENSE files for more details.
       <%= spot_icon('folder-open') %>
       <%= content_tag :span, t(:"storages.buttons.select_folder") %>
     <% end %>
-    <%= angular_component_tag 'op-storage-login-button',
+    <%= angular_component_tag 'opce-storage-login-button',
                               inputs: {
                                 input: storage_login_input(@project_storage.storage)
                               },
diff --git a/spec/lib/custom_field_form_builder_spec.rb b/spec/lib/custom_field_form_builder_spec.rb
index b87d0009033b..00820ae90378 100644
--- a/spec/lib/custom_field_form_builder_spec.rb
+++ b/spec/lib/custom_field_form_builder_spec.rb
@@ -102,14 +102,14 @@
       it "outputs element" do
         expect(output).to be_html_eql(
           <<~HTML
-            <op-basic-single-date-picker
+            <opce-basic-single-date-picker
               class="custom-class"
               data-value="null"
               data-id='"user_custom_field_#{custom_field.id}"'
               data-name='"user[#{custom_field.id}]"'
-            ></op-basic-single-date-picker>
+            ></opce-basic-single-date-picker>
           HTML
-        ).at_path("op-basic-single-date-picker")
+        ).at_path("opce-basic-single-date-picker")
       end
     end
 
diff --git a/spec/lib/tabular_form_builder_spec.rb b/spec/lib/tabular_form_builder_spec.rb
index e309eb5a3a45..4f2eb6931f2e 100644
--- a/spec/lib/tabular_form_builder_spec.rb
+++ b/spec/lib/tabular_form_builder_spec.rb
@@ -279,9 +279,9 @@
     it_behaves_like "wrapped in field-container by default"
 
     it "outputs element" do
-      expect(output).to have_css "op-basic-single-date-picker"
+      expect(output).to have_css "opce-basic-single-date-picker"
       # Regression test, allow for the name to be passed through
-      expect(output).to have_css "op-basic-single-date-picker[data-name='\"#{options[:name]}\"']"
+      expect(output).to have_css "opce-basic-single-date-picker[data-name='\"#{options[:name]}\"']"
     end
   end
 
diff --git a/spec/support/capybara_browser_logs.rb b/spec/support/capybara_browser_logs.rb
index d7f9faf372f5..4bb493b72104 100644
--- a/spec/support/capybara_browser_logs.rb
+++ b/spec/support/capybara_browser_logs.rb
@@ -41,7 +41,7 @@ class Formatter
 
     attr_reader :output
 
-    EXCLUDE_PATTERN = /Angular is running in development mode./
+    EXCLUDE_PATTERN = /(Angular is running in development mode|\[DEBUG\]|"details:" Object|DEPRECATED)/
 
     def initialize(output)
       @output = output
diff --git a/spec/support/pages/custom_fields.rb b/spec/support/pages/custom_fields.rb
index 45214059b9cc..593f859d0b99 100644
--- a/spec/support/pages/custom_fields.rb
+++ b/spec/support/pages/custom_fields.rb
@@ -36,7 +36,7 @@ def path
 
     def visit_tab(name)
       visit!
-      within("content-tabs") do
+      within("opce-content-tabs") do
         click_link name.to_s
       end
     end
diff --git a/spec/support/pages/notifications/center.rb b/spec/support/pages/notifications/center.rb
index 697f44ad0825..0539b2192124 100644
--- a/spec/support/pages/notifications/center.rb
+++ b/spec/support/pages/notifications/center.rb
@@ -139,7 +139,7 @@ def expect_bell_count(count)
       end
 
       def bell_element
-        page.find('op-in-app-notification-bell [data-test-selector="op-ian-bell"]')
+        page.find('opce-in-app-notification-bell [data-test-selector="op-ian-bell"]')
       end
 
       def expect_no_toaster

From 44412c300622593bef87272bbc58f02112b3af31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 14 Aug 2024 13:42:23 +0200
Subject: [PATCH 02/12] Replace opHighlightCol with stimulus controller

---
 .../projects/table_component.html.erb         |  4 +-
 app/components/table_component.html.erb       |  4 +-
 app/views/attribute_help_texts/_tab.html.erb  |  8 +-
 .../custom_fields/_custom_options.html.erb    |  8 +-
 app/views/custom_fields/_tab.html.erb         | 14 +--
 app/views/forums/index.html.erb               | 12 +--
 app/views/forums/show.html.erb                | 12 +--
 app/views/groups/_memberships.html.erb        |  6 +-
 app/views/groups/_users_table.html.erb        |  2 +-
 app/views/groups/index.html.erb               |  6 +-
 .../_memberships.html.erb                     |  4 +-
 app/views/my/access_token.html.erb            |  3 +-
 .../_icalendar_tokens_section.html.erb        | 10 +--
 .../_oauth_tokens_section.html.erb            | 10 +--
 .../_rss_tokens_section.html.erb              | 14 ++-
 .../_storage_tokens_section.html.erb          |  2 +-
 .../_token_table_header.html.erb              |  6 +-
 app/views/principals/_global_roles.html.erb   |  4 +-
 .../settings/categories/show.html.erb         |  6 +-
 .../settings/custom_fields/_form.html.erb     |  8 +-
 .../projects/settings/types/_form.html.erb    | 12 +--
 app/views/repositories/_dir_list.html.erb     | 14 +--
 app/views/repositories/_revisions.html.erb    |  8 +-
 app/views/repositories/committers.html.erb    |  6 +-
 app/views/roles/index.html.erb                |  8 +-
 app/views/roles/report.html.erb               | 14 +--
 app/views/types/index.html.erb                | 14 +--
 app/views/wiki/history.html.erb               |  8 +-
 .../work_packages/reports/_report.html.erb    |  4 +-
 app/views/workflows/show.html.erb             | 12 +--
 .../wp-table/wp-table.component.html          |  4 +-
 .../list/time-entries-list.component.html     |  8 +-
 .../highlight-col/highlight-col.directive.ts  | 71 ---------------
 frontend/src/app/shared/shared.module.ts      | 16 ----
 .../table-highlighting.controller.ts          | 87 +++++++++++++++++++
 frontend/src/stimulus/setup.ts                |  2 +
 .../deprecated/table_preview/buttons.html.erb |  2 +-
 .../deprecated/table_preview/default.html.erb | 12 +--
 .../deprecated/table_preview/footer.html.erb  | 12 +--
 .../table_preview/no_ellipse.html.erb         | 12 +--
 .../projects/settings/backlogs/show.html.erb  |  6 +-
 ...tual_labor_budget_items_component.html.erb |  8 +-
 ...l_material_budget_items_component.html.erb |  8 +-
 ...nned_labor_budget_items_component.html.erb |  8 +-
 ...d_material_budget_items_component.html.erb |  8 +-
 .../budgets/app/views/budgets/_list.html.erb  | 14 +--
 .../subform/_labor_budget_subform.html.erb    | 10 +--
 .../subform/_material_budget_subform.html.erb | 10 +--
 .../costs/app/views/cost_types/_list.html.erb | 14 +--
 .../views/cost_types/_list_deleted.html.erb   | 10 +--
 .../costs/app/views/cost_types/edit.html.erb  |  6 +-
 .../views/hourly_rates/_list_default.html.erb |  6 +-
 .../views/hourly_rates/_list_project.html.erb |  6 +-
 .../app/views/hourly_rates/edit.html.erb      |  4 +-
 .../destroy_info.html.erb                     |  2 +-
 .../views/meeting_contents/history.html.erb   | 10 +--
 .../reporting/lib/widget/table/entry_table.rb |  6 +-
 57 files changed, 301 insertions(+), 304 deletions(-)
 delete mode 100644 frontend/src/app/shared/directives/highlight-col/highlight-col.directive.ts
 create mode 100644 frontend/src/stimulus/controllers/table-highlighting.controller.ts

diff --git a/app/components/projects/table_component.html.erb b/app/components/projects/table_component.html.erb
index 75c710351551..6a1acbe642ab 100644
--- a/app/components/projects/table_component.html.erb
+++ b/app/components/projects/table_component.html.erb
@@ -31,10 +31,10 @@ See COPYRIGHT and LICENSE files for more details.
   <div class="generic-table--flex-container">
     <div class="generic-table--container <%= container_class %>">
       <div class="generic-table--results-container">
-        <table class="generic-table" <%= table_id ? "id=\"#{table_id}\"".html_safe : '' %>>
+        <table class="generic-table" data-controller="table-highlighting" <%= table_id ? "id=\"#{table_id}\"".html_safe : '' %>>
           <colgroup>
             <% columns.each do |column| %>
-              <col <%= "opHighlightCol" unless column.attribute == :hierarchy %> >
+              <col>
             <% end %>
             <col>
           </colgroup>
diff --git a/app/components/table_component.html.erb b/app/components/table_component.html.erb
index eb7b80bec8db..da9808b991d3 100644
--- a/app/components/table_component.html.erb
+++ b/app/components/table_component.html.erb
@@ -29,10 +29,10 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container <%= container_class %>" data-test-selector="<%= test_selector %>">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
         <% headers.each do |_name, _options| %>
-          <col opHighlightCol>
+          <col>
         <% end %>
         <col>
       </colgroup>
diff --git a/app/views/attribute_help_texts/_tab.html.erb b/app/views/attribute_help_texts/_tab.html.erb
index 1da41bb295ac..12f569dd415c 100644
--- a/app/views/attribute_help_texts/_tab.html.erb
+++ b/app/views/attribute_help_texts/_tab.html.erb
@@ -2,11 +2,11 @@
 <% if entries.any? %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/app/views/custom_fields/_custom_options.html.erb b/app/views/custom_fields/_custom_options.html.erb
index 42104014231b..a70d9f0942d8 100644
--- a/app/views/custom_fields/_custom_options.html.erb
+++ b/app/views/custom_fields/_custom_options.html.erb
@@ -32,11 +32,11 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table" id="custom-options-table">
+    <table class="generic-table" id="custom-options-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
         <col>
       </colgroup>
       <thead>
diff --git a/app/views/custom_fields/_tab.html.erb b/app/views/custom_fields/_tab.html.erb
index 61ca5e638b2a..4dea4e198b71 100644
--- a/app/views/custom_fields/_tab.html.erb
+++ b/app/views/custom_fields/_tab.html.erb
@@ -39,16 +39,16 @@ See COPYRIGHT and LICENSE files for more details.
           </div>
         </div>
       <% end %>
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
           <% if tab[:name] == 'WorkPackageCustomField' %>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
           <% end %>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/app/views/forums/index.html.erb b/app/views/forums/index.html.erb
index ef46ec843c41..aa1a2dde488c 100644
--- a/app/views/forums/index.html.erb
+++ b/app/views/forums/index.html.erb
@@ -46,14 +46,14 @@ See COPYRIGHT and LICENSE files for more details.
 <% else %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table boards">
+      <table class="generic-table boards" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
+          <col>
           <% if User.current.allowed_in_project?(:manage_forums, @project) %>
-            <col opHighlightCol>
+            <col>
             <col>
           <% end %>
         </colgroup>
diff --git a/app/views/forums/show.html.erb b/app/views/forums/show.html.erb
index 3e14c6529c23..cf7cc4615d4e 100644
--- a/app/views/forums/show.html.erb
+++ b/app/views/forums/show.html.erb
@@ -69,13 +69,13 @@ See COPYRIGHT and LICENSE files for more details.
 <% if @topics.any? %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
+          <col>
+          <col>
         </colgroup>
         <thead>
         <tr>
diff --git a/app/views/groups/_memberships.html.erb b/app/views/groups/_memberships.html.erb
index 802458872afe..8064048d3a4a 100644
--- a/app/views/groups/_memberships.html.erb
+++ b/app/views/groups/_memberships.html.erb
@@ -35,10 +35,10 @@ See COPYRIGHT and LICENSE files for more details.
     <% if @group.memberships.any? %>
       <div class="generic-table--container">
         <div class="generic-table--results-container">
-          <table class="generic-table memberships">
+          <table class="generic-table memberships" data-controller="table-highlighting">
             <colgroup>
-              <col opHighlightCol>
-              <col opHighlightCol>
+              <col>
+              <col>
               <col>
             </colgroup>
             <thead>
diff --git a/app/views/groups/_users_table.html.erb b/app/views/groups/_users_table.html.erb
index b8595fb23a84..1b9f1e9a4bd7 100644
--- a/app/views/groups/_users_table.html.erb
+++ b/app/views/groups/_users_table.html.erb
@@ -29,7 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <table class="generic-table users">
   <colgroup>
-    <col opHighlightCol>
+    <col colightCol>
     <col>
   </colgroup>
   <thead>
diff --git a/app/views/groups/index.html.erb b/app/views/groups/index.html.erb
index 533d13cb5d54..00bb41da9c72 100644
--- a/app/views/groups/index.html.erb
+++ b/app/views/groups/index.html.erb
@@ -54,10 +54,10 @@ See COPYRIGHT and LICENSE files for more details.
 <% if @groups.any? %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/app/views/individual_principals/_memberships.html.erb b/app/views/individual_principals/_memberships.html.erb
index 5879ceaa5816..80c0839358de 100644
--- a/app/views/individual_principals/_memberships.html.erb
+++ b/app/views/individual_principals/_memberships.html.erb
@@ -40,8 +40,8 @@ See COPYRIGHT and LICENSE files for more details.
       <div class="generic-table--results-container">
         <table class="generic-table memberships">
           <colgroup>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
             <%= call_individual_principals_memberships_hook(@individual_principal, 'colgroup') %>
             <col>
           </colgroup>
diff --git a/app/views/my/access_token.html.erb b/app/views/my/access_token.html.erb
index f974a8639dcc..0051eafd106f 100644
--- a/app/views/my/access_token.html.erb
+++ b/app/views/my/access_token.html.erb
@@ -52,9 +52,8 @@ See COPYRIGHT and LICENSE files for more details.
 %>
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <%= call_hook(:view_access_tokens_table, user: @user) %>
     </table>
   </div>
 </div>
-
diff --git a/app/views/my/access_token_partials/_icalendar_tokens_section.html.erb b/app/views/my/access_token_partials/_icalendar_tokens_section.html.erb
index 3fd2595a7564..b27005601990 100644
--- a/app/views/my/access_token_partials/_icalendar_tokens_section.html.erb
+++ b/app/views/my/access_token_partials/_icalendar_tokens_section.html.erb
@@ -40,17 +40,17 @@ See COPYRIGHT and LICENSE files for more details.
       <% if ical_tokens_grouped_by_query.any? %>
         <div class="generic-table--container">
           <div class="generic-table--results-container">
-            <table class="generic-table">
+            <table class="generic-table" data-controller="table-highlighting">
               <%= render  partial: "my/access_token_partials/token_table_header",
-                          locals: { 
+                          locals: {
                             column_headers: [
                               t('attributes.name'),
                               WorkPackage.human_attribute_name(:calendar),
                               WorkPackage.human_attribute_name(:project),
                               User.human_attribute_name(:created_at),
                               t('my_account.access_tokens.headers.expiration')
-                            ] 
-                          } 
+                            ]
+                          }
               %>
               <tbody>
                 <% ical_tokens_grouped_by_query.each do |query_id, tokens| %>
@@ -103,5 +103,3 @@ See COPYRIGHT and LICENSE files for more details.
     <% end %>
   </div>
 </div>
-
-
diff --git a/app/views/my/access_token_partials/_oauth_tokens_section.html.erb b/app/views/my/access_token_partials/_oauth_tokens_section.html.erb
index eca2435c12f0..846c288f25de 100644
--- a/app/views/my/access_token_partials/_oauth_tokens_section.html.erb
+++ b/app/views/my/access_token_partials/_oauth_tokens_section.html.erb
@@ -39,15 +39,15 @@ See COPYRIGHT and LICENSE files for more details.
     <% if granted_applications.any? %>
       <div class="generic-table--container">
         <div class="generic-table--results-container">
-          <table class="generic-table">
+          <table class="generic-table" data-controller="table-highlighting">
             <%= render  partial: "my/access_token_partials/token_table_header",
-                        locals: { 
+                        locals: {
                           column_headers: [
-                            t('attributes.name'), 
+                            t('attributes.name'),
                             User.human_attribute_name(:created_at),
                             t('my_account.access_tokens.headers.expiration')
-                          ] 
-                        } 
+                          ]
+                        }
             %>
             <tbody>
               <% granted_applications.each do |application, tokens| %>
diff --git a/app/views/my/access_token_partials/_rss_tokens_section.html.erb b/app/views/my/access_token_partials/_rss_tokens_section.html.erb
index 3557cecf7c06..45e7389635ac 100644
--- a/app/views/my/access_token_partials/_rss_tokens_section.html.erb
+++ b/app/views/my/access_token_partials/_rss_tokens_section.html.erb
@@ -40,15 +40,15 @@ See COPYRIGHT and LICENSE files for more details.
       <% if rss_token %>
         <div class="generic-table--container">
           <div class="generic-table--results-container">
-            <table class="generic-table">
+            <table class="generic-table" data-controller="table-highlighting">
               <%= render  partial: "my/access_token_partials/token_table_header",
-                          locals: { 
+                          locals: {
                             column_headers: [
-                              t('attributes.name'), 
-                              User.human_attribute_name(:created_at), 
+                              t('attributes.name'),
+                              User.human_attribute_name(:created_at),
                               t('my_account.access_tokens.headers.expiration')
-                            ] 
-                          } 
+                            ]
+                          }
               %>
               <tbody>
                 <tr>
@@ -88,5 +88,3 @@ See COPYRIGHT and LICENSE files for more details.
     <% end %>
   </div>
 </div>
-
-
diff --git a/app/views/my/access_token_partials/_storage_tokens_section.html.erb b/app/views/my/access_token_partials/_storage_tokens_section.html.erb
index ede26b4c1c7e..7439402967ff 100644
--- a/app/views/my/access_token_partials/_storage_tokens_section.html.erb
+++ b/app/views/my/access_token_partials/_storage_tokens_section.html.erb
@@ -39,7 +39,7 @@ See COPYRIGHT and LICENSE files for more details.
     <% if @storage_tokens.any? %>
       <div class="generic-table--container">
         <div class="generic-table--results-container">
-          <table class="generic-table">
+          <table class="generic-table" data-controller="table-highlighting">
             <%= render  partial: "my/access_token_partials/token_table_header",
                         locals: {
                           column_headers: [
diff --git a/app/views/my/access_token_partials/_token_table_header.html.erb b/app/views/my/access_token_partials/_token_table_header.html.erb
index 5bc75f81206b..429783977266 100644
--- a/app/views/my/access_token_partials/_token_table_header.html.erb
+++ b/app/views/my/access_token_partials/_token_table_header.html.erb
@@ -28,9 +28,9 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 <colgroup>
   <% column_headers&.length&.times do %>
-    <col opHighlightCol>
+    <col>
   <% end %>
-  <col opHighlightCol>
+  <col>
 </colgroup>
 <thead>
   <tr>
@@ -49,4 +49,4 @@ See COPYRIGHT and LICENSE files for more details.
       </div>
     </th>
   </tr>
-</thead>
\ No newline at end of file
+</thead>
diff --git a/app/views/principals/_global_roles.html.erb b/app/views/principals/_global_roles.html.erb
index 8b261bc1ae63..2959891a1190 100644
--- a/app/views/principals/_global_roles.html.erb
+++ b/app/views/principals/_global_roles.html.erb
@@ -39,9 +39,9 @@ See COPYRIGHT and LICENSE files for more details.
   <% else %>
     <div class="generic-table--container">
       <div class="generic-table--results-container">
-        <table class="generic-table principal_roles" id="table_principal_roles">
+        <table class="generic-table principal_roles" id="table_principal_roles" data-controller="table-highlighting">
           <colgroup>
-            <col opHighlightCol>
+            <col>
             <col>
           </colgroup>
           <thead>
diff --git a/app/views/projects/settings/categories/show.html.erb b/app/views/projects/settings/categories/show.html.erb
index dbf2e34c453d..9edd0865de8b 100644
--- a/app/views/projects/settings/categories/show.html.erb
+++ b/app/views/projects/settings/categories/show.html.erb
@@ -44,10 +44,10 @@ See COPYRIGHT and LICENSE files for more details.
 <% if @project.categories.any? %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/app/views/projects/settings/custom_fields/_form.html.erb b/app/views/projects/settings/custom_fields/_form.html.erb
index 1255ad99ca32..093ebc211c91 100644
--- a/app/views/projects/settings/custom_fields/_form.html.erb
+++ b/app/views/projects/settings/custom_fields/_form.html.erb
@@ -29,11 +29,11 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
         </colgroup>
         <thead>
           <tr>
diff --git a/app/views/projects/settings/types/_form.html.erb b/app/views/projects/settings/types/_form.html.erb
index 6ff1000bcca0..99adecdc6125 100644
--- a/app/views/projects/settings/types/_form.html.erb
+++ b/app/views/projects/settings/types/_form.html.erb
@@ -29,13 +29,13 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table types">
+    <table class="generic-table types" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
       </colgroup>
       <thead>
         <tr>
diff --git a/app/views/repositories/_dir_list.html.erb b/app/views/repositories/_dir_list.html.erb
index 5b417c530357..41e8a8990fd3 100644
--- a/app/views/repositories/_dir_list.html.erb
+++ b/app/views/repositories/_dir_list.html.erb
@@ -28,15 +28,15 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table" data-repository-navigation-target="repoBrowser">
+    <table class="generic-table" data-controller="table-highlighting" data-repository-navigation-target="repoBrowser">
       <colgroup>
-        <col opHighlightCol>
         <col>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
       </colgroup>
       <thead>
         <tr id="root">
diff --git a/app/views/repositories/_revisions.html.erb b/app/views/repositories/_revisions.html.erb
index 5b547c43826c..ce14ce62e69d 100644
--- a/app/views/repositories/_revisions.html.erb
+++ b/app/views/repositories/_revisions.html.erb
@@ -32,12 +32,12 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="generic-table--results-container">
       <table class="generic-table changesets">
         <colgroup>
-          <col opHighlightCol>
           <col>
           <col>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
+          <col>
         </colgroup>
         <caption class="hidden-for-sighted">
           <span>
diff --git a/app/views/repositories/committers.html.erb b/app/views/repositories/committers.html.erb
index 50ca04e46932..510ae2296958 100644
--- a/app/views/repositories/committers.html.erb
+++ b/app/views/repositories/committers.html.erb
@@ -34,10 +34,10 @@ See COPYRIGHT and LICENSE files for more details.
   <%= form_tag({}) do %>
     <div class="generic-table--container">
       <div class="generic-table--results-container">
-        <table class="generic-table">
+        <table class="generic-table" data-controller="table-highlighting">
           <colgroup>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
           </colgroup>
           <thead>
             <tr>
diff --git a/app/views/roles/index.html.erb b/app/views/roles/index.html.erb
index a5a3c55aa2ac..9462e7a24354 100644
--- a/app/views/roles/index.html.erb
+++ b/app/views/roles/index.html.erb
@@ -53,11 +53,11 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
         <col>
       </colgroup>
       <thead>
diff --git a/app/views/roles/report.html.erb b/app/views/roles/report.html.erb
index 0fcfd9c8cba0..cc6255d538c2 100644
--- a/app/views/roles/report.html.erb
+++ b/app/views/roles/report.html.erb
@@ -61,14 +61,14 @@ See COPYRIGHT and LICENSE files for more details.
 
       <div class="generic-table--container">
         <div class="generic-table--results-container">
-          <table class="generic-table">
+          <table class="generic-table" data-controller="table-highlighting">
             <colgroup>
-              <col opHighlightCol>
-              <col opHighlightCol>
-              <col opHighlightCol>
-              <col opHighlightCol>
-              <col opHighlightCol>
-              <col opHighlightCol>
+              <col>
+              <col>
+              <col>
+              <col>
+              <col>
+              <col>
             </colgroup>
             <thead>
               <tr>
diff --git a/app/views/types/index.html.erb b/app/views/types/index.html.erb
index 8743fc7fcc3a..4b037c989988 100644
--- a/app/views/types/index.html.erb
+++ b/app/views/types/index.html.erb
@@ -54,15 +54,15 @@ See COPYRIGHT and LICENSE files for more details.
 <% if @types.any? %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
           <col>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
+          <col>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/app/views/wiki/history.html.erb b/app/views/wiki/history.html.erb
index 1f141a955863..0034b8120c75 100644
--- a/app/views/wiki/history.html.erb
+++ b/app/views/wiki/history.html.erb
@@ -37,12 +37,12 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="generic-table--results-container">
       <table class="generic-table wiki-page-versions">
         <colgroup>
-          <col opHighlightCol>
           <col>
           <col>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
+          <col>
           <col>
         </colgroup>
         <caption class="hidden-for-sighted">
diff --git a/app/views/work_packages/reports/_report.html.erb b/app/views/work_packages/reports/_report.html.erb
index eb6b0b9fe23e..f8320605da61 100644
--- a/app/views/work_packages/reports/_report.html.erb
+++ b/app/views/work_packages/reports/_report.html.erb
@@ -36,10 +36,10 @@ See COPYRIGHT and LICENSE files for more details.
   <% column_names = report.statuses.map(&:name) + [t(:label_open_work_packages), t(:label_closed_work_packages), t(:label_total)] %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
          <% column_names.each do |name| %>
-            <col opHighlightCol>
+            <col>
           <% end %>
         </colgroup>
       <thead>
diff --git a/app/views/workflows/show.html.erb b/app/views/workflows/show.html.erb
index 6d71a6e7d28f..e46e59a272b3 100644
--- a/app/views/workflows/show.html.erb
+++ b/app/views/workflows/show.html.erb
@@ -34,14 +34,14 @@ See COPYRIGHT and LICENSE files for more details.
   <div class="autoscroll">
     <div class="generic-table--container">
       <div class="generic-table--results-container">
-        <table class="generic-table">
+        <table class="generic-table" data-controller="table-highlighting">
           <colgroup>
             <col>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
+            <col>
+            <col>
+            <col>
             <col>
           </colgroup>
           <thead>
diff --git a/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html b/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html
index baa0baa1217d..9c75b9720555 100644
--- a/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html
+++ b/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html
@@ -8,8 +8,8 @@
         <col *ngIf="configuration.dragAndDropEnabled">
         <col *ngIf="baselineEnabled">
         <!-- Generate col elements dynamically(!) for each requested column plus one for the action menu's column. -->
-        <col opHighlightCol *ngFor="let column of [].constructor(columns.length)">
-        <col opHighlightCol *ngIf="configuration.columnMenuEnabled">
+        <col *ngFor="let column of [].constructor(columns.length)">
+        <col *ngIf="configuration.columnMenuEnabled">
         <col *ngIf="!configuration.columnMenuEnabled">
       </colgroup>
       <caption class="hidden-for-sighted">
diff --git a/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html b/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html
index 437b9a8c7cb9..cf5b7f6f8d95 100644
--- a/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html
+++ b/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html
@@ -20,10 +20,10 @@
   <div class="generic-table--results-container" *ngIf="entriesLoaded && anyEntries">
     <table class="generic-table time-entries">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
         <col>
       </colgroup>
       <thead class="-sticky">
diff --git a/frontend/src/app/shared/directives/highlight-col/highlight-col.directive.ts b/frontend/src/app/shared/directives/highlight-col/highlight-col.directive.ts
deleted file mode 100644
index f24d29d8d830..000000000000
--- a/frontend/src/app/shared/directives/highlight-col/highlight-col.directive.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-//-- copyright
-// OpenProject is an open source project management software.
-// Copyright (C) the OpenProject GmbH
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See COPYRIGHT and LICENSE files for more details.
-//++
-
-import {
-  Component, ElementRef, OnDestroy, OnInit,
-} from '@angular/core';
-
-export const highlightColSelector = 'col[opHighlightCol]';
-
-@Component({
-  selector: highlightColSelector,
-  template: '',
-})
-export class OpHighlightColDirective implements OnInit, OnDestroy { // eslint-disable-line @angular-eslint/component-class-suffix
-  private $element:JQuery;
-
-  private thead:JQuery;
-
-  constructor(private elementRef:ElementRef) {
-  }
-
-  ngOnInit() {
-    this.$element = jQuery(this.elementRef.nativeElement);
-    this.thead = this.$element
-      .parent('colgroup')
-      .siblings('thead');
-
-    // Separate handling instead of toggle is necessary to avoid
-    // unwanted side effects when adding/removing columns via keyboard in the modal
-    this.thead.on('mouseenter', 'th', (evt:JQuery.TriggeredEvent) => {
-      if (this.$element.index() === jQuery(evt.currentTarget).index()) {
-        this.$element.addClass('hover');
-      }
-    });
-
-    this.thead.on('mouseleave', 'th', (evt:JQuery.TriggeredEvent) => {
-      if (this.$element.index() === jQuery(evt.currentTarget).index()) {
-        this.$element.removeClass('hover');
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this.thead.off('mouseenter mouseleave');
-  }
-}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index afa6221fc2ac..75b31d9bdff6 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -62,9 +62,7 @@ import { EnterprisePageComponent } from 'core-app/shared/components/enterprise-p
 import { FreeTrialButtonComponent } from 'core-app/features/enterprise/free-trial-button/free-trial-button.component';
 import { HomescreenNewFeaturesBlockComponent } from 'core-app/features/homescreen/blocks/new-features.component';
 import { TablePaginationComponent } from 'core-app/shared/components/table-pagination/table-pagination.component';
-import { HookService } from 'core-app/features/plugins/hook-service';
 import { StaticQueriesService } from 'core-app/shared/components/op-view-select/op-static-queries.service';
-import { highlightColSelector, OpHighlightColDirective, } from './directives/highlight-col/highlight-col.directive';
 import { CopyToClipboardService } from './components/copy-to-clipboard/copy-to-clipboard.service';
 import { CopyToClipboardComponent } from './components/copy-to-clipboard/copy-to-clipboard.component';
 import { OpDateTimeComponent } from './components/date/op-date-time.component';
@@ -112,14 +110,6 @@ export function bootstrapModule(injector:Injector):void {
     project: currentProject.identifier || 'global',
     'router state': uiRouterGlobals.current.name || 'unknown',
   }));
-
-  const hookService = injector.get(HookService);
-  hookService.register('openProjectAngularBootstrap', () => [
-    {
-      selector: highlightColSelector,
-      cls: OpHighlightColDirective,
-    },
-  ]);
 }
 
 @NgModule({
@@ -181,9 +171,6 @@ export function bootstrapModule(injector:Injector):void {
     UploadProgressComponent,
     OpDateTimeComponent,
 
-    // Table highlight
-    OpHighlightColDirective,
-
     ResizerComponent,
 
     TablePaginationComponent,
@@ -229,9 +216,6 @@ export function bootstrapModule(injector:Injector):void {
     OPContextMenuComponent,
     IconTriggeredContextMenuComponent,
 
-    // Table highlight
-    OpHighlightColDirective,
-
     // Add functionality to rails rendered templates
     CopyToClipboardComponent,
     CollapsibleSectionComponent,
diff --git a/frontend/src/stimulus/controllers/table-highlighting.controller.ts b/frontend/src/stimulus/controllers/table-highlighting.controller.ts
new file mode 100644
index 000000000000..365dd3cbd407
--- /dev/null
+++ b/frontend/src/stimulus/controllers/table-highlighting.controller.ts
@@ -0,0 +1,87 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) the OpenProject GmbH
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See COPYRIGHT and LICENSE files for more details.
+ * ++
+ */
+
+import { ApplicationController } from 'stimulus-use';
+
+export default class TableHighlightingController extends ApplicationController {
+  private thead:HTMLElement;
+  private colgroup:HTMLElement;
+
+  connect() {
+    const thead = this.element.querySelector('thead');
+    const colgroup = this.element.querySelector('colgroup');
+
+    if (thead && colgroup) {
+      this.thead = thead;
+      this.colgroup = colgroup;
+
+      this.thead.addEventListener('mouseover', this.hover);
+      this.thead.addEventListener('mouseout', this.unhover);
+    }
+  }
+
+  disconnect() {
+    super.disconnect();
+
+    if (this.thead && this.colgroup) {
+      this.thead.removeEventListener('mouseover', this.hover);
+      this.thead.removeEventListener('mouseout', this.unhover);
+    }
+  }
+
+  private hover = (evt:MouseEvent) => {
+    const col = this.getColumn(evt.target as HTMLElement);
+    col?.classList.add('hover');
+  };
+
+  private unhover = (evt:MouseEvent) => {
+    const col = this.getColumn(evt.target as HTMLElement);
+    col?.classList.remove('hover');
+  };
+
+  private getColumn(target:HTMLElement):HTMLElement|null {
+    const th = target.closest('th') as HTMLElement;
+    const index = this.parentIndex(th);
+
+    if (index !== null) {
+      return this.colgroup.children.item(index) as HTMLElement|null;
+    }
+
+    return null;
+  }
+
+  private parentIndex(element:HTMLElement):number|null {
+    if (element.parentElement) {
+      return Array.from(element.parentElement.children).indexOf(element);
+    }
+
+    return null;
+  }
+}
diff --git a/frontend/src/stimulus/setup.ts b/frontend/src/stimulus/setup.ts
index 48382bd3b449..de46916e8ac0 100644
--- a/frontend/src/stimulus/setup.ts
+++ b/frontend/src/stimulus/setup.ts
@@ -6,6 +6,7 @@ import OpDisableWhenCheckedController from './controllers/disable-when-checked.c
 import PrintController from './controllers/print.controller';
 import RefreshOnFormChangesController from './controllers/refresh-on-form-changes.controller';
 import AsyncDialogController from './controllers/async-dialog.controller';
+import TableHighlightingController from "./controllers/table-highlighting.controller";
 
 declare global {
   interface Window {
@@ -28,3 +29,4 @@ instance.register('disable-when-checked', OpDisableWhenCheckedController);
 instance.register('print', PrintController);
 instance.register('refresh-on-form-changes', RefreshOnFormChangesController);
 instance.register('async-dialog', AsyncDialogController);
+instance.register('table-highlighting', TableHighlightingController);
diff --git a/lookbook/previews/open_project/deprecated/table_preview/buttons.html.erb b/lookbook/previews/open_project/deprecated/table_preview/buttons.html.erb
index 0094b7dbbd93..a450e7b59f00 100644
--- a/lookbook/previews/open_project/deprecated/table_preview/buttons.html.erb
+++ b/lookbook/previews/open_project/deprecated/table_preview/buttons.html.erb
@@ -1,4 +1,4 @@
-<table class="generic-table">
+<table class="generic-table" data-controller="table-highlighting">
   <thead>
   <tr>
     <th>
diff --git a/lookbook/previews/open_project/deprecated/table_preview/default.html.erb b/lookbook/previews/open_project/deprecated/table_preview/default.html.erb
index b34b4d6cd5bf..66bd797a8d8d 100644
--- a/lookbook/previews/open_project/deprecated/table_preview/default.html.erb
+++ b/lookbook/previews/open_project/deprecated/table_preview/default.html.erb
@@ -1,12 +1,12 @@
 <div class="generic-table--container">
   <div class="generic-table--results-container" style="max-height: 340px;">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
       </colgroup>
       <thead>
       <tr>
diff --git a/lookbook/previews/open_project/deprecated/table_preview/footer.html.erb b/lookbook/previews/open_project/deprecated/table_preview/footer.html.erb
index 170ad7948433..53655f85726c 100644
--- a/lookbook/previews/open_project/deprecated/table_preview/footer.html.erb
+++ b/lookbook/previews/open_project/deprecated/table_preview/footer.html.erb
@@ -1,12 +1,12 @@
 <div class="generic-table--container -with-footer">
   <div class="generic-table--results-container" style="max-height: 340px;">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
       </colgroup>
       <thead>
       <tr>
diff --git a/lookbook/previews/open_project/deprecated/table_preview/no_ellipse.html.erb b/lookbook/previews/open_project/deprecated/table_preview/no_ellipse.html.erb
index e5855ba690ba..bec466362794 100644
--- a/lookbook/previews/open_project/deprecated/table_preview/no_ellipse.html.erb
+++ b/lookbook/previews/open_project/deprecated/table_preview/no_ellipse.html.erb
@@ -1,12 +1,12 @@
 <div class="generic-table--container">
   <div class="generic-table--results-container" style="max-height: 340px;">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
       </colgroup>
       <thead>
       <tr>
diff --git a/modules/backlogs/app/views/projects/settings/backlogs/show.html.erb b/modules/backlogs/app/views/projects/settings/backlogs/show.html.erb
index 91f9da1c78d7..6a1881bda2ed 100644
--- a/modules/backlogs/app/views/projects/settings/backlogs/show.html.erb
+++ b/modules/backlogs/app/views/projects/settings/backlogs/show.html.erb
@@ -37,10 +37,10 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table" id="material_budget_items">
+    <table class="generic-table" data-controller="table-highlighting" id="material_budget_items">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
       </colgroup>
       <thead>
         <tr>
diff --git a/modules/budgets/app/components/budgets/actual_labor_budget_items_component.html.erb b/modules/budgets/app/components/budgets/actual_labor_budget_items_component.html.erb
index 47783fdca2a0..a38e27b34c65 100644
--- a/modules/budgets/app/components/budgets/actual_labor_budget_items_component.html.erb
+++ b/modules/budgets/app/components/budgets/actual_labor_budget_items_component.html.erb
@@ -5,10 +5,10 @@
       <div class="generic-table--results-container">
         <table class="generic-table labor_budget_items">
           <colgroup>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
+            <col>
+            <col>
           </colgroup>
           <thead>
           <tr>
diff --git a/modules/budgets/app/components/budgets/actual_material_budget_items_component.html.erb b/modules/budgets/app/components/budgets/actual_material_budget_items_component.html.erb
index bf848633f5d3..1fe717e5a605 100644
--- a/modules/budgets/app/components/budgets/actual_material_budget_items_component.html.erb
+++ b/modules/budgets/app/components/budgets/actual_material_budget_items_component.html.erb
@@ -5,10 +5,10 @@
       <div class="generic-table--results-container">
         <table class="generic-table material_budget_items">
           <colgroup>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
+            <col>
+            <col>
           </colgroup>
           <thead>
           <tr>
diff --git a/modules/budgets/app/components/budgets/planned_labor_budget_items_component.html.erb b/modules/budgets/app/components/budgets/planned_labor_budget_items_component.html.erb
index 942562c33ae1..1e293885ffe4 100644
--- a/modules/budgets/app/components/budgets/planned_labor_budget_items_component.html.erb
+++ b/modules/budgets/app/components/budgets/planned_labor_budget_items_component.html.erb
@@ -5,10 +5,10 @@
       <div class="generic-table--results-container">
         <table class="generic-table labor_budget_items">
           <colgroup>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
+            <col>
+            <col>
           </colgroup>
           <thead>
           <tr>
diff --git a/modules/budgets/app/components/budgets/planned_material_budget_items_component.html.erb b/modules/budgets/app/components/budgets/planned_material_budget_items_component.html.erb
index 43cc8f324aed..5c52311b1150 100644
--- a/modules/budgets/app/components/budgets/planned_material_budget_items_component.html.erb
+++ b/modules/budgets/app/components/budgets/planned_material_budget_items_component.html.erb
@@ -5,10 +5,10 @@
       <div class="generic-table--results-container">
         <table class="generic-table material_budget_items">
           <colgroup>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
+            <col>
+            <col>
           </colgroup>
           <thead>
           <tr>
diff --git a/modules/budgets/app/views/budgets/_list.html.erb b/modules/budgets/app/views/budgets/_list.html.erb
index 84468ee23aed..bd13f1b203d6 100644
--- a/modules/budgets/app/views/budgets/_list.html.erb
+++ b/modules/budgets/app/views/budgets/_list.html.erb
@@ -31,14 +31,14 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table" id="material_budget_items">
+    <table class="generic-table" data-controller="table-highlighting" id="material_budget_items">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
       </colgroup>
       <thead>
         <tr>
diff --git a/modules/budgets/app/views/budgets/subform/_labor_budget_subform.html.erb b/modules/budgets/app/views/budgets/subform/_labor_budget_subform.html.erb
index 4a0408987ec9..b26c97167bf7 100644
--- a/modules/budgets/app/views/budgets/subform/_labor_budget_subform.html.erb
+++ b/modules/budgets/app/views/budgets/subform/_labor_budget_subform.html.erb
@@ -41,13 +41,13 @@ end -%>
   <legend class="form--fieldset-legend"><%= Budget.human_attribute_name(:labor_budget) %></legend>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table" id="labor_budget_items">
+      <table class="generic-table" data-controller="table-highlighting" id="labor_budget_items">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
           <% if User.current.allowed_in_project?(:view_cost_rates, @project)%>
-            <col opHighlightCol>
+            <col>
           <%end%>
           <col>
         </colgroup>
diff --git a/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb b/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb
index 8e05f0bb1af8..d486662fcb06 100644
--- a/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb
+++ b/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb
@@ -39,13 +39,13 @@ See COPYRIGHT and LICENSE files for more details.
     <legend class="form--fieldset-legend"><%= Budget.human_attribute_name(:material_budget) %></legend>
       <div class="generic-table--container">
         <div class="generic-table--results-container">
-          <table class="generic-table" id="material_budget_items">
+          <table class="generic-table" data-controller="table-highlighting" id="material_budget_items">
             <colgroup>
-              <col opHighlightCol>
-              <col opHighlightCol>
-              <col opHighlightCol>
+              <col>
+              <col>
+              <col>
               <% if User.current.allowed_in_project?(:view_cost_rates, @project)%>
-                <col opHighlightCol>
+                <col>
               <%end%>
               <col>
             </colgroup>
diff --git a/modules/costs/app/views/cost_types/_list.html.erb b/modules/costs/app/views/cost_types/_list.html.erb
index 2ad561117c9f..3daee22e2635 100644
--- a/modules/costs/app/views/cost_types/_list.html.erb
+++ b/modules/costs/app/views/cost_types/_list.html.erb
@@ -34,14 +34,14 @@ See COPYRIGHT and LICENSE files for more details.
 <% else %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
+          <col>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/modules/costs/app/views/cost_types/_list_deleted.html.erb b/modules/costs/app/views/cost_types/_list_deleted.html.erb
index 9db7166cf601..a619cd78251d 100644
--- a/modules/costs/app/views/cost_types/_list_deleted.html.erb
+++ b/modules/costs/app/views/cost_types/_list_deleted.html.erb
@@ -36,11 +36,11 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="generic-table--results-container">
       <table class="generic-table locked_cost_types">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/modules/costs/app/views/cost_types/edit.html.erb b/modules/costs/app/views/cost_types/edit.html.erb
index bd5d19f44f24..51831734e163 100644
--- a/modules/costs/app/views/cost_types/edit.html.erb
+++ b/modules/costs/app/views/cost_types/edit.html.erb
@@ -66,10 +66,10 @@ See COPYRIGHT and LICENSE files for more details.
   <h3><%= t :caption_rate_history %></h3>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/modules/costs/app/views/hourly_rates/_list_default.html.erb b/modules/costs/app/views/hourly_rates/_list_default.html.erb
index 9f936b2e1261..609dc98ecba0 100644
--- a/modules/costs/app/views/hourly_rates/_list_default.html.erb
+++ b/modules/costs/app/views/hourly_rates/_list_default.html.erb
@@ -38,9 +38,9 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="generic-table--results-container">
       <table class="generic-table rates">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
         </colgroup>
         <thead>
           <tr>
diff --git a/modules/costs/app/views/hourly_rates/_list_project.html.erb b/modules/costs/app/views/hourly_rates/_list_project.html.erb
index c359e990581a..4bdd44a8635e 100644
--- a/modules/costs/app/views/hourly_rates/_list_project.html.erb
+++ b/modules/costs/app/views/hourly_rates/_list_project.html.erb
@@ -51,9 +51,9 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="generic-table--results-container">
       <table class="generic-table rates">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
+          <col>
         </colgroup>
         <thead>
           <tr>
diff --git a/modules/costs/app/views/hourly_rates/edit.html.erb b/modules/costs/app/views/hourly_rates/edit.html.erb
index 363e42f59e95..9ebeb2d903f7 100644
--- a/modules/costs/app/views/hourly_rates/edit.html.erb
+++ b/modules/costs/app/views/hourly_rates/edit.html.erb
@@ -48,8 +48,8 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="generic-table--results-container">
       <table class="generic-table rates" width="200px">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
           <col>
         </colgroup>
         <thead>
diff --git a/modules/ldap_groups/app/views/ldap_groups/synchronized_filters/destroy_info.html.erb b/modules/ldap_groups/app/views/ldap_groups/synchronized_filters/destroy_info.html.erb
index 70f764b8694f..26a18957c154 100644
--- a/modules/ldap_groups/app/views/ldap_groups/synchronized_filters/destroy_info.html.erb
+++ b/modules/ldap_groups/app/views/ldap_groups/synchronized_filters/destroy_info.html.erb
@@ -18,7 +18,7 @@
       <p><%= t('ldap_groups.synchronized_filters.destroy.removed_groups') %></p>
       <div class="generic-table--container">
         <div class="generic-table--results-container">
-          <table class="generic-table">
+          <table class="generic-table" data-controller="table-highlighting">
             <thead>
             <th>
               <div class="generic-table--sort-header-outer">
diff --git a/modules/meeting/app/views/meeting_contents/history.html.erb b/modules/meeting/app/views/meeting_contents/history.html.erb
index fdeedf938536..b1e2c4ad786c 100644
--- a/modules/meeting/app/views/meeting_contents/history.html.erb
+++ b/modules/meeting/app/views/meeting_contents/history.html.erb
@@ -39,14 +39,14 @@ See COPYRIGHT and LICENSE files for more details.
      data-application-target="dynamic"
      data-controller="journal-history">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
         <col>
         <col>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
+        <col>
+        <col>
+        <col>
+        <col>
       </colgroup>
       <thead>
         <tr>
diff --git a/modules/reporting/lib/widget/table/entry_table.rb b/modules/reporting/lib/widget/table/entry_table.rb
index dfb95fcb419f..6cab895d47e6 100644
--- a/modules/reporting/lib/widget/table/entry_table.rb
+++ b/modules/reporting/lib/widget/table/entry_table.rb
@@ -48,10 +48,10 @@ def render
   def colgroup
     content_tag :colgroup do
       FIELDS.each do
-        concat content_tag(:col, "", "opHighlightCol" => true)
+        concat content_tag(:col, "")
       end
-      concat content_tag(:col, "", "opHighlightCol" => true)
-      concat content_tag(:col, "", "opHighlightCol" => true)
+      concat content_tag(:col, "")
+      concat content_tag(:col, "")
       concat content_tag(:col, "")
     end
   end

From a54b1d797347edf622a8cab7f669c02ce0430543 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 14 Aug 2024 15:23:52 +0200
Subject: [PATCH 03/12] Fix ckeditor wrapper

---
 app/helpers/application_helper.rb                   | 13 +++++++------
 .../core/setup/globals/global-listeners/settings.ts |  2 +-
 .../src/global_styles/content/editor/_ckeditor.sass |  4 +---
 .../text_formatting/formats/markdown/helper.rb      |  2 +-
 spec/lib/tabular_form_builder_spec.rb               |  4 ++--
 spec/support/components/wysiwyg/wysiwyg_editor.rb   |  2 +-
 spec/support/pages/admin/system_settings/general.rb |  2 +-
 7 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 341888e7390d..2c3e21e4d6e9 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -202,7 +202,7 @@ def time_tag(time)
     else
       datetime = time.acts_like?(:time) ? time.xmlschema : time.iso8601
       content_tag(:time, text, datetime:,
-                  title: format_time(time), class: "timestamp")
+                               title: format_time(time), class: "timestamp")
     end
   end
 
@@ -260,11 +260,12 @@ def simple_format_without_paragraph(text)
   end
 
   def lang_options_for_select(blank = true)
-    auto = if blank && (valid_languages - all_languages) == (all_languages - valid_languages)
-      [["(auto)", ""]]
-    else
-      []
-    end
+    auto =
+      if blank && (valid_languages - all_languages) == (all_languages - valid_languages)
+        [["(auto)", ""]]
+      else
+        []
+      end
 
     mapped_languages = valid_languages.map { |lang| translate_language(lang) }
 
diff --git a/frontend/src/app/core/setup/globals/global-listeners/settings.ts b/frontend/src/app/core/setup/globals/global-listeners/settings.ts
index 9392ea046b98..181d4f3a3216 100644
--- a/frontend/src/app/core/setup/globals/global-listeners/settings.ts
+++ b/frontend/src/app/core/setup/globals/global-listeners/settings.ts
@@ -33,7 +33,7 @@ export function listenToSettingChanges() {
     const settingName = id.replace('lang-for-', '');
     const newLang = self.val();
     const textArea = jQuery(`#settings-${settingName}`);
-    const editor = textArea.siblings('ckeditor-augmented-textarea').data('editor');
+    const editor = textArea.siblings('opce-ckeditor-augmented-textarea').data('editor');
 
     return {
       id, settingName, newLang, textArea, editor,
diff --git a/frontend/src/global_styles/content/editor/_ckeditor.sass b/frontend/src/global_styles/content/editor/_ckeditor.sass
index 71cde283a871..4994efe97520 100644
--- a/frontend/src/global_styles/content/editor/_ckeditor.sass
+++ b/frontend/src/global_styles/content/editor/_ckeditor.sass
@@ -10,7 +10,7 @@
     @include op-uc-table-header-styles
 
 // Wrapper for full text element
-ckeditor-augmented-textarea .op-ckeditor--wrapper
+opce-ckeditor-augmented-textarea .op-ckeditor--wrapper
   margin-bottom: 2rem
 
 // Ensure same border and min-height for preview
@@ -128,5 +128,3 @@ ckeditor-augmented-textarea .op-ckeditor--wrapper
 .ck-icon_inherit-color
   path
     fill: var(--body-font-color) !important
-
-
diff --git a/lib/open_project/text_formatting/formats/markdown/helper.rb b/lib/open_project/text_formatting/formats/markdown/helper.rb
index efceaa5134a3..90cee1c84ad4 100644
--- a/lib/open_project/text_formatting/formats/markdown/helper.rb
+++ b/lib/open_project/text_formatting/formats/markdown/helper.rb
@@ -49,7 +49,7 @@ def wikitoolbar_for(field_id, **context)
 
         # Pass an optional resource to the CKEditor instance
         resource = context.fetch(:resource, {})
-        helpers.angular_component_tag "ckeditor-augmented-textarea",
+        helpers.angular_component_tag "opce-ckeditor-augmented-textarea",
                                       inputs: {
                                         textareaSelector: "##{field_id}",
                                         editorType: context[:editor_type] || "full",
diff --git a/spec/lib/tabular_form_builder_spec.rb b/spec/lib/tabular_form_builder_spec.rb
index 4f2eb6931f2e..f976d24705b7 100644
--- a/spec/lib/tabular_form_builder_spec.rb
+++ b/spec/lib/tabular_form_builder_spec.rb
@@ -210,7 +210,7 @@
       context "an id is missing" do
         it "outputs the wysiwyg wrapper" do
           expect(output).to have_css "textarea"
-          expect(output).to have_css "ckeditor-augmented-textarea"
+          expect(output).to have_css "opce-ckeditor-augmented-textarea"
         end
       end
 
@@ -219,7 +219,7 @@
 
         it "outputs the wysiwyg wrapper" do
           expect(output).to have_css "textarea"
-          expect(output).to have_css "ckeditor-augmented-textarea"
+          expect(output).to have_css "opce-ckeditor-augmented-textarea"
         end
       end
     end
diff --git a/spec/support/components/wysiwyg/wysiwyg_editor.rb b/spec/support/components/wysiwyg/wysiwyg_editor.rb
index 1000027e86fd..7b20b51da4b9 100644
--- a/spec/support/components/wysiwyg/wysiwyg_editor.rb
+++ b/spec/support/components/wysiwyg/wysiwyg_editor.rb
@@ -6,7 +6,7 @@ class WysiwygEditor
 
     attr_reader :context_selector, :attachments, :attachments_list
 
-    def initialize(context = "#content", attachment_list_selector = "ckeditor-augmented-textarea")
+    def initialize(context = "#content", attachment_list_selector = "opce-ckeditor-augmented-textarea")
       @context_selector = context
       @attachments = ::Components::Attachments.new
       @attachments_list = ::Components::AttachmentsList.new("#{context} #{attachment_list_selector}")
diff --git a/spec/support/pages/admin/system_settings/general.rb b/spec/support/pages/admin/system_settings/general.rb
index 9e647e062e0d..011f047ae9c6 100644
--- a/spec/support/pages/admin/system_settings/general.rb
+++ b/spec/support/pages/admin/system_settings/general.rb
@@ -39,7 +39,7 @@ def welcome_text_editor
     end
 
     def welcome_text_selector
-      'ckeditor-augmented-textarea[data-textarea-selector="\"#settings_welcome_text\""]'
+      'opce-ckeditor-augmented-textarea[data-textarea-selector="\"#settings_welcome_text\""]'
     end
   end
 end

From 6d6a46c71375806e289553ec6f86a8e8c26090f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 14 Aug 2024 15:41:41 +0200
Subject: [PATCH 04/12] Fix user-activity

---
 .../wp-activity/user/user-activity.component.html         | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html b/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html
index 6e3ea1fbec76..d68c71f61532 100644
--- a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html
+++ b/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html
@@ -72,11 +72,9 @@
         ></edit-form-portal>
       </div>
     </div>
-    <op-dynamic-bootstrap
-      *ngIf="!active && (isComment || isBcfComment)"
-      [HTML]="postedComment"
-      class="message"
-    ></op-dynamic-bootstrap>
+    <div class="message"
+         *ngIf="!active && (isComment || isBcfComment)"
+         [innerHtml]="postedComment"></div>
     <ul class="work-package-details-activities-messages" *ngIf="!isInitial">
       <li *ngFor="let detail of details">
         <span class="message" [innerHtml]="detail"></span>

From ff2d9da960b58dd4b858f6645b6f8105469316f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Thu, 15 Aug 2024 08:13:19 +0200
Subject: [PATCH 05/12] Fix datepicker modal usage from angular

---
 .../modal-single-date-picker.component.ts                 | 8 ++++----
 .../op-non-working-days-list.component.html               | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
index b0d6152b7666..b6399487a9a8 100644
--- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
+++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
@@ -42,8 +42,8 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, } from '@angular/forms';
-import { onDayCreate, parseDate, setDates, } from 'core-app/shared/components/datepicker/helpers/date-modal.helpers';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { onDayCreate, parseDate, setDates } from 'core-app/shared/components/datepicker/helpers/date-modal.helpers';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { DatePicker } from '../datepicker';
 import flatpickr from 'flatpickr';
@@ -51,11 +51,11 @@ import { DayElement } from 'flatpickr/dist/types/instance';
 import { populateInputsFromDataset } from '../../dataset-inputs';
 import { debounce } from 'lodash';
 import {
-  SpotDropModalTeleportationService
+  SpotDropModalTeleportationService,
 } from 'core-app/spot/components/drop-modal/drop-modal-teleportation.service';
 
 @Component({
-  selector: 'opce-modal-single-date-picker',
+  selector: 'op-modal-single-date-picker',
   templateUrl: './modal-single-date-picker.component.html',
   styleUrls: ['../styles/datepicker.modal.sass', './modal-single-date-picker.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html
index c3c033361fca..dcfecb162f68 100644
--- a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html
+++ b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html
@@ -19,7 +19,7 @@
 <div
   class="op-non-working-days-list--add-button"
 >
-  <opce-modal-single-date-picker
+  <op-modal-single-date-picker
     id="test"
     name="test"
     [showIgnoreNonWorkingDays]="false"
@@ -54,5 +54,5 @@
       <span class="spot-icon spot-icon_add"></span>
       <span [textContent]="text.add_non_working_day"></span>
     </button>
-  </opce-modal-single-date-picker>
+  </op-modal-single-date-picker>
 </div>

From 1d683c86eea558bd6c634fb74c495ccd892b8e39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Thu, 15 Aug 2024 08:22:36 +0200
Subject: [PATCH 06/12] Fix storage button usage within angular

---
 .../storages/storage-information/storage-information.html     | 4 ++--
 .../storage-login-button/storage-login-button.component.ts    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/shared/components/storages/storage-information/storage-information.html b/frontend/src/app/shared/components/storages/storage-information/storage-information.html
index fe26c1dbca1a..b399aee676d6 100644
--- a/frontend/src/app/shared/components/storages/storage-information/storage-information.html
+++ b/frontend/src/app/shared/components/storages/storage-information/storage-information.html
@@ -19,8 +19,8 @@
   *ngIf="content.login"
   class="button-box"
 >
-  <opce-storage-login-button
+  <op-storage-login-button
     class="op-files-tab--storage-info-box-button"
     [input]="content.login"
-  ></opce-storage-login-button>
+  ></op-storage-login-button>
 </div>
diff --git a/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts b/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts
index 6a74bfe03490..849be7acb7bb 100644
--- a/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts
+++ b/frontend/src/app/shared/components/storages/storage-login-button/storage-login-button.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -37,7 +37,7 @@ import { populateInputsFromDataset } from 'core-app/shared/components/dataset-in
 
 
 @Component({
-  selector: 'opce-storage-login-button',
+  selector: 'op-storage-login-button',
   templateUrl: 'storage-login-button.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

From 3b994099b4a813ec90da362cbf196fd5585ed824 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Thu, 15 Aug 2024 08:47:29 +0200
Subject: [PATCH 07/12] Fix remote field updater

---
 .../basic-single-date-picker.component.html   |  1 +
 .../remote-field-updater.component.ts         | 50 +++++++++++--------
 modules/costs/app/views/costlog/edit.html.erb |  7 +--
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html b/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html
index 2ca871ccfeea..e15dd1bf3ebc 100644
--- a/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html
+++ b/frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html
@@ -5,6 +5,7 @@
   class="spot-input"
   data-filter--filters-form-target="singleDay"
   [ngClass]="inputClassNames"
+  [ngModel]="value"
   [attr.data-value]="value"
   [id]="id"
   [name]="name"
diff --git a/frontend/src/app/shared/components/remote-field-updater/remote-field-updater.component.ts b/frontend/src/app/shared/components/remote-field-updater/remote-field-updater.component.ts
index 0fc37373a793..890c42d7e5a0 100644
--- a/frontend/src/app/shared/components/remote-field-updater/remote-field-updater.component.ts
+++ b/frontend/src/app/shared/components/remote-field-updater/remote-field-updater.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
 import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum';
 import { HttpClient } from '@angular/common/http';
 
@@ -34,31 +34,33 @@ export const remoteFieldUpdaterSelector = 'remote-field-updater';
 
 @Component({
   selector: remoteFieldUpdaterSelector,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: '',
 })
 export class RemoteFieldUpdaterComponent implements OnInit {
-  constructor(private elementRef:ElementRef,
-    private http:HttpClient) {
+  constructor(
+    private elementRef:ElementRef,
+    private http:HttpClient,
+  ) {
   }
 
   private url:string;
 
   private htmlMode:boolean;
 
-  private inputs:JQuery;
+  private form:HTMLFormElement;
 
-  private target:JQuery;
+  private target:HTMLElement;
 
   ngOnInit():void {
-    const $element = jQuery(this.elementRef.nativeElement);
-    const $form = $element.parent();
-    this.inputs = $form.find('.remote-field--input');
-    this.target = $form.find('.remote-field--target');
+    const element = this.elementRef.nativeElement as HTMLElement;
+    this.form = element.closest('form') as HTMLFormElement;
+    this.target = this.form.querySelector('.remote-field--target') as HTMLElement;
 
-    this.url = $element.data('url');
-    this.htmlMode = $element.data('mode') === 'html';
+    this.url = element.dataset.url as string;
+    this.htmlMode = element.dataset.mode === 'html';
 
-    this.inputs.on('keyup change', _.debounce((event:JQuery.TriggeredEvent) => {
+    const debouncedEvent = _.debounce((event:InputEvent) => {
       // This prevents an update of the result list when
       // tabbing to the result list (9),
       // pressing enter (13)
@@ -69,11 +71,14 @@ export class RemoteFieldUpdaterComponent implements OnInit {
       if (event.type === 'change' || (event.which && keyCodes.indexOf(event.which) === -1)) {
         this.updater();
       }
-    }, 500));
+    }, 500);
+
+    this.form.addEventListener('keyup', debouncedEvent);
+    this.form.addEventListener('change', debouncedEvent);
   }
 
-  private request(params:any) {
-    const headers:any = {};
+  private request(params:Record<string, string>) {
+    const headers:Record<string, string> = {};
 
     // In HTML mode, expect html response
     if (this.htmlMode) {
@@ -95,19 +100,22 @@ export class RemoteFieldUpdaterComponent implements OnInit {
   }
 
   private updater() {
-    const params:any = {};
+    const params:Record<string, string> = {};
 
     // Gather request keys
-    this.inputs.each((i, el:HTMLInputElement) => {
-      params[el.dataset.remoteFieldKey!] = el.value;
-    });
+    this
+      .form
+      .querySelectorAll('.remote-field--input')
+      .forEach((el:HTMLInputElement) => {
+        params[el.dataset.remoteFieldKey as string] = el.value;
+      });
 
     this
       .request(params)
       .subscribe((response:any) => {
         if (this.htmlMode) {
-        // Replace the given target
-          this.target.html(response);
+          // Replace the given target
+          this.target.innerHTML = response as string;
         } else {
           _.each(response, (val:string, selector:string) => {
             const element = document.getElementById(selector) as HTMLElement|HTMLInputElement;
diff --git a/modules/costs/app/views/costlog/edit.html.erb b/modules/costs/app/views/costlog/edit.html.erb
index bcbcd54cca80..8b41038d4e55 100644
--- a/modules/costs/app/views/costlog/edit.html.erb
+++ b/modules/costs/app/views/costlog/edit.html.erb
@@ -38,9 +38,6 @@ See COPYRIGHT and LICENSE files for more details.
   :post :
   :put %>
 
-<opce-remote-field-updater data-url="<%= url_for(controller: :budgets, action: :update_material_budget_item, project_id: @cost_entry.project) %>"
-                      data-mode="json">
-</opce-remote-field-updater>
 <%= labelled_tabular_form_for @cost_entry, url: url, html: { method: method } do |f| %>
   <%= error_messages_for 'cost_entry' %>
   <%= back_url_hidden_field_tag %>
@@ -151,4 +148,8 @@ See COPYRIGHT and LICENSE files for more details.
   </div>
 
   <%= styled_button_tag t(:button_save), class: '-with-icon icon-checkmark' %>
+
+  <opce-remote-field-updater data-url="<%= url_for(controller: :budgets, action: :update_material_budget_item, project_id: @cost_entry.project) %>"
+                             data-mode="json">
+  </opce-remote-field-updater>
 <% end %>

From 3bef4c100f1c221fdb11d46f4316795b918cd18f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Thu, 15 Aug 2024 09:11:13 +0200
Subject: [PATCH 08/12] Fix avatar import

---
 frontend/src/app/app.module.ts          | 4 ----
 modules/avatars/frontend/module/main.ts | 2 ++
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index ea2170288496..81d9f1356ff7 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -236,9 +236,6 @@ import { ColorsAutocompleterComponent } from 'core-app/shared/components/colors/
 import {
   StaticAttributeHelpTextComponent,
 } from 'core-app/shared/components/attribute-help-texts/static-attribute-help-text.component';
-import {
-  AvatarUploadFormComponent,
-} from 'core-app/features/plugins/linked/openproject-avatars/avatar-upload-form/avatar-upload-form.component';
 import { appBaseSelector, ApplicationBaseComponent } from 'core-app/core/routing/base/application-base.component';
 import { SpotSwitchComponent } from 'core-app/spot/components/switch/switch.component';
 
@@ -471,6 +468,5 @@ export class OpenProjectModule implements DoBootstrap {
     registerCustomElement('opce-global-search-tabs', GlobalSearchTabsComponent, { injector });
     registerCustomElement('opce-zen-mode-toggle-button', ZenModeButtonComponent, { injector });
     registerCustomElement('opce-colors-autocompleter', ColorsAutocompleterComponent, { injector });
-    registerCustomElement('opce-avatar-upload-form', AvatarUploadFormComponent, { injector });
   }
 }
diff --git a/modules/avatars/frontend/module/main.ts b/modules/avatars/frontend/module/main.ts
index 5707cca48574..f61d36470913 100644
--- a/modules/avatars/frontend/module/main.ts
+++ b/modules/avatars/frontend/module/main.ts
@@ -27,6 +27,7 @@
 import { Injector, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AvatarUploadFormComponent } from './avatar-upload-form/avatar-upload-form.component';
+import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -38,5 +39,6 @@ import { AvatarUploadFormComponent } from './avatar-upload-form/avatar-upload-fo
 })
 export class PluginModule {
   constructor(injector:Injector) {
+    registerCustomElement('opce-avatar-upload-form', AvatarUploadFormComponent, { injector });
   }
 }

From 549cf77dafb077594a9ddf40b1d970cdedb8b5b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Thu, 15 Aug 2024 09:26:29 +0200
Subject: [PATCH 09/12] Linting

---
 app/helpers/application_helper.rb             | 28 +++++++++----
 app/helpers/custom_fields_helper.rb           |  4 +-
 app/views/journals/_diff.html.erb             |  2 +-
 .../global-search-work-packages.component.ts  | 19 ++++-----
 .../tabs/global-search-tabs.component.ts      |  5 ++-
 .../title/global-search-title.component.ts    | 18 ++++++--
 .../main-menu/main-menu-toggle.component.ts   |  4 +-
 .../components/admin/backup.component.ts      | 24 ++++-------
 .../globals/global-listeners/settings.ts      |  3 +-
 .../editable-query-props.component.ts         | 25 ++++++-----
 .../type-form-configuration.component.ts      |  8 ++--
 .../enterprise/enterprise-base.component.ts   | 11 +++--
 .../free-trial-button.component.ts            | 10 +++--
 .../app/features/plugins/plugin-context.ts    | 11 ++---
 .../user/user-activity.component.ts           | 18 +++++---
 .../custom-date-action-admin.component.ts     | 20 +++++++--
 .../collapsible-section.component.ts          |  3 +-
 .../colors/colors-autocompleter.component.ts  | 41 ++++++++++++-------
 .../copy-to-clipboard.component.ts            |  6 +--
 .../ckeditor/ckeditor-preview.service.ts      |  2 +-
 .../enterprise-banner.component.ts            |  3 +-
 .../enterprise-page.component.ts              |  2 +-
 .../custom-text/custom-text.component.ts      |  8 ++--
 .../add-section-dropdown.component.ts         | 18 ++++----
 .../modal/modal-overlay.component.ts          |  7 ++--
 .../no-results/no-results.component.ts        |  2 +-
 .../resizer/main-menu-resizer.component.ts    |  2 +-
 .../content-tabs/content-tabs.component.ts    |  2 +-
 .../edit/trigger-actions-entry.component.ts   |  7 ++--
 .../toaster/toasts-container.component.ts     |  4 +-
 .../overview/wp-overview-graph.component.ts   |  2 +-
 frontend/src/app/shared/shared.module.ts      | 18 ++++----
 .../drop-modal/drop-modal-portal.component.ts |  2 +-
 .../components/switch/switch.component.ts     |  7 +++-
 frontend/src/stimulus/setup.ts                |  2 +-
 lib/tabular_form_builder.rb                   |  2 +-
 .../reporting/app/helpers/reporting_helper.rb |  7 ----
 modules/reporting/lib/widget/filters/date.rb  |  2 +-
 38 files changed, 204 insertions(+), 155 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 2c3e21e4d6e9..85cea8735937 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -172,9 +172,21 @@ def labeled_check_box_tags(name, collection, options = {})
   end
 
   def html_hours(text)
-    text.gsub(%r{(\d+)\.(\d+)},
-              '<span class="hours hours-int">\1</span><span class="hours hours-dec">.\2</span>')
-        .html_safe
+    html_safe_gsub(text,
+                   %r{(\d+)\.(\d+)},
+                   '<span class="hours hours-int">\1</span><span class="hours hours-dec">.\2</span>')
+  end
+
+  def html_safe_gsub(string, *gsub_args, &)
+    html_safe = string.html_safe?
+    string.gsub(*gsub_args, &)
+
+    # We only mark the string as safe if the previous string was already safe
+    if html_safe
+      string.html_safe # rubocop:disable Rails/OutputSafety
+    else
+      string
+    end
   end
 
   def authoring(created, author, options = {})
@@ -252,11 +264,9 @@ def accesskey(s)
 
   # Same as Rails' simple_format helper without using paragraphs
   def simple_format_without_paragraph(text)
-    text.to_s
-        .gsub(/\r\n?/, "\n") # \r\n and \r -> \n
-        .gsub(/\n\n+/, "<br /><br />") # 2+ newline  -> 2 br
-        .gsub(/([^\n]\n)(?=[^\n])/, '\1<br />') # 1 newline   -> br
-        .html_safe
+    html_safe_gsub(text.to_s, /\r\n?/, "\n")
+      .then { |res| html_safe_gsub(res, /\n\n+/, "<br /><br />") }
+      .then { |res| html_safe_gsub(res, /([^\n]\n)(?=[^\n])/, '\1<br />') }
   end
 
   def lang_options_for_select(blank = true)
@@ -345,7 +355,7 @@ def current_layout
   #   A hash containing the following keys:
   #   * width: (default '100px') the css-width for the progress bar
   #   * legend: (default: '') the text displayed alond with the progress bar
-  def progress_bar(pcts, options = {})
+  def progress_bar(pcts, options = {}) # rubocop:disable Metrics/AbcSize
     pcts = Array(pcts).map(&:round)
     closed = pcts[0]
     done = pcts[1] || 0
diff --git a/app/helpers/custom_fields_helper.rb b/app/helpers/custom_fields_helper.rb
index 6d16917b3631..e5c8951c2e2d 100644
--- a/app/helpers/custom_fields_helper.rb
+++ b/app/helpers/custom_fields_helper.rb
@@ -63,7 +63,7 @@ def custom_fields_tabs
   end
 
   # Return custom field html tag corresponding to its format
-  def custom_field_tag(name, custom_value)
+  def custom_field_tag(name, custom_value) # rubocop:disable Metrics/AbcSize,Metrics/PerceivedComplexity
     custom_field = custom_value.custom_field
     field_name = "#{name}[custom_field_values][#{custom_field.id}]"
     field_id = "#{name}_custom_field_values_#{custom_field.id}"
@@ -143,7 +143,7 @@ def custom_field_tag_with_label(name, custom_value)
     custom_field_label_tag(name, custom_value) + custom_field_tag(name, custom_value)
   end
 
-  def custom_field_tag_for_bulk_edit(name, custom_field, project = nil)
+  def custom_field_tag_for_bulk_edit(name, custom_field, project = nil) # rubocop:disable Metrics/AbcSize
     field_name = "#{name}[custom_field_values][#{custom_field.id}]"
     field_id = "#{name}_custom_field_values_#{custom_field.id}"
     field_format = OpenProject::CustomFieldFormat.find_by_name(custom_field.field_format)
diff --git a/app/views/journals/_diff.html.erb b/app/views/journals/_diff.html.erb
index 0ebdab4b374b..c07444eedc6e 100644
--- a/app/views/journals/_diff.html.erb
+++ b/app/views/journals/_diff.html.erb
@@ -28,5 +28,5 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 
 <div class="text-diff">
-  <%= simple_format_without_paragraph diff.to_html %>
+  <%= simple_format_without_paragraph diff.to_html.html_safe %>
 </div>
diff --git a/frontend/src/app/core/global_search/global-search-work-packages.component.ts b/frontend/src/app/core/global_search/global-search-work-packages.component.ts
index 38cb7edcd259..b6c22ff181f1 100644
--- a/frontend/src/app/core/global_search/global-search-work-packages.component.ts
+++ b/frontend/src/app/core/global_search/global-search-work-packages.component.ts
@@ -36,28 +36,25 @@ import {
   OnInit,
   Renderer2,
 } from '@angular/core';
-import { FocusHelperService } from 'core-app/shared/directives/focus/focus-helper';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
 import { GlobalSearchService } from 'core-app/core/global_search/services/global-search.service';
-import { UrlParamsHelperService } from 'core-app/features/work-packages/components/wp-query/url-params-helper';
 import {
-  WorkPackageTableConfigurationObject
+  WorkPackageTableConfigurationObject,
 } from 'core-app/features/work-packages/components/wp-table/wp-table-configuration';
 import { IsolatedQuerySpace } from 'core-app/features/work-packages/directives/query-space/isolated-query-space';
 import {
-  WorkPackageViewFiltersService
+  WorkPackageViewFiltersService,
 } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-filters.service';
 import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 import { combineLatest } from 'rxjs';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import {
-  WorkPackageFiltersService
+  WorkPackageFiltersService,
 } from 'core-app/features/work-packages/components/filters/wp-filters/wp-filters.service';
 import {
-  WorkPackageIsolatedQuerySpaceDirective
-} from "core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive";
-
+  WorkPackageIsolatedQuerySpaceDirective,
+} from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
 
 @Component({
   selector: 'opce-global-search-work-packages',
@@ -72,6 +69,7 @@ import {
 })
 
 export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin implements OnInit, OnDestroy, AfterViewInit {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   public queryProps:{ [key:string]:any };
 
   public resultsHidden = false;
@@ -87,7 +85,6 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
   };
 
   constructor(
-    readonly FocusHelper:FocusHelperService,
     readonly elementRef:ElementRef,
     readonly renderer:Renderer2,
     readonly I18n:I18nService,
@@ -97,7 +94,6 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
     readonly querySpace:IsolatedQuerySpace,
     readonly wpFilters:WorkPackageFiltersService,
     readonly cdRef:ChangeDetectorRef,
-    private UrlParamsHelper:UrlParamsHelperService,
   ) {
     super();
   }
@@ -113,7 +109,7 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
         debounceTime(10),
         this.untilDestroyed(),
       )
-      .subscribe(([]) => {
+      .subscribe(() => {
         this.wpFilters.visible = false;
         this.setQueryProps();
       });
@@ -131,6 +127,7 @@ export class GlobalSearchWorkPackagesComponent extends UntilDestroyedMixin imple
   }
 
   private setQueryProps():void {
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const filters:any[] = [];
     let columns = ['id', 'project', 'subject', 'type', 'status', 'updatedAt'];
 
diff --git a/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts b/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts
index e71ebd37d064..13dbb323b80d 100644
--- a/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts
+++ b/frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts
@@ -26,14 +26,13 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnDestroy, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnDestroy, OnInit } from '@angular/core';
 import { StateService } from '@uirouter/core';
 import { Subscription } from 'rxjs';
 import { GlobalSearchService } from 'core-app/core/global_search/services/global-search.service';
 import { ScrollableTabsComponent } from 'core-app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component';
 import { TabDefinition } from 'core-app/shared/components/tabs/tab.interface';
 
-
 @Component({
   selector: 'opce-global-search-tabs',
   templateUrl: '../../../shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html',
@@ -60,12 +59,14 @@ export class GlobalSearchTabsComponent extends ScrollableTabsComponent implement
     this.currentTabSub = this.globalSearchService
       .currentTab$
       .subscribe((currentTab) => {
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */
         this.currentTabId = currentTab;
       });
 
     this.tabsSub = this.globalSearchService
       .tabs$
       .subscribe((tabs) => {
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */
         this.tabs = tabs;
         this.tabs.map((tab) => (tab.path = '#'));
       });
diff --git a/frontend/src/app/core/global_search/title/global-search-title.component.ts b/frontend/src/app/core/global_search/title/global-search-title.component.ts
index 5457936ed405..3477233e9b3c 100644
--- a/frontend/src/app/core/global_search/title/global-search-title.component.ts
+++ b/frontend/src/app/core/global_search/title/global-search-title.component.ts
@@ -25,7 +25,15 @@
 //
 // See COPYRIGHT and LICENSE files for more details.
 //++
-import { ChangeDetectorRef, Component, ElementRef, Injector, Input, OnInit, } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Injector,
+  Input,
+  OnInit,
+} from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { combineLatest } from 'rxjs';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
@@ -37,6 +45,7 @@ import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destr
 @Component({
   selector: 'opce-global-search-title',
   templateUrl: './global-search-title.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GlobalSearchTitleComponent extends UntilDestroyedMixin implements OnInit {
   @Input() public searchTerm:string;
@@ -56,11 +65,13 @@ export class GlobalSearchTitleComponent extends UntilDestroyedMixin implements O
     in: this.I18n.t('js.label_in'),
   };
 
-  constructor(readonly elementRef:ElementRef,
+  constructor(
+    readonly elementRef:ElementRef,
     readonly cdRef:ChangeDetectorRef,
     readonly globalSearchService:GlobalSearchService,
     readonly I18n:I18nService,
-    readonly injector:Injector) {
+    readonly injector:Injector,
+  ) {
     super();
   }
 
@@ -76,6 +87,7 @@ export class GlobalSearchTitleComponent extends UntilDestroyedMixin implements O
       )
       .subscribe(([newSearchTerm, newProjectScope]) => {
         this.searchTerm = newSearchTerm;
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */
         this.project = this.projectText(newProjectScope);
         this.searchTitle = `${this.text.search_for} ${this.searchTerm} ${this.project === '' ? '' : this.text.in} ${this.project}`;
 
diff --git a/frontend/src/app/core/main-menu/main-menu-toggle.component.ts b/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
index 1bb85b01673a..ad12425f5926 100644
--- a/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
+++ b/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
@@ -34,10 +34,10 @@ import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destr
 import { MainMenuToggleService } from './main-menu-toggle.service';
 import { TopMenuService } from 'core-app/core/top-menu/top-menu.service';
 
-
 @Component({
   selector: 'opce-main-menu-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     class: 'op-app-menu op-main-menu-toggle',
   },
diff --git a/frontend/src/app/core/setup/globals/components/admin/backup.component.ts b/frontend/src/app/core/setup/globals/components/admin/backup.component.ts
index 19060a8745fa..98107f98594d 100644
--- a/frontend/src/app/core/setup/globals/components/admin/backup.component.ts
+++ b/frontend/src/app/core/setup/globals/components/admin/backup.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Injector, ViewChild, } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Injector, ViewChild } from '@angular/core';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
@@ -37,7 +37,6 @@ import { OpenProjectBackupService } from 'core-app/core/backup/op-backup.service
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { HalError } from 'core-app/features/hal/services/hal-error';
 
-
 @Component({
   selector: 'opce-backup',
   templateUrl: './backup.component.html',
@@ -57,15 +56,13 @@ export class BackupComponent implements AfterViewInit {
     attachmentsDisabled: this.i18n.t('js.backup.attachments_disabled'),
   };
 
-  public jobStatusId:string = this.elementRef.nativeElement.dataset.jobStatusId;
-
-  public lastBackupDate:string = this.elementRef.nativeElement.dataset.lastBackupDate;
+  public jobStatusId = this.elementRef.nativeElement.dataset.jobStatusId as string;
 
-  public lastBackupAttachmentId:string = this.elementRef.nativeElement.dataset.lastBackupAttachmentId;
+  public lastBackupDate = this.elementRef.nativeElement.dataset.lastBackupDate as string;
 
-  public mayIncludeAttachments:boolean = this.elementRef.nativeElement.dataset.mayIncludeAttachments != 'false';
+  public lastBackupAttachmentId = this.elementRef.nativeElement.dataset.lastBackupAttachmentId as string;
 
-  public isInProgress = false;
+  public mayIncludeAttachments = this.elementRef.nativeElement.dataset.mayIncludeAttachments !== 'false';
 
   public includeAttachments = true;
 
@@ -73,10 +70,10 @@ export class BackupComponent implements AfterViewInit {
 
   @InjectField() opBackup:OpenProjectBackupService;
 
-  @ViewChild('backupTokenInput') backupTokenInput:ElementRef;
+  @ViewChild('backupTokenInput') backupTokenInput:ElementRef<HTMLInputElement>;
 
   constructor(
-    readonly elementRef:ElementRef,
+    readonly elementRef:ElementRef<HTMLElement>,
     public injector:Injector,
     protected i18n:I18nService,
     protected toastService:ToastService,
@@ -87,6 +84,7 @@ export class BackupComponent implements AfterViewInit {
   }
 
   ngAfterViewInit():void {
+    /* eslint-disable-next-line @typescript-eslint/no-unsafe-call */
     this.backupTokenInput.nativeElement.focus();
   }
 
@@ -99,10 +97,6 @@ export class BackupComponent implements AfterViewInit {
     return this.pathHelper.attachmentDownloadPath(this.lastBackupAttachmentId, undefined);
   }
 
-  public includeAttachmentsDefault():boolean {
-    return this.mayIncludeAttachments;
-  }
-
   public includeAttachmentsTitle():string {
     return this.mayIncludeAttachments ? '' : this.text.attachmentsDisabled;
   }
@@ -121,7 +115,7 @@ export class BackupComponent implements AfterViewInit {
       .triggerBackup(backupToken, this.includeAttachments)
       .subscribe(
         (resp:HalResource) => {
-          this.jobStatusId = resp.jobStatusId;
+          this.jobStatusId = resp.jobStatusId as string;
           this.opModalService.show(JobStatusModalComponent, 'global', { jobId: resp.jobStatusId });
         },
         (error:HalError) => {
diff --git a/frontend/src/app/core/setup/globals/global-listeners/settings.ts b/frontend/src/app/core/setup/globals/global-listeners/settings.ts
index 181d4f3a3216..0c01896dc864 100644
--- a/frontend/src/app/core/setup/globals/global-listeners/settings.ts
+++ b/frontend/src/app/core/setup/globals/global-listeners/settings.ts
@@ -31,8 +31,9 @@ export function listenToSettingChanges() {
     const self = jQuery(select);
     const id:string = self.attr('id') || '';
     const settingName = id.replace('lang-for-', '');
-    const newLang = self.val();
+    const newLang = self.val() as string;
     const textArea = jQuery(`#settings-${settingName}`);
+    /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */
     const editor = textArea.siblings('opce-ckeditor-augmented-textarea').data('editor');
 
     return {
diff --git a/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts b/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts
index 51486f66dda1..30706c633fde 100644
--- a/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts
+++ b/frontend/src/app/features/admin/editable-query-props/editable-query-props.component.ts
@@ -1,10 +1,8 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import {
-  ExternalQueryConfigurationService
+  ExternalQueryConfigurationService,
 } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
-import { UrlParamsHelperService } from 'core-app/features/work-packages/components/wp-query/url-params-helper';
-
 
 @Component({
   selector: 'opce-editable-query-props',
@@ -24,29 +22,32 @@ export class EditableQueryPropsComponent implements OnInit {
     edit_query: this.I18n.t('js.admin.type_form.edit_query'),
   };
 
-  constructor(private elementRef:ElementRef,
+  constructor(
+    private elementRef:ElementRef<HTMLElement>,
     private I18n:I18nService,
     private cdRef:ChangeDetectorRef,
-    private urlParamsHelper:UrlParamsHelperService,
-    private externalQuery:ExternalQueryConfigurationService) {
+    private externalQuery:ExternalQueryConfigurationService,
+  ) {
   }
 
   ngOnInit() {
     const element = this.elementRef.nativeElement;
-    this.id = element.dataset.id;
-    this.name = element.dataset.name;
+    this.id = element.dataset.id as string;
+    this.name = element.dataset.name as string;
     this.urlParams = element.dataset.urlParams === 'true';
 
-    this.queryProps = element.dataset.query;
+    this.queryProps = element.dataset.query as string;
   }
 
   public editQuery() {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const queryProperties = (() => {
       if (this.urlParams) {
         return this.queryProps;
       }
 
       try {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return JSON.parse(this.queryProps);
       } catch (e) {
         console.error(`Failed to parse query props from ${this.queryProps}: ${e}`);
@@ -55,9 +56,11 @@ export class EditableQueryPropsComponent implements OnInit {
     })();
 
     this.externalQuery.show({
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       currentQuery: queryProperties,
       urlParams: this.urlParams,
-      callback: (queryProps:any) => {
+      callback: (queryProps:string) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         this.queryProps = this.urlParams ? queryProps : JSON.stringify(queryProps);
         this.cdRef.detectChanges();
       },
diff --git a/frontend/src/app/features/admin/types/type-form-configuration.component.ts b/frontend/src/app/features/admin/types/type-form-configuration.component.ts
index b2618d6cb3de..b59844219594 100644
--- a/frontend/src/app/features/admin/types/type-form-configuration.component.ts
+++ b/frontend/src/app/features/admin/types/type-form-configuration.component.ts
@@ -1,8 +1,8 @@
-import { AfterViewInit, Component, ElementRef, OnInit, } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import {
-  ExternalRelationQueryConfigurationService
+  ExternalRelationQueryConfigurationService,
 } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.service';
 import { DomAutoscrollService } from 'core-app/shared/helpers/drag-and-drop/dom-autoscroll.service';
 import { DragulaService, DrakeWithModels } from 'ng2-dragula';
@@ -30,7 +30,6 @@ export interface TypeGroup {
   type:TypeGroupType;
 }
 
-
 export const emptyTypeGroup = '__empty';
 
 @Component({
@@ -234,7 +233,8 @@ export class TypeFormConfigurationComponent extends UntilDestroyedMixin implemen
         this.form.off('submit.typeformupdater');
         this.form.trigger('submit');
       })
-      .catch(() => {});
+      .catch(() => {
+      });
 
     $event.preventDefault();
     return false;
diff --git a/frontend/src/app/features/enterprise/enterprise-base.component.ts b/frontend/src/app/features/enterprise/enterprise-base.component.ts
index 19a4f45e84a4..1e0bb4926215 100644
--- a/frontend/src/app/features/enterprise/enterprise-base.component.ts
+++ b/frontend/src/app/features/enterprise/enterprise-base.component.ts
@@ -26,17 +26,18 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, Injector } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { EnterpriseTrialModalComponent } from 'core-app/features/enterprise/enterprise-modal/enterprise-trial.modal';
 import { OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { EnterpriseTrialService } from 'core-app/features/enterprise/enterprise-trial.service';
 
-
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'enterprise-base',
   templateUrl: './enterprise-base.component.html',
   styleUrls: ['./enterprise-base.component.sass'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EnterpriseBaseComponent {
   public text = {
@@ -51,10 +52,12 @@ export class EnterpriseBaseComponent {
     try_another_email: this.I18n.t('js.admin.enterprise.trial.try_another_email'),
   };
 
-  constructor(protected I18n:I18nService,
+  constructor(
+    protected I18n:I18nService,
     protected opModalService:OpModalService,
     readonly injector:Injector,
-    public eeTrialService:EnterpriseTrialService) {
+    public eeTrialService:EnterpriseTrialService,
+  ) {
   }
 
   public openTrialModal() {
diff --git a/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts b/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts
index 73caea8b37fe..0b3f0e1ce804 100644
--- a/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts
+++ b/frontend/src/app/features/enterprise/free-trial-button/free-trial-button.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { EnterpriseTrialModalComponent } from 'core-app/features/enterprise/enterprise-modal/enterprise-trial.modal';
 import { OpModalService } from 'core-app/shared/components/modal/modal.service';
@@ -37,11 +37,11 @@ import { HttpClient } from '@angular/common/http';
 import { GonService } from 'core-app/core/gon/gon.service';
 import { IEnterpriseData } from 'core-app/features/enterprise/enterprise-trial.model';
 
-
 export interface EETrialKey {
   created:string;
   value:string;
 }
+
 @Component({
   selector: 'opce-free-trial-button',
   templateUrl: './free-trial-button.component.html',
@@ -60,14 +60,16 @@ export class FreeTrialButtonComponent implements OnInit {
     }),
   };
 
-  constructor(protected I18n:I18nService,
+  constructor(
+    protected I18n:I18nService,
     protected opModalService:OpModalService,
     readonly injector:Injector,
     readonly http:HttpClient,
     readonly cdRef:ChangeDetectorRef,
     readonly Gon:GonService,
     public eeTrialService:EnterpriseTrialService,
-    readonly timezoneService:TimezoneService) {
+    readonly timezoneService:TimezoneService,
+  ) {
   }
 
   ngOnInit():void {
diff --git a/frontend/src/app/features/plugins/plugin-context.ts b/frontend/src/app/features/plugins/plugin-context.ts
index 1a2afbebff1d..01e1604ceff9 100644
--- a/frontend/src/app/features/plugins/plugin-context.ts
+++ b/frontend/src/app/features/plugins/plugin-context.ts
@@ -2,7 +2,7 @@ import { Injector, NgZone } from '@angular/core';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import {
-  ExternalQueryConfigurationService
+  ExternalQueryConfigurationService,
 } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
 import { OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { DisplayField } from 'core-app/shared/components/fields/display/display-field.module';
@@ -13,7 +13,7 @@ import { EditFieldService } from 'core-app/shared/components/fields/edit/edit-fi
 import { States } from 'core-app/core/states/states.service';
 import { CKEditorPreviewService } from 'core-app/shared/components/editor/components/ckeditor/ckeditor-preview.service';
 import {
-  ExternalRelationQueryConfigurationService
+  ExternalRelationQueryConfigurationService,
 } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.service';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
@@ -26,7 +26,7 @@ import { PathHelperService } from '../../core/path-helper/path-helper.service';
 import { HTMLSanitizeService } from '../../core/html-sanitize/html-sanitize.service';
 import { DynamicContentModalComponent } from '../../shared/components/modals/modal-wrapper/dynamic-content.modal';
 import {
-  PasswordConfirmationModalComponent
+  PasswordConfirmationModalComponent,
 } from '../../shared/components/modals/request-for-confirmation/password-confirmation.modal';
 import { DomAutoscrollService } from 'core-app/shared/helpers/drag-and-drop/dom-autoscroll.service';
 import { AttachmentsResourceService } from 'core-app/core/state/attachments/attachments.service';
@@ -83,7 +83,8 @@ export class OpenProjectPluginContext {
   };
 
   // Hooks
-  public readonly hooks:{ [hook:string]:(callback:Function) => void } = {};
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  public readonly hooks:{ [hook:string]:(callback:(...args:any[]) => unknown) => void } = {};
 
   // Angular zone reference
   @InjectField() public readonly zone:NgZone;
@@ -93,7 +94,7 @@ export class OpenProjectPluginContext {
     this
       ._knownHookNames
       .forEach((hook:string) => {
-        this.hooks[hook] = (callback:Function) => this.services.hooks.register(hook, callback);
+        this.hooks[hook] = (callback:() => void) => this.services.hooks.register(hook, callback);
       });
   }
 
diff --git a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts b/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts
index a40f604d9e18..228b3d6518d4 100644
--- a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.ts
@@ -43,10 +43,10 @@ import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import {
-  WorkPackageCommentFieldHandler
+  WorkPackageCommentFieldHandler,
 } from 'core-app/features/work-packages/components/work-package-comment/work-package-comment-field-handler';
 import {
-  WorkPackagesActivityService
+  WorkPackagesActivityService,
 } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/wp-activity.service';
 import { CommentService } from 'core-app/features/work-packages/components/wp-activity/comment-service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
@@ -56,6 +56,7 @@ import idFromLink from 'core-app/features/hal/helpers/id-from-link';
 import { DeviceService } from 'core-app/core/browser/device.service';
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'user-activity',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './user-activity.component.html',
@@ -78,7 +79,7 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
 
   public userCanQuote = false;
 
-  public userId:string | number;
+  public userId:string|number;
 
   public user:UserResource;
 
@@ -164,7 +165,7 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
             return;
           }
           const activityElement = document.querySelectorAll(`[data-qa-activity-number='${this.activityNo}']`)[0] as HTMLElement;
-          const scrollContainer = document.querySelectorAll("[data-notification-selector='notification-scroll-container']")[0];
+          const scrollContainer = document.querySelectorAll('[data-notification-selector=\'notification-scroll-container\']')[0];
           const scrollOffset = activityElement.offsetTop - (scrollContainer as HTMLElement).offsetTop - this.additionalScrollMargin;
           scrollContainer.scrollTop = scrollOffset;
         });
@@ -200,11 +201,13 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
     return null;
   }
 
-  public async updateComment() {
+  public async updateComment():Promise<unknown> {
     this.inFlight = true;
 
     await this.onSubmit();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return
     return this.commentService.updateComment(this.activity, this.rawComment || '')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       .then((newActivity:HalResource) => {
         this.activity = newActivity;
         this.updateCommentText();
@@ -215,8 +218,10 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
           .cache
           .updateWorkPackage(this.workPackage);
       })
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       .finally(() => {
-        this.deactivate(true); this.inFlight = false;
+        this.deactivate(true);
+        this.inFlight = false;
       });
   }
 
@@ -260,6 +265,7 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
   }
 
   private updateCommentText() {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
     this.postedComment = this.sanitization.bypassSecurityTrustHtml(this.activity.comment.html);
   }
 }
diff --git a/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts b/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts
index 407ba4de615e..0278f7cd92de 100644
--- a/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts
@@ -26,13 +26,20 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ApplicationRef, ChangeDetectorRef, Component, ElementRef, OnInit, } from '@angular/core';
+import {
+  ApplicationRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnInit,
+} from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
-
 @Component({
   selector: 'opce-custom-date-action-admin',
   templateUrl: './custom-date-action-admin.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomDateActionAdminComponent implements OnInit {
   public valueVisible = false;
@@ -43,6 +50,7 @@ export class CustomDateActionAdminComponent implements OnInit {
 
   public visibleValue:string = '';
 
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   public selectedOperator:any;
 
   private onKey = 'on';
@@ -56,10 +64,12 @@ export class CustomDateActionAdminComponent implements OnInit {
     { key: this.currentKey, label: this.I18n.t('js.custom_actions.date.current_date') },
   ];
 
-  constructor(private elementRef:ElementRef,
+  constructor(
+    private elementRef:ElementRef,
     private cdRef:ChangeDetectorRef,
     public appRef:ApplicationRef,
-    private I18n:I18nService) {
+    private I18n:I18nService,
+  ) {
   }
 
   // cannot use $onInit as it would be called before the operators gets filled
@@ -79,6 +89,7 @@ export class CustomDateActionAdminComponent implements OnInit {
   }
 
   public toggleValueVisibility() {
+    /* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */
     this.valueVisible = this.selectedOperator.key === this.onKey;
     if (this.fieldValue === this.currentFieldValue) {
       this.fieldValue = '';
@@ -88,6 +99,7 @@ export class CustomDateActionAdminComponent implements OnInit {
   }
 
   private updateDbValue() {
+    /* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */
     if (this.selectedOperator.key === this.currentKey) {
       this.fieldValue = this.currentFieldValue;
     }
diff --git a/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts b/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts
index 9c1b6ce0e24f..7491a52a4aba 100644
--- a/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts
+++ b/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts
@@ -26,8 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, ElementRef, OnInit, ViewChild, } from '@angular/core';
-
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'opce-opce-collapsible-section-augment',
diff --git a/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts b/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts
index e4c034f70e47..0f988b6c8f9f 100644
--- a/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts
+++ b/frontend/src/app/shared/components/colors/colors-autocompleter.component.ts
@@ -26,12 +26,17 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
 import {
-  Highlighting
+  Highlighting,
 } from 'core-app/features/work-packages/components/wp-fast-table/builders/highlighting/highlighting.functions';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
+interface ColorItem {
+  name:string;
+  value:string;
+  selected?:boolean;
+}
 
 @Component({
   template: `
@@ -44,19 +49,20 @@ import { I18nService } from 'core-app/core/i18n/i18n.service';
                [clearable]="false"
                appendTo="body">
       <ng-template ng-label-tmp let-item="item">
-        <span [ngClass]="highlightColor(item)">{{item.name}}</span>
+        <span [ngClass]="highlightColor(item)">{{ item.name }}</span>
       </ng-template>
       <ng-template ng-option-tmp let-item="item" let-index="index">
-        <span [ngClass]="highlightColor(item)">{{item.name}}</span>
+        <span [ngClass]="highlightColor(item)">{{ item.name }}</span>
       </ng-template>
     </ng-select>
   `,
   selector: 'opce-colors-autocompleter',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ColorsAutocompleterComponent implements OnInit {
-  public options:any[];
+  public options:ColorItem[];
 
-  public selectedOption:any;
+  public selectedOption?:ColorItem|string;
 
   private highlightTextInline = false;
 
@@ -64,25 +70,30 @@ export class ColorsAutocompleterComponent implements OnInit {
 
   private selectedColorId:string;
 
-  constructor(protected elementRef:ElementRef,
-    protected readonly I18n:I18nService) {
+  constructor(
+    protected elementRef:ElementRef<HTMLElement>,
+    protected readonly I18n:I18nService,
+  ) {
   }
 
   ngOnInit() {
     this.setColorOptions();
 
-    this.updateInputField = document.getElementsByName(this.elementRef.nativeElement.dataset.updateInput)[0] as HTMLInputElement|undefined;
-    this.highlightTextInline = JSON.parse(this.elementRef.nativeElement.dataset.highlightTextInline);
+    this.updateInputField = document.getElementsByName(this.elementRef.nativeElement.dataset.updateInput as string)[0] as HTMLInputElement|undefined;
+    this.highlightTextInline = JSON.parse(this.elementRef.nativeElement.dataset.highlightTextInline as string) as boolean;
   }
 
-  public onModelChange(color:any) {
+  public onModelChange(color:{ name:string, value:string }) {
     if (color && this.updateInputField) {
       this.updateInputField.value = color.value;
     }
   }
 
   private setColorOptions() {
-    this.options = JSON.parse(this.elementRef.nativeElement.dataset.colors);
+    this.options = JSON.parse(this.elementRef.nativeElement.dataset.colors as string) as {
+      name:string,
+      value:string
+    }[];
     this.options.unshift({ name: this.I18n.t('js.label_no_color'), value: '' });
 
     this.selectedOption = this.options.find((item) => item.selected === true);
@@ -91,14 +102,14 @@ export class ColorsAutocompleterComponent implements OnInit {
       this.selectedOption = this.selectedOption.value;
     } else {
       // Differentiate between "No color" and a color that is now not selectable any more
-      this.selectedColorId = this.elementRef.nativeElement.dataset.selectedColor;
+      this.selectedColorId = this.elementRef.nativeElement.dataset.selectedColor as string;
       this.selectedOption = this.selectedColorId ? this.selectedColorId : '';
     }
   }
 
-  private highlightColor(item:any) {
+  highlightColor(item:ColorItem):string|undefined {
     if (item.value === '') {
-      return;
+      return undefined;
     }
 
     let highlightingClass;
diff --git a/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts b/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
index d7322f779db0..e9bcd516fd3c 100644
--- a/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
+++ b/frontend/src/app/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -26,13 +26,12 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, Component, ElementRef, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
 import { CopyToClipboardService } from './copy-to-clipboard.service';
 
-
 @Component({
   template: '',
   selector: 'opce-copy-to-clipboard',
@@ -51,7 +50,8 @@ export class CopyToClipboardComponent implements OnInit {
     readonly elementRef:ElementRef,
     readonly I18n:I18nService,
     protected copyToClipboardService:CopyToClipboardService,
-  ) { }
+  ) {
+  }
 
   ngOnInit() {
     const element = this.elementRef.nativeElement;
diff --git a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
index 8d2ec30c9a5d..c9907c3507e0 100644
--- a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
+++ b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-preview.service.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable, Injector, } from '@angular/core';
+import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable, Injector } from '@angular/core';
 
 @Injectable()
 export class CKEditorPreviewService {
diff --git a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
index 82052c1fb1d3..b2206c734c1a 100644
--- a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
+++ b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Injector, Input, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, Input, OnInit } from '@angular/core';
 import { BannersService } from 'core-app/core/enterprise/banners.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { imagePath } from 'core-app/shared/helpers/images/path-helper';
@@ -7,7 +7,6 @@ import { PathHelperService } from 'core-app/core/path-helper/path-helper.service
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 import { pricingUrl } from 'core-app/core/setup/globals/constants.const';
 
-
 @Component({
   selector: 'op-enterprise-banner',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts b/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts
index 0c12e1444f91..d2313ffa800b 100644
--- a/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts
+++ b/frontend/src/app/shared/components/enterprise-page/enterprise-page.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { imagePath } from 'core-app/shared/helpers/images/path-helper';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
diff --git a/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts b/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts
index 9b2605731bf2..9ce75d2a0d84 100644
--- a/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts
+++ b/frontend/src/app/shared/components/grids/widgets/custom-text/custom-text.component.ts
@@ -13,7 +13,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import {
-  CustomTextEditFieldService
+  CustomTextEditFieldService,
 } from 'core-app/shared/components/grids/widgets/custom-text/custom-text-edit-field.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
@@ -61,9 +61,9 @@ export class WidgetCustomTextComponent extends AbstractWidgetComponent implement
         this.untilDestroyed(),
         filter((value) => value !== this.resource.options.text),
       ).subscribe((newText) => {
-        const changeset = this.setChangesetOptions({ text: { raw: newText } });
-        this.resourceChanged.emit(changeset);
-      });
+      const changeset = this.setChangesetOptions({ text: { raw: newText } });
+      this.resourceChanged.emit(changeset);
+    });
   }
 
   ngOnChanges(changes:SimpleChanges):void {
diff --git a/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts b/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts
index 66dca3c40060..7e1e64ed5192 100644
--- a/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts
+++ b/frontend/src/app/shared/components/hide-section/add-section-dropdown/add-section-dropdown.component.ts
@@ -27,7 +27,7 @@
 //++
 
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { Component, ElementRef, OnInit, ViewChild, } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import {
   HideSectionDefinition,
   HideSectionService,
@@ -53,9 +53,11 @@ export class AddSectionDropdownComponent extends UntilDestroyedMixin implements
 
   public placeholder = this.I18n.t('js.placeholders.selection');
 
-  constructor(protected hideSectionService:HideSectionService,
+  constructor(
+    protected hideSectionService:HideSectionService,
     protected elementRef:ElementRef,
-    protected I18n:I18nService) {
+    protected I18n:I18nService,
+  ) {
     super();
   }
 
@@ -68,12 +70,12 @@ export class AddSectionDropdownComponent extends UntilDestroyedMixin implements
       .pipe(
         this.untilDestroyed(),
       ).subscribe((displayed) => {
-        this.selectable = this.hideSectionService.all
-          .filter((el) => displayed.indexOf(el.key) === -1)
-          .sort((a, b) => a.label.localeCompare(b.label));
+      this.selectable = this.hideSectionService.all
+        .filter((el) => displayed.indexOf(el.key) === -1)
+        .sort((a, b) => a.label.localeCompare(b.label));
 
-        (this.option.nativeElement as HTMLOptionElement).selected = true;
-      });
+      (this.option.nativeElement as HTMLOptionElement).selected = true;
+    });
   }
 
   show(value:string) {
diff --git a/frontend/src/app/shared/components/modal/modal-overlay.component.ts b/frontend/src/app/shared/components/modal/modal-overlay.component.ts
index 50cd8fe72b81..009806f6626c 100644
--- a/frontend/src/app/shared/components/modal/modal-overlay.component.ts
+++ b/frontend/src/app/shared/components/modal/modal-overlay.component.ts
@@ -34,7 +34,7 @@ import {
   ElementRef,
   ViewChild,
 } from '@angular/core';
-import { CdkPortalOutlet, ComponentPortal, } from '@angular/cdk/portal';
+import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import { combineLatest } from 'rxjs';
 import { distinctUntilChanged, filter } from 'rxjs/operators';
 
@@ -75,7 +75,8 @@ export class OpModalOverlayComponent {
     readonly modalService:OpModalService,
     readonly I18n:I18nService,
     readonly cdRef:ChangeDetectorRef,
-  ) {}
+  ) {
+  }
 
   setupListener():void {
     combineLatest([
@@ -100,7 +101,7 @@ export class OpModalOverlayComponent {
       });
   }
 
-  protected isDefaultTarget(modalData:ModalData | null):boolean {
+  protected isDefaultTarget(modalData:ModalData|null):boolean {
     if (modalData === null) return true;
 
     return modalData.target === PortalOutletTarget.Default;
diff --git a/frontend/src/app/shared/components/no-results/no-results.component.ts b/frontend/src/app/shared/components/no-results/no-results.component.ts
index a503d8266de8..6998852118e8 100644
--- a/frontend/src/app/shared/components/no-results/no-results.component.ts
+++ b/frontend/src/app/shared/components/no-results/no-results.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input } from '@angular/core';
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 
 
diff --git a/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts b/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts
index afd1c0e3c08d..398bc6cf625e 100644
--- a/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts
+++ b/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 
 import { ResizeDelta } from 'core-app/shared/components/resizer/resizer.component';
diff --git a/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts b/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts
index ab5ce2b9389f..dc82ce8e0353 100644
--- a/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts
+++ b/frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector } from '@angular/core';
 import { GonService } from 'core-app/core/gon/gon.service';
 import { StateService } from '@uirouter/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
diff --git a/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts b/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts
index 79242faa3268..8f8a6b83795f 100644
--- a/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts
+++ b/frontend/src/app/shared/components/time_entries/edit/trigger-actions-entry.component.ts
@@ -1,15 +1,14 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector } from '@angular/core';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { TimeEntryEditService } from 'core-app/shared/components/time_entries/edit/edit.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import {
-  HalResourceEditingService
+  HalResourceEditingService,
 } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { TimeEntryResource } from 'core-app/features/hal/resources/time-entry-resource';
-import { Observable, switchMap, } from 'rxjs';
-
+import { Observable, switchMap } from 'rxjs';
 
 @Component({
   selector: 'opce-time-entry-trigger-actions',
diff --git a/frontend/src/app/shared/components/toaster/toasts-container.component.ts b/frontend/src/app/shared/components/toaster/toasts-container.component.ts
index 6f8492c01e77..f426747f862c 100644
--- a/frontend/src/app/shared/components/toaster/toasts-container.component.ts
+++ b/frontend/src/app/shared/components/toaster/toasts-container.component.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { IToast, ToastService } from './toast.service';
 
@@ -47,7 +47,7 @@ export class ToastsContainerComponent extends UntilDestroyedMixin implements OnI
 
   constructor(
     readonly toastService:ToastService,
-    readonly cdRef:ChangeDetectorRef
+    readonly cdRef:ChangeDetectorRef,
   ) {
     super();
   }
diff --git a/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts b/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts
index fa8c996263ca..29810504a824 100644
--- a/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts
+++ b/frontend/src/app/shared/components/work-package-graphs/overview/wp-overview-graph.component.ts
@@ -14,7 +14,7 @@ import {
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ChartOptions } from 'chart.js';
 import {
-  WpGraphConfigurationService
+  WpGraphConfigurationService,
 } from 'core-app/shared/components/work-package-graphs/configuration/wp-graph-configuration.service';
 import {
   WpGraphConfiguration,
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 75b31d9bdff6..00be06fa2270 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 import { FormsModule } from '@angular/forms';
-import { Injector, NgModule, } from '@angular/core';
+import { Injector, NgModule } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
 import { UIRouterGlobals } from '@uirouter/core';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -40,19 +40,19 @@ import { UIRouterModule } from '@uirouter/angular';
 import { OpSpotModule } from 'core-app/spot/spot.module';
 import { CurrentUserModule } from 'core-app/core/current-user/current-user.module';
 import {
-  OpenprojectAutocompleterModule
+  OpenprojectAutocompleterModule,
 } from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
 import { IconModule } from 'core-app/shared/components/icon/icon.module';
 import { AttributeHelpTextModule } from 'core-app/shared/components/attribute-help-texts/attribute-help-text.module';
 import {
-  IconTriggeredContextMenuComponent
+  IconTriggeredContextMenuComponent,
 } from 'core-app/shared/components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
 import {
-  SortHeaderDirective
+  SortHeaderDirective,
 } from 'core-app/features/work-packages/components/wp-table/sort-header/sort-header.directive';
 import {
-  ZenModeButtonComponent
+  ZenModeButtonComponent,
 } from 'core-app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component';
 import { OPContextMenuComponent } from 'core-app/shared/components/op-context-menu/op-context-menu.component';
 import { OpenprojectPrincipalRenderingModule } from 'core-app/shared/components/principal/principal-rendering.module';
@@ -70,7 +70,7 @@ import { ToastComponent } from './components/toaster/toast.component';
 
 // Old datepickers
 import {
-  OpMultiDatePickerComponent
+  OpMultiDatePickerComponent,
 } from 'core-app/shared/components/datepicker/multi-date-picker/multi-date-picker.component';
 
 import { ToastsContainerComponent } from './components/toaster/toasts-container.component';
@@ -81,7 +81,7 @@ import { NoResultsComponent } from './components/no-results/no-results.component
 import { EditableToolbarTitleComponent } from './components/editable-toolbar-title/editable-toolbar-title.component';
 import { PersistentToggleComponent } from './components/persistent-toggle/persistent-toggle.component';
 import {
-  AddSectionDropdownComponent
+  AddSectionDropdownComponent,
 } from './components/hide-section/add-section-dropdown/add-section-dropdown.component';
 import { HideSectionLinkComponent } from './components/hide-section/hide-section-link/hide-section-link.component';
 import { RemoteFieldUpdaterComponent } from './components/remote-field-updater/remote-field-updater.component';
@@ -90,11 +90,11 @@ import { OpProjectIncludeComponent } from './components/project-include/project-
 import { OpProjectIncludeListComponent } from './components/project-include/list/project-include-list.component';
 import { OpLoadingProjectListComponent } from './components/searchable-project-list/loading-project-list.component';
 import {
-  OpNonWorkingDaysListComponent
+  OpNonWorkingDaysListComponent,
 } from './components/op-non-working-days-list/op-non-working-days-list.component';
 import { ViewsResourceService } from 'core-app/core/state/views/views.service';
 import {
-  OpenprojectContentLoaderModule
+  OpenprojectContentLoaderModule,
 } from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { FullCalendarModule } from '@fullcalendar/angular';
diff --git a/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts b/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts
index 161f10b9b0fb..85837d5aa075 100644
--- a/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts
+++ b/frontend/src/app/spot/components/drop-modal/drop-modal-portal.component.ts
@@ -7,7 +7,7 @@ import {
   HostBinding,
   OnInit,
 } from '@angular/core';
-import { SpotDropModalTeleportationService, TeleportInstance, } from './drop-modal-teleportation.service';
+import { SpotDropModalTeleportationService, TeleportInstance } from './drop-modal-teleportation.service';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 
 
diff --git a/frontend/src/app/spot/components/switch/switch.component.ts b/frontend/src/app/spot/components/switch/switch.component.ts
index e3b22e911597..1c7cc5917eec 100644
--- a/frontend/src/app/spot/components/switch/switch.component.ts
+++ b/frontend/src/app/spot/components/switch/switch.component.ts
@@ -16,6 +16,7 @@ import { populateInputsFromDataset } from 'core-app/shared/components/dataset-in
 export type SpotSwitchState = boolean;
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'spot-switch',
   templateUrl: './switch.component.html',
   providers: [{
@@ -83,9 +84,11 @@ export class SpotSwitchComponent implements ControlValueAccessor {
     this.onTouched(value);
   }
 
-  onChange = (_:SpotSwitchState):void => {};
+  onChange = (_:SpotSwitchState):void => {
+  };
 
-  onTouched = (_:SpotSwitchState):void => {};
+  onTouched = (_:SpotSwitchState):void => {
+  };
 
   registerOnChange(fn:(_:SpotSwitchState) => void):void {
     this.onChange = fn;
diff --git a/frontend/src/stimulus/setup.ts b/frontend/src/stimulus/setup.ts
index de46916e8ac0..4844cbd17164 100644
--- a/frontend/src/stimulus/setup.ts
+++ b/frontend/src/stimulus/setup.ts
@@ -6,7 +6,7 @@ import OpDisableWhenCheckedController from './controllers/disable-when-checked.c
 import PrintController from './controllers/print.controller';
 import RefreshOnFormChangesController from './controllers/refresh-on-form-changes.controller';
 import AsyncDialogController from './controllers/async-dialog.controller';
-import TableHighlightingController from "./controllers/table-highlighting.controller";
+import TableHighlightingController from './controllers/table-highlighting.controller';
 
 declare global {
   interface Window {
diff --git a/lib/tabular_form_builder.rb b/lib/tabular_form_builder.rb
index 88576b7869cd..c36ce2517d07 100644
--- a/lib/tabular_form_builder.rb
+++ b/lib/tabular_form_builder.rb
@@ -83,7 +83,7 @@ def label(method, text = nil, options = {}, &)
     super
   end
 
-  def date_picker(field, options = {})
+  def date_picker(field, options = {}) # rubocop:disable Metrics/AbcSize
     options[:class] = Array(options[:class])
     options[:container_class] ||= "-xslim"
     merge_required_attributes(options[:required], options)
diff --git a/modules/reporting/app/helpers/reporting_helper.rb b/modules/reporting/app/helpers/reporting_helper.rb
index f7b4b5aaa7b3..5bbf61d7424b 100644
--- a/modules/reporting/app/helpers/reporting_helper.rb
+++ b/modules/reporting/app/helpers/reporting_helper.rb
@@ -161,13 +161,6 @@ def field_sort_map(key, value)
     end
   end
 
-  def html_safe_gsub(string, *gsub_args, &)
-    html_safe = string.html_safe?
-    string.gsub(*gsub_args, &)
-    # We only mark the string as safe if the previous string was already safe
-    string.html_safe if html_safe # rubocop:disable Rails/OutputSafety
-  end
-
   def show_result(row, unit_id = self.unit_id)
     case unit_id
     when -1 then l_hours(row.units)
diff --git a/modules/reporting/lib/widget/filters/date.rb b/modules/reporting/lib/widget/filters/date.rb
index c4764876c264..300c23d9ad66 100644
--- a/modules/reporting/lib/widget/filters/date.rb
+++ b/modules/reporting/lib/widget/filters/date.rb
@@ -29,7 +29,7 @@
 class Widget::Filters::Date < Widget::Filters::Base
   include AngularHelper
 
-  def render
+  def render # rubocop:disable Metrics/AbcSize
     @calendar_headers_tags_included = true
 
     name = "values[#{filter_class.underscore_name}][]"

From 131ad7e5a2ec2c14a5bfae9c03a105daddda6cac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Thu, 15 Aug 2024 09:57:44 +0200
Subject: [PATCH 10/12] Delay init of flatpickr

---
 .../modal-single-date-picker.component.ts                     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
index b6399487a9a8..4b192c17c9ca 100644
--- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
+++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
@@ -53,6 +53,7 @@ import { debounce } from 'lodash';
 import {
   SpotDropModalTeleportationService,
 } from 'core-app/spot/components/drop-modal/drop-modal-teleportation.service';
+import { delay } from 'rxjs';
 
 @Component({
   selector: 'op-modal-single-date-picker',
@@ -216,6 +217,9 @@ export class OpModalSingleDatePickerComponent implements ControlValueAccessor, O
   private initializeDatepickerAfterOpen():void {
     this.spotDropModalTeleportationService
       .afterRenderOnce$(true)
+      .pipe(
+        delay(100),
+      )
       .subscribe(() => {
         this.initializeDatepicker();
       });

From f8f614b3404294d2d4fbbd6eb4126ab1d0bf817d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Thu, 15 Aug 2024 11:34:23 +0200
Subject: [PATCH 11/12] Fix non working days behavior

---
 .../modal-single-date-picker.component.html   |  2 +-
 .../modal-single-date-picker.component.ts     |  1 +
 .../op-non-working-days-list.component.ts     |  1 +
 .../drop-modal/drop-modal.component.ts        | 11 +++-------
 spec/features/admin/working_days_spec.rb      | 18 +++++++++-------
 .../components/datepicker/datepicker.rb       |  3 +--
 .../components/datepicker/datepicker_modal.rb | 21 +++++++++++++++++++
 7 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 spec/support/components/datepicker/datepicker_modal.rb

diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html
index 5b35f2ec620a..094708369c28 100644
--- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html
+++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.html
@@ -13,7 +13,7 @@
       class="spot-input"
       [attr.data-value]="value"
       [id]="id"
-      [(ngModel)]="value"
+      [ngModel]="value"
       (ngModelChange)="changeValueFromInputDebounced($event)"
       (click)="onInputClick($event)"
       (focus)="opened = true"
diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
index 4b192c17c9ca..7fd79ec67a81 100644
--- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
+++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
@@ -264,6 +264,7 @@ export class OpModalSingleDatePickerComponent implements ControlValueAccessor, O
       },
       this.flatpickrTarget.nativeElement as HTMLElement,
     );
+    this.cdRef.detectChanges();
   }
 
   writeWorkingValue(value:string):void {
diff --git a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts
index 96b85136348a..5b1d525291ae 100644
--- a/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts
+++ b/frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts
@@ -171,6 +171,7 @@ export class OpNonWorkingDaysListComponent implements OnInit, AfterViewInit {
       .forEach((el) => {
         this.nonWorkingDays.push({ ...el });
       });
+    this.cdRef.detectChanges();
   }
 
   ngAfterViewInit():void {
diff --git a/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts b/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts
index ffeb9b9167ba..1f0169a7c68f 100644
--- a/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts
+++ b/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts
@@ -17,14 +17,7 @@ import { findAllFocusableElementsWithin } from 'core-app/shared/helpers/focus-he
 import { SpotDropModalTeleportationService } from './drop-modal-teleportation.service';
 import { filter, take } from 'rxjs/operators';
 import { debounce } from 'lodash';
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  limitShift,
-  Placement,
-  shift,
-} from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, limitShift, Placement, shift } from '@floating-ui/dom';
 
 @Component({
   selector: 'spot-drop-modal',
@@ -180,6 +173,8 @@ export class SpotDropModalComponent implements OnDestroy {
             // Index 1 because the element at index 0 is the trigger button to open the modal
             (findAllFocusableElementsWithin(document.querySelector('.spot-drop-modal-portal')!)[1])?.focus();
           }
+
+          this.cdRef.detectChanges();
         });
       });
   }
diff --git a/spec/features/admin/working_days_spec.rb b/spec/features/admin/working_days_spec.rb
index e16fc6aad8e9..1e9bd9208b38 100644
--- a/spec/features/admin/working_days_spec.rb
+++ b/spec/features/admin/working_days_spec.rb
@@ -42,7 +42,7 @@
   CHART
 
   let(:dialog) { Components::ConfirmationDialog.new }
-  let(:datepicker) { Components::Datepicker.new }
+  let(:datepicker) { Components::DatepickerModal.new }
 
   current_user { admin }
 
@@ -187,7 +187,8 @@ def working_days_setting
     end
 
     it "can add non-working days" do
-      click_on "Non-working day"
+      # Initial loading can sometimes take a while
+      datepicker.open_modal!
 
       # Check if a date is correctly highlighted after selecting it in different time zones
       datepicker.select_day 5
@@ -197,14 +198,15 @@ def working_days_setting
       within_test_selector("op-datepicker-modal") do
         click_on "Cancel"
       end
-      click_on "Non-working day"
+
+      datepicker.open_modal!
 
       within_test_selector("op-datepicker-modal") do
         fill_in "name", with: "My holiday"
       end
 
       date1 = NonWorkingDay.maximum(:date).next_week(:monday).next_occurring(:monday)
-      datepicker.set_date date1
+      datepicker.set_date_input(date1)
 
       within_test_selector("op-datepicker-modal") do
         click_on "Add"
@@ -220,7 +222,7 @@ def working_days_setting
       end
 
       date2 = NonWorkingDay.maximum(:date).next_week(:monday).next_occurring(:tuesday)
-      datepicker.set_date date2
+      datepicker.set_date_input(date2)
 
       within_test_selector("op-datepicker-modal") do
         click_on "Add"
@@ -238,12 +240,12 @@ def working_days_setting
       expect(nwd2.date).to eq date2
 
       # Check if date and name are entered then close the datepicker
-      click_on "Non-working day"
-
+      datepicker.open_modal!
       within_test_selector("op-datepicker-modal") do
         click_on "Add"
       end
-      expect(page).to have_css(".flatpickr-calendar")
+
+      expect(page).to have_css(".flatpickr-calendar", wait: 5)
       datepicker.expect_visible
 
       within_test_selector("op-datepicker-modal") do
diff --git a/spec/support/components/datepicker/datepicker.rb b/spec/support/components/datepicker/datepicker.rb
index eae203cef6b5..96de5d5d1a95 100644
--- a/spec/support/components/datepicker/datepicker.rb
+++ b/spec/support/components/datepicker/datepicker.rb
@@ -121,8 +121,7 @@ def expect_month(month)
       expect(field.value.to_i).to eq(month - 1)
     end
 
-    ##
-    # Expect the selected day
+    # Expect the selected day in the input
     def expect_day(value)
       expect(flatpickr_container).to have_css(".flatpickr-day.selected", text: value)
     end
diff --git a/spec/support/components/datepicker/datepicker_modal.rb b/spec/support/components/datepicker/datepicker_modal.rb
new file mode 100644
index 000000000000..a0edafdbf167
--- /dev/null
+++ b/spec/support/components/datepicker/datepicker_modal.rb
@@ -0,0 +1,21 @@
+module Components
+  class DatepickerModal < Datepicker
+    def open_modal!
+      retry_block do
+        click_on "Non-working day", wait: 10
+        unless page.has_css?(".flatpickr-calendar")
+          click_on "Cancel"
+          raise "Flatpickr should render a calendar"
+        end
+      end
+    end
+
+    def set_date_input(date)
+      retry_block do
+        set_date(date)
+        input = find_field("date")
+        raise "Expected date to equal #{date}, but got #{input.value}" unless input.value == date.iso8601
+      end
+    end
+  end
+end

From 47da171ac11a0debafd7c8c121631f20b730b384 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Fri, 16 Aug 2024 08:57:58 +0200
Subject: [PATCH 12/12] Provide option to hide highlight on col

---
 .../projects/table_component.html.erb         |  2 +-
 app/components/table_component.html.erb       |  2 +-
 app/views/attribute_help_texts/_tab.html.erb  |  2 +-
 .../custom_fields/_custom_options.html.erb    |  2 +-
 app/views/custom_fields/_tab.html.erb         |  2 +-
 app/views/forums/index.html.erb               |  2 +-
 app/views/groups/_memberships.html.erb        |  2 +-
 app/views/groups/_users_table.html.erb        |  2 +-
 app/views/groups/index.html.erb               |  2 +-
 app/views/principals/_global_roles.html.erb   |  2 +-
 .../settings/categories/show.html.erb         |  2 +-
 app/views/repositories/_dir_list.html.erb     |  2 +-
 app/views/repositories/_revisions.html.erb    |  4 ++--
 app/views/roles/index.html.erb                |  2 +-
 app/views/types/index.html.erb                |  4 ++--
 app/views/wiki/history.html.erb               |  6 +++---
 app/views/workflows/show.html.erb             |  4 ++--
 .../wp-table/wp-table.component.html          |  7 ++++---
 .../modal-single-date-picker.component.ts     |  3 +--
 .../list/time-entries-list.component.html     |  2 +-
 .../table-highlighting.controller.ts          | 11 ++++++++---
 .../subform/_material_budget_subform.html.erb |  2 +-
 .../costs/app/views/cost_types/_list.html.erb |  2 +-
 .../views/cost_types/_list_deleted.html.erb   |  2 +-
 .../costs/app/views/cost_types/edit.html.erb  |  2 +-
 .../app/views/hourly_rates/edit.html.erb      |  2 +-
 spec/features/admin/working_days_spec.rb      |  1 -
 .../components/datepicker/datepicker_modal.rb | 19 +++++++++++++++++++
 28 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/app/components/projects/table_component.html.erb b/app/components/projects/table_component.html.erb
index 6a1acbe642ab..a697d0ca23ab 100644
--- a/app/components/projects/table_component.html.erb
+++ b/app/components/projects/table_component.html.erb
@@ -34,7 +34,7 @@ See COPYRIGHT and LICENSE files for more details.
         <table class="generic-table" data-controller="table-highlighting" <%= table_id ? "id=\"#{table_id}\"".html_safe : '' %>>
           <colgroup>
             <% columns.each do |column| %>
-              <col>
+              <%= tag :col, data: { highlight: column.attribute != :hierarchy } %>
             <% end %>
             <col>
           </colgroup>
diff --git a/app/components/table_component.html.erb b/app/components/table_component.html.erb
index da9808b991d3..9449d5dc4894 100644
--- a/app/components/table_component.html.erb
+++ b/app/components/table_component.html.erb
@@ -34,7 +34,7 @@ See COPYRIGHT and LICENSE files for more details.
         <% headers.each do |_name, _options| %>
           <col>
         <% end %>
-        <col>
+        <col data-highlight="false">
       </colgroup>
       <thead>
         <tr>
diff --git a/app/views/attribute_help_texts/_tab.html.erb b/app/views/attribute_help_texts/_tab.html.erb
index 12f569dd415c..8b59eed73835 100644
--- a/app/views/attribute_help_texts/_tab.html.erb
+++ b/app/views/attribute_help_texts/_tab.html.erb
@@ -7,7 +7,7 @@
           <col>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
         <tr>
diff --git a/app/views/custom_fields/_custom_options.html.erb b/app/views/custom_fields/_custom_options.html.erb
index a70d9f0942d8..f20f6934f719 100644
--- a/app/views/custom_fields/_custom_options.html.erb
+++ b/app/views/custom_fields/_custom_options.html.erb
@@ -37,7 +37,7 @@ See COPYRIGHT and LICENSE files for more details.
         <col>
         <col>
         <col>
-        <col>
+        <col data-highlight="false">
       </colgroup>
       <thead>
       <tr>
diff --git a/app/views/custom_fields/_tab.html.erb b/app/views/custom_fields/_tab.html.erb
index 4dea4e198b71..5616d5199745 100644
--- a/app/views/custom_fields/_tab.html.erb
+++ b/app/views/custom_fields/_tab.html.erb
@@ -49,7 +49,7 @@ See COPYRIGHT and LICENSE files for more details.
           <% end %>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/app/views/forums/index.html.erb b/app/views/forums/index.html.erb
index aa1a2dde488c..73a2c166a9a7 100644
--- a/app/views/forums/index.html.erb
+++ b/app/views/forums/index.html.erb
@@ -54,7 +54,7 @@ See COPYRIGHT and LICENSE files for more details.
           <col>
           <% if User.current.allowed_in_project?(:manage_forums, @project) %>
             <col>
-            <col>
+            <col data-highlight="false">
           <% end %>
         </colgroup>
         <thead>
diff --git a/app/views/groups/_memberships.html.erb b/app/views/groups/_memberships.html.erb
index 8064048d3a4a..a7d554fff612 100644
--- a/app/views/groups/_memberships.html.erb
+++ b/app/views/groups/_memberships.html.erb
@@ -39,7 +39,7 @@ See COPYRIGHT and LICENSE files for more details.
             <colgroup>
               <col>
               <col>
-              <col>
+              <col data-highlight="false">
             </colgroup>
             <thead>
               <tr>
diff --git a/app/views/groups/_users_table.html.erb b/app/views/groups/_users_table.html.erb
index 1b9f1e9a4bd7..3cf29cddc2c2 100644
--- a/app/views/groups/_users_table.html.erb
+++ b/app/views/groups/_users_table.html.erb
@@ -29,8 +29,8 @@ See COPYRIGHT and LICENSE files for more details.
 
 <table class="generic-table users">
   <colgroup>
-    <col colightCol>
     <col>
+    <col data-highlight="false">
   </colgroup>
   <thead>
   <tr>
diff --git a/app/views/groups/index.html.erb b/app/views/groups/index.html.erb
index 00bb41da9c72..2634231994fc 100644
--- a/app/views/groups/index.html.erb
+++ b/app/views/groups/index.html.erb
@@ -58,7 +58,7 @@ See COPYRIGHT and LICENSE files for more details.
         <colgroup>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/app/views/principals/_global_roles.html.erb b/app/views/principals/_global_roles.html.erb
index 2959891a1190..cfed1b097d01 100644
--- a/app/views/principals/_global_roles.html.erb
+++ b/app/views/principals/_global_roles.html.erb
@@ -42,7 +42,7 @@ See COPYRIGHT and LICENSE files for more details.
         <table class="generic-table principal_roles" id="table_principal_roles" data-controller="table-highlighting">
           <colgroup>
             <col>
-            <col>
+            <col data-highlight="false">
           </colgroup>
           <thead>
             <tr>
diff --git a/app/views/projects/settings/categories/show.html.erb b/app/views/projects/settings/categories/show.html.erb
index 9edd0865de8b..8b8a000aaba6 100644
--- a/app/views/projects/settings/categories/show.html.erb
+++ b/app/views/projects/settings/categories/show.html.erb
@@ -48,7 +48,7 @@ See COPYRIGHT and LICENSE files for more details.
         <colgroup>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/app/views/repositories/_dir_list.html.erb b/app/views/repositories/_dir_list.html.erb
index 41e8a8990fd3..89cd99600bd8 100644
--- a/app/views/repositories/_dir_list.html.erb
+++ b/app/views/repositories/_dir_list.html.erb
@@ -31,7 +31,7 @@ See COPYRIGHT and LICENSE files for more details.
     <table class="generic-table" data-controller="table-highlighting" data-repository-navigation-target="repoBrowser">
       <colgroup>
         <col>
-        <col>
+        <col data-highlight="false">
         <col>
         <col>
         <col>
diff --git a/app/views/repositories/_revisions.html.erb b/app/views/repositories/_revisions.html.erb
index ce14ce62e69d..ed2ec6c08886 100644
--- a/app/views/repositories/_revisions.html.erb
+++ b/app/views/repositories/_revisions.html.erb
@@ -33,8 +33,8 @@ See COPYRIGHT and LICENSE files for more details.
       <table class="generic-table changesets">
         <colgroup>
           <col>
-          <col>
-          <col>
+          <col data-highlight="false">
+          <col data-highlight="false">
           <col>
           <col>
           <col>
diff --git a/app/views/roles/index.html.erb b/app/views/roles/index.html.erb
index 9462e7a24354..2348b1f8ce5f 100644
--- a/app/views/roles/index.html.erb
+++ b/app/views/roles/index.html.erb
@@ -58,7 +58,7 @@ See COPYRIGHT and LICENSE files for more details.
         <col>
         <col>
         <col>
-        <col>
+        <col data-highlight="false">
       </colgroup>
       <thead>
         <tr>
diff --git a/app/views/types/index.html.erb b/app/views/types/index.html.erb
index 4b037c989988..7794772696fe 100644
--- a/app/views/types/index.html.erb
+++ b/app/views/types/index.html.erb
@@ -57,13 +57,13 @@ See COPYRIGHT and LICENSE files for more details.
       <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
           <col>
+          <col data-highlight="false">
           <col>
           <col>
           <col>
           <col>
           <col>
-          <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/app/views/wiki/history.html.erb b/app/views/wiki/history.html.erb
index 0034b8120c75..41994db6b0c7 100644
--- a/app/views/wiki/history.html.erb
+++ b/app/views/wiki/history.html.erb
@@ -38,12 +38,12 @@ See COPYRIGHT and LICENSE files for more details.
       <table class="generic-table wiki-page-versions">
         <colgroup>
           <col>
+          <col data-highlight="false">
+          <col data-highlight="false">
           <col>
           <col>
           <col>
-          <col>
-          <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <caption class="hidden-for-sighted">
           <span>
diff --git a/app/views/workflows/show.html.erb b/app/views/workflows/show.html.erb
index e46e59a272b3..132c765088fb 100644
--- a/app/views/workflows/show.html.erb
+++ b/app/views/workflows/show.html.erb
@@ -36,13 +36,13 @@ See COPYRIGHT and LICENSE files for more details.
       <div class="generic-table--results-container">
         <table class="generic-table" data-controller="table-highlighting">
           <colgroup>
+            <col data-highlight="false">
             <col>
             <col>
             <col>
             <col>
             <col>
-            <col>
-            <col>
+            <col data-highlight="false">
           </colgroup>
           <thead>
             <tr>
diff --git a/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html b/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html
index 9c75b9720555..93a506c9b6bd 100644
--- a/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html
+++ b/frontend/src/app/features/work-packages/components/wp-table/wp-table.component.html
@@ -2,15 +2,16 @@
   <div class="work-packages-tabletimeline--table-side work-package-table--container __hidden_overflow_container">
     <table
       class="keyboard-accessible-list generic-table work-package-table"
+      data-controller="table-highlighting"
       [class.op-table-baseline]="baselineEnabled"
     >
       <colgroup>
-        <col *ngIf="configuration.dragAndDropEnabled">
-        <col *ngIf="baselineEnabled">
+        <col data-highlight="false" *ngIf="configuration.dragAndDropEnabled">
+        <col data-highlight="false" *ngIf="baselineEnabled">
         <!-- Generate col elements dynamically(!) for each requested column plus one for the action menu's column. -->
         <col *ngFor="let column of [].constructor(columns.length)">
         <col *ngIf="configuration.columnMenuEnabled">
-        <col *ngIf="!configuration.columnMenuEnabled">
+        <col data-highlight="false" *ngIf="!configuration.columnMenuEnabled">
       </colgroup>
       <caption class="hidden-for-sighted">
         <span>{{text.tableSummary}}</span>
diff --git a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
index 7fd79ec67a81..06a412e4b573 100644
--- a/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
+++ b/frontend/src/app/shared/components/datepicker/modal-single-date-picker/modal-single-date-picker.component.ts
@@ -28,7 +28,6 @@
 
 import {
   AfterContentInit,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -55,11 +54,11 @@ import {
 } from 'core-app/spot/components/drop-modal/drop-modal-teleportation.service';
 import { delay } from 'rxjs';
 
+// eslint-disable-next-line change-detection-strategy/on-push
 @Component({
   selector: 'op-modal-single-date-picker',
   templateUrl: './modal-single-date-picker.component.html',
   styleUrls: ['../styles/datepicker.modal.sass', './modal-single-date-picker.component.sass'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   providers: [
     {
diff --git a/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html b/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html
index cf5b7f6f8d95..e4c53d0f0560 100644
--- a/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html
+++ b/frontend/src/app/shared/components/grids/widgets/time-entries/list/time-entries-list.component.html
@@ -24,7 +24,7 @@
         <col>
         <col>
         <col>
-        <col>
+        <col data-highlight="false">
       </colgroup>
       <thead class="-sticky">
         <tr>
diff --git a/frontend/src/stimulus/controllers/table-highlighting.controller.ts b/frontend/src/stimulus/controllers/table-highlighting.controller.ts
index 365dd3cbd407..4702a8aa0caf 100644
--- a/frontend/src/stimulus/controllers/table-highlighting.controller.ts
+++ b/frontend/src/stimulus/controllers/table-highlighting.controller.ts
@@ -70,11 +70,16 @@ export default class TableHighlightingController extends ApplicationController {
     const th = target.closest('th') as HTMLElement;
     const index = this.parentIndex(th);
 
-    if (index !== null) {
-      return this.colgroup.children.item(index) as HTMLElement|null;
+    if (index === null) {
+      return null;
     }
+    const col = this.colgroup.children.item(index) as HTMLElement|null;
 
-    return null;
+    if (!col || col.dataset.highlight === 'false') {
+      return null;
+    }
+
+    return col;
   }
 
   private parentIndex(element:HTMLElement):number|null {
diff --git a/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb b/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb
index d486662fcb06..5ddca76cbceb 100644
--- a/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb
+++ b/modules/budgets/app/views/budgets/subform/_material_budget_subform.html.erb
@@ -47,7 +47,7 @@ See COPYRIGHT and LICENSE files for more details.
               <% if User.current.allowed_in_project?(:view_cost_rates, @project)%>
                 <col>
               <%end%>
-              <col>
+              <col data-highlight="false">
             </colgroup>
           <thead>
             <tr>
diff --git a/modules/costs/app/views/cost_types/_list.html.erb b/modules/costs/app/views/cost_types/_list.html.erb
index 3daee22e2635..0e721aa73901 100644
--- a/modules/costs/app/views/cost_types/_list.html.erb
+++ b/modules/costs/app/views/cost_types/_list.html.erb
@@ -42,7 +42,7 @@ See COPYRIGHT and LICENSE files for more details.
           <col>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/modules/costs/app/views/cost_types/_list_deleted.html.erb b/modules/costs/app/views/cost_types/_list_deleted.html.erb
index a619cd78251d..7b618f936772 100644
--- a/modules/costs/app/views/cost_types/_list_deleted.html.erb
+++ b/modules/costs/app/views/cost_types/_list_deleted.html.erb
@@ -41,7 +41,7 @@ See COPYRIGHT and LICENSE files for more details.
           <col>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/modules/costs/app/views/cost_types/edit.html.erb b/modules/costs/app/views/cost_types/edit.html.erb
index 51831734e163..c3e740488028 100644
--- a/modules/costs/app/views/cost_types/edit.html.erb
+++ b/modules/costs/app/views/cost_types/edit.html.erb
@@ -70,7 +70,7 @@ See COPYRIGHT and LICENSE files for more details.
         <colgroup>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/modules/costs/app/views/hourly_rates/edit.html.erb b/modules/costs/app/views/hourly_rates/edit.html.erb
index 9ebeb2d903f7..fc67aa38ef3b 100644
--- a/modules/costs/app/views/hourly_rates/edit.html.erb
+++ b/modules/costs/app/views/hourly_rates/edit.html.erb
@@ -50,7 +50,7 @@ See COPYRIGHT and LICENSE files for more details.
         <colgroup>
           <col>
           <col>
-          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>
diff --git a/spec/features/admin/working_days_spec.rb b/spec/features/admin/working_days_spec.rb
index 1e9bd9208b38..2ea8a1af623c 100644
--- a/spec/features/admin/working_days_spec.rb
+++ b/spec/features/admin/working_days_spec.rb
@@ -192,7 +192,6 @@ def working_days_setting
 
       # Check if a date is correctly highlighted after selecting it in different time zones
       datepicker.select_day 5
-      datepicker.expect_day "5"
 
       # It can cancel and reopen
       within_test_selector("op-datepicker-modal") do
diff --git a/spec/support/components/datepicker/datepicker_modal.rb b/spec/support/components/datepicker/datepicker_modal.rb
index a0edafdbf167..002f86a14bb9 100644
--- a/spec/support/components/datepicker/datepicker_modal.rb
+++ b/spec/support/components/datepicker/datepicker_modal.rb
@@ -17,5 +17,24 @@ def set_date_input(date)
         raise "Expected date to equal #{date}, but got #{input.value}" unless input.value == date.iso8601
       end
     end
+
+    ##
+    # Select day from datepicker
+    def select_day(value)
+      unless (1..31).cover?(value.to_i)
+        raise ArgumentError, "Invalid value #{value} for day, expected 1-31"
+      end
+
+      expect(flatpickr_container).to have_text(value)
+
+      retry_block do
+        flatpickr_container
+          .first(".flatpickr-days .flatpickr-day:not(.nextMonthDay):not(.prevMonthDay)",
+                 text: value)
+          .click
+
+        raise "Expected #{value} to be selected" unless flatpickr_container.has_css?(".flatpickr-day.selected", text: value)
+      end
+    end
   end
 end