@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,
    }
  ]