### File

`src/dialog/overflow-menu/overflow-menu-pane.component.ts`

### Description

Extend the `Dialog` component to create an overflow menu.

Not used directly. See overflow-menu.component and overflow-menu.directive for more

### Extends

`Dialog`

### Implements

`AfterViewInit`

### Metadata

selector | `ibm-overflow-menu-pane`
template |
    <ul
    	[attr.aria-label]="dialogConfig.menuLabel"
    	[ngClass]="{'bx--overflow-menu--flip': dialogConfig.flip}"
    	role="menu"
    	#dialog
    	class="bx--overflow-menu-options bx--overflow-menu-options--open"
    	role="menu"
    	(click)="doClose()"
    	[attr.aria-label]="dialogConfig.menuLabel">
    	<ng-template
    		[ngTemplateOutlet]="dialogConfig.content"
    		[ngTemplateOutletContext]="{overflowMenu: this}">
    	</ng-template>
    </ul>

### Index

###### Properties
Protected addGap Public data dialog Public placement Protected placements Protected Static resizeObservable Protected resizeSubscription Protected scrollSubscription Protected visibilitySubscription
###### Methods
afterDialogViewInit Protected listItems onDialogInit afterDialogViewInit Public doClose ngAfterViewInit ngOnDestroy ngOnInit onDialogInit placeDialog
###### Inputs
dialogConfig
###### Outputs
close
###### HostListeners
keydown document:click keydown

### Constructor

`constructor(elementRef: ElementRef, i18n: I18n, experimental: ExperimentalService, elementService: ElementService)`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:39
Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No
i18n | `I18n` | No
experimental | `ExperimentalService` | No
elementService | `ElementService` | No

### Inputs

`dialogConfig` | Receives `DialogConfig` interface object with properties of `Dialog` explicitly defined. Type : `DialogConfig`
Inherited from `Dialog`
Defined in Dialog:48

### Outputs

`close` | Emits event that handles the closing of a `Dialog` object. `$event` Type: `EventEmitter<any>`
Inherited from `Dialog`
Defined in Dialog:43

### HostListeners

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:79

document:click
Arguments : `'$event'`
`document:click(event)`
Inherited from `Dialog`
Defined in Dialog:254
Sets up a event Listener to close `Dialog` if click event occurs outside `Dialog` object.

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Inherited from `Dialog`
Defined in Dialog:233
Sets up a KeyboardEvent to close `Dialog` with Escape key.

### Methods

afterDialogViewInit
`afterDialogViewInit()`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:125
Returns : `void`

Protected listItems
`listItems()`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:137
Returns : `any`

onDialogInit
`onDialogInit()`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:49
Returns : `void`

