Make the datepicker to receive changes from the trigger input element

Otherwise, the open event happens during positioning of the drop modal, which results

in invalid widths calculated for flatpickr

.gitignore

@@ -136,3 +136,7 @@ structure.sql
 # lefthook.yml user override
 lefthook-local.yml
 frontend/package-lock.json
+
+# Testing and nextcloud infrastructure
+acme.json
+.env.test

app/helpers/application_helper.rb

@@ -385,7 +385,7 @@ module ApplicationHelper
   end
 
   def calendar_for(*_args)
-    ActiveSupport::Deprecation.warn "calendar_for has been removed. Please add the class '-augmented-datepicker' instead.", caller
+    ActiveSupport::Deprecation.warn "calendar_for has been removed. Please use the op-single-date-picker angular component instead", caller
   end
 
   def locale_first_day_of_week

app/helpers/custom_fields_helper.rb

@@ -78,8 +78,13 @@ module CustomFieldsHelper
 
     tag = case field_format.try(:edit_as)
           when 'date'
-            styled_text_field_tag(field_name, custom_value.value, id: field_id, class: '-augmented-datepicker', size: 10,
-                                                                  container_class: '-slim', required: custom_field.is_required)
+            angular_component_tag 'op-single-date-picker',
+                                  inputs: {
+                                    required: custom_field.is_required,
+                                    value: custom_value.value,
+                                    id: field_id,
+                                    name: field_name
+                                  }
           when 'text'
             styled_text_area_tag(field_name, custom_value.value, id: field_id, rows: 3, container_class: '-middle',
                                                                  required: custom_field.is_required)
@@ -150,7 +155,11 @@ module CustomFieldsHelper
     field_format = OpenProject::CustomFieldFormat.find_by_name(custom_field.field_format)
     case field_format.try(:edit_as)
     when 'date'
-      styled_text_field_tag(field_name, '', id: field_id, size: 10, class: '-augmented-datepicker')
+      angular_component_tag 'op-single-date-picker',
+                            inputs: {
+                              id: field_id,
+                              name: field_name,
+                            }
     when 'text'
       styled_text_area_tag(field_name, '', id: field_id, rows: 3, with_text_formatting: true)
     when 'bool'

app/views/announcements/edit.html.erb

@@ -16,7 +16,7 @@
                     with_text_formatting: true %>
   </div>
   <div class="form--field">
-    <%= f.text_field :show_until, label: t('announcements.show_until'), container_class: '-xslim', class: '-augmented-datepicker' %>
+    <%= f.date_picker :show_until, label: t('announcements.show_until') %>
   </div>
   <div class="form--field">
     <%= f.check_box :active, label: t(:label_active) %>

app/views/layouts/base.html.erb

@@ -60,6 +60,7 @@ See COPYRIGHT and LICENSE files for more details.
 </noscript>
 <op-toasts-container></op-toasts-container>
 <op-modal-overlay></op-modal-overlay>
+<spot-drop-modal-portal></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) %>

app/views/projects/filters/date/_between_dates.html.erb

@@ -1,6 +1,18 @@
 <div class="between-dates">
   <span><%= t(:label_date_from) %>:</span>
-  <%= text_field_tag :from_value, from_value, id: "between-dates-from-value-#{filter.name}", class: 'advanced-filters--text-field -augmented-datepicker -slim', size: '10' %>
+  <%= angular_component_tag 'op-single-date-picker',
+                            inputs: {
+                              value: from_value,
+                              id: "between-dates-from-value-#{filter.name}",
+                              name: "from_value"
+                            }
+  %>
   <span><%= t(:label_date_to) %>:</span>
-  <%= text_field_tag :to_value, to_value, id: "between-dates-to-value-#{filter.name}", class: 'advanced-filters--text-field -augmented-datepicker -slim', size: '10' %>
+  <%= angular_component_tag 'op-single-date-picker',
+                            inputs: {
+                              value: to_value,
+                              id: "between-dates-to-value-#{filter.name}",
+                              name: "to_value"
+                            }
+  %>
 </div>

app/views/projects/filters/date/_on_date.html.erb

@@ -1,7 +1,11 @@
 <div class="on-date">
-  <div class="form--field-container">
-    <div class="form--text-field-container -slim">
-      <%= text_field_tag :value, value, id: "on-date-value-#{filter.name}", class: 'advanced-filters--text-field -slim -augmented-datepicker', size: '10' %>
-    </div>
+  <div class="form--field-container -visible-overflow">
+    <%= angular_component_tag 'op-single-date-picker',
+                              inputs: {
+                                value: value,
+                                id: "on-date-value-#{filter.name}",
+                                name: "value"
+                              }
+    %>
   </div>
 </div>

app/views/versions/_form.html.erb

@@ -58,11 +58,23 @@ See COPYRIGHT and LICENSE files for more details.
 </div>
 
 <div class="form--field">
-  <%= f.text_field :start_date, container_class: '-xslim', class: '-augmented-datepicker' %>
+  <label
+    class="form--label"
+    for="version_start_date"
+  ><%= t(:start_date) %></label>
+  <div class="form--field-container -visible-overflow">
+    <%= f.date_picker :start_date %>
+  </div>
 </div>
 
 <div class="form--field">
-  <%= f.text_field :effective_date, container_class: '-xslim', class: '-augmented-datepicker' %>
+  <label
+    class="form--label"
+    for="version_effective_date"
+  ><%= t(:effective_date) %></label>
+  <div class="form--field-container -visible-overflow">
+    <%= f.date_picker :effective_date %>
+  </div>
 </div>
 
 <div class="form--field">

app/views/work_packages/bulk/edit.html.erb

@@ -48,7 +48,7 @@ See COPYRIGHT and LICENSE files for more details.
   <section class="form--section">
     <fieldset class="form--fieldset">
       <legend class="form--fieldset-legend"><%= t(:label_change_properties) %></legend>
-      <div class="grid-block">
+      <div class="grid-block grid-block_visible-overflow">
         <div class="grid-content medium-6">
           <div class="form--field">
             <%= styled_label_tag :work_package_type_id, WorkPackage.human_attribute_name(:type) %>
@@ -150,14 +150,24 @@ See COPYRIGHT and LICENSE files for more details.
           <% end %>
           <div class="form--field">
             <%= styled_label_tag :work_package_start_date, WorkPackage.human_attribute_name(:start_date) %>
-            <div class="form--field-container">
-              <%= styled_text_field_tag 'work_package[start_date]', '', size: 10, class: '-augmented-datepicker' %>
+            <div class="form--field-container -visible-overflow">
+              <%= angular_component_tag 'op-single-date-picker',
+                                        inputs: {
+                                          id: "work_package_start_date",
+                                          name: "work_package[start_date]"
+                                        }
+              %>
             </div>
           </div>
           <div class="form--field">
             <%= styled_label_tag :work_package_due_date, WorkPackage.human_attribute_name(:due_date) %>
-            <div class="form--field-container">
-              <%= styled_text_field_tag 'work_package[due_date]', '', size: 10, class: '-augmented-datepicker' %>
+            <div class="form--field-container -visible-overflow">
+              <%= angular_component_tag 'op-single-date-picker',
+                                        inputs: {
+                                          id: "work_package_due_date",
+                                          name: "work_package[due_date]"
+                                        }
+              %>
             </div>
           </div>
           <% if WorkPackage.use_field_for_done_ratio? %>

app/views/work_packages/moves/new.html.erb

@@ -53,7 +53,7 @@ See COPYRIGHT and LICENSE files for more details.
     <section class="form--section">
       <fieldset class="form--fieldset">
         <legend class="form--fieldset-legend"><%= t(:label_change_properties) %></legend>
-        <div class="grid-block">
+        <div class="grid-block grid-block_visible-overflow">
           <div class="grid-content medium-6">
               <div class="form--field">
                 <label class="form--label" for="new_project_id"><%= WorkPackage.human_attribute_name(:project) %>:</label>
@@ -133,14 +133,24 @@ See COPYRIGHT and LICENSE files for more details.
           <div class="grid-content medium-6">
             <div class="form--field">
               <label class="form--label" for='start_date'><%= WorkPackage.human_attribute_name(:start_date) %></label>
-              <div class="form--field-container">
-                <%= styled_text_field_tag 'start_date', '', size: 10, class: '-augmented-datepicker' %>
+              <div class="form--field-container -visible-overflow">
+                <%= angular_component_tag 'op-single-date-picker',
+                                          inputs: {
+                                            id: "start_date",
+                                            name: "start_date"
+                                          }
+                %>
               </div>
             </div>
             <div class="form--field">
               <label class="form--label" for='due_date'><%= WorkPackage.human_attribute_name(:due_date) %></label>
-              <div class="form--field-container">
-                <%= styled_text_field_tag 'due_date', '', size: 10, class: '-augmented-datepicker' %>
+              <div class="form--field-container -visible-overflow">
+                <%= angular_component_tag 'op-single-date-picker',
+                                          inputs: {
+                                            id: "due_date",
+                                            name: "due_date"
+                                          }
+                %>
               </div>
             </div>
             <% if @target_type %>

config/locales/js-en.yml

@@ -442,7 +442,6 @@ en:
     label_no_data: "No data to display"
     label_no_due_date: "no finish date"
     label_no_start_date: "no start date"
-    label_no_date: "no date"
     label_no_value: "No value"
     label_none: "none"
     label_not_contains: "doesn't contain"

frontend/src/app/app.module.ts

@@ -40,7 +40,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { OpContextMenuTrigger } from 'core-app/shared/components/op-context-menu/handlers/op-context-menu-trigger.directive';
 import { States } from 'core-app/core/states/states.service';
 import { OpenprojectFieldsModule } from 'core-app/shared/components/fields/openproject-fields.module';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+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';
@@ -121,7 +121,7 @@ export function initializeServices(injector:Injector) {
     A11yModule,
 
     // Commons
-    OPSharedModule,
+    OpSharedModule,
     // Design System
     OpSpotModule,
     // State module

frontend/src/app/core/apiv3/openproject-api-v3.module.ts

@@ -26,13 +26,13 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { NgModule } from '@angular/core';
 import { OpenprojectHalModule } from 'core-app/features/hal/openproject-hal.module';
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectHalModule,
   ],
 })

frontend/src/app/core/global_search/openproject-global-search.module.ts

@@ -35,11 +35,11 @@ import { GlobalSearchTitleComponent } from 'core-app/core/global_search/title/gl
 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';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectWorkPackagesModule,
     OpenprojectAutocompleterModule,
   ],

frontend/src/app/core/setup/global-dynamic-components.const.ts

@@ -203,7 +203,15 @@ import {
   CalendarSidemenuComponent,
   opCalendarSidemenuSelector,
 } from 'core-app/features/calendar/sidemenu/calendar-sidemenu.component';
-import { OpModalOverlayComponent, opModalOverlaySelector } from 'core-app/shared/components/modal/modal-overlay.component';
+import {
+  OpModalOverlayComponent,
+  opModalOverlaySelector,
+} from 'core-app/shared/components/modal/modal-overlay.component';
+import {
+  OpSingleDatePickerComponent,
+  opSingleDatePickerSelector,
+} from 'core-app/shared/components/datepicker/single-date-picker/single-date-picker.component';
+import { SpotDropModalPortalComponent, spotDropModalPortalComponentSelector } from 'core-app/spot/components/drop-modal/drop-modal-portal.component';
 
 export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: appBaseSelector, cls: ApplicationBaseComponent },
@@ -245,7 +253,6 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: enterpriseActiveSavedTrialSelector, cls: EEActiveSavedTrialComponent },
   { selector: headerProjectSelectSelector, cls: OpHeaderProjectSelectComponent },
   { selector: projectsAutocompleterSelector, cls: ProjectAutocompleterComponent },
-  { selector: remoteFieldUpdaterSelector, cls: RemoteFieldUpdaterComponent },
   { selector: wpOverviewGraphSelector, cls: WorkPackageOverviewGraphComponent },
   { selector: opViewSelectSelector, cls: ViewSelectComponent },
   { selector: opTeamPlannerSidemenuSelector, cls: TeamPlannerSidemenuComponent },
@@ -261,4 +268,9 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: opInAppNotificationBellSelector, cls: InAppNotificationBellComponent },
   { selector: ianMenuSelector, cls: IanMenuComponent },
   { selector: opModalOverlaySelector, cls: OpModalOverlayComponent },
+  // It is important to initialize the remoteFieldUpdaterSelector after the opSingleDatePickerSelector,
+  // because we need to access the input field of the opSingleDatePickerSelector inside the remoteFieldUpdaterSelector
+  { selector: opSingleDatePickerSelector, cls: OpSingleDatePickerComponent, embeddable: true },
+  { selector: remoteFieldUpdaterSelector, cls: RemoteFieldUpdaterComponent },
+  { selector: spotDropModalPortalComponentSelector, cls: SpotDropModalPortalComponent },
 ];

frontend/src/app/core/setup/globals/global-listeners.ts

@@ -37,7 +37,6 @@ import { dangerZoneValidation } from 'core-app/core/setup/globals/global-listene
 import { setupServerResponse } from 'core-app/core/setup/globals/global-listeners/setup-server-response';
 import { listenToSettingChanges } from 'core-app/core/setup/globals/global-listeners/settings';
 import { detectOnboardingTour } from 'core-app/core/setup/globals/onboarding/onboarding_tour_trigger';
-import { augmentedDatePicker } from './global-listeners/augmented-date-picker';
 import { performAnchorHijacking } from './global-listeners/link-hijacking';
 
 /**
@@ -48,9 +47,6 @@ export function initializeGlobalListeners():void {
     .on('click', (evt:any) => {
       const target = jQuery(evt.target) as JQuery;
 
-      // Create datepickers dynamically for Rails-based views
-      augmentedDatePicker(evt, target);
-
       // Prevent angular handling clicks on href="#..." links from other libraries
       // (especially jquery-ui and its datepicker) from routing to <base url>/#
       performAnchorHijacking(evt, target);

frontend/src/app/core/setup/globals/global-listeners/augmented-date-picker.ts

@@ -1,31 +0,0 @@
-import { DatePicker } from 'core-app/shared/components/op-date-picker/datepicker';
-
-/**
- * Our application is still a hybrid one, meaning most routes are still
- * handled by Rails. As such, we disable the default link-hijacking that
- * Angular's HTML5-mode with <base href="/"> results in
- * @param evt
- * @param target
- */
-export function augmentedDatePicker(evt:JQuery.TriggeredEvent, target:JQuery) {
-  if (target.hasClass('-augmented-datepicker')) {
-    target
-      .attr('autocomplete', 'off'); // Disable autocomplete for those fields
-
-    window.OpenProject.getPluginContext()
-      .then((context) => {
-        const datePicker = new DatePicker(
-          context.injector,
-          '.-augmented-datepicker',
-          target.val() as string,
-          {
-            weekNumbers: true,
-            allowInput: true,
-          },
-          target[0],
-        );
-        datePicker.show();
-      })
-      .catch(() => {});
-  }
-}

frontend/src/app/features/admin/openproject-admin.module.ts

@@ -27,7 +27,7 @@
 //++
 
 import { NgModule } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { DragulaModule } from 'ng2-dragula';
 import { TypeFormAttributeGroupComponent } from 'core-app/features/admin/types/attribute-group.component';
 import { TypeFormConfigurationComponent } from 'core-app/features/admin/types/type-form-configuration.component';
