@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/access/read-write-access.component.ts

@@ -0,0 +1,103 @@
+import {Component, EventEmitter, HostBinding, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {BaseFormWrapperComponent} from '@colijn/base/core/component/abstract/base-form-wrapper.component';
+import {FormMasterService} from '@colijn/base/core/service/component/form-master.service';
+import {InputBoolean} from '@colijn/base/core/decorator/input-boolean.decorator';
+import {ShadowBoxType} from '@colijn/base/core/enum/bottom-overflow-shadow-type.enum';
+import {ReadWriteAccessConfigNames} from '@colijn/base/core/enum/read-write-access-config-names.enum';
+import {UserGroup} from "../../businessobject/user-group.bo";
+
+@Component({
+    selector: "co-read-write-access",
+    template: `
+        <div class="read-write-wrapper">
+         <div class="read-write-wrapper-grid" [ngClass]="{'horizontal-layout-column' : layoutHorizontal}">
+            <div class="select-container" *ngIf="showReadWriteUserGroup">
+                <h4 localize="ACCESSRIGHTS_READ_WRITE"></h4>
+                <user-group-multi-select [cfgName]="readWriteCfgNames?.readWriteAccessReadWriteUserGroup"
+                                         [selectedModelIds]="userGroupsForWrite"
+                                         (selectedModelIdsChange)="changeSelectedWrite($event)"
+                                         [overFlowShadowBoxType]="shadowBoxTypes.InputLovMultiSelect"
+                                         [readonly]="readonly"
+                                         bottomOverFlowShadow>
+                </user-group-multi-select>
+            </div>
+
+            <div class="select-container right" *ngIf="showReadUserGroup">
+                <h4 localize="ACCESSRIGHTS_READ"></h4>
+                <user-group-multi-select [cfgName]="readWriteCfgNames?.readWriteAccessReadUserGroup"
+                                         [selectedModelIds]="userGroupsForRead"
+                                         (selectedModelIdsChange)="changeSelectedRead($event)"
+                                         [overFlowShadowBoxType]="shadowBoxTypes.InputLovMultiSelect"
+                                         [readonly]="readonly"
+                                         bottomOverFlowShadow></user-group-multi-select>
+            </div>
+         </div>
+        </div>
+    `,
+    providers: [
+        FormMasterService
+    ],
+    encapsulation: ViewEncapsulation.None
+})
+export class ReadWriteAccessComponent extends BaseFormWrapperComponent implements OnInit {
+    public readonly shadowBoxTypes: typeof ShadowBoxType = ShadowBoxType;
+
+    @HostBinding('co-read-write-access')
+    public showClass() {
+      return true;
+    }
+
+    @Input()
+    public readWriteCfgNames: ReadWriteAccessConfigNames;
+
+    @Input()
+    public userGroupsForWrite: number[] = [];
+
+    @Input()
+    public userGroupsForRead: number[] = [];
+
+    @Input()
+    @InputBoolean()
+    public layoutHorizontal: boolean = false;
+
+    @Input()
+    @InputBoolean()
+    public readonly: boolean = false;
+
+    @Output()
+    public userGroupsForWriteChange: EventEmitter<number[]> = new EventEmitter<number[]>();
+
+    @Output()
+    public userGroupsForReadChange: EventEmitter<number[]> = new EventEmitter<number[]>();
+
+    public showReadUserGroup: boolean = true;
+    public showReadWriteUserGroup: boolean = true;
+
+    public userGroupCollection: UserGroup[];
+    public medicalUserGroupCollection: UserGroup[];
+    constructor() {
+        super();
+    }
+
+    ngOnInit(): void {
+        if (this.readWriteCfgNames) {
+            // if (!this._configService.immediatelyVisible(this.readWriteCfgNames.readWriteAccessReadUserGroup)) {
+            //     this.showReadUserGroup = false;
+            // }
+            // if (!this._configService.immediatelyVisible(this.readWriteCfgNames.readWriteAccessReadWriteUserGroup)) {
+            //     this.showReadWriteUserGroup = false;
+            // }
+        }
+
+    }
+
+    public changeSelectedWrite(ids: number[]): void {
+        this.userGroupsForWrite = ids;
+        this.userGroupsForWriteChange.next(this.userGroupsForWrite);
+    }
+
+    public changeSelectedRead(ids: number[]): void {
+        this.userGroupsForRead = ids;
+        this.userGroupsForReadChange.next(this.userGroupsForRead);
+    }
+}

package/projects/sharedcomponents/src/lib/components/access/read-write-access.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from "@angular/core";
+import {ReadWriteAccessComponent} from "./read-write-access.component";
+
+@NgModule({
+  imports: [
+  ],
+  declarations: [
+    ReadWriteAccessComponent,
+  ],
+  exports: [
+    ReadWriteAccessComponent
+  ]
+})
+export class ReadWriteAccessModule {
+}

package/projects/sharedcomponents/src/lib/components/activity-list/activity-list.component.ts

@@ -0,0 +1,225 @@
+import {
+  Component, forwardRef,
+  HostBinding,
+  Input,
+  OnInit,
+  ViewEncapsulation
+} from '@angular/core';
+import {Icon} from "../../enum/icon.enum";
+import {RelationKind} from "@colijnit/articleapi/build/enum/relation-kind.enum";
+import {Activity} from "@colijnit/mainapi/build/model/activity.bo";
+import {ActivityType} from "@colijnit/mainapi/build/enum/activity-type";
+import {IconCacheService} from "../../service/icon-cache.service";
+import {ALL_MONTHS} from "../../model/constant/all-months";
+import {TimeUtils} from "@colijnit/mainapi/build/utils/time-utils";
+import {RelationSmallObject} from "@colijnit/mainapi/build/model/relation-small-object.bo";
+import {CoDocument} from "@colijnit/mainapi/build/model/co-document.bo";
+import {SharedComponentsDictionaryService} from '../../translation/shared-components-dictionary.service';
+import {
+  SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+  ScreenConfigAdapterComponent
+} from "@colijnit/corecomponents_v12";
+
+@Component({
+  selector: "co-activity-list",
+  template: `
+    <div class="activity-list-wrapper">
+      <div class="activity-wrapper" [class.customer-reply-wrapper]="(getRelationKind(activity.author) === RelationKind.Customer)" *ngFor="let activity of activities" >
+        <div class="activity-display" [class.private-remark]="activity.remark?.author?.relationType === 'P'">
+          <div class="activity-display-title">
+            <span>{{activity.author && (activity.author.initials || activity.author.familyName) ? (activity.author.initials || '') + ' ' + (activity.author.familyName || '') : ''}}</span>
+            <span>{{getDateString(activity.lastActionDateTime)}}</span>
+          </div>
+          <div class="activity-display-content" [class.customer-reply-content]="(getRelationKind(activity.author) === RelationKind.Customer)">
+            <div class="activity-display-body">
+              <div class="activity-icon" [ngStyle]="{'background-color': getColorForActivity(activity)}">
+                <co-icon [iconData]="iconCacheService.getIcon(getActivityIcon(activity))"></co-icon>
+              </div>
+
+              <span *ngIf="activity.activityType !== ActivityType.StateChange">{{activity.subDescription}}</span>
+              <span *ngIf="activity.activityType === ActivityType.StateChange">{{activity.activityTitle}}</span>
+            </div>
+            <div class="activity-display-footer" [class.extra-height]="showTriggers(activity) || showAttachments(activity) || showWorkedTime(activity)">
+              <div class="activity-fired-triggers" *ngIf="showTriggers(activity)" >
+                <div class="activity-fired-trigger" *ngFor="let triggerName of activity.stateChange?.firedTriggerNames">
+                  <span>{{triggerName}}</span>
+                </div>
+              </div>
+              <div class="icon-indicators">
+                <co-icon *ngIf="showAttachments(activity)" [iconData]="iconCacheService.getIcon(Icon.PaperclipRegular)" (click)="openActivityPopup(activity)"></co-icon>
+                <co-icon *ngIf="showEmailHistory(activity)" [iconData]="iconCacheService.getIcon(Icon.EmailRegular)"></co-icon>
+                <span *ngIf="showAttachments(activity)">{{activity.documents.length}}</span>
+                <co-icon *ngIf="showWorkedTime(activity)"
+                         [iconData]="iconCacheService.getIcon(Icon.ClockRegular)"></co-icon>
+                <span *ngIf="showWorkedTime(activity)" >
+                       {{TimeUtils.ConvertToDuration(getWorkedTime(activity))}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <co-dialog *ngIf="showActivityPopup" (closeClick)="showActivityPopup = false">
+      <co-files-upload [canAdd]="false"  [documents]="currentActivityDocuments">
+      </co-files-upload>
+    </co-dialog>
+  `,
+  providers: [
+    {
+      provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+      useExisting: forwardRef(() => ActivityListComponent)
+    }
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class ActivityListComponent implements OnInit, ScreenConfigAdapterComponent {
+  public readonly Icon = Icon;
+  public readonly RelationKind = RelationKind;
+  public readonly ActivityType = ActivityType;
+  public readonly TimeUtils = TimeUtils;
+
+  @HostBinding("class.co-activity-list")
+  public showClass(): boolean {
+    return true;
+  }
+
+  @Input()
+  public set activities(value: Activity[]) {
+    if (value && value.length > 0) {
+      value.sort((a: Activity, b: Activity) => a.lastActionDateTime < b.lastActionDateTime ? 1: -1);
+    }
+    this._activities = value;
+  }
+
+  public get activities(): Activity[] {
+    return this._activities;
+  }
+
+  @Input()
+  public remarkIcon: Icon = Icon.CommentRegular;
+
+  @Input()
+  public workIcon: Icon = Icon.PersonDiggingRegular;
+
+  @Input()
+  public statusIcon: Icon = Icon.DiagramProjectRegular;
+
+  @Input()
+  public taskIcon: Icon = Icon.Task;
+
+  public objectConfigName: string;
+  @HostBinding('class.co-shared-hidden')
+  public hidden: boolean;
+  public required: boolean;
+  public forceReadonly: boolean;
+  public readonly: boolean;
+  public maxLength: number;
+  public decimals: number;
+  public redErrorBackground: boolean;
+
+  public showActivityPopup: Boolean;
+  public currentActivityDocuments: CoDocument[];
+
+  private _activities: Activity[]
+  private activityColorMap: Map<Activity, string> = new Map();
+
+  constructor(public iconCacheService: IconCacheService,
+              private _dictionaryService: SharedComponentsDictionaryService
+  ) {
+  }
+
+  public async ngOnInit(): Promise<void> {
+  }
+
+  public getRelationKind(author: RelationSmallObject): RelationKind {
+    if (author) {
+      return author.relationType;
+    } else {
+      return null
+    }
+  }
+
+  public getDateString(date: Date): string {
+    const day = date.getDate();
+    const month = this._dictionaryService.get(ALL_MONTHS[date.getMonth()]);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${day} ${month} ${hours}:${minutes}`;
+  }
+
+  public getActivityIcon(activity: Activity): Icon {
+    switch (activity.activityType) {
+      case ActivityType.Remark:
+        return this.remarkIcon;
+      case ActivityType.WorkflowStatus:
+      case ActivityType.Work:
+      case ActivityType.WorkflowTask:
+      case ActivityType.Form:
+        return this.workIcon;
+      case ActivityType.StateChange:
+        return this.statusIcon;
+      case ActivityType.Task:
+        return this.taskIcon;
+    }
+  }
+
+  public showTriggers(activity: Activity): boolean {
+    if (activity.activityType === ActivityType.StateChange && activity.stateChange.firedTriggerNames &&
+                  activity.stateChange.firedTriggerNames.length > 0) {
+      return true
+    }
+    return false;
+  }
+
+  public showAttachments(activity: Activity): boolean {
+    if (activity.documents && activity.documents.length > 0) {
+      return true
+    }
+    return false;
+  }
+
+  public showEmailHistory(activity: Activity): boolean {
+    if ((activity.remark && activity.remark.emailHistory && activity.remark.emailHistory.length > 0) ||
+        (activity.work && activity.work.emailHistory && activity.work.emailHistory.length > 0) ||
+        (activity.task && activity.task.emailHistory && activity.task.emailHistory.length > 0)) {
+      return true
+    }
+    return false;
+  }
+
+  public showWorkedTime(activity: Activity): boolean {
+    if ((activity.IsWork && activity.work && activity.work.workedTime) ||
+      (activity.IsTask && activity.task && activity.task.workedTime)) {
+      return true;
+    }
+    return false;
+  }
+
+  public getWorkedTime(activity: Activity): number {
+    if (activity.IsWork && activity.work && activity.work.workedTime) {
+      return activity.work.workedTime;
+    } else if (activity.IsTask && activity.task && activity.task.workedTime) {
+      return activity.task.workedTime;
+    }
+    return 0;
+  }
+
+  public openActivityPopup(activity: Activity): void {
+    this.showActivityPopup = true;
+    this.currentActivityDocuments = activity.documents;
+  }
+
+  public getRandomColor(): string {
+    const r = Math.floor(180 + Math.random() * 75); // 180–255
+    const g = Math.floor(180 + Math.random() * 75);
+    const b = Math.floor(180 + Math.random() * 75);
+    return `rgb(${r},${g},${b})`;
+  }
+
+  public getColorForActivity(activity: Activity): string {
+    if (!this.activityColorMap.has(activity)) {
+      this.activityColorMap.set(activity, this.getRandomColor());
+    }
+    return this.activityColorMap.get(activity);
+  }
+}

package/projects/sharedcomponents/src/lib/components/activity-list/activity-list.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from "@angular/core";
+import {ActivityListComponent} from "./activity-list.component";
+import {CoDialogModule, IconModule} from "@colijnit/corecomponents_v12";
+import {CommonModule} from "@angular/common";
+import {FilesUploadModule} from "../files-upload/files-upload.module";
+
+@NgModule({
+  imports: [
+    IconModule,
+    CommonModule,
+    CoDialogModule,
+    FilesUploadModule
+  ],
+  declarations: [
+    ActivityListComponent
+  ],
+  exports: [
+    ActivityListComponent
+  ]
+})
+export class ActivityListModule {
+}

package/projects/sharedcomponents/src/lib/components/activity-list-header/activity-list-header.component.ts

@@ -0,0 +1,78 @@
+import {Component, EventEmitter, HostBinding, Input, Output} from "@angular/core";
+import {Icon} from "../../enum/icon.enum";
+import {ActivitySortType} from "@colijnit/mainapi/build/enum/activity-sort-type.enum";
+import {IconCacheService} from "../../service/icon-cache.service";
+import {OperationCallbackFunctionWithValidation} from "../../interface/operation-callback-function-with-validation";
+
+@Component({
+    selector: "co-activity-list-header",
+    template: `
+        <div class="header-wrapper">
+            <div class="title">
+                <h2 [textContent]="title | sharedLocalize"></h2>
+            </div>
+        </div>
+        <div class="sub-header">
+            <div class="second-column">
+                <div class="second-column-right">
+                    <co-input-text class="input-search" [placeholder]="'SEARCH_PLACEHOLDER' | sharedLocalize"
+                                [(model)]="searchText"
+                                (modelChange)="searchTextChange.emit($event)"></co-input-text>
+                    <co-period-filter class="period-filter" (filterClicked)="periodFilterClicked.emit($event)"></co-period-filter>
+                    <co-button isToggleButton class="transparent-rectangular-action user-button" [(isToggled)]="showUsergroupActivities" (onClick)="showUsergroupActivities = !showUsergroupActivities"
+                                   [iconData]="iconService.getIcon(icons.Employee)" [title]="'SHOW_ACTIVITIES_FOR_GROUP' | sharedLocalize"
+                                   (isToggledChange)="onToggleClicked($event)"></co-button>
+                    <co-workflow-notification-toggle *ngIf="table && key"
+                          [table]="table"
+                          [key]="key"
+                          [setHasPausedNotificationsForWorkflowProcessOperation]="setHasPausedNotificationsForWorkflowProcessOperation"
+                      ></co-workflow-notification-toggle>
+                </div>
+            </div>
+        </div>
+    `,
+})
+export class ActivityListHeaderComponent {
+    public readonly icons: typeof Icon = Icon;
+    public readonly activitySortType: typeof ActivitySortType = ActivitySortType;
+
+    @Input()
+    public title: string = 'MY_WORK';
+
+    @Input()
+    public searchText: string;
+
+    @Input()
+    public showUsergroupActivities: boolean;
+
+    @Input()
+    public table: string;
+
+    @Input()
+    public key: string;
+
+    @Input()
+    public setHasPausedNotificationsForWorkflowProcessOperation: OperationCallbackFunctionWithValidation;
+
+    @Output()
+    public searchTextChange: EventEmitter<string> = new EventEmitter<string>();
+
+    @Output()
+    public periodFilterClicked: EventEmitter<{ from: Date, to: Date }> = new EventEmitter<{ from: Date, to: Date }>();
+
+    @Output()
+    public showUsergroupActivitiesChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    @HostBinding("class.co-activity-list-header")
+    public showClass() {
+      return true;
+    }
+
+    constructor(public iconService:IconCacheService) {
+    }
+
+    public onToggleClicked(toggled: boolean) {
+      this.showUsergroupActivitiesChange.emit(toggled);
+    }
+
+}

package/projects/sharedcomponents/src/lib/components/activity-list-header/activity-list-header.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {ActivityListHeaderComponent} from './activity-list-header.component';
+import {ButtonModule, InputTextModule} from '@colijnit/corecomponents_v12';
+import {WorkflowNotificationToggleModule} from '../workflow-notification-toggle/workflow-notification-toggle.module';
+import {PeriodFilterModule} from './components/period-filter/period-filter.module';
+import {CommonModule} from '@angular/common';
+import {SharedComponentsTranslationModule} from '../../translation/shared-components-translation.module';
+
+@NgModule({
+    imports: [
+        SharedComponentsTranslationModule,
+        InputTextModule,
+        ButtonModule,
+        WorkflowNotificationToggleModule,
+        PeriodFilterModule,
+        CommonModule
+    ],
+  declarations: [
+    ActivityListHeaderComponent
+  ],
+  exports: [
+    ActivityListHeaderComponent
+  ],
+})
+export class ActivityListHeaderModule {
+
+}

package/projects/sharedcomponents/src/lib/components/activity-list-header/components/period-filter/period-filter-popup.component.ts

@@ -0,0 +1,63 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  Output,
+  ViewEncapsulation
+} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+@Component({
+  selector: "co-period-filter-popup",
+  template: `
+    <div class="dropdown" id="period_filter_dropdown_template" [overlay]="parentForOverlay"
+         @showFilterItems
+         [alignWith]="element"
+         [alignTopOffsetPx]="40"
+         [class.showing]="true"
+         [enableAlign]="true"
+         [clickOutside]="true"
+         (clickOutside)="closePopup.emit()"
+         keepInView noWidthAlign alignRight>
+      <div class="label" [textContent]="'PERIOD_SELECTION' | sharedLocalize"></div>
+      <div class="filter-item" *ngFor="let filter of possibleFilters" (click)="filterClicked.emit(filter)">
+        <span class="item" [textContent]="filter | sharedLocalize"></span>
+      </div>
+    </div>`,
+    encapsulation: ViewEncapsulation.None,
+    animations: [
+      trigger("showFilterItems", [
+        state("void", style({"height": "0"})),
+        state("*", style({"height": "*"})),
+        transition("void <=> *", animate(200)) //NOSONAR
+      ])
+    ]
+})
+
+export class PeriodFilterPopupComponent implements OnDestroy {
+  @HostBinding("class.co-period-filter-popup")
+  public showClass() {
+    return true;
+  }
+
+  @Input()
+  public possibleFilters: string[] = [];
+  @Input()
+  public parentForOverlay: ElementRef;
+
+
+  @Output()
+  public closePopup: EventEmitter<any> = new EventEmitter<any>();
+  @Output()
+  public filterClicked: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(public element: ElementRef) {
+  }
+
+  ngOnDestroy(): void {
+    this.element = undefined;
+  }
+}

package/projects/sharedcomponents/src/lib/components/activity-list-header/components/period-filter/period-filter.component.ts

@@ -0,0 +1,117 @@
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  OnDestroy,
+  Output,
+  ViewEncapsulation
+} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {Icon} from "../../../../enum/icon.enum";
+import {Period} from "@colijnit/mainapi/build/enum/period.enum";
+import {DateUtils} from "../../../../utils/date-utils";
+import {OverlayService} from "@colijnit/corecomponents_v12";
+import {PeriodFilterPopupComponent} from "./period-filter-popup.component";
+
+@Component({
+    selector: "co-period-filter",
+    template: `
+        <div class="current-filter" [textContent]="currentFilter | sharedLocalize"></div>
+        <co-icon [iconData]="iconService.getIcon(showPopup ? icon.ArrowPointUp : icon.ArrowPointDown)"></co-icon>
+    `,
+    animations: [
+        trigger("showFilterItems", [
+            state("void", style({"height": "0"})),
+            state("*", style({"height": "*"})),
+            transition("void <=> *", animate(200)) //NOSONAR
+        ])
+    ],
+    encapsulation: ViewEncapsulation.None
+})
+export class PeriodFilterComponent implements OnDestroy {
+    public readonly icon: typeof Icon = Icon;
+    public readonly possibleFilters: string[] = [
+        Period.All,
+        Period.Today,
+        Period.ThisWeek,
+        Period.ThisMonth,
+        Period.NextThreeMonths
+    ];
+
+    @HostBinding("class.expanded")
+    public showPopup: boolean = false;
+
+    @HostBinding("class.co-period-filter")
+    public showClass() {
+      return true;
+    }
+
+    @HostListener("click")
+    public handleClick(): void {
+        this.showFilterItems();
+    }
+
+    @Output()
+    public filterClicked: EventEmitter<{ from: Date, to: Date }> = new EventEmitter<{ from: Date, to: Date }>();
+
+    public currentFilter: string = this.possibleFilters[0];
+    private _periodPopupRef: ComponentRef<any>;
+
+    constructor(public element: ElementRef,
+                public iconService: IconCacheService,
+                private _overlayService: OverlayService) {
+    }
+
+    ngOnDestroy(): void {
+        this.element = undefined;
+    }
+
+    public showFilterItems(): void {
+      this.showPopup = true;
+      this._periodPopupRef = this._overlayService.createComponent(PeriodFilterPopupComponent,
+        {parentForOverlay: this.element, possibleFilters: this.possibleFilters}, {
+          closePopup: () => this.closePopup(),
+          filterClicked: (string) => this.onFilterClick(string),
+        });
+    }
+
+    public closePopup(): void {
+      this.showPopup = false;
+      this._overlayService.removeComponent(this._periodPopupRef);
+    }
+
+    public onFilterClick(filter: string): void {
+        this.currentFilter = filter;
+        this._emitFilterClicked();
+        this.closePopup();
+    }
+
+    private _emitFilterClicked(): void {
+        let from: Date, to: Date;
+        switch (this.currentFilter) {
+            case Period.Today:
+                from = new Date();
+                to = new Date();
+                break;
+            case Period.ThisWeek:
+                from = DateUtils.GetFirstDayOfWeek(new Date());
+                to = DateUtils.GetLastDayOfWeek(new Date());
+                break;
+            case Period.ThisMonth:
+                from = DateUtils.GetFirstDayOfMonth(new Date());
+                to = DateUtils.GetLastDayOfMonth(new Date());
+                break;
+            case Period.NextThreeMonths:
+                from = DateUtils.GetFirstDayOfMonth(new Date());
+                to = DateUtils.GetLastDayOfMonth(new Date());
+                to.setMonth(to.getMonth() + 3); //NOSONAR
+                break;
+        }
+        this.filterClicked.next({from, to});
+    }
+
+}

package/projects/sharedcomponents/src/lib/components/activity-list-header/components/period-filter/period-filter.module.ts

@@ -0,0 +1,32 @@
+import {NgModule} from '@angular/core';
+import {PeriodFilterComponent} from './period-filter.component';
+import {ClickoutsideModule, IconModule, OverlayModule, OverlayService} from '@colijnit/corecomponents_v12';
+import {CommonModule} from '@angular/common';
+import {PeriodFilterPopupComponent} from './period-filter-popup.component';
+import {DirectivesModule} from '../../../../directives/directives.module';
+import {SharedComponentsTranslationModule} from '../../../../translation/shared-components-translation.module';
+
+@NgModule({
+  imports: [
+    SharedComponentsTranslationModule,
+    IconModule,
+    CommonModule,
+    ClickoutsideModule,
+    DirectivesModule,
+    OverlayModule
+  ],
+  declarations: [
+    PeriodFilterComponent,
+    PeriodFilterPopupComponent
+  ],
+  exports: [
+    PeriodFilterComponent,
+    PeriodFilterPopupComponent
+  ],
+  providers: [
+    OverlayService
+  ]
+})
+export class PeriodFilterModule {
+
+}