@lakea/gravity-popover-adapter-floating-ui

@lakea/gravity-popover-adapter-floating-ui

An adapter for GrPopover using Floating UI as implementation.

Installation

Install the library using NPM:

npm install @lakea/gravity-popover-adapter-floating-ui @floating-ui/dom --save

Next, create a new file, cookie-adapter-root.module.ts which exposes an Angular's module with a default configuration.

import {NgModule} from '@angular/core';
import {GrPopover} from '@lakea/gravity/ui';
import {GrPopoverAdapterFloatingUi} from '@lakea/gravity-popover-adapter-floating-ui';

@NgModule({
  providers: [
    {
      provide: GrPopover,
      useClass: GrPopoverAdapterFloatingUi,
    },
  ],
})
export class PopoverAdapterRootModule {}

Import PopoverAdapterRootModule to application root module like app.module.ts.

You should import the PopoverAdapterRootModule once in your root module.

The PopoverAdapterRootModule provide the adapter implementation for GrPopover.

Creating your own adapter

Create your adapter implementation class extending GrPopover abstraction:

import {Injectable} from '@angular/core';

import {GrPopover, GrPopoverInstance, GrPopoverPlacements} from '@lakea/gravity/ui';

@Injectable()
export class GrPopoverAdapter extends GrPopover {
  constructor() {
    super();
  }

  public create(trigger: HTMLElement, element: HTMLElement, placement: GrPopoverPlacements): GrPopoverInstance {
    // YOUR IMPLEMENTATION
  }
}

class GrPopoverAdapterInstance implements GrPopoverInstance {
  constructor(trigger: HTMLElement, element: HTMLElement, placement: GrPopoverPlacements) {
  }

  public show(): void {
    // YOUR IMPLEMENTATION
  }

  public hide(): void {
    // YOUR IMPLEMENTATION
  }

  public destroy(): void {
    // YOUR IMPLEMENTATION
  }
}

So, provide it on your application root module (maybe app.module.ts), like this:

  providers: [
    {
      provide: GrPopover,
      useClass: GrPopoverAdapter,
    }
  ]