Merge pull request #432 from cal-smith/master

fix(dropdown): make the dropdown.service offset configurable

Author: zvonimirfras

src/dropdown/dropdown.component.ts

@@ -91,7 +91,6 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	@Input() type: "single" | "multi" = "single";
 	/**
 	 * `light` or `dark` dropdown theme
-	 * @memberof Dropdown
 	 */
 	@Input() theme: "light" | "dark" = "dark";
 	/**
@@ -209,6 +208,8 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 		if (this.view) {
 			this.view.type = this.type;
 		}
+		// add -40 to the top position to account for carbon styles
+		this.dropdownService.offset = { top: -40 };
 	}
 
 	/**
@@ -492,7 +493,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	}
 
 	/**
-	 * Add scroll event listenter if scrollableContainer is provided
+	 * Add scroll event listener if scrollableContainer is provided
 	 */
 	addScrollEventListener() {
 		if (this.scrollableContainer) {

src/dropdown/dropdown.service.ts

@@ -4,8 +4,17 @@ import { fromEvent, Subscription } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 import position from "./../utils/position";
 
+const defaultOffset = { top: 0, left: 0 };
+
 @Injectable()
 export class DropdownService {
+	public set offset(value: { top?: number, left?: number }) {
+		this._offset = Object.assign({}, defaultOffset, value);
+	}
+
+	public get offset() {
+		return this._offset;
+	}
 	/**
 	 * reference to the body appended menu
 	 */
@@ -17,6 +26,8 @@ export class DropdownService {
 	 */
 	protected resize: Subscription;
 
+	protected _offset = defaultOffset;
+
 	constructor(protected placeholderService: PlaceholderService) {}
 
 	/**
@@ -84,8 +95,7 @@ export class DropdownService {
 
 	protected positionDropdown(parentRef, menuRef) {
 		let pos = position.findAbsolute(parentRef, menuRef, "bottom");
-		// add -40 to the top position to account for carbon styles
-		pos = position.addOffset(pos, -40, 0);
+		pos = position.addOffset(pos, this.offset.top, this.offset.left);
 		position.setElement(menuRef, pos);
 	}
 }