Deprecate ngx-float-ui in favor of Angular CDK

[valdotae]

Problem

TEDI has two parallel overlays in use:

1. Angular CDK (community)
2. ngx-float-ui (tedi-ready)

This introduces the need to maintain parallel implementations for the same thing.

In addition, TEDI-READY components do not expose ngx-float-ui configuration in any way, which makes it impossible to use in apps that cannot use document.body as overlay anchor, such as TEIS microfrontends, which are hoisted inside <microfrontend-x> selector.

This means a microfrontend's overlays are appended outside of the microfrontend, losing all styling, and potentially conflicting with peer versions of TEDI.

Solution

Either expose ngx-float-ui props (appendTo) in TEDI-READY components that use it for overlays

or

Angular CDK provides overlays via OverlayContainer, which is configurable app-side. Rewrite TEDI-READY overlays to use Angular CDK.

Examples and information

@Injectable()
export class MfeOverlayContainer extends OverlayContainer {
  protected override _createContainer(): void {
    super._createContainer();

    const mfeRoot = document.querySelector('labour-disputes-root');
    if (mfeRoot && this._containerElement) {
      mfeRoot.appendChild(this._containerElement);
    }
  }
}

{ provide: OverlayContainer, useClass: MfeOverlayContainer },

Project

TEIS