Merge branch 'master' into dropdown

Author: zvonimirfras

.storybook/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
-module.exports = (baseConfig, env, defaultConfig) => {
-	defaultConfig.module.rules.push({
+module.exports = ({config, mode}) => {
+	config.module.rules.push({
 		test: [/\.stories\.tsx?$/, /index\.ts$/],
 		loaders: [
 		  {
@@ -15,7 +15,7 @@ module.exports = (baseConfig, env, defaultConfig) => {
 		enforce: 'pre',
 	});
 
-	defaultConfig.mode = "development";
-	defaultConfig.devtool = "source-map";
-	return defaultConfig;
+	config.mode = "development";
+	config.devtool = "source-map";
+	return config;
 };

package-lock.json

@@ -86,19 +86,19 @@
     "@commitlint/cli": "7.2.1",
     "@commitlint/config-conventional": "7.0.1",
     "@compodoc/compodoc": "1.1.7",
-    "@storybook/addon-actions": "4.0.6",
-    "@storybook/addon-knobs": "4.0.6",
-    "@storybook/addon-links": "4.0.6",
-    "@storybook/addon-notes": "4.0.6",
-    "@storybook/addon-options": "4.1.4",
-    "@storybook/addon-storysource": "4.1.2",
-    "@storybook/addons": "4.0.6",
-    "@storybook/angular": "4.0.6",
+    "@storybook/addon-actions": "5.0.0",
+    "@storybook/addon-knobs": "5.0.0",
+    "@storybook/addon-links": "5.0.0",
+    "@storybook/addon-notes": "5.0.0",
+    "@storybook/addon-options": "5.0.0",
+    "@storybook/addon-storysource": "5.0.0",
+    "@storybook/addons": "5.0.0",
+    "@storybook/angular": "5.0.0",
     "@types/jasmine": "2.8.6",
     "@types/node": "8.5.2",
     "angular2-template-loader": "0.6.2",
     "babel-loader": "8.0.4",
-    "carbon-components": "9.70.3",
+    "carbon-components": "9.82.17",
     "codelyzer": "4.5.0",
     "commitizen": "2.10.1",
     "core-js": "2.5.5",
@@ -148,6 +148,6 @@
   },
   "dependencies": {
     "flatpickr": "4.5.2",
-    "ng2-flatpickr": "7.0.1"
+    "ng2-flatpickr": "7.0.2"
   }
 }

package.json

@@ -87,8 +87,15 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	/**
 	 * Config object passed to the rendered component
 	 */
-	@Output() onClose: EventEmitter<any> = new EventEmitter<any>();
 	dialogConfig: DialogConfig;
+	/**
+	 * Emits an event when the dialog is closed
+	 */
+	@Output() onClose: EventEmitter<any> = new EventEmitter();
+	/**
+	 * Emits an event when the dialog is opened
+	 */
+	@Output() onOpen: EventEmitter<any> = new EventEmitter();
 
 	@HostBinding("attr.role") role = "button";
 	@HostBinding("attr.aria-expanded") expanded = false;
@@ -197,6 +204,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	open() {
 		this.dialogService.open(this.viewContainerRef, this.dialogConfig);
 		this.expanded = true;
+		this.onOpen.emit();
 	}
 
 	/**
@@ -206,6 +214,9 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	toggle() {
 		this.dialogService.toggle(this.viewContainerRef, this.dialogConfig);
 		this.expanded = this.dialogService.isOpen;
+		if (this.expanded) {
+			this.onOpen.emit();
+		}
 	}
 
 	/**

src/dialog/dialog.directive.ts

@@ -4,7 +4,8 @@ import {
 	Input,
 	ElementRef,
 	Output,
-	EventEmitter
+	EventEmitter,
+	AfterViewInit
 } from "@angular/core";
 
 /**
@@ -17,7 +18,7 @@ import {
  * <ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
  * ```
  *
- * For content that expands beyod the overflow menu `OverflowMenuOption` automatically adds a title attribute.
+ * For content that expands beyond the overflow menu `OverflowMenuOption` automatically adds a title attribute.
  */
 @Component({
 	selector: "ibm-overflow-menu-option",
@@ -30,12 +31,12 @@ import {
 			(blur)="tabIndex = -1"
 			(click)="onClick($event)"
 			[disabled]="disabled"
-			[title]="(titleEnabled ? content : '')">
+			[title]="title">
 			<ng-content></ng-content>
 		</button>
 	`
 })
-export class OverflowMenuOption {
+export class OverflowMenuOption implements AfterViewInit {
 	@HostBinding("class") optionClass = "bx--overflow-menu-options__option";
 	@HostBinding("attr.role") role = "presentation";
 
@@ -60,30 +61,20 @@ export class OverflowMenuOption {
 	@Output() selected: EventEmitter<any> = new EventEmitter();
 
 	public tabIndex = -1;
+	// note: title must be a real attribute (i.e. not a getter) as of Angular@6 due to
+	// change after checked errors
+	public title = null;
 
 	constructor(protected elementRef: ElementRef) {}
 
 	onClick(event) {
 		this.selected.emit();
 	}
 
-	/**
-	 * Returns true if the content string is longer than the width of the containing button
-	 *
-	 * note: getter ties into the view check cycle so we always get an accurate value
-	 */
-	get titleEnabled() {
+	ngAfterViewInit() {
 		const button = this.elementRef.nativeElement.querySelector("button");
 		if (button.scrollWidth > button.offsetWidth) {
-			return true;
+			this.title = this.elementRef.nativeElement.querySelector("button").textContent;
 		}
-		return false;
-	}
-
-	/**
-	 * Returns the text content projected into the component
-	 */
-	get content(): string {
-		return this.elementRef.nativeElement.querySelector("button").textContent;
 	}
 }

src/dialog/overflow-menu/overflow-menu-option.component.ts

@@ -2,9 +2,11 @@ import {
 	Component,
 	ElementRef,
 	Input,
-	ViewEncapsulation
+	ViewEncapsulation,
+	ContentChild
 } from "@angular/core";
 import { I18n } from "./../../i18n/i18n.module";
+import { OverflowMenuDirective } from "./overflow-menu.directive";
 
 /**
  * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component
@@ -22,9 +24,11 @@ import { I18n } from "./../../i18n/i18n.module";
 	template: `
 		<div
 			[ibmOverflowMenu]="options"
-			[ngClass]="{'bx--overflow-menu--open': open === true}"
+			[ngClass]="{'bx--overflow-menu--open': open}"
 			[attr.aria-label]="buttonLabel"
 			[flip]="flip"
+			(onOpen)="open = true"
+			(onClose)="open = false"
 			role="button"
 			aria-haspopup="true"
 			class="bx--overflow-menu"
@@ -67,12 +71,9 @@ export class OverflowMenu {
 
 	@Input() flip = false;
 
-	constructor(protected elementRef: ElementRef, protected i18n: I18n) {}
+	@ContentChild(OverflowMenuDirective) overflowMenuDirective: OverflowMenuDirective;
 
-	get open() {
-		if (this.elementRef.nativeElement.children[0].getAttribute("aria-expanded") === "true") {
-			return true;
-		}
-		return false;
-	}
+	open = false;
+
+	constructor(protected elementRef: ElementRef, protected i18n: I18n) {}
 }

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

@@ -8,6 +8,8 @@ import { DropdownList } from "./list/dropdown-list.component";
 import { ListItem } from "./list-item.interface";
 import { ScrollableList } from "./scrollable-list.directive";
 import { I18nModule } from "../i18n/i18n.module";
+import { DropdownService } from "./dropdown.service";
+import { PlaceholderModule } from "./../placeholder/placeholder.module";
 
 @Component({
 	template: `
@@ -38,8 +40,10 @@ describe("Dropdown", () => {
 			],
 			imports: [
 				StaticIconModule,
-				I18nModule
-			]
+				I18nModule,
+				PlaceholderModule
+			],
+			providers: [ DropdownService ]
 		});
 	});
 

src/dropdown/dropdown.component.spec.ts

@@ -15,12 +15,12 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 // Observable import is required here so typescript can compile correctly
 import { Observable, fromEvent, of, Subscription } from "rxjs";
-import { throttleTime } from "rxjs/operators";
 
 import { AbstractDropdownView } from "./abstract-dropdown-view.class";
 import { position } from "../utils/position";
 import { I18n } from "./../i18n/i18n.module";
 import { ListItem } from "./list-item.interface";
+import { DropdownService } from "./dropdown.service";
 
 /**
  * Drop-down lists enable users to select one or more items from a list.
@@ -183,21 +183,12 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 */
 	dropUp = false;
 
-	/**
-	 * Used by the various appendToX methods to keep a reference to our wrapper div
-	 */
-	dropdownWrapper: HTMLElement;
 	// .bind creates a new function, so we declare the methods below
 	// but .bind them up here
 	noop = this._noop.bind(this);
 	outsideClick = this._outsideClick.bind(this);
 	outsideKey = this._outsideKey.bind(this);
 	keyboardNav = this._keyboardNav.bind(this);
-	/**
-	 * Maintains an Event Observable Subscription for tracking window resizes.
-	 * Window resizing is tracked if the `Dropdown` is appended to the body, otherwise it does not need to be supported.
-	 */
-	resize: Subscription;
 	/**
 	 *  Maintians an Event Observable Subscription for tracking scrolling within the open `Dropdown` list.
 	 */
@@ -208,7 +199,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	/**
 	 * Creates an instance of Dropdown.
 	 */
-	constructor(protected elementRef: ElementRef, protected i18n: I18n) {}
+	constructor(protected elementRef: ElementRef, protected i18n: I18n, protected dropdownService: DropdownService) {}
 
 	/**
 	 * Updates the `type` property in the `@ContentChild`.
@@ -413,37 +404,19 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.
 	 */
 	_appendToDropdown() {
-		if (document.body.contains(this.dropdownWrapper)) {
-			this.dropdownMenu.nativeElement.style.display = "none";
-			this.elementRef.nativeElement.appendChild(this.dropdownMenu.nativeElement);
-			document.body.removeChild(this.dropdownWrapper);
-			this.resize.unsubscribe();
-			this.dropdownWrapper.removeEventListener("keydown", this.keyboardNav, true);
-		}
+		this.dropdownService.appendToDropdown(this.elementRef.nativeElement);
+		this.dropdownMenu.nativeElement.removeEventListener("keydown", this.keyboardNav, true);
 	}
 
 	/**
 	 * Creates the `Dropdown` list as an element that is appended to the DOM body.
 	 */
 	_appendToBody() {
-		const positionDropdown = () => {
-			let pos = position.findAbsolute(this.dropdownButton.nativeElement, this.dropdownWrapper, "bottom");
-			// add -40 to the top position to account for carbon styles
-			pos = position.addOffset(pos, -40, 0);
-			position.setElement(this.dropdownWrapper, pos);
-		};
-		this.dropdownMenu.nativeElement.style.display = "block";
-		this.dropdownWrapper = document.createElement("div");
-		this.dropdownWrapper.className = `dropdown ${this.elementRef.nativeElement.className}`;
-		this.dropdownWrapper.style.width = this.dropdownButton.nativeElement.offsetWidth + "px";
-		this.dropdownWrapper.style.position = "absolute";
-		this.dropdownWrapper.appendChild(this.dropdownMenu.nativeElement);
-		document.body.appendChild(this.dropdownWrapper);
-		positionDropdown();
-		this.dropdownWrapper.addEventListener("keydown", this.keyboardNav, true);
-		this.resize = fromEvent(window, "resize")
-			.pipe(throttleTime(100))
-			.subscribe(() => positionDropdown());
+		this.dropdownService.appendToBody(
+			this.dropdownButton.nativeElement,
+			this.dropdownMenu.nativeElement,
+			this.elementRef.nativeElement.className);
+		this.dropdownMenu.nativeElement.addEventListener("keydown", this.keyboardNav, true);
 	}
 
 	/**
@@ -529,12 +502,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 				this.scroll = fromEvent(container, "scroll")
 				.subscribe(() => {
 					if (this.isVisibleInContainer(this.elementRef.nativeElement, container)) {
-						position.setElement(
-							this.dropdownWrapper,
-							position.addOffset(
-								position.findAbsolute(this.elementRef.nativeElement, this.dropdownWrapper, "bottom")
-							)
-						);
+						this.dropdownService.updatePosition(this.dropdownButton.nativeElement);
 					} else {
 						this.closeMenu();
 					}

src/dropdown/dropdown.component.ts

@@ -8,13 +8,16 @@ import { DropdownList } from "./list/dropdown-list.component";
 
 import { ScrollableList } from "./scrollable-list.directive";
 import { I18nModule } from "./../i18n/i18n.module";
+import { PlaceholderModule } from "./../placeholder/placeholder.module";
+import { DropdownService } from "./dropdown.service";
 
 export { Dropdown } from "./dropdown.component";
 export { DropdownList } from "./list/dropdown-list.component";
 
 export { ScrollableList } from "./scrollable-list.directive";
 export { AbstractDropdownView } from "./abstract-dropdown-view.class";
 export { ListItem } from "./list-item.interface";
+export { DropdownService } from "./dropdown.service";
 
 @NgModule({
 	declarations: [
@@ -31,7 +34,9 @@ export { ListItem } from "./list-item.interface";
 		CommonModule,
 		FormsModule,
 		StaticIconModule,
-		I18nModule
-	]
+		I18nModule,
+		PlaceholderModule
+	],
+	providers: [ DropdownService ]
 })
 export class DropdownModule {}