@@ -38,7 +38,7 @@ import { EditableQueryPropsComponent } from 'core-app/features/admin/editable-qu
 @NgModule({
   imports: [
     DragulaModule.forRoot(),
-    OPSharedModule,
+    OpSharedModule,
   ],
   providers: [
   ],

frontend/src/app/features/backlogs/backlogs-page/styles/master_backlog.sass

@@ -283,6 +283,11 @@
       .velocity, .add_new_story
         display: none
   .backlog .sprint.editing
+    .editors
+      display: flex
+      align-items: center
+      flex-direction: row-reverse
+
     .editor
       font-size: 0.9rem
       line-height: 1.5rem
@@ -291,10 +296,11 @@
       padding: 0
 
       &.name
-        min-width: 15em
-        width: calc(100% - 2 * 85px - 10px)
-      &.start_date, &.effective_date
-        width: 85px
+        flex-basis: 15em
+      &.start_date,
+      &.effective_date
+        margin-left: 0.5em
+        flex-basis: 12.5em
 
   .stories .story.editing
     >

frontend/src/app/features/bim/bcf/openproject-bcf.module.ts

@@ -30,7 +30,7 @@ import {
   Injector,
   NgModule,
 } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { NgxGalleryModule } from '@kolkov/ngx-gallery';
 import { DisplayFieldService } from 'core-app/shared/components/fields/display/display-field.service';
 import { BcfThumbnailDisplayField } from 'core-app/features/bim/bcf/fields/display/bcf-thumbnail-field.module';
@@ -64,7 +64,7 @@ export const viewerBridgeServiceFactory = (injector:Injector) => {
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     NgxGalleryModule,
   ],
   providers: [

frontend/src/app/features/bim/ifc_models/openproject-ifc-models.module.ts

@@ -28,7 +28,7 @@
 import { NgModule } from '@angular/core';
 import { OpenprojectWorkPackagesModule } from 'core-app/features/work-packages/openproject-work-packages.module';
 import { UIRouterModule } from '@uirouter/angular';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { IFC_ROUTES } from 'core-app/features/bim/ifc_models/openproject-ifc-models.routes';
 import { IFCViewerPageComponent } from 'core-app/features/bim/ifc_models/pages/viewer/ifc-viewer-page.component';
 import { BcfViewToggleButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/view-toggle/bcf-view-toggle-button.component';
@@ -46,7 +46,7 @@ import { BcfSplitRightComponent } from 'core-app/features/bim/ifc_models/bcf/spl
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectFieldsModule,
     OpenprojectHalModule,
     OpenprojectBcfModule,

frontend/src/app/features/boards/openproject-boards.module.ts

@@ -27,7 +27,7 @@
 //++
 
 import { NgModule } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectWorkPackagesModule } from 'core-app/features/work-packages/openproject-work-packages.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { UIRouterModule } from '@uirouter/angular';
@@ -60,7 +60,7 @@ import { TileViewComponent } from './tile-view/tile-view.component';
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectWorkPackagesModule,
     OpenprojectModalModule,
     DragScrollModule,

frontend/src/app/features/calendar/openproject-calendar.module.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { NgModule } from '@angular/core';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import { WorkPackagesCalendarComponent } from 'core-app/features/calendar/wp-calendar/wp-calendar.component';
@@ -42,7 +42,7 @@ import { CalendarSidemenuComponent } from './sidemenu/calendar-sidemenu.componen
 @NgModule({
   imports: [
     // Commons
-    OPSharedModule,
+    OpSharedModule,
 
     // Routes for /calendar
     UIRouterModule.forChild({ states: CALENDAR_ROUTES }),

frontend/src/app/features/dashboards/openproject-dashboards.module.ts

@@ -27,7 +27,7 @@
 //++
 
 import { NgModule } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { Ng2StateDeclaration, UIRouter, UIRouterModule } from '@uirouter/angular';
 import { DashboardComponent } from 'core-app/features/dashboards/dashboard/dashboard.component';
 import { OpenprojectGridsModule } from 'core-app/shared/components/grids/openproject-grids.module';
@@ -61,7 +61,7 @@ export function uiRouterDashboardsConfiguration(uiRouter:UIRouter) {
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
 
     OpenprojectGridsModule,
 

frontend/src/app/features/enterprise/openproject-enterprise.module.ts

@@ -27,7 +27,7 @@
 //++
 
 import { NgModule } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { EnterpriseTrialService } from 'core-app/features/enterprise/enterprise-trial.service';
 import { EnterpriseBaseComponent } from 'core-app/features/enterprise/enterprise-base.component';
@@ -40,7 +40,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectModalModule,
     FormsModule,
     ReactiveFormsModule,

frontend/src/app/features/in-app-notifications/in-app-notifications.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { IconModule } from 'core-app/shared/components/icon/icon.module';
 import { InAppNotificationBellComponent } from 'core-app/features/in-app-notifications/bell/in-app-notification-bell.component';
@@ -41,7 +41,7 @@ import { InAppNotificationsDateAlertsUpsaleComponent } from 'core-app/features/i
     InAppNotificationsDateAlertsUpsaleComponent,
   ],
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     // Routes for /backlogs
     UIRouterModule.forChild({
       states: IAN_ROUTES,

frontend/src/app/features/invite-user-modal/invite-user-modal.module.ts

@@ -8,7 +8,7 @@ import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.m
 import { InviteUserButtonModule } from 'core-app/features/invite-user-modal/button/invite-user-button.module';
 import { DynamicFormsModule } from 'core-app/shared/components/dynamic-forms/dynamic-forms.module';
 import { OpInviteUserModalAugmentService } from 'core-app/features/invite-user-modal/invite-user-modal-augment.service';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpInviteUserModalService } from 'core-app/features/invite-user-modal/invite-user-modal.service';
 import { InviteUserModalComponent } from './invite-user.component';
 import { ProjectSelectionComponent } from './project-selection/project-selection.component';
@@ -28,7 +28,7 @@ export function initializeServices(injector:Injector) {
 @NgModule({
   imports: [
     CommonModule,
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectModalModule,
     NgSelectModule,
     ReactiveFormsModule,

frontend/src/app/features/job-status/openproject-job-status.module.ts

@@ -27,7 +27,7 @@
 //++
 
 import { NgModule } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { Ng2StateDeclaration, UIRouterModule } from '@uirouter/angular';
 import { DisplayJobPageComponent } from 'core-app/features/job-status/display-job-page/display-job-page.component';
@@ -48,7 +48,7 @@ export const JOB_STATUS_ROUTE:Ng2StateDeclaration[] = [
 @NgModule({
   imports: [
     // Commons
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectModalModule,
 
     // Routes for /job_statuses/:uuid

frontend/src/app/features/my-page/my-page.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { GRID_PROVIDERS } from 'core-app/shared/components/grids/grid/grid.component';
 import { GridPageComponent } from 'core-app/shared/components/grids/grid/page/grid-page.component';
 
@@ -6,6 +6,7 @@ import { GridPageComponent } from 'core-app/shared/components/grids/grid/page/gr
   templateUrl: '../../shared/components/grids/grid/page/grid-page.component.html',
   styleUrls: ['../../shared/components/grids/grid/page/grid-page.component.sass'],
   providers: GRID_PROVIDERS,
+  encapsulation: ViewEncapsulation.None,
 })
 export class MyPageComponent extends GridPageComponent {
   protected i18nNamespace():string {

frontend/src/app/features/my-page/openproject-my-page.module.ts

@@ -28,7 +28,7 @@
 
 import { NgModule } from '@angular/core';
 import { Ng2StateDeclaration, UIRouterModule } from '@uirouter/angular';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { OpenprojectGridsModule } from 'core-app/shared/components/grids/openproject-grids.module';
 import { MyPageComponent } from 'core-app/features/my-page/my-page.component';
@@ -47,7 +47,7 @@ export const MY_PAGE_ROUTES:Ng2StateDeclaration[] = [
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectGridsModule,
     OpenprojectModalModule,
 

frontend/src/app/features/overview/openproject-overview.module.ts

@@ -27,7 +27,7 @@
 //++
 
 import { NgModule } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { Ng2StateDeclaration, UIRouter, UIRouterModule } from '@uirouter/angular';
 import { OpenprojectGridsModule } from 'core-app/shared/components/grids/openproject-grids.module';
 import { OverviewComponent } from 'core-app/features/overview/overview.component';
@@ -60,7 +60,7 @@ export function uiRouterOverviewConfiguration(uiRouter:UIRouter):void {
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
 
     OpenprojectGridsModule,
 

frontend/src/app/features/projects/openproject-projects.module.ts

@@ -34,14 +34,14 @@ import { PROJECTS_ROUTES, uiRouterProjectsConfiguration } from 'core-app/feature
 import { DynamicFormsModule } from 'core-app/shared/components/dynamic-forms/dynamic-forms.module';
 import { NewProjectComponent } from 'core-app/features/projects/components/new-project/new-project.component';
 import { ReactiveFormsModule } from '@angular/forms';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { CopyProjectComponent } from 'core-app/features/projects/components/copy-project/copy-project.component';
 import { ProjectsComponent } from './components/projects/projects.component';
 
 @NgModule({
   imports: [
     // Commons
-    OPSharedModule,
+    OpSharedModule,
     ReactiveFormsModule,
 
     OpenprojectHalModule,

frontend/src/app/features/team-planner/team-planner/team-planner.module.ts

@@ -11,7 +11,7 @@ import { TEAM_PLANNER_ROUTES } from 'core-app/features/team-planner/team-planner
 import { TeamPlannerComponent } from 'core-app/features/team-planner/team-planner/planner/team-planner.component';
 import { AddAssigneeComponent } from 'core-app/features/team-planner/team-planner/assignee/add-assignee.component';
 import { TeamPlannerPageComponent } from 'core-app/features/team-planner/team-planner/page/team-planner-page.component';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { AddExistingPaneComponent } from './add-work-packages/add-existing-pane.component';
 import { OpenprojectContentLoaderModule } from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
 import { TeamPlannerSidemenuComponent } from 'core-app/features/team-planner/team-planner/sidemenu/team-planner-sidemenu.component';
@@ -27,7 +27,7 @@ import { TeamPlannerViewSelectMenuDirective } from 'core-app/features/team-plann
     TeamPlannerViewSelectMenuDirective,
   ],
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     // Routes for /team_planner
     UIRouterModule.forChild({
       states: TEAM_PLANNER_ROUTES,

frontend/src/app/features/user-preferences/reminder-settings/pause-reminders/pause-reminders.component.html

@@ -14,12 +14,10 @@
     />
   </spot-selector-field>
 
-  <op-range-date-picker
-    [size]="23"
+  <op-multi-date-picker
+    *ngIf="(enabled$ | async)"
     [required]="enabled$ | async"
-    [disabled]="!(enabled$ | async)"
-    (changed)="setDates($event)"
-    [initialDates]="selectedDates$ | async"
-  >
-  </op-range-date-picker>
+    [value]="selectedDates$ | async"
+    (valueChange)="setDates($event)"
+  ></op-multi-date-picker>
 </div>

frontend/src/app/features/user-preferences/user-preferences.module.ts

@@ -5,7 +5,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectAutocompleterModule } from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
 import { UserPreferencesService } from 'core-app/features/user-preferences/state/user-preferences.service';
 import { NotificationsSettingsPageComponent } from 'core-app/features/user-preferences/notifications-settings/page/notifications-settings-page.component';
@@ -38,7 +38,7 @@ import { PauseRemindersComponent } from './reminder-settings/pause-reminders/pau
   ],
   imports: [
     CommonModule,
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectAutocompleterModule,
     FormsModule,
     ReactiveFormsModule,

frontend/src/app/features/work-packages/components/filters/filter-date-time-value/filter-date-time-value.component.html

@@ -1,16 +1,20 @@
-<div class="inline-label" id="div-values-{{filter.id}}">
-  <op-single-date-picker (changed)="value = isoDateParser($event)"
-                  [initialDate]="isoDateFormatter(value)"
-                  [opAutofocus]="shouldFocus"
-                  required="true"
-                  [id]="'values-' + filter.id"
-                  [name]="'v[' + filter.id + ']'"
-                  classes="advanced-filters--date-field"
-                  size="10">
-  </op-single-date-picker>
-  <span class="advanced-filters--tooltip-trigger -multiline"
-        [attr.data-tooltip]="timeZoneText"
-        *ngIf="isTimeZoneDifferent">
-    <op-icon icon-classes="icon icon-warning"></op-icon>
-  </span>
-</div>
+<op-single-date-picker
+  [id]="'values-' + filter.id"
+  [name]="'v[' + filter.id + ']'"
+  class="advanced-filters--date-field"
+  required="true"
+
+  (valueChange)="value = isoDateParser($event)"
+  [value]="isoDateFormatter(value)"
+
+  [opAutofocus]="shouldFocus"
+
+></op-single-date-picker>
+
+<span
+  class="advanced-filters--tooltip-trigger -multiline"
+  [attr.data-tooltip]="timeZoneText"
+  *ngIf="isTimeZoneDifferent"
+>
+  <span class="spot-icon spot-icon_warning"></span>
+</span>

frontend/src/app/features/work-packages/components/filters/filter-date-time-value/filter-date-time-value.component.ts

@@ -27,7 +27,11 @@
 //++
 
 import {
-  Component, Input, OnInit, Output,
+  Component,
+  Input,
+  HostBinding,
+  OnInit,
+  Output,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
@@ -43,6 +47,12 @@ import { AbstractDateTimeValueController } from '../abstract-filter-date-time-va
   templateUrl: './filter-date-time-value.component.html',
 })
 export class FilterDateTimeValueComponent extends AbstractDateTimeValueController implements OnInit {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
+  @HostBinding('class.inline-label') className = true;
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;

frontend/src/app/features/work-packages/components/filters/filter-date-times-value/filter-date-times-value.component.html

@@ -1,27 +1,17 @@
-<div id="div-values-{{filter.id}}" class="inline-label">
-  <op-single-date-picker (changed)="begin = isoDateParser($event)"
-                  [initialDate]="isoDateFormatter(begin)"
-                  [opAutofocus]="shouldFocus"
-                  required="true"
-                  [id]="'values-' + filter.id + '-begin'"
-                  [name]="'v[' + filter.id + ']-begin'"
-                  classes="advanced-filters--date-field"
-                  size="10">
-  </op-single-date-picker>
+<op-multi-date-picker
+  [id]="'values-' + filter.id"
+  [name]="'v[' + filter.id + ']'"
+  class="advanced-filters--date-field"
 
-  <span class="advanced-filters--affix" [textContent]="text.spacer">
-  </span>
+  [(ngModel)]="value"
+  [opAutofocus]="shouldFocus"
 
-  <op-single-date-picker (changed)="end = isoDateParser($event)"
-                  [initialDate]="isoDateFormatter(end)"
-                  [id]="'values-' + filter.id + '-end'"
-                  [name]="'v[' + filter.id + ']-end'"
-                  classes="advanced-filters--date-field"
-                  size="10">
-  </op-single-date-picker>
-  <span class="advanced-filters--tooltip-trigger -multiline"
-        *ngIf="isTimeZoneDifferent"
-        [attr.data-tooltip]="timeZoneText">
-    <op-icon icon-classes="icon icon-warning"></op-icon>
-  </span>
-</div>
+></op-multi-date-picker>
+
+<span
+  class="advanced-filters--tooltip-trigger -multiline"
+  *ngIf="isTimeZoneDifferent"
+  [attr.data-tooltip]="timeZoneText"
+>
+  <span class="spot-icon spot-icon_warning"></span>
+</span>

frontend/src/app/features/work-packages/components/filters/filter-date-times-value/filter-date-times-value.component.ts

@@ -29,7 +29,11 @@
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { Moment } from 'moment';
 import {
-  Component, Input, OnInit, Output,
+  HostBinding,
+  Component,
+  Input,
+  OnInit,
+  Output,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { DebouncedEventEmitter } from 'core-app/shared/helpers/rxjs/debounced-event-emitter';
@@ -43,6 +47,12 @@ import { AbstractDateTimeValueController } from '../abstract-filter-date-time-va
   templateUrl: './filter-date-times-value.component.html',
 })
 export class FilterDateTimesValueComponent extends AbstractDateTimeValueController implements OnInit {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
+  @HostBinding('class.inline-label') className = true;
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;
@@ -53,27 +63,28 @@ export class FilterDateTimesValueComponent extends AbstractDateTimeValueControll
     spacer: this.I18n.t('js.filter.value_spacer'),
   };
 
-  constructor(readonly I18n:I18nService,
-    readonly timezoneService:TimezoneService) {
+  constructor(
+    readonly I18n:I18nService,
+    readonly timezoneService:TimezoneService,
+  ) {
     super(I18n, timezoneService);
   }
 
-  public get begin():HalResource|string {
-    return this.filter.values[0];
+  public get value():(HalResource[]|string[]) {
+    return this.filter.values;
   }
 
-  public set begin(val) {
-    this.filter.values[0] = val || '';
+  public set value(val:(HalResource[]|string[])) {
+    this.filter.values = val;
     this.filterChanged.emit(this.filter);
   }
 
-  public get end() {
-    return this.filter.values[1];
+  public get begin() {
+    return this.filter.values[0];
   }
 
-  public set end(val) {
-    this.filter.values[1] = val || '';
-    this.filterChanged.emit(this.filter);
+  public get end() {
+    return this.filter.values[1];
   }
 
   public get lowerBoundary():Moment|null {

frontend/src/app/features/work-packages/components/filters/filter-date-value/filter-date-value.component.html

@@ -1,11 +1,9 @@
-<div id="div-values-{{filter.id}}">
-  <op-single-date-picker (changed)="value = parser($event)"
-                  [initialDate]="formatter(value)"
-                  [opAutofocus]="shouldFocus"
-                  required="true"
-                  [id]="'values-' + filter.id"
-                  [name]="'v[' + filter.id + ']'"
-                  classes="advanced-filters--date-field"
-                  size="10">
-  </op-single-date-picker>
-</div>
+<op-single-date-picker
+  [id]="'values-' + filter.id"
+  [name]="'v[' + filter.id + ']'"
+  class="advanced-filters--date-field"
+  [opAutofocus]="shouldFocus"
+  (changed)="value = parser($event)"
+  [value]="formatter(value)"
+  [required]="true"
+></op-single-date-picker>

frontend/src/app/features/work-packages/components/filters/filter-date-value/filter-date-value.component.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, Input, Output } from '@angular/core';
+import { Component, HostBinding, Input, Output } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { DebouncedEventEmitter } from 'core-app/shared/helpers/rxjs/debounced-event-emitter';
@@ -40,6 +40,10 @@ import { QueryFilterInstanceResource } from 'core-app/features/hal/resources/que
   templateUrl: './filter-date-value.component.html',
 })
 export class FilterDateValueComponent extends UntilDestroyedMixin {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;

frontend/src/app/features/work-packages/components/filters/filter-dates-value/filter-dates-value.component.html

@@ -1,24 +1,8 @@
-<div id="div-values-{{filter.id}}"
-  class="inline-label">
-  <op-single-date-picker (changed)="begin = parser($event)"
-                  [initialDate]="formatter(begin)"
-                  [opAutofocus]="shouldFocus"
-                  required="true"
-                  [id]="'values-' + filter.id + '-begin'"
-                  [name]="'v[' + filter.id + ']-begin'"
-                  classes="advanced-filters--date-field"
-                  size="10">
-  </op-single-date-picker>
+<op-multi-date-picker
+  [id]="'values-' + filter.id"
+  [name]="'v[' + filter.id + ']'"
+  class="advanced-filters--date-field"
 
-  <span class="advanced-filters--affix" [textContent]="text.spacer">
-  </span>
-
-  <op-single-date-picker (changed)="end = parser($event)"
-                  [initialDate]="formatter(end)"
-                  required="true"
-                  [id]="'values-' + filter.id + '-end'"
-                  [name]="'v[' + filter.id + ']-end'"
-                  classes="advanced-filters--date-field"
-                  size="10">
-  </op-single-date-picker>
-</div>
+  [(ngModel)]="value"
+  [opAutofocus]="shouldFocus"
+></op-multi-date-picker>

frontend/src/app/features/work-packages/components/filters/filter-dates-value/filter-dates-value.component.ts

@@ -27,7 +27,7 @@
 //++
 
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
-import { Component, Input, Output } from '@angular/core';
+import { Component, HostBinding, Input, Output } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { DebouncedEventEmitter } from 'core-app/shared/helpers/rxjs/debounced-event-emitter';
 import * as moment from 'moment';
@@ -41,6 +41,12 @@ import { QueryFilterInstanceResource } from 'core-app/features/hal/resources/que
   templateUrl: './filter-dates-value.component.html',
 })
 export class FilterDatesValueComponent extends UntilDestroyedMixin {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
+  @HostBinding('class.inline-label') className = true;
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;
@@ -56,22 +62,21 @@ export class FilterDatesValueComponent extends UntilDestroyedMixin {
     super();
   }
 
-  public get begin():any {
-    return this.filter.values[0];
+  public get value():(HalResource[]|string[]) {
+    return this.filter.values;
   }
 
-  public set begin(val:any) {
-    this.filter.values[0] = val || '';
+  public set value(val:(HalResource[]|string[])) {
+    this.filter.values = val;
     this.filterChanged.emit(this.filter);
   }
 
-  public get end():HalResource|string {
-    return this.filter.values[1];
+  public get begin():any {
+    return this.filter.values[0];
   }
 
-  public set end(val) {
-    this.filter.values[1] = val || '';
-    this.filterChanged.emit(this.filter);
+  public get end():HalResource|string {
+    return this.filter.values[1];
   }
 
   public parser(data:any) {

frontend/src/app/features/work-packages/components/wp-activity/activity-entry.component.html

@@ -1,22 +1,21 @@
 <div
   id="activity-{{ activityNo }}"
   [attr.data-qa-activity-number]="activityNo"
+  [ngSwitch]="activityType"
 >
-  <div [ngSwitch]="activityType">
-    <revision-activity
-      *ngSwitchCase="'Revision'"
-      [workPackage]="workPackage"
-      [activity]="activity"
-      [activityNo]="activityNo"
-      [hasUnreadNotification]="hasUnreadNotification"
-    ></revision-activity>
-    <user-activity
-      *ngSwitchDefault
-      [workPackage]="workPackage"
-      [activity]="activity"
-      [activityNo]="activityNo"
-      [isInitial]="isInitial"
-      [hasUnreadNotification]="hasUnreadNotification"
-    ></user-activity>
-  </div>
+  <revision-activity
+    *ngSwitchCase="'Revision'"
+    [workPackage]="workPackage"
+    [activity]="activity"
+    [activityNo]="activityNo"
+    [hasUnreadNotification]="hasUnreadNotification"
+  ></revision-activity>
+  <user-activity
+    *ngSwitchDefault
+    [workPackage]="workPackage"
+    [activity]="activity"
+    [activityNo]="activityNo"
+    [isInitial]="isInitial"
+    [hasUnreadNotification]="hasUnreadNotification"
+  ></user-activity>
 </div>

frontend/src/app/features/work-packages/components/wp-activity/activity-entry.component.ts

@@ -51,9 +51,10 @@ export class ActivityEntryComponent implements OnInit {
 
   public activityType:string;
 
-  constructor(readonly PathHelper:PathHelperService,
-    readonly I18n:I18nService) {
-  }
+  constructor(
+    readonly PathHelper:PathHelperService,
+    readonly I18n:I18nService,
+  ) { }
 
   ngOnInit() {
     this.projectId = idFromLink(this.workPackage.project.href);

frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component.ts

@@ -40,11 +40,11 @@ export const customDateActionAdminSelector = 'custom-date-action-admin';
 export class CustomDateActionAdminComponent implements OnInit {
   public valueVisible = false;
 
-  public fieldName:string;
+  public fieldName:string = '';
 
-  public fieldValue:string;
+  public fieldValue:string = '';
 
-  public visibleValue:string;
+  public visibleValue:string = '';
 
   public selectedOperator:any;
 
@@ -68,8 +68,8 @@ export class CustomDateActionAdminComponent implements OnInit {
   // cannot use $onInit as it would be called before the operators gets filled
   public ngOnInit() {
     const element = this.elementRef.nativeElement as HTMLElement;
-    this.fieldName = element.dataset.fieldName!;
-    this.fieldValue = element.dataset.fieldValue!;
+    this.fieldName = element.dataset.fieldName! || '';
+    this.fieldValue = element.dataset.fieldValue! || '';
 
     if (this.fieldValue === this.currentFieldValue) {
       this.selectedOperator = this.operators[1];

frontend/src/app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.html

@@ -14,8 +14,8 @@
     <op-single-date-picker
       [id]="fieldId + '_visible'"
       [name]="fieldId + '_input'"
-      [initialDate]="fieldValue"
-      (changed)="updateField($event)"
+      [value]="fieldValue"
+      (valueChange)="updateField($event)"
       classes="form--text-field">
     </op-single-date-picker>
   </span>

frontend/src/app/features/work-packages/components/wp-fast-table/builders/cell-builder.ts

@@ -28,6 +28,10 @@ export class CellBuilder {
       td.classList.add('-max');
     }
 
+    if ([ 'startDate', 'dueDate', 'duration' ].indexOf(attribute) !== -1) {
+      td.classList.add('-no-ellipsis');
+    }
+
     const schema = this.schemaCache.of(workPackage).ofProperty(attribute);
     if (schema && schema.type === 'User') {
       td.classList.add('-contains-avatar');

frontend/src/app/features/work-packages/components/wp-relations/wp-relations-create/wp-relation-create.template.html

@@ -28,7 +28,7 @@
                 id="relation-type--select"
                 role="listbox"
                 [(ngModel)]="selectedRelationType"
-                opAutoFocus>
+                opAutofocus>
           <option *ngFor="let type of relationTypes"
                   [textContent]="type.label"
                   [value]="type.name"></option>

frontend/src/app/features/work-packages/components/wp-single-view/wp-single-view.component.html

@@ -0,0 +1,199 @@
+<div
+  *ngIf="workPackage"
+  class="work-package--single-view"
+  [ngClass]="{'work-package--single-view_with-columns': showTwoColumnLayout()}"
+  data-selector="wp-single-view"
+>
+  <div
+    class="wp-new--subject-wrapper"
+    *ngIf="isNewResource"
+  >
+    <op-editable-attribute-field
+      [resource]="workPackage"
+      [wrapperClasses]="'-no-label'"
+      [fieldName]="'subject'"
+    ></op-editable-attribute-field>
+  </div>
+
+  <div class="wp-info-wrapper">
+    <wp-status-button
+      *ngIf="!isNewResource"
+      [workPackage]="workPackage"
+    ></wp-status-button>
+    <attribute-help-text
+      [attribute]="'status'"
+      [attributeScope]="'WorkPackage'"
+      *ngIf="!isNewResource"
+    ></attribute-help-text>
+
+    <div
+      class="work-packages--info-row"
+      *ngIf="!isNewResource"
+    >
+      <span [textContent]="idLabel"></span>:
+      <span [textContent]="text.infoRow.createdBy"></span>
+      <!-- The space has to be in an extra span
+      because otherwise the browser would add a second space after it -->
+      <span>&nbsp;</span>
+      <op-user-link
+        class="user-link"
+        [user]="workPackage.author"
+      ></op-user-link>
+      <span>.&nbsp;</span>
+      <span [textContent]="text.infoRow.lastUpdatedOn"></span>
+      <span>&nbsp;</span>
+      <op-date-time [dateTimeValue]="workPackage.updatedAt"></op-date-time>
+      <span>.</span>
+    </div>
+
+    <wp-custom-actions [workPackage]="workPackage" class="custom-actions"></wp-custom-actions>
+  </div>
+
+  <div
+    class="attributes-group -project-context __overflowing_element_container __overflowing_project_context"
+    *ngIf="projectContext && projectContext.field"
+    data-overflowing-identifier=".__overflowing_project_context"
+  >
+    <div>
+      <p class="wp-project-context--warning" [textContent]="text.project.required"></p>
+      <div
+        class="attributes-key-value"
+        [ngClass]="{'-span-all-columns': descriptor.spanAll }"
+        *ngFor="let descriptor of projectContext.field; trackBy:trackByName"
+      >
+        <div class="attributes-key-value--key">
+          <wp-replacement-label [fieldName]="descriptor.name">
+            {{ descriptor.label }}
+            <span
+              class="required"
+              *ngIf="descriptor.field.required && descriptor.field.writable"
+            >*</span>
+          </wp-replacement-label>
+          <attribute-help-text
+            [attribute]="descriptor.name"
+            [attributeScope]="'WorkPackage'"
+          ></attribute-help-text>
+        </div>
+        <div class="attributes-key-value--value-container">
+          <op-editable-attribute-field
+            [resource]="workPackage"
+            [fieldName]="descriptor.name"
+          ></op-editable-attribute-field>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="attributes-group -project-context hide-when-print"
+    *ngIf="!isNewResource && projectContext && !projectContext.matches"
+  >
+    <div>
+      <p>
+        <span [innerHTML]="projectContextText"></span>
+        <br/>
+        <a
+          [attr.href]="projectContext.href"
+          class="project-context--switch-link"
+          [textContent]="text.project.switchTo"
+        ></a>
+      </p>
+    </div>
+  </div>
+
+  <ng-container *ngFor="let component of prependedAttributeGroupComponents()">
+    <ndc-dynamic
+      [ndcDynamicComponent]="component"
+      [ndcDynamicInputs]="{ workPackage: workPackage }"
+    ></ndc-dynamic>
+  </ng-container>
+
+  <div class="attributes-group description-group">
+    <div class="single-attribute work-packages--details--description">
+      <op-editable-attribute-field
+        [fieldName]="'description'"
+        [resource]="workPackage"
+        [isDropTarget]="true"
+        [wrapperClasses]="'-no-label'"
+      ></op-editable-attribute-field>
+    </div>
+  </div>
+
+  <div
+    *ngFor="let group of groupedFields; trackBy:trackByName"
+    [hidden]="shouldHideGroup(group)"
+    [attr.data-group-name]="group.name"
+    [ngClass]="'__overflowing_' + group.id"
+    [attr.data-overflowing-identifier]="'.__overflowing_' + group.id"
+    class="attributes-group __overflowing_element_container"
+  >
+    <ng-container wp-isolated-query-space *ngIf="group.isolated">
+      <ndc-dynamic
+        [ndcDynamicComponent]="attributeGroupComponent(group)"
+        [ndcDynamicInputs]="{
+          workPackage: workPackage,
+          group: group,
+          query: group.query
+        }"
+      ></ndc-dynamic>
+    </ng-container>
+
+    <ng-container *ngIf="!group.isolated">
+      <div class="attributes-group--header">
+        <div class="attributes-group--header-container">
+          <h3
+            class="attributes-group--header-text"
+            [textContent]="group.name"
+          ></h3>
+        </div>
+      </div>
+
+      <ndc-dynamic
+        [ndcDynamicComponent]="attributeGroupComponent(group)"
+        [ndcDynamicInjector]="injector"
+        [ndcDynamicInputs]="{ workPackage: workPackage, group: group }"
+      ></ndc-dynamic>
+    </ng-container>
+  </div>
+</div>
+
+<div class="work-packages--attachments attributes-group" *ngIf="isNewResource">
+  <div class="work-packages--attachments-container">
+    <div class="attributes-group--header">
+      <div class="attributes-group--header-container">
+        <h3 class="attributes-group--header-text" [textContent]="text.attachments.label"></h3>
+      </div>
+    </div>
+
+    <ndc-dynamic
+      [ndcDynamicComponent]="attachmentListComponent()"
+      [ndcDynamicInputs]="{ resource: workPackage }"
+    ></ndc-dynamic>
+
+    <ndc-dynamic
+      [ndcDynamicComponent]="attachmentUploadComponent()"
+      [ndcDynamicInputs]="{ resource: workPackage }"
+      *ngIf="workPackage.canAddAttachments"
+    ></ndc-dynamic>
+  </div>
+</div>
+
+<div class="work-packages--files attributes-group" *ngIf="!isNewResource">
+  <div class="work-packages--files-container">
+    <div class="attributes-group--header">
+      <div class="attributes-group--header-container">
+        <h3 class="attributes-group--header-text" [textContent]="text.files.label"></h3>
+      </div>
+    </div>
+
+    <div class="attributes-group--icon-indented-text">
+      <op-icon icon-classes="icon-info1"></op-icon>
+      <span [textContent]="text.files.migration_help"></span>
+      <a
+        [textContent]="text.files.label"
+        [uiSref]="uiSelfRef"
+        [uiParams]="{ workPackageId: workPackage.id, tabIdentifier: 'files' }"
+      ></a>
+    </div>
+  </div>
+</div>

frontend/src/app/features/work-packages/components/wp-single-view/wp-single-view.component.ts

@@ -86,7 +86,7 @@ export interface ResourceContextChange {
 export const overflowingContainerAttribute = 'overflowingIdentifier';
 
 @Component({
-  templateUrl: './wp-single-view.html',
+  templateUrl: './wp-single-view.component.html',
   selector: 'wp-single-view',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -142,7 +142,8 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
 
   $element:JQuery;
 
-  constructor(readonly I18n:I18nService,
+  constructor(
+    readonly I18n:I18nService,
     protected currentProject:CurrentProjectService,
     protected PathHelper:PathHelperService,
     protected $state:StateService,
@@ -155,7 +156,8 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
     protected injector:Injector,
     protected cdRef:ChangeDetectorRef,
     readonly elementRef:ElementRef,
-    readonly browserDetector:BrowserDetector) {
+    readonly browserDetector:BrowserDetector,
+  ) {
     super();
   }
 

frontend/src/app/features/work-packages/components/wp-single-view/wp-single-view.html

@@ -1,165 +0,0 @@
-<div *ngIf="workPackage"
-     class="work-package--single-view"
-     [ngClass]="{'work-package--single-view_with-columns': showTwoColumnLayout()}"
-     data-selector="wp-single-view">
-  <div class="wp-new--subject-wrapper"
-       *ngIf="isNewResource">
-    <op-editable-attribute-field [resource]="workPackage"
-                              [wrapperClasses]="'-no-label'"
-                              [fieldName]="'subject'"></op-editable-attribute-field>
-  </div>
-
-  <div class="wp-info-wrapper">
-    <wp-status-button *ngIf="!isNewResource"
-                      [workPackage]="workPackage">
-    </wp-status-button>
-    <attribute-help-text [attribute]="'status'"
-                         [attributeScope]="'WorkPackage'"
-                         *ngIf="!isNewResource"></attribute-help-text>
-
-    <div class="work-packages--info-row"
-         *ngIf="!isNewResource">
-      <span [textContent]="idLabel"></span>:
-      <span [textContent]="text.infoRow.createdBy"></span>
-      <!-- The space has to be in an extra span
-      because otherwise the browser would add a second space after it -->
-      <span>&nbsp;</span>
-      <op-user-link class="user-link"
-                    [user]="workPackage.author"></op-user-link>
-      <span>.&nbsp;</span>
-      <span [textContent]="text.infoRow.lastUpdatedOn"></span>
-      <span>&nbsp;</span>
-      <op-date-time [dateTimeValue]="workPackage.updatedAt"></op-date-time>
-      <span>.</span>
-    </div>
-
-    <wp-custom-actions [workPackage]="workPackage" class="custom-actions"></wp-custom-actions>
-  </div>
-
-  <div class="attributes-group -project-context __overflowing_element_container __overflowing_project_context"
-       *ngIf="projectContext && projectContext.field"
-       data-overflowing-identifier=".__overflowing_project_context">
-    <div>
-      <p class="wp-project-context--warning" [textContent]="text.project.required"></p>
-      <div class="attributes-key-value"
-           [ngClass]="{'-span-all-columns': descriptor.spanAll }"
-           *ngFor="let descriptor of projectContext.field; trackBy:trackByName">
-        <div class="attributes-key-value--key">
-          <wp-replacement-label [fieldName]="descriptor.name">
-            {{ descriptor.label }}
-            <span class="required"
-                  *ngIf="descriptor.field.required && descriptor.field.writable">*</span>
-          </wp-replacement-label>
-          <attribute-help-text [attribute]="descriptor.name"
-                               [attributeScope]="'WorkPackage'"></attribute-help-text>
-        </div>
-        <div class="attributes-key-value--value-container">
-          <op-editable-attribute-field [resource]="workPackage"
-                                    [fieldName]="descriptor.name"></op-editable-attribute-field>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div
-    class="attributes-group -project-context hide-when-print"
-    *ngIf="!isNewResource && projectContext && !projectContext.matches"
-  >
-    <div>
-      <p>
-        <span [innerHTML]="projectContextText"></span>
-        <br/>
-        <a [attr.href]="projectContext.href"
-           class="project-context--switch-link"
-           [textContent]="text.project.switchTo">
-        </a>
-      </p>
-    </div>
-  </div>
-
-  <ng-container *ngFor="let component of prependedAttributeGroupComponents()">
-    <ndc-dynamic [ndcDynamicComponent]="component"
-                 [ndcDynamicInputs]="{ workPackage: workPackage }">
-    </ndc-dynamic>
-  </ng-container>
-
-  <div class="attributes-group description-group">
-    <div class="single-attribute work-packages--details--description">
-      <op-editable-attribute-field [fieldName]="'description'"
-                                [resource]="workPackage"
-                                [isDropTarget]="true"
-                                [wrapperClasses]="'-no-label'">
-      </op-editable-attribute-field>
-    </div>
-  </div>
-
-  <div
-    *ngFor="let group of groupedFields; trackBy:trackByName"
-    [hidden]="shouldHideGroup(group)"
-    [attr.data-group-name]="group.name"
-    [ngClass]="'__overflowing_' + group.id"
-    [attr.data-overflowing-identifier]="'.__overflowing_' + group.id"
-    class="attributes-group __overflowing_element_container"
-  >
-    <ng-container wp-isolated-query-space *ngIf="group.isolated">
-      <ndc-dynamic [ndcDynamicComponent]="attributeGroupComponent(group)"
-                   [ndcDynamicInputs]="{ workPackage: workPackage,
-                                         group: group,
-                                         query: group.query }">
-      </ndc-dynamic>
-    </ng-container>
-
-    <ng-container *ngIf="!group.isolated">
-      <div class="attributes-group--header">
-        <div class="attributes-group--header-container">
-          <h3 class="attributes-group--header-text"
-              [textContent]="group.name"></h3>
-        </div>
-      </div>
-
-      <ndc-dynamic [ndcDynamicComponent]="attributeGroupComponent(group)"
-                   [ndcDynamicInjector]="injector"
-                   [ndcDynamicInputs]="{ workPackage: workPackage, group: group }">
-      </ndc-dynamic>
-    </ng-container>
-  </div>
-</div>
-
-<div class="work-packages--attachments attributes-group" *ngIf="isNewResource">
-  <div class="work-packages--attachments-container">
-    <div class="attributes-group--header">
-      <div class="attributes-group--header-container">
-        <h3 class="attributes-group--header-text" [textContent]="text.attachments.label"></h3>
-      </div>
-    </div>
-
-    <ndc-dynamic [ndcDynamicComponent]="attachmentListComponent()"
-                 [ndcDynamicInputs]="{ resource: workPackage }">
-    </ndc-dynamic>
-
-    <ndc-dynamic [ndcDynamicComponent]="attachmentUploadComponent()"
-                 [ndcDynamicInputs]="{ resource: workPackage }"
-                 *ngIf="workPackage.canAddAttachments">
-    </ndc-dynamic>
-  </div>
-</div>
-
-<div class="work-packages--files attributes-group" *ngIf="!isNewResource">
-  <div class="work-packages--files-container">
-    <div class="attributes-group--header">
-      <div class="attributes-group--header-container">
-        <h3 class="attributes-group--header-text" [textContent]="text.files.label"></h3>
-      </div>
-    </div>
-
-    <div class="attributes-group--icon-indented-text">
-      <op-icon icon-classes="icon-info1"></op-icon>
-      <span [textContent]="text.files.migration_help"></span>
-      <a
-        [textContent]="text.files.label"
-        [uiSref]="uiSelfRef"
-        [uiParams]="{ workPackageId: workPackage.id, tabIdentifier: 'files' }"
-      ></a>
-    </div>
-  </div>
-</div>

frontend/src/app/features/work-packages/openproject-work-packages.module.ts

@@ -30,7 +30,7 @@ import {
   Injector,
   NgModule,
 } from '@angular/core';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectFieldsModule } from 'core-app/shared/components/fields/openproject-fields.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { HookService } from 'core-app/features/plugins/hook-service';
@@ -179,17 +179,12 @@ import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 import { OpenprojectStoragesModule } from 'core-app/shared/components/storages/openproject-storages.module';
 import { FileLinksResourceService } from 'core-app/core/state/file-links/file-links.service';
 import { StoragesResourceService } from 'core-app/core/state/storages/storages.service';
-import { DatepickerBannerComponent } from 'core-app/shared/components/datepicker/banner/datepicker-banner.component';
-import { SingleDateModalComponent } from 'core-app/shared/components/datepicker/single-date-modal/single-date.modal';
-import { MultiDateModalComponent } from 'core-app/shared/components/datepicker/multi-date-modal/multi-date.modal';
-import { DatepickerWorkingDaysToggleComponent } from 'core-app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component';
-import { DatepickerSchedulingToggleComponent } from 'core-app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component';
 import { StorageFilesResourceService } from 'core-app/core/state/storage-files/storage-files.service';
 
 @NgModule({
   imports: [
     // Commons
-    OPSharedModule,
+    OpSharedModule,
     // Display + Edit field functionality
     OpenprojectFieldsModule,
     // CKEditor
@@ -394,11 +389,6 @@ import { StorageFilesResourceService } from 'core-app/core/state/storage-files/s
     QuerySharingModalComponent,
     SaveQueryModalComponent,
     WpDestroyModalComponent,
-    MultiDateModalComponent,
-    SingleDateModalComponent,
-    DatepickerBannerComponent,
-    DatepickerWorkingDaysToggleComponent,
-    DatepickerSchedulingToggleComponent,
 
     // CustomActions
     WpCustomActionComponent,

frontend/src/app/shared/components/autocompleter/members-autocompleter/members.module.ts

@@ -29,11 +29,11 @@
 import { NgModule } from '@angular/core';
 import { MembersAutocompleterComponent } from 'core-app/shared/components/autocompleter/members-autocompleter/members-autocompleter.component';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 
 @NgModule({
   imports: [
-    OPSharedModule,
+    OpSharedModule,
     NgSelectModule,
   ],
   exports: [],

frontend/src/app/shared/components/datepicker/banner/datepicker-banner.component.html

@@ -6,8 +6,7 @@
   [actionButton]="text.show_relations_button"
   actionButtonClasses="icon-view-timeline"
   (buttonClicked)="openGantt($event)"
->
-</op-modal-banner>
+></op-modal-banner>
 <op-modal-banner
   *ngIf="!scheduleManually && isParent"
   type="info"
@@ -16,8 +15,7 @@
   [actionButton]="text.show_relations_button"
   actionButtonClasses="icon-view-timeline"
   (buttonClicked)="openGantt($event)"
->
-</op-modal-banner>
+></op-modal-banner>
 <ng-container *ngIf="!scheduleManually && !isParent">
   <op-modal-banner
     *ngIf="(hasPrecedingRelations$ | async) === true && (hasFollowingRelations$ | async) === false && !isChild"
@@ -27,8 +25,7 @@
     [actionButton]="text.show_relations_button"
     actionButtonClasses="icon-view-timeline"
     (buttonClicked)="openGantt($event)"
-  >
-  </op-modal-banner>
+  ></op-modal-banner>
 
   <op-modal-banner
     *ngIf="(hasFollowingRelations$ | async) === true || isChild"
@@ -38,6 +35,5 @@
     [actionButton]="text.show_relations_button"
     actionButtonClasses="icon-view-timeline"
     (buttonClicked)="openGantt($event)"
-  >
-  </op-modal-banner>
+  ></op-modal-banner>
 </ng-container>

frontend/src/app/shared/components/datepicker/banner/datepicker-banner.component.ts

@@ -45,7 +45,7 @@ import { DateModalRelationsService } from 'core-app/shared/components/datepicker
   templateUrl: './datepicker-banner.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DatepickerBannerComponent {
+export class OpDatePickerBannerComponent {
   @Input() scheduleManually = false;
 
   hasRelations$ = this.dateModalRelations.hasRelations$;
@@ -64,9 +64,13 @@ export class DatepickerBannerComponent {
       map((relations) => relations?.length > 0),
     );
 
-  isParent = this.dateModalRelations.isParent;
+  get isParent() {
+    return this.dateModalRelations.isParent;
+  }
 
-  isChild = this.dateModalRelations.isChild;
+  get isChild() {
+    return this.dateModalRelations.isChild;
+  }
 
   text = {
     automatically_scheduled_parent: this.I18n.t('js.work_packages.datepicker_modal.automatically_scheduled_parent'),

frontend/src/app/shared/components/datepicker/constants.ts

@@ -0,0 +1 @@
+export const rangeSeparator = '-';

frontend/src/app/shared/components/datepicker/datepicker.ts

@@ -30,22 +30,19 @@ import flatpickr from 'flatpickr';
 import { Instance } from 'flatpickr/dist/types/instance';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { rangeSeparator } from 'core-app/shared/components/op-date-picker/op-range-date-picker/op-range-date-picker.component';
 import { Injector } from '@angular/core';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { WeekdayService } from 'core-app/core/days/weekday.service';
+import { rangeSeparator } from './constants';
+
 import DateOption = flatpickr.Options.DateOption;
 import { DayResourceService } from 'core-app/core/state/days/day.service';
 
 export class DatePicker {
   private datepickerFormat = 'Y-m-d';
 
-  private datepickerCont:HTMLElement = document.querySelector(this.datepickerElemIdentifier) as HTMLElement;
-
   public datepickerInstance:Instance;
 
-  private reshowTimeout:ReturnType<typeof setTimeout>;
-
   @InjectField() configurationService:ConfigurationService;
 
   @InjectField() weekdaysService:WeekdayService;
@@ -87,8 +84,6 @@ export class DatePicker {
     }
 
     this.datepickerInstance = Array.isArray(datePickerInstances) ? datePickerInstances[0] : datePickerInstances;
-
-    document.addEventListener('scroll', this.hideDuringScroll, true);
   }
 
   public async isNonWorkingDay(day:Date):Promise<boolean> {
@@ -101,20 +96,17 @@ export class DatePicker {
 
   public destroy():void {
     this.hide();
-    this.datepickerInstance.destroy();
+    this.datepickerInstance?.destroy();
   }
 
   public hide():void {
     if (this.isOpen) {
       this.datepickerInstance.close();
     }
-
-    document.removeEventListener('scroll', this.hideDuringScroll, true);
   }
 
   public show():void {
     this.datepickerInstance.open();
-    document.addEventListener('scroll', this.hideDuringScroll, true);
   }
 
   public setDates(dates:DateOption|DateOption[]):void {
@@ -125,50 +117,6 @@ export class DatePicker {
     return this.datepickerInstance.isOpen;
   }
 
-  private hideDuringScroll = (event:Event) => {
-    // Prevent Firefox quirk: flatPicker emits
-    // multiple scrolls event when it is open
-    const target = event.target as HTMLInputElement;
-
-    if (target?.classList?.contains('flatpickr-monthDropdown-months') || target?.classList?.contains('flatpickr-input')) {
-      return;
-    }
-
-    this.datepickerInstance.close();
-
-    if (this.reshowTimeout) {
-      clearTimeout(this.reshowTimeout);
-    }
-
-    this.reshowTimeout = setTimeout(() => {
-      if (this.visibleAndActive()) {
-        this.datepickerInstance.open();
-      }
-    }, 50);
-  };
-
-  private visibleAndActive() {
-    try {
-      return this.isInViewport(this.datepickerCont)
-        && document.activeElement === this.datepickerCont;
-    } catch (e) {
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      console.error(`Failed to test visibleAndActive ${e}`);
-      return false;
-    }
-  }
-
-  private isInViewport(element:HTMLElement):boolean {
-    const rect = element.getBoundingClientRect();
-
-    return (
-      rect.top >= 0
-      && rect.left >= 0
-      && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-      && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-    );
-  }
-
   private get defaultOptions() {
     const firstDayOfWeek = this.configurationService.startOfWeek();
 

frontend/src/app/shared/components/datepicker/helpers/date-modal.helpers.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { DatePicker } from 'core-app/shared/components/op-date-picker/datepicker';
+import { DatePicker } from 'core-app/shared/components/datepicker/datepicker';
 import { DateOption } from 'flatpickr/dist/types/options';
 import { DayElement } from 'flatpickr/dist/types/instance';
 
@@ -102,7 +102,6 @@ export function onDayCreate(
   dayElem:DayElement,
   ignoreNonWorkingDays:boolean,
   isNonWorkingDay:boolean,
-  minimalDate:Date|null|undefined,
   isDayDisabled:boolean,
 ):void {
   if (!ignoreNonWorkingDays && isNonWorkingDay) {

frontend/src/app/shared/components/datepicker/multi-date-picker/multi-date-picker.component.html

@@ -0,0 +1,114 @@
+<spot-drop-modal
+  [opened]="isOpened"
+  (closed)="close()"
+>
+  <button
+    slot="trigger"
+    type="button"
+    class="button"
+    data-qa-selector="op-datepicker-multi-trigger"
+    (click)="open()"
+  >{{ datesString }}</button>
+  
+  <form
+    slot="body"
+    class="spot-container op-datepicker-modal op-datepicker-modal_wide"
+    data-qa-selector="op-datepicker-modal"
+    tabindex="0"
+    cdkFocusInitial
+    cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="true"
+    (submit)="save($event)"
+  >
+    <spot-selector-field
+      [reverseLabel]="true"
+      [label]="text.ignoreNonWorkingDays.title"
+    >
+      <spot-switch
+        slot="input"
+        name="ignoreNonWorkingDays"
+        [(ngModel)]="ignoreNonWorkingDays"
+        (ngModelChange)="changeNonWorkingDays()"
+        data-qa-selector="op-datepicker-modal--include-non-working-days"
+      ></spot-switch>
+    </spot-selector-field>
+
+    <div class="op-datepicker-modal--dates-container">
+      <spot-form-field
+        [label]="text.startDate"
+      >
+        <spot-text-field
+          slot="input"
+          name="startDate"
+          class="op-datepicker-modal--date-field"
+          [attr.data-qa-highlighted]="showFieldAsActive('start') || undefined"
+          [ngClass]="{'op-datepicker-modal--date-field_current' : showFieldAsActive('start')}"
+          [ngModel]="dates.start"
+          (ngModelChange)="startDateChanged$.next($event)"
+          [showClearButton]="currentlyActivatedDateField === 'start'"
+          (focusin)="setCurrentActivatedField('start')"
+        ></spot-text-field>
+        <button
+          slot="action"
+          type="button"
+          class="spot-link"
+          (click)="setToday('start')"
+          [textContent]="text.today">
+        </button>
+      </spot-form-field>
+
+      <spot-form-field
+        [label]="text.endDate"
+      >
+        <spot-text-field
+          slot="input"
+          name="endDate"
+          class="op-datepicker-modal--date-field"
+          [attr.data-qa-highlighted]="showFieldAsActive('end') || undefined"
+          [ngClass]="{'op-datepicker-modal--date-field_current' : showFieldAsActive('end')}"
+          [ngModel]="dates.end"
+          (ngModelChange)="endDateChanged$.next($event)"
+          [showClearButton]="currentlyActivatedDateField === 'end'"
+          (focusin)="setCurrentActivatedField('end')"
+        ></spot-text-field>
+        <button
+          slot="action"
+          type="button"
+          class="spot-link"
+          (click)="setToday('end')"
+          [textContent]="text.today">
+        </button>
+      </spot-form-field>
+    </div>
+
+    <input
+      id="flatpickr-input"
+      #flatpickrTarget
+      hidden>
+
+    <div class="spot-action-bar">
+      <div class="spot-action-bar--right">
+        <button
+          type="button"
+          (click)="close()"
+          class="button spot-action-bar--action"
+          data-qa-selector="op-datepicker-modal--action"
+          [textContent]="text.cancel"
+        ></button>
+        <button
+          type="submit"
+          class="button -highlight spot-action-bar--action"
+          data-qa-selector="op-datepicker-modal--action"
+          [textContent]="text.save"
+        ></button>
+      </div>
+    </div>
+  </form>
+</spot-drop-modal>
+
+<input
+  [id]="id"
+  [name]="name"
+  [value]="value"
+  hidden
+>

frontend/src/app/shared/components/datepicker/multi-date-picker/multi-date-picker.component.ts

@@ -0,0 +1,447 @@
+// -- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) 2012-2022 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 {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  Injector,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+    areDatesEqual,
+    mappedDate,
+  onDayCreate,
+  parseDate,
+  setDates,
+  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';
+import { DayElement } from 'flatpickr/dist/types/instance';
+import { ActiveDateChange, DateFields, DateKeys } from '../wp-multi-date-form/wp-multi-date-form.component';
+import { fromEvent, merge, Observable, Subject } from 'rxjs';
+import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
+import { debounceTime, filter, map } from 'rxjs/operators';
+import { DeviceService } from 'core-app/core/browser/device.service';
+import { DateOption } from 'flatpickr/dist/types/options';
+import { WeekdayService } from 'core-app/core/days/weekday.service';
+import { FocusHelperService } from 'core-app/shared/directives/focus/focus-helper';
+
+@Component({
+  selector: 'op-multi-date-picker',
+  templateUrl: './multi-date-picker.component.html',
+  styleUrls: ['../styles/datepicker.modal.sass', '../styles/datepicker_mobile.modal.sass'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => OpMultiDatePickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class OpMultiDatePickerComponent extends UntilDestroyedMixin implements OnInit, ControlValueAccessor {
+  @ViewChild('modalContainer') modalContainer:ElementRef<HTMLElement>;
+
+  @ViewChild('flatpickrTarget') flatpickrTarget:ElementRef;
+
+  @Input() id = `flatpickr-input-${+(new Date())}`;
+
+  @Input() name = '';
+
+  @Input() fieldName:string = '';
+
+  @Input() value:string[] = [];
+
+  @Output() valueChange = new EventEmitter();
+
+  text = {
+    save: this.I18n.t('js.button_save'),
+    cancel: this.I18n.t('js.button_cancel'),
+    startDate: this.I18n.t('js.work_packages.properties.startDate'),
+    endDate: this.I18n.t('js.work_packages.properties.dueDate'),
+    placeholder: this.I18n.t('js.placeholders.default'),
+    today: this.I18n.t('js.label_today'),
+    days: (count:number):string => this.I18n.t('js.units.day', { count }),
+    ignoreNonWorkingDays: {
+      title: this.I18n.t('js.work_packages.datepicker_modal.ignore_non_working_days.title'),
+    },
+  };
+
+  get datesString():string {
+    if (this.value?.[0] && this.value?.[1]) {
+      return `${this.value[0]} - ${this.value[1]}`;
+    }
+
+    return this.text.placeholder;
+  }
+
+  ignoreNonWorkingDays = false;
+
+  isOpened = false;
+
+  currentlyActivatedDateField:DateFields;
+
+  htmlId = '';
+
+  dates:{ [key in DateKeys]:string|null } = {
+    start: null,
+    end: null,
+  };
+
+  // Manual changes from the inputs to start and end dates
+  startDateChanged$ = new Subject<string>();
+
+  startDateDebounced$:Observable<ActiveDateChange> = this.debouncedInput(this.startDateChanged$, 'start');
+
+  endDateChanged$ = new Subject<string>();
+
+  endDateDebounced$:Observable<ActiveDateChange> = this.debouncedInput(this.endDateChanged$, 'end');
+
+  // Manual changes to the datepicker, with information which field was active
+  datepickerChanged$ = new Subject<ActiveDateChange>();
+
+  ignoreNonWorkingDaysWritable = true;
+
+  private datePickerInstance:DatePicker;
+
+  constructor(
+    readonly injector:Injector,
+    readonly cdRef:ChangeDetectorRef,
+    readonly I18n:I18nService,
+    readonly timezoneService:TimezoneService,
+    readonly deviceService:DeviceService,
+    readonly weekdayService:WeekdayService,
+    readonly focusHelper:FocusHelperService,
+  ) {
+    super();
+
+    merge(
+      this.startDateDebounced$,
+      this.endDateDebounced$,
+      this.datepickerChanged$,
+    )
+      .pipe(
+        this.untilDestroyed(),
+        filter(() => !!this.datePickerInstance),
+      )
+      .subscribe(([field, update]) => {
+        // When clearing the one date, clear the others as well
+        if (update !== null) {
+          this.handleSingleDateUpdate(field, update);
+        }
+
+        this.cdRef.detectChanges();
+      });
+  }
+
+  ngOnInit(): void {
+    this.htmlId = `wp-datepicker-${this.fieldName as string}`;
+
+    this.setCurrentActivatedField(this.initialActivatedField);
+  }
+
+  open():void {
+    this.isOpened = true;
+    setTimeout(() => this.initializeDatepicker(), 20);
+  }
+
+  close():void {
+    this.isOpened = false;
+    this.datePickerInstance?.destroy();
+  }
+
+  changeNonWorkingDays():void {
+    this.initializeDatepicker();
+    this.cdRef.detectChanges();
+  }
+
+  save($event:Event):void {
+    $event.preventDefault();
+    const value = [
+      this.dates.start || '',
+      this.dates.end || '',
+    ];
+    this.valueChange.emit(value);
+    this.onChange(value);
+    this.close();
+  }
+
+  updateDate(key:DateKeys, val:string|null):void {
+    if ((val === null || validDate(val)) && this.datePickerInstance) {
+      this.dates[key] = mappedDate(val);
+      const dateValue = parseDate(val || '') || undefined;
+      this.enforceManualChangesToDatepicker(dateValue);
+      this.cdRef.detectChanges();
+    }
+  }
+
+  setCurrentActivatedField(val:DateFields):void {
+    this.currentlyActivatedDateField = val;
+  }
+
+  toggleCurrentActivatedField():void {
+    this.currentlyActivatedDateField = this.currentlyActivatedDateField === 'start' ? 'end' : 'start';
+  }
+
+  isStateOfCurrentActivatedField(val:DateFields):boolean {
+    return this.currentlyActivatedDateField === val;
+  }
+
+  setToday(key:DateKeys):void {
+    this.datepickerChanged$.next([key, new Date()]);
+
+    const nextActive = key === 'start' ? 'end' : 'start';
+    this.setCurrentActivatedField(nextActive);
+  }
+
+  showFieldAsActive(field:DateFields):boolean {
+    return this.isStateOfCurrentActivatedField(field);
+  }
+
+  private initializeDatepicker(minimalDate?:Date|null) {
+    this.datePickerInstance?.destroy();
+    this.datePickerInstance = new DatePicker(
+      this.injector,
+      this.id,
+      [this.dates.start || '', this.dates.end || ''],
+      {
+        mode: 'range',
+        showMonths: this.deviceService.isMobile ? 1 : 2,
+        inline: true,
+        onReady: (_date, _datestr, instance) => {
+          instance.calendarContainer.classList.add('op-datepicker-modal--flatpickr-instance');
+
+          this.ensureHoveredSelection(instance.calendarContainer);
+        },
+        onChange: (dates:Date[], _datestr, instance) => {
+          this.onTouched();
+
+          if (dates.length === 2) {
+            this.setDates(dates[0], dates[1]);
+            this.toggleCurrentActivatedField();
+            this.cdRef.detectChanges();
+            return;
+          }
+
+          // Update with the same flow as entering a value
+          const { latestSelectedDateObj } = instance as { latestSelectedDateObj:Date };
+          const activeField = this.currentlyActivatedDateField;
+          this.handleSingleDateUpdate(activeField, latestSelectedDateObj);
+          this.cdRef.detectChanges();
+        },
+        onDayCreate: (dObj:Date[], dStr:string, fp:flatpickr.Instance, dayElem:DayElement) => {
+          onDayCreate(
+            dayElem,
+            this.ignoreNonWorkingDays,
+            this.weekdayService.isNonWorkingDay(dayElem.dateObj),
+            this.isDayDisabled(dayElem, minimalDate),
+          );
+        },
+      },
+      this.flatpickrTarget.nativeElement,
+    );
+  }
+
+  private enforceManualChangesToDatepicker(enforceDate?:Date) {
+    let startDate = parseDate(this.dates.start || '');
+    let endDate = parseDate(this.dates.end || '');
+
+    if (startDate && endDate) {
+      // If the start date is manually changed to be after the end date,
+      // we adjust the end date to be at least the same as the newly entered start date.
+      // Same applies if the end date is set manually before the current start date
+      if (startDate > endDate && this.isStateOfCurrentActivatedField('start')) {
+        endDate = startDate;
+        this.dates.end = this.timezoneService.formattedISODate(endDate);
+      } else if (endDate < startDate && this.isStateOfCurrentActivatedField('end')) {
+        startDate = endDate;
+        this.dates.start = this.timezoneService.formattedISODate(startDate);
+      }
+    }
+
+    const dates = [startDate, endDate];
+    setDates(dates, this.datePickerInstance, enforceDate);
+  }
+
+  private setDates(newStart:Date, newEnd:Date) {
+    this.dates.start = this.timezoneService.formattedISODate(newStart);
+    this.dates.end = this.timezoneService.formattedISODate(newEnd);
+  }
+
+  private handleSingleDateUpdate(activeField:DateFields, selectedDate:Date) {
+    if (activeField === 'duration') {
+      return;
+    }
+
+    this.replaceDatesWithNewSelection(activeField, selectedDate);
+
+    // Set the selected date on the datepicker
+    this.enforceManualChangesToDatepicker(selectedDate);
+  }
+
+  private replaceDatesWithNewSelection(activeField:DateFields, selectedDate:Date) {
+    /**
+     Overwrite flatpickr default behavior by not starting a new date range everytime but preserving either start or end date.
+     There are three cases to cover.
+     1. Everything before the current start date will become the new start date (independent of the active field)
+     2. Everything after the current end date will become the new end date if that is the currently active field.
+     If the active field is the start date, the selected date becomes the new start date and the end date is cleared.
+     3. Everything in between the current start and end date is dependent on the currently activated field.
+     * */
+
+    const parsedStartDate = parseDate(this.dates.start || '') as Date;
+    const parsedEndDate = parseDate(this.dates.end || '') as Date;
+
+    if (selectedDate < parsedStartDate) {
+      if (activeField === 'start') {
+        // Set start, derive end from
+        this.applyNewDates([selectedDate]);
+      } else {
+        // Reset and end date
+        this.applyNewDates(['', selectedDate]);
+      }
+    } else if (selectedDate > parsedEndDate) {
+      if (activeField === 'end') {
+        this.applyNewDates([parsedStartDate, selectedDate]);
+      } else {
+        // Reset and end date
+        this.applyNewDates([selectedDate]);
+      }
+    } else if (areDatesEqual(selectedDate, parsedStartDate) || areDatesEqual(selectedDate, parsedEndDate)) {
+      this.applyNewDates([selectedDate, selectedDate]);
+    } else {
+      const newDates = activeField === 'start' ? [selectedDate, parsedEndDate] : [parsedStartDate, selectedDate];
+      this.applyNewDates(newDates);
+    }
+  }
+
+  private applyNewDates([start, end]:DateOption[]) {
+    this.dates.start = start ? this.timezoneService.formattedISODate(start) : null;
+    this.dates.end = end ? this.timezoneService.formattedISODate(end) : null;
+
+    // Apply the dates to the datepicker
+    setDates([start, end], this.datePickerInstance);
+  }
+
+  private get initialActivatedField():DateFields {
+    switch (this.fieldName) {
+      case 'startDate':
+        return 'start';
+      case 'dueDate':
+        return 'end';
+      case 'duration':
+        return 'duration';
+      default:
+        return (this.dates.start && !this.dates.end) ? 'end' : 'start';
+    }
+  }
+
+  private isDayDisabled(dayElement:DayElement, minimalDate?:Date|null):boolean {
+    return !!minimalDate && dayElement.dateObj <= minimalDate;
+  }
+
+  private debouncedInput(input$:Subject<string>, key:DateKeys):Observable<ActiveDateChange> {
+    return input$
+      .pipe(
+        this.untilDestroyed(),
+        // Skip values that are already set as the current model
+        filter((value) => value !== this.dates[key]),
+        // Avoid that the manual changes are moved to the datepicker too early.
+        // The debounce is chosen quite large on purpose to catch the following case:
+        //   1. Start date is for example 2022-07-15. The user wants to set the end date to the 19th.
+        //   2. So he/she starts entering the finish date 2022-07-1 .
+        //   3. This is already a valid date. Since it is before the start date,the start date would be changed automatically to the first without the debounce.
+        //   4. The debounce gives the user enough time to type the last number "9" before the changes are converted to the datepicker and the start date would be affected.
+        debounceTime(500),
+        filter((date) => validDate(date)),
+        map((date) => {
+          if (date === '') {
+            return null;
+          }
+
+          return parseDate(date) as Date;
+        }),
+        map((date) => [key, date]),
+      );
+  }
+
+  /**
+   * When hovering selections in the range datepicker, the range usually
+   * stays active no matter where the cursor is.
+   *
+   * We want to hide any hovered selection preview when we leave the datepicker.
+   * @param calendarContainer
+   * @private
+   */
+  private ensureHoveredSelection(calendarContainer:HTMLDivElement) {
+    fromEvent(calendarContainer, 'mouseenter')
+      .pipe(
+        this.untilDestroyed(),
+      )
+      .subscribe(() => calendarContainer.classList.remove('flatpickr-container-suppress-hover'));
+
+    fromEvent(calendarContainer, 'mouseleave')
+      .pipe(
+        this.untilDestroyed(),
+        filter(() => !(!!this.dates.start && !!this.dates.end)),
+      )
+      .subscribe(() => calendarContainer.classList.add('flatpickr-container-suppress-hover'));
+  }
+
+  writeValue(value:string[]|null):void {
+    this.value = value || [];
+    this.dates.start = this.value[0];
+    this.dates.end = this.value[1];
+  }
+
+  onChange = (_:string[]):void => {};
+
+  onTouched = ():void => {};
+
+  registerOnChange(fn:(_:string[]) => void):void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn:() => void):void {
+    this.onTouched = fn;
+  }
+}

frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.ts

@@ -17,11 +17,11 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DatepickerSchedulingToggleComponent),
+    useExisting: forwardRef(() => OpDatePickerSchedulingToggleComponent),
     multi: true,
   }],
 })
-export class DatepickerSchedulingToggleComponent implements ControlValueAccessor {
+export class OpDatePickerSchedulingToggleComponent implements ControlValueAccessor {
   text = {
     scheduling: {
       title: this.I18n.t('js.scheduling.manual'),

frontend/src/app/shared/components/datepicker/services/date-modal-relations.service.ts

@@ -27,11 +27,8 @@
 //++
 
 import {
-  Inject,
   Injectable,
 } from '@angular/core';
-import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
-import { OpModalLocalsMap } from 'core-app/shared/components/modal/modal.types';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { ApiV3Filter } from 'core-app/shared/helpers/api-v3/api-v3-filter-builder';
 import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
@@ -42,11 +39,13 @@ import {
   shareReplay,
   switchMap,
   take,
+  tap,
 } from 'rxjs/operators';
 import {
   combineLatest,
   Observable,
-  of,
+  ReplaySubject,
+  Subject,
 } from 'rxjs';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { IHALCollection } from 'core-app/core/apiv3/types/hal-collection.type';
@@ -55,9 +54,15 @@ import { parseDate } from 'core-app/shared/components/datepicker/helpers/date-mo
 
 @Injectable()
 export class DateModalRelationsService {
-  private changeset:WorkPackageChangeset = this.locals.changeset as WorkPackageChangeset;
+  private changeset$:Subject<WorkPackageChangeset> = new ReplaySubject();
+  private changeset:WorkPackageChangeset;
 
-  precedingWorkPackages$:Observable<{ id:string, dueDate?:string, date?:string }[]> = of(this.changeset)
+  setChangeset(changeset:WorkPackageChangeset) {
+    this.changeset$.next(changeset);
+    this.changeset = changeset;
+  }
+
+  precedingWorkPackages$:Observable<{ id:string, dueDate?:string, date?:string }[]> = this.changeset$
     .pipe(
       filter((changeset) => !isNewResource(changeset.pristineResource)),
       switchMap((changeset) => this
@@ -76,7 +81,7 @@ export class DateModalRelationsService {
       shareReplay(1),
     );
 
-  followingWorkPackages$:Observable<{ id:string }[]> = of(this.changeset)
+  followingWorkPackages$:Observable<{ id:string }[]> = this.changeset$
     .pipe(
       filter((changeset) => !isNewResource(changeset.pristineResource)),
       switchMap((changeset) => this
@@ -100,7 +105,6 @@ export class DateModalRelationsService {
     );
 
   constructor(
-    @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
     private apiV3Service:ApiV3Service,
   ) {}
 

frontend/src/app/shared/components/datepicker/services/date-modal-scheduling.service.ts

@@ -27,26 +27,27 @@
 //++
 
 import {
-  Inject,
   Injectable,
 } from '@angular/core';
-import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
-import { OpModalLocalsMap } from 'core-app/shared/components/modal/modal.types';
 import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
 import { DateModalRelationsService } from 'core-app/shared/components/datepicker/services/date-modal-relations.service';
 import { DayElement } from 'flatpickr/dist/types/instance';
 
 @Injectable()
 export class DateModalSchedulingService {
-  private changeset:WorkPackageChangeset = this.locals.changeset as WorkPackageChangeset;
+  private changeset:WorkPackageChangeset;
 
-  scheduleManually = !!this.changeset.value('scheduleManually');
+  scheduleManually = false;
 
   constructor(
-    @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
     readonly dateModalRelations:DateModalRelationsService,
   ) {}
 
+  setChangeset(changeset:WorkPackageChangeset) {
+    this.changeset = changeset;
+    this.scheduleManually = !!this.changeset.value('scheduleManually');
+  }
+
   /**
    * Returns whether the user can alter the dates of the work package.
    */

frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.html

@@ -1,74 +0,0 @@
-<form
-  class="spot-modal op-datepicker-modal loading-indicator--location"
-  data-qa-selector="op-datepicker-modal"
-  [attr.id]="htmlId"
-  #modalContainer
-  data-indicator-name="modal"
-  (submit)="save($event)"
-  tabindex="0"
-  cdkFocusInitial
-  cdkTrapFocus
-  [cdkTrapFocusAutoCapture]="true"
->
-  <op-datepicker-banner [scheduleManually]="scheduleManually"></op-datepicker-banner>
-
-  <div class="spot-modal--body spot-container">
-    <div class="op-datepicker-modal--toggle-actions-container">
-      <op-datepicker-scheduling-toggle
-        name="scheduleManually"
-        [(ngModel)]="scheduleManually"
-        (ngModelChange)="changeSchedulingMode()"
-      ></op-datepicker-scheduling-toggle>
-      <op-datepicker-working-days-toggle
-        name="ignoreNonWorkingDays"
-        [(ngModel)]="ignoreNonWorkingDays"
-        (ngModelChange)="changeNonWorkingDays()"
-      ></op-datepicker-working-days-toggle>
-    </div>
-
-    <div class="op-datepicker-modal--dates-container">
-      <spot-form-field
-        [label]="text.date"
-        >
-        <spot-text-field
-          slot="input"
-          name="date"
-          class="op-datepicker-modal--date-field"
-          [ngClass]="{ 'op-datepicker-modal--date-field_current': this.isSchedulable }"
-          [(ngModel)]="date"
-          (ngModelChange)="dateChangedManually$.next()"
-          [showClearButton]="true"
-        ></spot-text-field>
-        <button
-          slot="action"
-          type="button"
-          class="spot-link"
-          [ngClass]="{ 'op-datepicker-modal--hidden-link': !isSchedulable }"
-          (click)="setToday()"
-          [textContent]="text.today">
-        </button>
-      </spot-form-field>
-    </div>
-
-    <input id="flatpickr-input"
-           hidden>
-  </div>
-
-  <div class="spot-action-bar">
-    <div class="spot-action-bar--right">
-      <button
-        type="button"
-        (click)="cancel()"
-        class="op-datepicker-modal--action spot-modal--cancel-button button button_no-margin spot-action-bar--action"
-        data-qa-selector="op-datepicker-modal--action"
-        [textContent]="text.cancel"
-      ></button>
-      <button
-        type="submit"
-        class="op-datepicker-modal--action button button_no-margin -highlight spot-action-bar--action"
-        data-qa-selector="op-datepicker-modal--action"
-        [textContent]="text.save"
-      ></button>
-    </div>
-  </div>
-</form>

frontend/src/app/shared/components/datepicker/single-date-picker/single-date-picker.component.html

@@ -0,0 +1,97 @@
+<spot-drop-modal
+  [opened]="opened"
+  (closed)="opened = false"
+>
+  <ng-content
+    slot="trigger"
+    select="[slot=trigger]"
+  ></ng-content>
+  <ng-template [ngIf]="useDefaultTrigger" slot="trigger">
+    <input
+      type="text"
+      class="spot-input"
+      [attr.data-value]="value"
+      [id]="id"
+      (click)="onInputClick($event)"
+      [(ngModel)]="value"
+      (ngModelChange)="changeValueFromInputDebounced($event)"
+      (focus)="opened = true"
+    />
+  </ng-template>
+
+  <ng-container slot="body">
+    <form
+      class="spot-container op-datepicker-modal"
+      data-qa-selector="op-datepicker-modal"
+      tabindex="0"
+      cdkFocusInitial
+      cdkTrapFocus
+      [cdkTrapFocusAutoCapture]="true"
+      (submit)="save($event)"
+    >
+      <spot-selector-field
+        *ngIf="showIgnoreNonWorkingDays"
+        [reverseLabel]="true"
+        [label]="text.ignoreNonWorkingDays.title"
+      >
+        <spot-switch
+          slot="input"
+          name="ignoreNonWorkingDays"
+          [(ngModel)]="ignoreNonWorkingDays"
+          (ngModelChange)="changeNonWorkingDays()"
+          data-qa-selector="op-datepicker-modal--include-non-working-days"
+        ></spot-switch>
+      </spot-selector-field>
+
+      <ng-content select="[slot=extra-fields]"></ng-content>
+
+      <spot-form-field
+        [label]="text.date"
+      >
+        <spot-text-field
+          slot="input"
+          name="date"
+          class="op-datepicker-modal--date-field"
+          [ngModel]="workingValue"
+          (ngModelChange)="writeWorkingValue($event)"
+          [showClearButton]="true"
+        ></spot-text-field>
+        <button
+          slot="action"
+          type="button"
+          class="spot-link"
+          (click)="setToday()"
+          [textContent]="text.today">
+        </button>
+      </spot-form-field>
+
+      <div #flatpickrTarget></div>
+
+      <div class="spot-action-bar">
+        <div class="spot-action-bar--right">
+          <button
+            type="button"
+            (click)="opened = false"
+            class="button spot-action-bar--action"
+            data-qa-selector="op-datepicker-modal--action"
+            [textContent]="text.cancel"
+          ></button>
+          <button
+            type="submit"
+            class="button -highlight spot-action-bar--action"
+            data-qa-selector="op-datepicker-modal--action"
+            [textContent]="text.save"
+          ></button>
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</spot-drop-modal>
+
+<input
+  [name]="name"
+  [value]="value"
+  [ngClass]="{ 'remote-field--input': !!remoteFieldKey }"
+  [attr.data-remote-field-key]="remoteFieldKey"
+  hidden
+>

frontend/src/app/shared/components/datepicker/single-date-picker/single-date-picker.component.ts

@@ -0,0 +1,276 @@
+// -- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) 2012-2022 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 {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Injector,
+  Input,
+  Output,
+  ViewChild,
+  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 { 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';
+
+export const opSingleDatePickerSelector = 'op-single-date-picker';
+
+@Component({
+  selector: opSingleDatePickerSelector,
+  templateUrl: './single-date-picker.component.html',
+  styleUrls: ['../styles/datepicker.modal.sass', '../styles/datepicker_mobile.modal.sass'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => OpSingleDatePickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class OpSingleDatePickerComponent implements ControlValueAccessor, AfterContentInit {
+  @Output('closed') closed = new EventEmitter();
+
+  @Output('valueChange') valueChange = new EventEmitter();
+
+  private _value = '';
+
+  @Input() set value(newValue:string) {
+    this._value = newValue;
+    this.writeWorkingValue(newValue);
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  @Input() id = `flatpickr-input-${+(new Date())}`;
+
+  @Input() name = '';
+
+  @Input() remoteFieldKey = '';
+
+  @Input() required = false;
+
+  @Input() minimalDate:Date|null = null;
+
+  private _opened = false;
+
+  @Input() set opened(opened:boolean) {
+    if (this._opened === !!opened) {
+      return;
+    }
+
+    this._opened = !!opened;
+
+    if (this._opened) {
+      this.initializeDatepickerDebounced();
+    } else {
+      this.closed.emit();
+    }
+  }
+
+  get opened() {
+    return this._opened;
+  }
+
+  @Input() showIgnoreNonWorkingDays = false;
+
+  @Input() ignoreNonWorkingDays = false;
+
+  @ViewChild('flatpickrTarget') flatpickrTarget:ElementRef;
+
+  public workingValue = '';
+
+  public workingDate:Date|null = null;
+
+  public datePickerInstance:DatePicker;
+
+  public useDefaultTrigger = false;
+
+  text = {
+    save: this.I18n.t('js.button_save'),
+    cancel: this.I18n.t('js.button_cancel'),
+    date: this.I18n.t('js.work_packages.properties.date'),
+    placeholder: this.I18n.t('js.placeholders.default'),
+    today: this.I18n.t('js.label_today'),
+    ignoreNonWorkingDays: {
+      title: this.I18n.t('js.work_packages.datepicker_modal.ignore_non_working_days.title'),
+    },
+  };
+
+  constructor(
+    readonly I18n:I18nService,
+    readonly timezoneService:TimezoneService,
+    readonly injector:Injector,
+    readonly cdRef:ChangeDetectorRef,
+    readonly elementRef:ElementRef,
+  ) {
+    populateInputsFromDataset(this);
+  }
+
+  ngAfterContentInit() {
+    const trigger = (this.elementRef.nativeElement as HTMLElement).querySelector("[slot='trigger']");
+    this.useDefaultTrigger = trigger === null;
+  }
+
+  onInputClick(event:MouseEvent) {
+    event.stopPropagation();
+  }
+
+  save($event:Event) {
+    $event.preventDefault();
+    this.valueChange.emit(this.workingValue);
+    this.onChange(this.workingValue);
+    this.writeValue(this.workingValue);
+    this.opened = false;
+    this.cdRef.detectChanges();
+  }
+
+  setToday():void {
+    const today = parseDate(new Date()) as Date;
+    this.writeWorkingValue(this.timezoneService.formattedISODate(today));
+    this.enforceManualChangesToDatepicker(today);
+  }
+
+  changeNonWorkingDays():void {
+    this.initializeDatepickerDebounced();
+    this.cdRef.detectChanges();
+  }
+
+  changeValueFromInputDebounced = debounce(this.changeValueFromInput.bind(this), 16);
+
+  changeValueFromInput(value:string) {
+    this.valueChange.emit(value);
+    this.onChange(value);
+    this.writeValue(value);
+
+    const date = parseDate(value || '');
+
+    if (date !== '') {
+      const dateString = this.timezoneService.formattedISODate(date);
+      this.writeWorkingValue(dateString);
+      this.enforceManualChangesToDatepicker(date);
+      this.onTouched(dateString);
+    }
+
+    this.cdRef.detectChanges();
+  }
+
+  private enforceManualChangesToDatepicker(enforceDate?:Date) {
+    const date = parseDate(this.workingDate || '');
+    setDates(date, this.datePickerInstance, enforceDate);
+  }
+
+  private initializeDatepickerDebounced = debounce(this.initializeDatepicker.bind(this), 16);
+
+  private initializeDatepicker(numberOfTries = 0) {
+    this.datePickerInstance?.destroy();
+
+    // If we're too early somehow, try again in a bit
+    if (!this.flatpickrTarget?.nativeElement) {
+      if (numberOfTries >= 3) {
+        console.warn('Tried initializing flatpickr 3 times in a row with no success. Bailing out');
+        return;
+      }
+      this.initializeDatepickerDebounced(numberOfTries + 1);
+    }
+
+    this.datePickerInstance = new DatePicker(
+      this.injector,
+      this.id,
+      this.workingDate || '',
+      {
+        mode: 'single',
+        showMonths: 1,
+        inline: true,
+        onReady: (_date:Date[], _datestr:string, instance:flatpickr.Instance) => {
+          instance.calendarContainer.classList.add('op-datepicker-modal--flatpickr-instance');
+        },
+        onChange: (dates:Date[]) => {
+          if (dates.length > 0) {
+            const dateString = this.timezoneService.formattedISODate(dates[0]);
+            this.writeWorkingValue(dateString);
+            this.enforceManualChangesToDatepicker(dates[0]);
+            this.onTouched(dateString);
+          }
+
+          this.cdRef.detectChanges();
+        },
+        onDayCreate: (dObj:Date[], dStr:string, fp:flatpickr.Instance, dayElem:DayElement) => {
+          onDayCreate(
+            dayElem,
+            !this.ignoreNonWorkingDays,
+            this.datePickerInstance?.weekdaysService.isNonWorkingDay(dayElem.dateObj),
+            !!this.minimalDate && dayElem.dateObj <= this.minimalDate,
+          );
+        },
+      },
+      this.flatpickrTarget.nativeElement as HTMLElement,
+    );
+  }
+
+  writeWorkingValue(value:string):void {
+    this.workingValue = value;
+    this.workingDate = new Date(value);
+  }
+
+  writeValue(value:string):void {
+    this.writeWorkingValue(value);
+    this.value = value;
+  }
+
+  onChange = (_:string):void => {};
+
+  onTouched = (_:string):void => {};
+
+  registerOnChange(fn:(_:string) => void):void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn:(_:string) => void):void {
+    this.onTouched = fn;
+  }
+}

frontend/src/app/shared/components/datepicker/styles/datepicker.modal.sass

@@ -1,26 +1,31 @@
 @import '../../app/spot/styles/sass/variables'
 
 .op-datepicker-modal
-  z-index: 500
-  width: auto
+  display: flex
+  flex-direction: column
+  min-height: 200px
+  width: 100vw
   // Basically the width of the two calendars next to each other + spacings
   // will be overwritten on mobile
-  max-width: 600px
-  min-height: 200px
-  box-shadow: $spot-shadow-light-mid
-  // Apply a bottom margin before the banners are loaded
-  // to avoid overlapping
-  margin-bottom: 60px
+  max-width: 300px
+
+  &_wide
+    max-width: 600px
+
+  &--banner
+    margin-bottom: $spot-spacing-1
 
   &--toggle-actions-container
     display: grid
     grid-template-columns: auto auto 1fr
     grid-column-gap: $spot-spacing-2
+    margin: 0 $spot-spacing-1 0
 
   &--dates-container
     display: grid
     grid-template-columns: 1fr 1fr 150px
     grid-gap: $spot-spacing-1
+    margin: $spot-spacing-1 $spot-spacing-1 0
 
   &--date-field
     &_current,
@@ -37,3 +42,6 @@
 
   &--hidden-link
     visibility: hidden
+
+  &--flatpickr-instance
+    margin: 0 auto

frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.ts

@@ -17,11 +17,11 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DatepickerWorkingDaysToggleComponent),
+    useExisting: forwardRef(() => OpDatePickerWorkingDaysToggleComponent),
     multi: true,
   }],
 })
-export class DatepickerWorkingDaysToggleComponent implements ControlValueAccessor {
+export class OpDatePickerWorkingDaysToggleComponent implements ControlValueAccessor {
   @Input() ignoreNonWorkingDays:boolean;
 
   @Input() disabled = false;

frontend/src/app/shared/components/datepicker/wp-multi-date-form/wp-multi-date-form.component.html

@@ -1,18 +1,21 @@
 <form
-  class="spot-modal op-datepicker-modal loading-indicator--location"
   data-qa-selector="op-datepicker-modal"
   [attr.id]="htmlId"
+  class="op-datepicker-modal op-datepicker-modal_wide"
   #modalContainer
   data-indicator-name="modal"
   tabindex="0"
   cdkFocusInitial
   cdkTrapFocus
   [cdkTrapFocusAutoCapture]="true"
-  (submit)="save($event)"
+  (submit)="doSave($event)"
 >
-  <op-datepicker-banner [scheduleManually]="scheduleManually"></op-datepicker-banner>
+  <op-datepicker-banner
+    [scheduleManually]="scheduleManually"
+    class="op-datepicker-modal--banner"
+  ></op-datepicker-banner>
 
-  <div class="spot-modal--body spot-container form -vertical">
+  <div class="spot-container">
     <div class="op-datepicker-modal--toggle-actions-container">
       <op-datepicker-scheduling-toggle
         name="scheduleManually"
@@ -104,15 +107,18 @@
       </spot-form-field>
     </div>
 
-    <input id="flatpickr-input"
-           hidden>
+    <input
+      #flatpickrTarget
+      id="flatpickr-input"
+      hidden
+    />
   </div>
 
   <div class="spot-action-bar">
     <div class="spot-action-bar--right">
       <button
         type="button"
-        (click)="cancel()"
+        (click)="doCancel()"
         class="op-datepicker-modal--action spot-modal--cancel-button button button_no-margin spot-action-bar--action"
         data-qa-selector="op-datepicker-modal--action"
         [textContent]="text.cancel"

frontend/src/app/shared/components/datepicker/wp-multi-date-form/wp-multi-date-form.component.ts

@@ -33,20 +33,17 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Inject,
+  Input,
   Injector,
   ViewChild,
   ViewEncapsulation,
+  OnInit,
+  Output,
+  HostBinding,
 } from '@angular/core';
-import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
-import { OpModalLocalsMap } from 'core-app/shared/components/modal/modal.types';
-import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
-import { DatePicker } from 'core-app/shared/components/op-date-picker/datepicker';
 import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
-import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { DayElement } from 'flatpickr/dist/types/instance';
 import flatpickr from 'flatpickr';
@@ -56,7 +53,6 @@ import {
   map,
   switchMap,
 } from 'rxjs/operators';
-import { activeFieldContainerClassName } from 'core-app/shared/components/fields/edit/edit-form/edit-form';
 import {
   fromEvent,
   merge,
@@ -77,16 +73,22 @@ import {
 import { WeekdayService } from 'core-app/core/days/weekday.service';
 import { FocusHelperService } from 'core-app/shared/directives/focus/focus-helper';
 import { DeviceService } from 'core-app/core/browser/device.service';
+import { DatePicker } from '../datepicker';
+
 import DateOption = flatpickr.Options.DateOption;
+import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
+import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
+import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
+import { DateModalSchedulingService } from '../services/date-modal-scheduling.service';
 
 export type DateKeys = 'start'|'end';
 export type DateFields = DateKeys|'duration';
 
-type StartUpdate = { startDate:string };
-type EndUpdate = { dueDate:string };
-type DurationUpdate = { duration:string|number|null };
-type DateUpdate = { date:string };
-type ActiveDateChange = [DateFields, null|Date|Date];
+export type StartUpdate = { startDate:string };
+export type EndUpdate = { dueDate:string };
+export type DurationUpdate = { duration:string|number|null };
+export type DateUpdate = { date:string };
+export type ActiveDateChange = [DateFields, null|Date|Date];
 
 export type FieldUpdates =
   StartUpdate
@@ -97,32 +99,37 @@ export type FieldUpdates =
   |DateUpdate;
 
 @Component({
-  templateUrl: './multi-date.modal.html',
-  styleUrls: ['../styles/datepicker.modal.sass', '../styles/datepicker_mobile.modal.sass'],
+  selector: 'op-wp-multi-date-form',
+  templateUrl: './wp-multi-date-form.component.html',
+  styleUrls: [
+    '../styles/datepicker.modal.sass',
+    '../styles/datepicker_mobile.modal.sass',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   providers: [
     DateModalRelationsService,
+    DateModalSchedulingService,
   ],
 })
-export class MultiDateModalComponent extends OpModalComponent implements AfterViewInit {
-  @InjectField() I18n!:I18nService;
+export class OpWpMultiDateFormComponent extends UntilDestroyedMixin implements AfterViewInit, OnInit {
+  @HostBinding('class.op-datepicker-modal') className = true;
 
-  @InjectField() timezoneService:TimezoneService;
+  @HostBinding('class.op-datepicker-modal_wide') classNameWide = true;
 
-  @InjectField() halEditing:HalResourceEditingService;
+  @ViewChild('modalContainer') modalContainer:ElementRef<HTMLElement>;
 
-  @InjectField() dateModalRelations:DateModalRelationsService;
+  @ViewChild('durationField', { read: ElementRef }) durationField:ElementRef<HTMLElement>;
 
-  @InjectField() deviceService:DeviceService;
+  @ViewChild('flatpickrTarget') flatpickrTarget:ElementRef;
 
-  @InjectField() weekdayService:WeekdayService;
+  @Input() changeset:ResourceChangeset;
 
-  @InjectField() focusHelper:FocusHelperService;
+  @Input() fieldName:string = '';
 
-  @ViewChild('modalContainer') modalContainer:ElementRef<HTMLElement>;
+  @Output() cancel = new EventEmitter();
 
-  @ViewChild('durationField', { read: ElementRef }) durationField:ElementRef<HTMLElement>;
+  @Output() save = new EventEmitter();
 
   text = {
     save: this.I18n.t('js.button_save'),
@@ -135,8 +142,6 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
     days: (count:number):string => this.I18n.t('js.units.day', { count }),
   };
 
-  onDataUpdated = new EventEmitter<string>();
-
   scheduleManually = false;
 
   ignoreNonWorkingDays = false;
@@ -190,7 +195,6 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
         this.clearWithDuration(field);
       }
 
-      this.onDataChange();
       this.cdRef.detectChanges();
     });
 
@@ -212,43 +216,51 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
   // which is different from the highlight state...
   durationFocused = false;
 
-  private changeset:ResourceChangeset;
-
   ignoreNonWorkingDaysWritable = true;
 
   private datePickerInstance:DatePicker;
 
   private formUpdates$ = new Subject<FieldUpdates>();
 
-  private dateUpdateRequests$ = this
-    .formUpdates$
-    .pipe(
-      this.untilDestroyed(),
-      switchMap((fieldsToUpdate:FieldUpdates) => this
-        .apiV3Service
-        .work_packages
-        .withOptionalId(this.changeset.id === 'new' ? null : this.changeset.id)
-        .form
-        .forPayload({
-          ...fieldsToUpdate,
-          lockVersion: this.changeset.value<string>('lockVersion'),
-          ignoreNonWorkingDays: this.ignoreNonWorkingDays,
-          scheduleManually: this.scheduleManually,
-        })),
-    )
-    .subscribe((form) => this.updateDatesFromForm(form));
-
   constructor(
     readonly injector:Injector,
-    @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
     readonly cdRef:ChangeDetectorRef,
-    readonly elementRef:ElementRef,
-    readonly configurationService:ConfigurationService,
     readonly apiV3Service:ApiV3Service,
+    readonly I18n:I18nService,
+    readonly timezoneService:TimezoneService,
+    readonly halEditing:HalResourceEditingService,
+    readonly dateModalScheduling:DateModalSchedulingService,
+    readonly dateModalRelations:DateModalRelationsService,
+    readonly deviceService:DeviceService,
+    readonly weekdayService:WeekdayService,
+    readonly focusHelper:FocusHelperService,
   ) {
-    super(locals, cdRef, elementRef);
-    this.changeset = locals.changeset as ResourceChangeset;
-    this.htmlId = `wp-datepicker-${locals.fieldName as string}`;
+    super();
+
+    this
+      .formUpdates$
+      .pipe(
+        this.untilDestroyed(),
+        switchMap((fieldsToUpdate:FieldUpdates) => this
+          .apiV3Service
+          .work_packages
+          .withOptionalId(this.changeset.id === 'new' ? null : this.changeset.id)
+          .form
+          .forPayload({
+            ...fieldsToUpdate,
+            lockVersion: this.changeset.value<string>('lockVersion'),
+            ignoreNonWorkingDays: this.ignoreNonWorkingDays,
+            scheduleManually: this.scheduleManually,
+          })),
+      )
+      .subscribe((form) => this.updateDatesFromForm(form));
+  }
+
+  ngOnInit(): void {
+    this.htmlId = `wp-datepicker-${this.fieldName as string}`;
+
+    this.dateModalScheduling.setChangeset(this.changeset as WorkPackageChangeset);
+    this.dateModalRelations.setChangeset(this.changeset as WorkPackageChangeset);
 
     this.scheduleManually = !!this.changeset.value('scheduleManually');
     this.ignoreNonWorkingDays = !!this.changeset.value('ignoreNonWorkingDays');
@@ -271,28 +283,33 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
   }
 
   ngAfterViewInit():void {
+    const init = (date:Date|null) => {
+      this.initializeDatepicker(date);
+
+      // Autofocus duration if that's what activated us
+      if (this.initialActivatedField === 'duration') {
+        this.focusHelper.focus(this.durationField.nativeElement);
+      }
+    };
+
+    if (isNewResource(this.changeset.pristineResource)) {
+      init(null);
+      return;
+    }
+
     this
       .dateModalRelations
       .getMinimalDateFromPreceeding()
-      .subscribe((date) => {
-        this.initializeDatepicker(date);
-        this.onDataChange();
-      });
-
-    // Autofocus duration if that's what activated us
-    if (this.initialActivatedField === 'duration') {
-      this.focusHelper.focus(this.durationField.nativeElement);
-    }
+      .subscribe((date) => init(date));
   }
 
   changeSchedulingMode():void {
-    this.initializeDatepicker();
-
     // If removing manual scheduling on parent, reset ignoreNWD to original value
     if (this.scheduleManually === false && !this.ignoreNonWorkingDaysWritable) {
       this.ignoreNonWorkingDays = !!this.changeset.value('ignoreNonWorkingDays');
     }
 
+    this.initializeDatepicker();
     this.cdRef.detectChanges();
   }
 
@@ -317,7 +334,7 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
     this.cdRef.detectChanges();
   }
 
-  save($event:Event):void {
+  doSave($event:Event):void {
     $event.preventDefault();
     // Apply the changed scheduling mode if any
     this.changeset.setValue('scheduleManually', this.scheduleManually);
@@ -332,11 +349,11 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
       this.changeset.setValue('duration', this.durationAsIso8601);
     }
 
-    this.closeMe();
+    this.save.emit();
   }
 
-  cancel():void {
-    this.closeMe();
+  doCancel():void {
+    this.cancel.emit();
   }
 
   updateDate(key:DateKeys, val:string|null):void {
@@ -367,20 +384,6 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
     this.setCurrentActivatedField(nextActive);
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  reposition(element:JQuery<HTMLElement>, target:JQuery<HTMLElement>):void {
-    if (this.deviceService.isMobile) {
-      return;
-    }
-
-    element.position({
-      my: 'left top',
-      at: 'left bottom',
-      of: target,
-      collision: 'flipfit',
-    });
-  }
-
   showTodayLink():boolean {
     return this.isSchedulable;
   }
@@ -467,7 +470,6 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
           instance.calendarContainer.classList.add('op-datepicker-modal--flatpickr-instance');
 
           if (!this.modalPositioned) {
-            this.reposition(jQuery(this.modalContainer.nativeElement), jQuery(`.${activeFieldContainerClassName}`));
             this.modalPositioned = true;
           }
 
@@ -500,12 +502,11 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
             dayElem,
             this.ignoreNonWorkingDays,
             await this.datePickerInstance?.isNonWorkingDay(dayElem.dateObj),
-            minimalDate,
             this.isDayDisabled(dayElem, minimalDate),
           );
         },
       },
-      null,
+      this.flatpickrTarget.nativeElement,
     );
   }
 
@@ -528,7 +529,6 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
 
     const dates = [startDate, endDate];
     setDates(dates, this.datePickerInstance, enforceDate);
-    this.onDataChange();
   }
 
   private setDatesAndDeriveDuration(newStart:Date, newEnd:Date) {
@@ -731,16 +731,8 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
     }
   }
 
-  private onDataChange() {
-    const start = this.dates.start || '';
-    const end = this.dates.end || '';
-
-    const output = `${start} - ${end}`;
-    this.onDataUpdated.emit(output);
-  }
-
   private get initialActivatedField():DateFields {
-    switch (this.locals.fieldName) {
+    switch (this.fieldName) {
       case 'startDate':
         return 'start';
       case 'dueDate':

frontend/src/app/shared/components/datepicker/wp-single-date-form/wp-single-date-form.component.html

@@ -0,0 +1,79 @@
+<form
+  class="op-datepicker-modal"
+  data-qa-selector="op-datepicker-modal"
+  [attr.id]="htmlId"
+  #modalContainer
+  data-indicator-name="modal"
+  (submit)="doSave($event)"
+  tabindex="0"
+  cdkFocusInitial
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
+  <op-datepicker-banner
+    [scheduleManually]="scheduleManually"
+    class="op-datepicker-modal--banner"
+  ></op-datepicker-banner>
+
+  <div class="spot-container">
+    <op-datepicker-scheduling-toggle
+      class="spot-form-field"
+      name="scheduleManually"
+      [(ngModel)]="scheduleManually"
+      (ngModelChange)="changeSchedulingMode()"
+    ></op-datepicker-scheduling-toggle>
+
+    <op-datepicker-working-days-toggle
+      class="spot-form-field"
+      name="ignoreNonWorkingDays"
+      [(ngModel)]="ignoreNonWorkingDays"
+      (ngModelChange)="changeNonWorkingDays()"
+    ></op-datepicker-working-days-toggle>
+
+    <spot-form-field
+      [label]="text.date"
+    >
+      <spot-text-field
+        slot="input"
+        name="date"
+        class="op-datepicker-modal--date-field"
+        [ngClass]="{ 'op-datepicker-modal--date-field_current': isSchedulable }"
+        [(ngModel)]="date"
+        (ngModelChange)="dateChangedManually$.next()"
+        [showClearButton]="true"
+      ></spot-text-field>
+      <button
+        slot="action"
+        type="button"
+        class="spot-link"
+        [ngClass]="{ 'op-datepicker-modal--hidden-link': !isSchedulable }"
+        (click)="setToday()"
+        [textContent]="text.today">
+      </button>
+    </spot-form-field>
+
+    <input
+      #flatpickrTarget
+      id="flatpickr-input"
+      hidden
+    >
+  </div>
+
+  <div class="spot-action-bar">
+    <div class="spot-action-bar--right">
+      <button
+        type="button"
+        (click)="doCancel()"
+        class="op-datepicker-modal--action spot-modal--cancel-button button button_no-margin spot-action-bar--action"
+        data-qa-selector="op-datepicker-modal--action"
+        [textContent]="text.cancel"
+      ></button>
+      <button
+        type="submit"
+        class="op-datepicker-modal--action button button_no-margin -highlight spot-action-bar--action"
+        data-qa-selector="op-datepicker-modal--action"
+        [textContent]="text.save"
+      ></button>
+    </div>
+  </div>
+</form>

frontend/src/app/shared/components/datepicker/wp-single-date-form/wp-single-date-form.component.ts

@@ -33,29 +33,23 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Inject,
+  OnInit,
   Injector,
+  Input,
+  Output,
   ViewChild,
   ViewEncapsulation,
+  HostBinding,
 } from '@angular/core';
-import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
-import { OpModalLocalsMap } from 'core-app/shared/components/modal/modal.types';
-import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
-import { DatePicker } from 'core-app/shared/components/op-date-picker/datepicker';
+import { DatePicker } from 'core-app/shared/components/datepicker/datepicker';
 import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
-import { BrowserDetector } from 'core-app/core/browser/browser-detector.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { DayElement } from 'flatpickr/dist/types/instance';
 import flatpickr from 'flatpickr';
-import {
-  debounce,
-  switchMap,
-} from 'rxjs/operators';
-import { activeFieldContainerClassName } from 'core-app/shared/components/fields/edit/edit-form/edit-form';
+import { debounce } from 'rxjs/operators';
 import {
   Subject,
   timer,
@@ -70,27 +64,37 @@ import {
   setDates,
   validDate,
 } from 'core-app/shared/components/datepicker/helpers/date-modal.helpers';
-import { DeviceService } from 'core-app/core/browser/device.service';
+import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
+import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
+import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
+import { DateModalSchedulingService } from '../services/date-modal-scheduling.service';
 
 @Component({
-  templateUrl: './single-date.modal.html',
-  styleUrls: ['../styles/datepicker.modal.sass', '../styles/datepicker_mobile.modal.sass'],
+  selector: 'op-wp-single-date-form',
+  templateUrl: './wp-single-date-form.component.html',
+  styleUrls: [
+    '../styles/datepicker.modal.sass',
+    '../styles/datepicker_mobile.modal.sass',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   providers: [
     DateModalRelationsService,
+    DateModalSchedulingService,
   ],
 })
-export class SingleDateModalComponent extends OpModalComponent implements AfterViewInit {
-  @InjectField() I18n!:I18nService;
+export class OpWpSingleDateFormComponent extends UntilDestroyedMixin implements AfterViewInit, OnInit {
+  @HostBinding('class.op-datepicker-modal') className = true;
 
-  @InjectField() timezoneService:TimezoneService;
+  @Input('value') value = '';
 
-  @InjectField() halEditing:HalResourceEditingService;
+  @Input() changeset:ResourceChangeset;
 
-  @InjectField() dateModalRelations:DateModalRelationsService;
+  @Output() cancel = new EventEmitter();
 
-  @InjectField() deviceService:DeviceService;
+  @Output() save = new EventEmitter();
+
+  @ViewChild('flatpickrTarget') flatpickrTarget:ElementRef;
 
   @ViewChild('modalContainer') modalContainer:ElementRef<HTMLElement>;
 
@@ -102,8 +106,6 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
     today: this.I18n.t('js.label_today'),
   };
 
-  onDataUpdated = new EventEmitter<string>();
-
   scheduleManually = false;
 
   ignoreNonWorkingDays = false;
@@ -116,54 +118,44 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
 
   private debounceDelay = 0; // will change after initial render
 
-  private changeset:ResourceChangeset;
-
   private datePickerInstance:DatePicker;
 
-  private dateUpdates$ = new Subject<string>();
-
-  private dateUpdateRequests$ = this
-    .dateUpdates$
-    .pipe(
-      this.untilDestroyed(),
-      switchMap((date:string) => this
-        .apiV3Service
-        .work_packages
-        .id(this.changeset.id)
-        .form
-        .forPayload({
-          date,
-          lockVersion: this.changeset.value<string>('lockVersion'),
-          ignoreNonWorkingDays: this.ignoreNonWorkingDays,
-        })),
-    )
-    .subscribe((form) => this.updateDatesFromForm(form));
-
   constructor(
-    readonly injector:Injector,
-    @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
-    readonly cdRef:ChangeDetectorRef,
-    readonly elementRef:ElementRef,
     readonly configurationService:ConfigurationService,
     readonly apiV3Service:ApiV3Service,
+    readonly cdRef:ChangeDetectorRef,
+    readonly injector:Injector,
+    readonly I18n:I18nService,
+    readonly timezoneService:TimezoneService,
+    readonly halEditing:HalResourceEditingService,
+    readonly dateModalScheduling:DateModalSchedulingService,
+    readonly dateModalRelations:DateModalRelationsService,
   ) {
-    super(locals, cdRef, elementRef);
-    this.changeset = locals.changeset as ResourceChangeset;
-    this.htmlId = `wp-datepicker-${locals.fieldName as string}`;
-
-    this.ignoreNonWorkingDays = !!this.changeset.value('ignoreNonWorkingDays');
-
-    this.date = this.changeset.value('date');
+    super();
+  }
+  
+  ngOnInit():void {
+    this.dateModalRelations.setChangeset(this.changeset as WorkPackageChangeset);
+    this.dateModalScheduling.setChangeset(this.changeset as WorkPackageChangeset);
+    if (!moment(this.value).isValid()) {
+      this.value = '';
+      this.date = '';
+      return;
+    }
+    this.date = this.timezoneService.formattedISODate(this.value);
   }
 
   ngAfterViewInit():void {
-    this
-      .dateModalRelations
-      .getMinimalDateFromPreceeding()
-      .subscribe((date) => {
-        this.initializeDatepicker(date);
-        this.onDataChange();
-      });
+    if (isNewResource(this.changeset.pristineResource)) {
+      this.initializeDatepicker(null);
+    } else {
+      this
+        .dateModalRelations
+        .getMinimalDateFromPreceeding()
+        .subscribe((date) => {
+          this.initializeDatepicker(date);
+        });
+    }
 
     this
       .dateChangedManually$
@@ -205,21 +197,11 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
 
   changeNonWorkingDays():void {
     this.initializeDatepicker();
-
-    // If we're single date, update the date
-    if (!this.ignoreNonWorkingDays && this.date) {
-      // Resent the current start and end dates so duration can be calculated again.
-      this.dateUpdates$.next(this.date);
-    }
-
     this.cdRef.detectChanges();
   }
 
-  save($event:Event):void {
+  doSave($event:Event):void {
     $event.preventDefault();
-    // Apply the changed scheduling mode if any
-    this.changeset.setValue('scheduleManually', this.scheduleManually);
-
     // Apply include NWD
     this.changeset.setValue('ignoreNonWorkingDays', this.ignoreNonWorkingDays);
 
@@ -228,11 +210,11 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
       this.changeset.setValue('date', mappedDate(this.date));
     }
 
-    this.closeMe();
+    this.save.emit();
   }
 
-  cancel():void {
-    this.closeMe();
+  doCancel():void {
+    this.cancel.emit();
   }
 
   updateDate(val:string|null):void {
@@ -251,20 +233,6 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
     this.enforceManualChangesToDatepicker(today);
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  reposition(element:JQuery<HTMLElement>, target:JQuery<HTMLElement>):void {
-    if (this.deviceService.isMobile) {
-      return;
-    }
-
-    element.position({
-      my: 'left top',
-      at: 'left bottom',
-      of: target,
-      collision: 'flipfit',
-    });
-  }
-
   private initializeDatepicker(minimalDate?:Date|null) {
     this.datePickerInstance?.destroy();
     this.datePickerInstance = new DatePicker(
@@ -273,11 +241,10 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
       this.date || '',
       {
         mode: 'single',
-        showMonths: this.deviceService.isMobile ? 1 : 2,
+        showMonths: 1,
         inline: true,
-        onReady: (_date, _datestr, instance) => {
+        onReady: (_date:Date[], _datestr:string, instance:flatpickr.Instance) => {
           instance.calendarContainer.classList.add('op-datepicker-modal--flatpickr-instance');
-          this.reposition(jQuery(this.modalContainer.nativeElement), jQuery(`.${activeFieldContainerClassName}`));
         },
         onChange: (dates:Date[]) => {
           if (dates.length > 0) {
@@ -285,7 +252,6 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
             this.enforceManualChangesToDatepicker(dates[0]);
           }
 
-          this.onDataChange();
           this.cdRef.detectChanges();
         },
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -294,22 +260,21 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
             dayElem,
             this.ignoreNonWorkingDays,
             await this.datePickerInstance?.isNonWorkingDay(dayElem.dateObj),
-            minimalDate,
             this.isDayDisabled(dayElem, minimalDate),
           );
         },
       },
-      null,
+      this.flatpickrTarget.nativeElement,
     );
   }
 
   private enforceManualChangesToDatepicker(enforceDate?:Date) {
     const date = parseDate(this.date || '');
     setDates(date, this.datePickerInstance, enforceDate);
-  }
 
-  private onDataChange() {
-    this.onDataUpdated.emit(this.date || '');
+    if (date) {
+      this.date = this.timezoneService.formattedISODate(date);
+    }
   }
 
   /**

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/date-input/components/date-picker-adapter/date-picker-adapter.component.ts

@@ -1,81 +0,0 @@
-import {
-  AfterViewInit, ChangeDetectorRef, Component, forwardRef, NgZone,
-} from '@angular/core';
-import { OpSingleDatePickerComponent } from 'core-app/shared/components/op-date-picker/op-single-date-picker/op-single-date-picker.component';
-import * as moment from 'moment';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { TimezoneService } from 'core-app/core/datetime/timezone.service';
-import { ConfigurationService } from 'core-app/core/config/configuration.service';
-
-@Component({
-  selector: 'op-date-picker-adapter',
-  templateUrl: '../../../../../../op-date-picker/op-single-date-picker/op-single-date-picker.component.html',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DatePickerAdapterComponent),
-      multi: true,
-    },
-  ],
-})
-export class DatePickerAdapterComponent extends OpSingleDatePickerComponent implements AfterViewInit {
-  onControlChange = (_:any) => { };
-
-  onControlTouch = () => { };
-
-  writeValue(date:string):void {
-    this.initialDate = this.formatter(date);
-  }
-
-  registerOnChange(fn:(_:any) => void):void {
-    this.onControlChange = fn;
-  }
-
-  registerOnTouched(fn:any):void {
-    this.onControlTouch = fn;
-  }
-
-  setDisabledState(disabled:boolean):void {
-    this.disabled = disabled;
-  }
-
-  ngAfterViewInit():void {
-    this.ngZone.runOutsideAngular(() => {
-      setTimeout(() => {
-        this.initializeDatepicker();
-        this.changeDetectorRef.detectChanges();
-      });
-    });
-  }
-
-  onInputChange():void {
-    if (this.isEmpty()) {
-      this.datePickerInstance.clear();
-    } else if (this.inputIsValidDate()) {
-      const valueToEmit = this.parser(this.currentValue);
-      this.onControlTouch();
-      this.onControlChange(valueToEmit);
-    }
-  }
-
-  closeOnOutsideClick(event:any) {
-    super.closeOnOutsideClick(event);
-    this.onControlTouch();
-  }
-
-  public parser(data:any) {
-    if (moment(data, 'YYYY-MM-DD', true).isValid()) {
-      return data;
-    }
-    return null;
-  }
-
-  public formatter(data:any):string {
-    if (moment(data, 'YYYY-MM-DD', true).isValid()) {
-      const d = this.timezoneService.parseDate(data);
-
-      return this.timezoneService.formattedISODate(d);
-    }
-    return '';
-  }
-}

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/date-input/components/date-picker-control/date-picker-control.component.ts

@@ -1,91 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  forwardRef,
-  Input,
-} from '@angular/core';
-import * as moment from 'moment';
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
-import { OpSingleDatePickerComponent } from 'core-app/shared/components/op-date-picker/op-single-date-picker/op-single-date-picker.component';
-
-/* eslint-disable-next-line change-detection-strategy/on-push */
-@Component({
-  selector: 'op-date-picker-control',
-  templateUrl: '../../../../../../op-date-picker/op-single-date-picker/op-single-date-picker.component.html',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DatePickerControlComponent),
-      multi: true,
-    },
-  ],
-})
-export class DatePickerControlComponent extends OpSingleDatePickerComponent implements ControlValueAccessor, AfterViewInit {
-  // Avoid Angular warning (It looks like you're using the disabled attribute with a reactive form directive...)
-  /* eslint-disable-next-line @angular-eslint/no-input-rename */
-  @Input('disable') disabled:boolean;
-
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  onControlChange:(_?:unknown) => void = () => { };
-
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  onControlTouch:(_?:unknown) => void = () => { };
-
-  writeValue(date:string):void {
-    this.initialDate = this.formatter(date);
-  }
-
-  registerOnChange(fn:(_:unknown) => void):void {
-    this.onControlChange = fn;
-  }
-
-  registerOnTouched(fn:(_:unknown) => void):void {
-    this.onControlTouch = fn;
-  }
-
-  setDisabledState(disabled:boolean):void {
-    this.disabled = disabled;
-  }
-
-  ngAfterViewInit():void {
-    this.ngZone.runOutsideAngular(() => {
-      setTimeout(() => {
-        this.initializeDatepicker();
-        this.changeDetectorRef.detectChanges();
-      });
-    });
-  }
-
-  onInputChange():void {
-    const valueToEmit = this.inputIsValidDate()
-      ? this.parser(this.currentValue)
-      : '';
-
-    this.onControlChange(valueToEmit);
-    this.onControlTouch();
-  }
-
-  closeOnOutsideClick(event:MouseEvent):void {
-    super.closeOnOutsideClick(event);
-    this.onControlTouch();
-  }
-
-  public parser(data:string):string|null {
-    if (moment(data, 'YYYY-MM-DD', true).isValid()) {
-      return data;
-    }
-    return null;
-  }
-
-  public formatter(data:string):string {
-    if (moment(data, 'YYYY-MM-DD', true).isValid()) {
-      const d = this.timezoneService.parseDate(data);
-
-      return this.timezoneService.formattedISODate(d);
-    }
-    return '';
-  }
-}

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/date-input/components/date-picker-control/date-picker-control.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DatePickerModule } from 'core-app/shared/components/op-date-picker/date-picker.module';
-import { DatePickerControlComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/date-input/components/date-picker-control/date-picker-control.component';
-
-@NgModule({
-  declarations: [
-    DatePickerControlComponent,
-  ],
-  imports: [
-    CommonModule,
-    DatePickerModule,
-  ],
-  exports: [
-    DatePickerControlComponent,
-  ],
-})
-export class DatePickerControlModule { }

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/date-input/date-input.component.html

@@ -1,7 +1,6 @@
-<op-date-picker-control
+<op-single-date-picker
   [required]="to.required"
-  [disable]="to.disabled"
+  [disabled]="to.disabled"
   [formControl]="formControl"
   [formlyAttributes]="field"
->
-</op-date-picker-control>
+></op-single-date-picker>

frontend/src/app/shared/components/dynamic-forms/dynamic-forms.module.ts

@@ -9,7 +9,6 @@ import { IntegerInputComponent } from 'core-app/shared/components/dynamic-forms/
 import { SelectInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/select-input/select-input.component';
 import { ProjectInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/project-input/project-input.component';
 import { SelectProjectStatusInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/select-project-status-input/select-project-status-input.component';
-import { DatePickerControlModule } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/date-input/components/date-picker-control/date-picker-control.module';
 import { BooleanInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/boolean-input/boolean-input.component';
 import { DynamicFormComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-form/dynamic-form.component';
 import { FormattableTextareaInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/formattable-textarea-input/formattable-textarea-input.component';
@@ -18,15 +17,17 @@ import { InviteUserButtonModule } from 'core-app/features/invite-user-modal/butt
 import { DateInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/date-input/date-input.component';
 import { DynamicFieldGroupWrapperComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-field-group-wrapper/dynamic-field-group-wrapper.component';
 import { FormattableControlModule } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/formattable-textarea-input/components/formattable-control/formattable-control.module';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { UserInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/user-input/user-input.component';
 import { AttributeHelpTextModule } from 'core-app/shared/components/attribute-help-texts/attribute-help-text.module';
+import { OpSpotModule } from 'core-app/spot/spot.module';
 
 @NgModule({
   imports: [
     CommonModule,
     ReactiveFormsModule,
     AttributeHelpTextModule,
+    OpSpotModule,
     FormlyModule.forRoot({
       types: [
         { name: 'booleanInput', component: BooleanInputComponent },
@@ -50,13 +51,12 @@ import { AttributeHelpTextModule } from 'core-app/shared/components/attribute-he
         },
       ],
     }),
-    OPSharedModule,
+    OpSharedModule,
 
     // Input dependencies
     NgSelectModule,
     NgOptionHighlightModule,
     InviteUserButtonModule,
-    DatePickerControlModule,
     FormattableControlModule,
   ],
   declarations: [

frontend/src/app/shared/components/fields/edit/edit-field.initializer.ts

@@ -47,7 +47,7 @@ import { WorkPackageCommentFieldComponent } from 'core-app/features/work-package
 import { ProjectEditFieldComponent } from './field-types/project-edit-field.component';
 import { HoursDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/hours-duration-edit-field.component';
 import { UserEditFieldComponent } from './field-types/user-edit-field.component';
-import { DaysDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/days-duration-edit-field.compontent';
+import { DaysDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/days-duration-edit-field.component';
 
 export function initializeCoreEditFields(editFieldService:EditFieldService, selectAutocompleterRegisterService:SelectAutocompleterRegisterService) {
   return ():void => {

frontend/src/app/shared/components/fields/edit/edit-field.service.ts

@@ -34,6 +34,8 @@ export interface IEditFieldType extends IFieldType<EditFieldComponent> {
   new():EditFieldComponent;
 }
 
-@Injectable({ providedIn: 'root' })
+@Injectable({
+  providedIn: 'root',
+})
 export class EditFieldService extends AbstractFieldService<EditFieldComponent, IEditFieldType> {
 }

frontend/src/app/shared/components/fields/edit/field-controls/edit-field-controls.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { EditFieldControlsComponent } from 'core-app/shared/components/fields/edit/field-controls/edit-field-controls.component';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 
 @NgModule({
   declarations: [
@@ -9,7 +9,7 @@ import { OPSharedModule } from 'core-app/shared/shared.module';
   ],
   imports: [
     CommonModule,
-    OPSharedModule,
+    OpSharedModule,
   ],
   exports: [
     EditFieldControlsComponent,

frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.html

@@ -0,0 +1,32 @@
+<spot-drop-modal
+  [opened]="opened"
+  (closed)="cancel()"
+  alignment="bottom-center"
+>
+  <input
+    slot="trigger"
+    type="text"
+    class="spot-input"
+    (click)="onInputClick($event)"
+    [value]="dates"
+    (focus)="showDatePickerModal()"
+  />
+
+  <ng-container slot="body">
+    <op-wp-single-date-form
+      *ngIf="opened && !isMultiDate"
+      [value]="dates"
+      [changeset]="change"
+      (save)="save()"
+      (cancel)="cancel()"
+    ></op-wp-single-date-form>
+    <op-wp-multi-date-form
+      *ngIf="opened && isMultiDate"
+      [value]="dates"
+      [changeset]="change"
+      [fieldName]="name"
+      (save)="save()"
+      (cancel)="cancel()"
+    ></op-wp-multi-date-form>
+  </ng-container>
+</spot-drop-modal>

frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts

@@ -31,39 +31,45 @@ import { DatePickerEditFieldComponent } from 'core-app/shared/components/fields/
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 
 @Component({
-  template: `
-    <input [value]="dates"
-           (click)="showDatePickerModal()"
-           class="op-input"
-           type="text" />
-  `,
+  templateUrl: './combined-date-edit-field.component.html',
 })
 export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent {
   dates = '';
 
+  opened = false;
+
   text = {
     placeholder: {
       startDate: this.I18n.t('js.label_no_start_date'),
       dueDate: this.I18n.t('js.label_no_due_date'),
-      date: this.I18n.t('js.label_no_date'),
     },
   };
 
+  get isMultiDate():boolean {
+    return !this.change.schema.isMilestone;
+  }
+
+  public onInputClick(event:MouseEvent) {
+    event.stopPropagation();
+  }
+
   public showDatePickerModal():void {
-    super.showDatePickerModal();
-
-    this
-      .modal
-      ?.onDataUpdated
-      .subscribe((dates:string) => {
-        this.dates = dates;
-        this.cdRef.detectChanges();
-      });
+    this.opened = true;
   }
 
-  protected onModalClosed():void {
+  public onModalClosed():void {
+    this.opened = false;
     this.resetDates();
-    super.onModalClosed();
+  }
+
+  public save():void {
+    this.handler.handleUserSubmit();
+    this.onModalClosed();
+  }
+
+  public cancel():void {
+    this.handler.reset();
+    this.onModalClosed();
   }
 
   // Overwrite super in order to set the initial dates.
@@ -97,6 +103,6 @@ export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent
 
   protected current(dateAttribute:'startDate' | 'dueDate' | 'date'):string {
     const value = (this.resource && (this.resource as WorkPackageResource)[dateAttribute]) as string|null;
-    return (value || this.text.placeholder[dateAttribute]);
+    return (value || '');
   }
 }

frontend/src/app/shared/components/fields/edit/field-types/date-edit-field/date-edit-field.component.ts

@@ -26,44 +26,36 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import * as moment from 'moment';
 import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-field.component';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
-import { OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 
 @Component({
   template: `
     <op-single-date-picker
-        tabindex="-1"
-        (changed)="onValueSelected($event)"
-        (canceled)="onCancel()"
-        (blurred)="submit($event)"
-        (enterPressed)="submit($event)"
-        [initialDate]="formatter(value)"
-        [required]="required"
-        [disabled]="inFlight"
-        [id]="handler.htmlId"
-        classes="inline-edit--field">
-    </op-single-date-picker>
+      [(ngModel)]="value"
+      [id]="handler.htmlId"
+      class="inline-edit--field"
+      [opAutofocus]
+    ></op-single-date-picker>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateEditFieldComponent extends EditFieldComponent implements OnInit {
   @InjectField() readonly timezoneService:TimezoneService;
 
-  @InjectField() opModalService:OpModalService;
-
   ngOnInit():void {
     super.ngOnInit();
   }
 
-  public onValueSelected(data:string):void {
-    this.value = this.parser(data);
+  public get value() {
+    return this.formatter(this.resource[this.name]) || '';
   }
 
-  public submit(data:string):void {
-    this.onValueSelected(data);
+  public set value(value:any) {
+    this.resource[this.name] = this.parseValue(value);
     void this.handler.handleUserSubmit();
   }
 
@@ -71,13 +63,6 @@ export class DateEditFieldComponent extends EditFieldComponent implements OnInit
     this.handler.handleUserCancel();
   }
 
-  public parser(data:string):string|null {
-    if (moment(data, 'YYYY-MM-DD', true).isValid()) {
-      return data;
-    }
-    return null;
-  }
-
   public formatter(data:string):string|null {
     if (moment(data, 'YYYY-MM-DD', true).isValid()) {
       const d = this.timezoneService.parseDate(data);

frontend/src/app/shared/components/fields/edit/field-types/date-edit-field/date-edit-field.module.ts

@@ -1,16 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DateEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/date-edit-field/date-edit-field.component';
-import { DatePickerModule } from 'core-app/shared/components/op-date-picker/date-picker.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 
 @NgModule({
-  declarations: [
-    DateEditFieldComponent,
-  ],
   imports: [
     CommonModule,
-    DatePickerModule,
-
+    OpSharedModule,
+  ],
+  declarations: [
+    DateEditFieldComponent,
   ],
   exports: [
     DateEditFieldComponent,

frontend/src/app/shared/components/fields/edit/field-types/date-picker-edit-field.component.ts

@@ -30,26 +30,20 @@ import {
   Directive,
   OnDestroy,
   OnInit,
+  Injector,
 } from '@angular/core';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
-import { OpModalService } from 'core-app/shared/components/modal/modal.service';
-import { take } from 'rxjs/operators';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-field.component';
-import { SingleDateModalComponent } from 'core-app/shared/components/datepicker/single-date-modal/single-date.modal';
-import { MultiDateModalComponent } from 'core-app/shared/components/datepicker/multi-date-modal/multi-date.modal';
-import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
 import { DeviceService } from 'core-app/core/browser/device.service';
 
 @Directive()
 export abstract class DatePickerEditFieldComponent extends EditFieldComponent implements OnInit, OnDestroy {
   @InjectField() readonly timezoneService:TimezoneService;
 
-  @InjectField() opModalService:OpModalService;
-
   @InjectField() deviceService:DeviceService;
 
-  protected modal:SingleDateModalComponent|MultiDateModalComponent|null = null;
+  @InjectField() injector:Injector;
 
   ngOnInit():void {
     super.ngOnInit();
@@ -66,36 +60,7 @@ export abstract class DatePickerEditFieldComponent extends EditFieldComponent im
 
   ngOnDestroy():void {
     super.ngOnDestroy();
-    this.modal?.closeMe();
   }
 
-  public showDatePickerModal():void {
-    const component = this.change.schema.isMilestone ? SingleDateModalComponent : MultiDateModalComponent;
-    this.opModalService.show<SingleDateModalComponent|MultiDateModalComponent>(
-      component,
-      this.injector,
-      { changeset: this.change, fieldName: this.name },
-      !this.deviceService.isMobile,
-    ).subscribe((modal) => {
-      this.modal = modal;
-
-      setTimeout(() => {
-        const modalElement = jQuery(modal.elementRef.nativeElement).find('.op-datepicker-modal');
-        const field = jQuery(this.elementRef.nativeElement);
-        modal.reposition(modalElement, field);
-      });
-
-      (modal as OpModalComponent)
-        .closingEvent
-        .pipe(take(1))
-        .subscribe(() => {
-          this.modal = null;
-          this.onModalClosed();
-        });
-    });
-  }
-
-  protected onModalClosed():void {
-    void this.handler.handleUserSubmit();
-  }
+  public showDatePickerModal():void { }
 }

frontend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.html

@@ -0,0 +1,24 @@
+<spot-drop-modal
+  [opened]="opened"
+  (closed)="cancel()"
+  alignment="bottom-center"
+>
+  <input
+    type="number"
+    slot="trigger"
+    class="inline-edit--field op-input"
+    [ngModel]="formattedValue"
+    (click)="onInputClick($event)"
+    (focus)="opened = true"
+    disabled="disabled"
+    [id]="handler.htmlId"
+  />
+  
+  <op-wp-multi-date-form
+    [changeset]="change"
+    [fieldName]="name"
+    (save)="save()"
+    (cancel)="cancel()"
+    slot="body"
+  ></op-wp-multi-date-form>
+</spot-drop-modal>

frontend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.ts

@@ -33,17 +33,35 @@ import {
 import { DatePickerEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/date-picker-edit-field.component';
 
 @Component({
-  template: `
-    <input type="number"
-           class="inline-edit--field op-input"
-           [ngModel]="formattedValue"
-           disabled="disabled"
-           [id]="handler.htmlId" />
-  `,
+  templateUrl: './days-duration-edit-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaysDurationEditFieldComponent extends DatePickerEditFieldComponent {
+  opened = false;
+
   public get formattedValue():number {
     return Number(moment.duration(this.value).asDays().toFixed(0));
   }
+
+  ngOnInit():void {
+    super.ngOnInit();
+  }
+
+  onInputClick(event:MouseEvent) {
+    event.stopPropagation();
+  }
+
+  showDatePickerModal() {
+    this.opened = true;
+  }
+
+  save() {
+    this.handler.handleUserSubmit();
+    this.opened = false;
+  }
+
+  cancel():void {
+    this.handler.reset();
+    this.opened = false;
+  }
 }

frontend/src/app/shared/components/fields/edit/field-types/text-edit-field.component.html

@@ -1,10 +1,12 @@
-<input type="text"
-       class="inline-edit--field op-input"
-       [opAutofocus]="shouldFocus"
-       [attr.aria-required]="required"
-       [attr.required]="required"
-       [disabled]="inFlight"
-       [(ngModel)]="value"
-       (keydown)="handler.handleUserKeydown($event)"
-       (focusout)="handler.onFocusOut()"
-       [id]="handler.htmlId" />
+<input
+  type="text"
+  class="inline-edit--field op-input some-class"
+  [opAutofocus]="shouldFocus"
+  [attr.aria-required]="required"
+  [attr.required]="required"
+  [disabled]="inFlight"
+  [(ngModel)]="value"
+  (keydown)="handler.handleUserKeydown($event)"
+  (focusout)="handler.onFocusOut()"
+  [id]="handler.htmlId"
+/>

frontend/src/app/shared/components/fields/edit/field/editable-attribute-field.component.html

@@ -1,18 +1,22 @@
-<div [ngClass]="[
-      editFieldContainerClass,
-      fieldName,
-      active && '-active' || '',
-      wrapperClasses || '-small'
-     ]"
-     (dragover)="startDragActivation($event)">
+<div
+  [ngClass]="[
+    editFieldContainerClass,
+    fieldName,
+    active && '-active' || '',
+    wrapperClasses || '-small'
+  ]"
+  (dragover)="startDragActivation($event)"
+>
+  <div
+    #editContainer
+    [hidden]="!active"
+  ></div>
 
-  <div #editContainer
-       [hidden]="!active">
-  </div>
-
-  <div (click)="activateIfEditable($event)"
-       (keydown.enter)="activateIfEditable($event)"
-       [hidden]="active"
-       tabindex="-1"
-       #displayContainer></div>
+  <div
+    (click)="activateIfEditable($event)"
+    (keydown.enter)="activateIfEditable($event)"
+    [hidden]="active"
+    tabindex="-1"
+    #displayContainer
+  ></div>
 </div>

frontend/src/app/shared/components/fields/edit/field/editable-attribute-field.component.ts

@@ -87,7 +87,8 @@ export class EditableAttributeFieldComponent extends UntilDestroyedMixin impleme
 
   public destroyed = false;
 
-  constructor(protected states:States,
+  constructor(
+    protected states:States,
     protected injector:Injector,
     protected elementRef:ElementRef,
     protected opContextMenu:OPContextMenuService,
@@ -96,7 +97,8 @@ export class EditableAttributeFieldComponent extends UntilDestroyedMixin impleme
     // Get parent field group from injector if we're in a form
     @Optional() protected editForm:EditFormComponent,
     protected cdRef:ChangeDetectorRef,
-    protected I18n:I18nService) {
+    protected I18n:I18nService,
+  ) {
     super();
   }
 

frontend/src/app/shared/components/fields/openproject-fields.module.ts

@@ -31,7 +31,8 @@ import { CommonModule } from '@angular/common';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { OpenprojectEditorModule } from 'core-app/shared/components/editor/openproject-editor.module';
 import { OpenprojectAttachmentsModule } from 'core-app/shared/components/attachments/openproject-attachments.module';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
+import { OpSpotModule } from 'core-app/spot/spot.module';
 import { AttributeHelpTextModule } from 'core-app/shared/components/attribute-help-texts/attribute-help-text.module';
 import { EditFieldService } from 'core-app/shared/components/fields/edit/edit-field.service';
 import { DisplayFieldService } from 'core-app/shared/components/fields/display/display-field.service';
@@ -62,12 +63,14 @@ import { EditFieldControlsModule } from 'core-app/shared/components/fields/edit/
 import { ProjectEditFieldComponent } from './edit/field-types/project-edit-field.component';
 import { HoursDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/hours-duration-edit-field.component';
 import { UserEditFieldComponent } from './edit/field-types/user-edit-field.component';
-import { DaysDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/days-duration-edit-field.compontent';
+import { DaysDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/days-duration-edit-field.component';
+import { CombinedDateEditFieldComponent } from './edit/field-types/combined-date-edit-field.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    OPSharedModule,
+    OpSharedModule,
+    OpSpotModule,
     OpenprojectAttachmentsModule,
     OpenprojectEditorModule,
     OpenprojectModalModule,
@@ -108,6 +111,7 @@ import { DaysDurationEditFieldComponent } from 'core-app/shared/components/field
     FloatEditFieldComponent,
     PlainFormattableEditFieldComponent,
     MultiSelectEditFieldComponent,
+    CombinedDateEditFieldComponent,
     ProjectEditFieldComponent,
     UserEditFieldComponent,
     WorkPackageEditFieldComponent,

frontend/src/app/shared/components/grids/openproject-grids.module.ts

@@ -29,7 +29,7 @@
 import { Injector, NgModule } from '@angular/core';
 import { DynamicModule } from 'ng-dynamic-component';
 import { HookService } from 'core-app/features/plugins/hook-service';
-import { OPSharedModule } from 'core-app/shared/shared.module';
+import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { OpenprojectCalendarModule } from 'core-app/features/calendar/openproject-calendar.module';
 import { FormsModule } from '@angular/forms';
@@ -73,7 +73,7 @@ import { TimeEntriesCurrentUserConfigurationModalComponent } from './widgets/tim
     FormsModule,
     DragDropModule,
 
-    OPSharedModule,
+    OpSharedModule,
     OpenprojectModalModule,
     OpenprojectWorkPackagesModule,
     OpenprojectWorkPackageGraphsModule,

frontend/src/app/shared/components/grids/widgets/project-details/project-details.component.html

@@ -19,9 +19,10 @@
                                [attributeScope]="'Project'"></attribute-help-text>
         </div>
         <div class="attributes-map--value">
-          <op-editable-attribute-field [resource]="project"
-                                    [fieldName]="cf.key">
-          </op-editable-attribute-field>
+          <op-editable-attribute-field
+            [resource]="project"
+            [fieldName]="cf.key"
+          ></op-editable-attribute-field>
         </div>
       </ng-container>
     </div>

frontend/src/app/shared/components/header-project-select/header-project-select.component.html

@@ -1,5 +1,6 @@
 <spot-drop-modal
-  [open]="dropModalOpen"
+  [opened]="dropModalOpen"
+  [allowRepositioning]="false"
   (closed)="close()"
   alignment="bottom-left"
   class="op-project-list-modal"

frontend/src/app/shared/components/modal/modal.module.ts

@@ -4,7 +4,6 @@ import { PortalModule } from '@angular/cdk/portal';
 import { A11yModule } from '@angular/cdk/a11y';
 import { FocusModule } from 'core-app/shared/directives/focus/focus.module';
 import { IconModule } from 'core-app/shared/components/icon/icon.module';
-import { OpModalService } from './modal.service';
 import { OpModalWrapperAugmentService } from './modal-wrapper-augment.service';
 import { OpModalBannerComponent } from 'core-app/shared/components/modal/modal-banner/modal-banner.component';
 import { OpModalOverlayComponent } from 'core-app/shared/components/modal/modal-overlay.component';

frontend/src/app/shared/components/op-date-picker/date-picker.directive.ts

@@ -1,127 +0,0 @@
-// -- copyright
-// OpenProject is an open source project management software.
-// Copyright (C) 2012-2023 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 {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  Injector,
-  Input,
-  NgZone,
-  OnDestroy,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
-import { TimezoneService } from 'core-app/core/datetime/timezone.service';
-import { DatePicker } from 'core-app/shared/components/op-date-picker/datepicker';
-import { ConfigurationService } from 'core-app/core/config/configuration.service';
-
-@Directive()
-export abstract class AbstractDatePickerDirective extends UntilDestroyedMixin implements OnDestroy, AfterViewInit {
-  @Output() public canceled = new EventEmitter<string>();
-
-  @Input() public appendTo?:HTMLElement;
-
-  @Input() public classes = '';
-
-  @Input() public id = '';
-
-  @Input() public name = '';
-
-  @Input() public required = false;
-
-  @Input() public size = 20;
-
-  @Input() public disabled = false;
-
-  @ViewChild('dateInput') dateInput:ElementRef;
-
-  protected datePickerInstance:DatePicker;
-
-  public constructor(
-    readonly injector:Injector,
-    protected timezoneService:TimezoneService,
-    protected configurationService:ConfigurationService,
-    protected ngZone:NgZone,
-    protected changeDetectorRef:ChangeDetectorRef,
-  ) {
-    super();
-
-    if (!this.id) {
-      this.id = `datepicker-input-${Math.floor(Math.random() * 1000).toString(3)}`;
-    }
-  }
-
-  ngAfterViewInit():void {
-    this.initializeDatepicker();
-  }
-
-  ngOnDestroy():void {
-    if (this.datePickerInstance) {
-      this.datePickerInstance.destroy();
-    }
-  }
-
-  openOnClick():void {
-    if (!this.disabled) {
-      this.datePickerInstance.show();
-    }
-  }
-
-  closeOnOutsideClick(event:MouseEvent):void {
-    if (this.isOutsideClick(event)) {
-      this.close();
-    }
-  }
-
-  isOutsideClick(event:MouseEvent):boolean {
-    return (!(event.relatedTarget
-      && this.datePickerInstance.datepickerInstance.calendarContainer.contains(event.relatedTarget as HTMLElement)));
-  }
-
-  close():void {
-    this.datePickerInstance.hide();
-  }
-
-  protected isEmpty():boolean {
-    return this.currentValue.trim() === '';
-  }
-
-  protected get currentValue():string {
-    return this.inputElement?.value || '';
-  }
-
-  protected get inputElement():HTMLInputElement {
-    return this.dateInput.nativeElement as HTMLInputElement;
-  }
-
-  protected abstract initializeDatepicker():void;
-}

frontend/src/app/shared/components/op-date-picker/date-picker.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OpRangeDatePickerComponent } from 'core-app/shared/components/op-date-picker/op-range-date-picker/op-range-date-picker.component';
-import { OpSingleDatePickerComponent } from 'core-app/shared/components/op-date-picker/op-single-date-picker/op-single-date-picker.component';
-
-@NgModule({
-  declarations: [
-    OpSingleDatePickerComponent,
-    OpRangeDatePickerComponent,
-  ],
-  imports: [
-    CommonModule,
-  ],
-  exports: [
-    OpSingleDatePickerComponent,
-    OpRangeDatePickerComponent,
-  ],
-})
-export class DatePickerModule { }

frontend/src/app/shared/components/op-date-picker/op-range-date-picker/op-range-date-picker.component.html

@@ -1,15 +0,0 @@
-<input
-  #dateInput
-  [id]="id"
-  [name]="name"
-  [value]="initialValue"
-  [ngClass]="classes + ' op-input'"
-  [size]="size"
-  [required]="required"
-  [disabled]="disabled"
-  (click)="openOnClick()"
-  (keydown.escape)="close()"
-  (keydown)="onKeyDown()"
-  (blur)="closeOnOutsideClick($event)"
-  type="text"
->

frontend/src/app/shared/components/op-date-picker/op-range-date-picker/op-range-date-picker.component.ts

@@ -1,84 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  Output,
-} from '@angular/core';
-import { Instance } from 'flatpickr/dist/types/instance';
-import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum';
-import { DatePicker } from 'core-app/shared/components/op-date-picker/datepicker';
-import { AbstractDatePickerDirective } from 'core-app/shared/components/op-date-picker/date-picker.directive';
-import { DebouncedEventEmitter } from 'core-app/shared/helpers/rxjs/debounced-event-emitter';
-import { componentDestroyed } from '@w11k/ngx-componentdestroyed';
-
-export const rangeSeparator = '-';
-
-@Component({
-  selector: 'op-range-date-picker',
-  templateUrl: './op-range-date-picker.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class OpRangeDatePickerComponent extends AbstractDatePickerDirective {
-  @Output() public changed = new DebouncedEventEmitter<string[]>(componentDestroyed(this));
-
-  @Input() public initialDates:string[] = [];
-
-  initialValue = '';
-
-  protected initializeDatepicker():void {
-    this.initialDates = this.initialDates || [];
-    this.initialValue = this.resolveDateArrayToString(this.initialDates);
-
-    const options = {
-      allowInput: true,
-      appendTo: this.appendTo,
-      mode: 'range' as const,
-      onChange: (selectedDates:Date[], dateStr:string) => {
-        if (this.isEmpty()) {
-          return;
-        }
-
-        this.inputElement.value = dateStr;
-        if (selectedDates.length === 2) {
-          this.changed.emit(this.resolveDateStringToArray(dateStr));
-        }
-      },
-      onKeyDown: (selectedDates:Date[], dateStr:string, instance:Instance, data:KeyboardEvent) => {
-        if (data.which === KeyCodes.ESCAPE) {
-          this.canceled.emit();
-        }
-      },
-    };
-
-    let initialValue;
-    if (this.isEmpty() && this.initialDates.length > 0) {
-      initialValue = this.initialDates.map((date) => this.timezoneService.parseISODate(date).toDate());
-    } else {
-      initialValue = this.resolveDateStringToArray(this.currentValue);
-    }
-
-    this.datePickerInstance = new DatePicker(
-      this.injector,
-      `#${this.id}`,
-      initialValue,
-      options,
-      null,
-    );
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  onKeyDown():boolean {
-    // Disable any manual user input as it most likely return in a wrong format
-    return false;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  private resolveDateStringToArray(dates:string):string[] {
-    return dates.split(` ${rangeSeparator} `).map((date) => date.trim());
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  private resolveDateArrayToString(dates:string[]):string {
-    return dates.join(` ${rangeSeparator} `);
-  }
-}