Add resize directive instead of relying on package

scilog/src/app/app.module.ts

@@ -60,7 +60,6 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { LogbookSearchPipe } from './overview/logbook-search.pipe';
 import { NavigationButtonComponent } from './logbook/navigation-button/navigation-button.component';
-import { AngularResizeEventModule } from 'angular-resize-event';
 import { SnippetContentComponent } from '@shared/snippet/snippet-content/snippet-content.component';
 import { CookieService } from 'ngx-cookie-service';
 import { NgxJdenticonModule, JDENTICON_CONFIG } from 'ngx-jdenticon';
@@ -84,6 +83,7 @@ import { SearchWindowComponent } from '@shared/search-window/search-window.compo
 import { AppConfigService } from "./app-config.service";
 import { NavigationGuardService } from './logbook/core/navigation-guard-service';
 import { TaskComponent } from './logbook/core/task/task.component';
+import { ResizedDirective } from '@shared/directives/resized.directive';
 
 const appConfigInitializerFn = (appConfig: AppConfigService) => {
     return () => appConfig.loadAppConfig();
@@ -128,7 +128,8 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
         DownloadComponent,
         SearchComponent,
         SearchWindowComponent,
-        TaskComponent
+        TaskComponent,
+        ResizedDirective
     ],
     imports: [
         BrowserModule,
@@ -165,7 +166,6 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
         FormsModule,
         MatSlideToggleModule,
         MatAutocompleteModule,
-        AngularResizeEventModule,
         NgxJdenticonModule,
         MatTabsModule,
         UiScrollModule,

scilog/src/app/core/directives/resized.directive.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+
+import { ResizedDirective } from './resized.directive';
+import { By } from '@angular/platform-browser';
+
+@Component({
+    template: `<div style="width: 10px" (resized)="hasBeenResized()"></div>`,
+    imports: [ResizedDirective],
+  })
+class TestComponent {
+  isResized = false;
+  hasBeenResized() {
+    this.isResized = true;
+  }
+}
+
+describe('resizedDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+  let divElement: DebugElement;
+
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+        declarations: [ResizedDirective, TestComponent],
+    }).createComponent(TestComponent);
+    component = fixture.componentInstance;
+    divElement = fixture.debugElement.query(By.css('div'));
+    fixture.detectChanges();
+  });
+
+  it('should respond to resize event', () => {
+    expect(component.isResized).toEqual(false);
+    divElement.triggerEventHandler('resized');
+    expect(component.isResized).toEqual(true);
+  });
+});

scilog/src/app/core/directives/resized.directive.ts

@@ -0,0 +1,49 @@
+import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
+
+export class ResizedEvent {
+  public newRect: DOMRectReadOnly;
+  public oldRect?: DOMRectReadOnly;
+  public isFirst: boolean;
+
+  public constructor(newRect: DOMRectReadOnly, oldRect: DOMRectReadOnly | undefined) {
+      this.newRect = newRect;
+      this.oldRect = oldRect;
+      this.isFirst = oldRect == null;
+  }
+}
+
+@Directive({
+  selector: '[resized]'
+})
+export class ResizedDirective implements OnInit, OnDestroy {
+  private observer: ResizeObserver;
+  private oldRect?: DOMRectReadOnly;
+
+  @Output()
+  public readonly resized: EventEmitter<ResizedEvent>;
+
+  public constructor(
+    private readonly element: ElementRef,
+    private readonly zone: NgZone
+  )
+  {
+    this.resized = new EventEmitter<ResizedEvent>();
+    this.observer = new ResizeObserver(entries => this.zone.run(() => this.observe(entries)));
+  }
+
+  public ngOnInit(): void {
+    this.observer.observe(this.element.nativeElement)
+  }
+
+  public ngOnDestroy(): void {
+    this.observer.disconnect();
+  }
+
+  private observe(entries: ResizeObserverEntry[]): void {
+    const domSize = entries[0];
+    const resizedEvent = new ResizedEvent(domSize.contentRect, this.oldRect);
+    this.oldRect = domSize.contentRect;
+    this.resized.emit(resizedEvent);
+  }
+}
+

scilog/src/app/overview/overview.component.spec.ts

@@ -10,7 +10,7 @@ import { of } from 'rxjs';
 import { RouterTestingModule } from '@angular/router/testing';
 import {Pipe, PipeTransform} from '@angular/core';
 import { Logbooks } from '@model/logbooks';
-import { ResizedEvent } from 'angular-resize-event';
+import { ResizedEvent } from '@shared/directives/resized.directive';
 
 @Pipe({name: 'logbookSearch'})
 class LogbookSearchMockPipe implements PipeTransform {

scilog/src/app/overview/overview.component.ts

@@ -11,7 +11,7 @@ import { CookiesService } from '@shared/cookies.service';
 import { LogbookDataService } from '@shared/remote-data.service';
 import { LogbookIconScrollService } from './logbook-icon-scroll-service.service';
 import { debounceTime } from 'rxjs/operators';
-import { ResizedEvent } from 'angular-resize-event';
+import { ResizedEvent } from '@shared/directives/resized.directive';
 
 enum ContentType {
   COLLECTION = 'collection',