The Filter menu component encapsulates the OverFlowMenu directive, and the flyout iconography into one convienent component

See demo

html:

    <ai-flyout-menu-pane>
        options
    </ai-flyout-menu-pane>

### Hierarchy

- Dialog
  - FlyoutMenuPane

## Index

### Inputs

- buttonLabel
- light
- open
- offset

### Outputs

- openChange

### Constructors

- constructor

### Properties

- _offset
- addGap
- animationFrameService
- animationFrameSubscription
- buttonLabel
- close
- data
- dialog
- dialogConfig
- elementRef
- elementService
- hasContentTemplate
- i18n
- light
- open
- openChange
- placement
- placements
- role
- visibilitySubscription

### Accessors

- contentTemplate
- offset
- position

### Methods

- afterDialogViewInit
- clickClose
- doClose
- escapeClose
- getAdjustOffset
- handleOpenChange
- ngAfterViewInit
- ngOnDestroy
- ngOnInit
- onDialogInit
- placeDialog
- shouldClose

## Constructors

### constructor

- new FlyoutMenuPane(elementRef: ElementRef<any>, elementService: ElementService, i18n: I18n, animationFrameService?: AnimationFrameService): FlyoutMenuPane

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:103

  #### Parameters

  - ##### elementRef: ElementRef<any>

  - ##### elementService: ElementService

  - ##### i18n: I18n

  - ##### animationFrameService: AnimationFrameService = null

  #### Returns FlyoutMenuPane

## Properties

### Private _offset

_offset: any

- Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:103

### Protected addGap

addGap: { bottom: (pos: any) => AbsolutePosition; left: (pos: any) => AbsolutePosition; left-bottom: (pos: any) => AbsolutePosition; right: (pos: any) => AbsolutePosition; right-bottom: (pos: any) => AbsolutePosition; top: (pos: any) => AbsolutePosition }

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:61

Handles offsetting the `Dialog` item based on the defined position to not obscure the content beneath.

#### Type declaration

- ##### bottom: (pos: any) => AbsolutePosition

  - - (pos: any): AbsolutePosition

    - #### Parameters

      - ##### pos: any

      #### Returns AbsolutePosition

- ##### left: (pos: any) => AbsolutePosition

  - - (pos: any): AbsolutePosition

    - #### Parameters

      - ##### pos: any

      #### Returns AbsolutePosition

- ##### left-bottom: (pos: any) => AbsolutePosition

  - - (pos: any): AbsolutePosition

    - #### Parameters

      - ##### pos: any

      #### Returns AbsolutePosition

- ##### right: (pos: any) => AbsolutePosition

  - - (pos: any): AbsolutePosition

    - #### Parameters

      - ##### pos: any

      #### Returns AbsolutePosition

- ##### right-bottom: (pos: any) => AbsolutePosition

  - - (pos: any): AbsolutePosition

    - #### Parameters

      - ##### pos: any

      #### Returns AbsolutePosition

- ##### top: (pos: any) => AbsolutePosition

  - - (pos: any): AbsolutePosition

    - #### Parameters

      - ##### pos: any

      #### Returns AbsolutePosition

### Protected animationFrameService

animationFrameService: AnimationFrameService = null

### Protected animationFrameSubscription

animationFrameSubscription: Subscription

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:56

### buttonLabel

@Input()
buttonLabel: any = ...

- Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:91

### close

close: EventEmitter<CloseMeta>

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:37

Emits event that handles the closing of a `Dialog` object.

### data

data: {}

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:50

Stores the data received from `dialogConfig`.

#### Type declaration

### dialog

dialog: ElementRef<any>

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:46

Maintains a reference to the view DOM element of the `Dialog`.

### dialogConfig

dialogConfig: DialogConfig

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:42

Receives `DialogConfig` interface object with properties of `Dialog` explicitly defined.

### Protected elementRef

elementRef: ElementRef<any>

### Protected elementService

elementService: ElementService

### hasContentTemplate

hasContentTemplate: boolean = true

- Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:82

### Protected i18n

i18n: I18n

### light

@Input()
light: boolean = false

- Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:93

### open

@Input()
open: boolean = true

- Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:99

### openChange

@Output()
openChange: EventEmitter<boolean> = ...

- Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:101

### placement

placement: string

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:54

The placement of the `Dialog` is received from the `Position` service.

### Protected placements

placements: Positions

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:72

Extra placements. Child classes can add to this for use in `placeDialog`.

### role

role: string = 'tooltip'

- Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:90

Sets the role of the tooltip. If there's no focusable content we leave it as a `tooltip`, if there is focusable content we switch to the interactive `dialog` role.

### Protected visibilitySubscription

visibilitySubscription: Subscription

- Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:55

## Accessors

### contentTemplate

- get contentTemplate(): TemplateRef<any>

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:83

  #### Returns TemplateRef<any>

### offset

@Input()

- get offset(): { x: number; y: number }
- set offset(os: { x: number; y: number }): void

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:76

  This specifies any vertical and horizontal offset for the position of the dialog

  #### Returns { x: number; y: number }

  - ##### x: number

  - ##### y: number

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:73

  This specifies any vertical and horizontal offset for the position of the dialog

  #### Parameters

  - ##### os: { x: number; y: number }

    - ##### x: number

    - ##### y: number

  #### Returns void

### position

- get position(): string

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:95

  #### Returns string

## Methods

### afterDialogViewInit

- afterDialogViewInit(): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:96

  Empty method to be overridden by consuming classes to run any additional initialization code after the view is available. NOTE: this does not guarantee the dialog will be positioned, simply that it will exist in the DOM

  #### Returns void

### clickClose

- clickClose(event: any): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:111

  Sets up a event Listener to close `Dialog` if click event occurs outside `Dialog` object.

  #### Parameters

  - ##### event: any

  #### Returns void

### doClose

- doClose(meta?: CloseMeta): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:115

  Closes `Dialog` object by emitting the close event upwards to parents.

  #### Parameters

  - ##### Optional meta: CloseMeta

  #### Returns void

### escapeClose

- escapeClose(event: KeyboardEvent): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:105

  Sets up a KeyboardEvent to close `Dialog` with Escape key.

  #### Parameters

  - ##### event: KeyboardEvent

  #### Returns void

### getAdjustOffset

- getAdjustOffset(): { left: number; top: number }

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:193

  #### Returns { left: number; top: number }

  - ##### left: number

  - ##### top: number

### handleOpenChange

- handleOpenChange(event: boolean): void

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:118

  #### Parameters

  - ##### event: boolean

  #### Returns void

### ngAfterViewInit

- ngAfterViewInit(): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:87

  After the DOM is ready, focus is set and dialog is placed in respect to the parent element.

  #### Returns void

### ngOnDestroy

- ngOnDestroy(): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:119

  At destruction of component, `Dialog` unsubscribes from all the subscriptions.

  #### Returns void

### ngOnInit

- ngOnInit(): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:82

  Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.

  #### Returns void

### onDialogInit

- onDialogInit(): void

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:123

  #### Returns void

### placeDialog

- placeDialog(): void

- - Defined in node_modules/carbon-components-angular/dialog/dialog.component.d.ts:100

  Uses the position service to position the `Dialog` in screen space

  #### Returns void

### shouldClose

- shouldClose(meta: CloseMeta): boolean

- - Defined in packages/angular/src/flyout-menu/flyout-menu-pane.component.ts:114

  #### Parameters

  - ##### meta: CloseMeta

  #### Returns boolean

Generated using TypeDoc