Menu

The floating panel that contains menu items.

@Component()
class DaffMenuComponent implements AfterContentInit, AfterViewInit {}

Individual clickable items within the menu. Applied to <button> or <a> elements.

@Component()
class DaffMenuItemComponent implements FocusableOption {
  focus(): void
}

Directive that triggers the menu to open/close. Applied to the button that activates the menu. The selector doubles as an input for the menu content to display.

@Directive()
class DaffMenuActivatorDirective implements OnDestroy {
  readonly isOpen: WritableSignal<boolean> = signal(false)

  daffMenuActivator: InputSignal<TemplateRef<unknown> | Type<unknown>>
  id: InputSignal<string>
  xPosition: InputSignal<DaffMenuXPosition> = 'after'
  yPosition: InputSignal<DaffMenuYPosition> = 'below'
}

@Injectable()
class DaffMenuService {
  open$: Observable<boolean> = this.$_open.asObservable()

  close(): void
  open(
    activator: ViewContainerRef
    component: DaffMenuSlot
    config?: DaffMenuConfig
  ): void
}

@NgModule()
class DaffMenuModule {}

function provideDaffMenuItemToken<R extends T = T>(klass: Type<R>): ExistingProvider

const DAFF_MENU_ITEM_TOKEN: InjectionToken<any>

Configuration for a menu instance.

interface DaffMenuConfig {
  menuId: string
  xPosition: DaffMenuXPosition
  yPosition: DaffMenuYPosition
}

The horizontal alignment of the menu relative to its activator.

• after lines the menu's left edge up with the activator's left edge.
• before lines the menu's right edge up with the activator's right edge.

type DaffMenuXPosition = 'before' | 'after'

The vertical position of the menu relative to its activator.

• below drops the menu down from the activator's bottom edge.
• above raises the menu up from the activator's top edge.

type DaffMenuYPosition = 'above' | 'below'

type DaffMenuSlot = TemplateRef<unknown> | DaffLazyComponent | Type<unknown>