afterDialogViewInit
`afterDialogViewInit()`
Inherited from `Dialog`
Defined in Dialog:191
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`

Public doClose
`doClose()`
Inherited from `Dialog`
Defined in Dialog:264
Closes `Dialog` object by emitting the close event upwards to parents. Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Inherited from `Dialog`
Defined in Dialog:124
After the DOM is ready, focus is set and dialog is placed in respect to the parent element. Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Inherited from `Dialog`
Defined in Dialog:271
At destruction of component, `Dialog` unsubscribes from all the subscriptions. Returns : `void`

ngOnInit
`ngOnInit()`
Inherited from `Dialog`
Defined in Dialog:107
Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events. Returns : `void`

onDialogInit
`onDialogInit()`
Inherited from `Dialog`
Defined in Dialog:185
Empty method to be overridden by consuming classes to run any additional initialization code. Returns : `void`

placeDialog
`placeDialog()`
Inherited from `Dialog`
Defined in Dialog:196
Uses the position service to position the `Dialog` in screen space Returns : `void`

### Properties

Protected addGap
`addGap: `object``
Type : `object`
Default value : `{ "left": pos => position.addOffset(pos, 0, -this.dialogConfig.gap), "right": pos => position.addOffset(pos, 0, this.dialogConfig.gap), "top": pos => position.addOffset(pos, -this.dialogConfig.gap), "bottom": pos => position.addOffset(pos, this.dialogConfig.gap), "left-bottom": pos => position.addOffset(pos, 0, -this.dialogConfig.gap), "right-bottom": pos => position.addOffset(pos, 0, this.dialogConfig.gap) }`
Inherited from `Dialog`
Defined in Dialog:80
Handles offsetting the `Dialog` item based on the defined position to not obscure the content beneath.

Public data
`data: `object``
Type : `object`
Default value : `{}`
Inherited from `Dialog`
Defined in Dialog:57
Stores the data received from `dialogConfig`.

dialog
`dialog: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('dialog')`
Inherited from `Dialog`
Defined in Dialog:52
Maintains a reference to the view DOM element of the `Dialog`.

Public placement
`placement: `string``
Type : `string`
Inherited from `Dialog`
Defined in Dialog:62
The placement of the `Dialog` is received from the `Position` service.

Protected placements
`placements: `Positions``
Type : `Positions`
Default value : `{}`
Inherited from `Dialog`
Defined in Dialog:92
Extra placements. Child classes can add to this for use in `placeDialog`.

Protected Static resizeObservable
`resizeObservable: `Observable<any>``
Type : `Observable<any>`
Default value : `fromEvent(window, "resize").pipe(throttleTime(100))`
Inherited from `Dialog`
Defined in Dialog:39
One static event observable to handle window resizing.

Protected resizeSubscription
`resizeSubscription: ```
Default value : `new Subscription()`
Inherited from `Dialog`
Defined in Dialog:67
`Subscription` used to update placement in the event of a window resize.

Protected scrollSubscription
`scrollSubscription: ```
Default value : `new Subscription()`
Inherited from `Dialog`
Defined in Dialog:73
Subscription to all the scrollable parents `scroll` event

Protected visibilitySubscription
`visibilitySubscription: ```
Default value : `new Subscription()`
Inherited from `Dialog`
Defined in Dialog:75

    import {
    	Component,
    	HostListener,
    	ElementRef,
    	AfterViewInit,
    	Optional
    } from "@angular/core";
    import { Dialog } from "../dialog.component";
    import { position } from "@carbon/utils-position";
    import { isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
    import { I18n } from "./../../i18n/i18n.module";
    import { ExperimentalService } from "./../../experimental.module";
    import { ElementService } from "./../../utils/utils.module";

    /**
     * Extend the `Dialog` component to create an overflow menu.
     *
     * Not used directly. See overflow-menu.component and overflow-menu.directive for more
     */
    @Component({
    	selector: "ibm-overflow-menu-pane",
    	template: `
    		<ul
    			[attr.aria-label]="dialogConfig.menuLabel"
    			[ngClass]="{'bx--overflow-menu--flip': dialogConfig.flip}"
    			role="menu"
    			#dialog
    			class="bx--overflow-menu-options bx--overflow-menu-options--open"
    			role="menu"
    			(click)="doClose()"
    			[attr.aria-label]="dialogConfig.menuLabel">
    			<ng-template
    				[ngTemplateOutlet]="dialogConfig.content"
    				[ngTemplateOutletContext]="{overflowMenu: this}">
    			</ng-template>
    		</ul>
    	`
    })
    export class OverflowMenuPane extends Dialog implements AfterViewInit {
    	constructor(
    		protected elementRef: ElementRef,
    		protected i18n: I18n,
    		protected experimental: ExperimentalService,
    		// mark `elementService` as optional since making it mandatory would be a breaking change
    		@Optional() protected elementService: ElementService = null) {
    		super(elementRef, elementService);
    	}

    	onDialogInit() {
    		const positionOverflowMenu = pos => {
    			let offset;
    			if (this.experimental.isExperimental) {
    				/*
    				* 16 is half the width of the overflow menu trigger element.
    				* we also move the element by half of it's own width, since
    				* position service will try and center everything
    				*/
    				offset = Math.round(this.dialog.nativeElement.offsetWidth / 2) - 16;
    			} else {
    				// 60 shifts the menu right to align the arrow.
    				offset = 60;
    			}
    			if (this.dialogConfig.flip) {
    				return position.addOffset(pos, 0, -offset);
    			}
    			return position.addOffset(pos, 0, offset);
    		};

    		this.addGap["bottom"] = positionOverflowMenu;

    		this.addGap["top"] = positionOverflowMenu;

    		if (!this.dialogConfig.menuLabel) {
    			this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
    		}
    	}

    	@HostListener("keydown", ["$event"])
    	hostkeys(event: KeyboardEvent) {
    		const listItems = this.listItems();

    		switch (event.key) {
    			case "Down": // IE specific value
    			case "ArrowDown":
    				event.preventDefault();
    				if (!isFocusInLastItem(event, listItems))  {
    					const index = listItems.findIndex(item => item === event.target);
    					listItems[index + 1].focus();
    				} else {
    					listItems[0].focus();
    				}
    				break;

    			case "Up": // IE specific value
    			case "ArrowUp":
    				event.preventDefault();
    				if (!isFocusInFirstItem(event, listItems))  {
    					const index = listItems.findIndex(item => item === event.target);
    					listItems[index - 1].focus();
    				} else {
    					listItems[listItems.length - 1].focus();
    				}
    				break;

    			case "Home":
    				event.preventDefault();
    				listItems[0].focus();
    				break;

    			case "End":
    				event.preventDefault();
    				listItems[listItems.length - 1].focus();
    				break;

    			case "Esc": // IE specific value
    			case "Escape":
    			case "Tab":
    				event.stopImmediatePropagation();
    				this.doClose();
    				break;
    			default: break;
    		}
    	}

    	afterDialogViewInit() {
    		const focusElementList = this.listItems();
    		focusElementList.forEach(button => {
    			// Allows user to set tabindex to 0.
    			if (button.getAttribute("tabindex") === null) {
    				button.tabIndex = -1;
    			}
    		});
    		focusElementList[0].tabIndex = 0;
    		focusElementList[0].focus();
    	}

    	protected listItems() {
    		const selector = ".bx--overflow-menu-options__option:not([disabled]) .bx--overflow-menu-options__btn";
    		return Array.from<HTMLElement>(this.elementRef.nativeElement.querySelectorAll(selector));
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""