Merge branch 'master' of https://github.com/IBM/carbon-components-angular into radio

Author: youda97

.storybook/manager-head.html

@@ -1,13 +1,20 @@
+<!-- Open Graph -->
 <meta property="og:title" content="Carbon Components Angular">
 <meta property="og:description" content="An Angular implementation of the Carbon Design System for IBM.">
 <meta property="og:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
 <meta property="og:url" content="https://angular.carbondesignsystem.com">
 
+<!-- Social -->
 <meta name="twitter:title" content="Carbon Components Angular">
 <meta name="twitter:description" content="An Angular implementation of the Carbon Design System for IBM.">
 <meta name="twitter:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
 <meta name="twitter:card" content="summary_large_image">
 
+<!-- Storybook override -->
+<script>
+	document.title = "Carbon Components Angular";
+</script>
+
 <style id="iframestyle">
 .sb-show-main:not(.welcome) {
 	padding: 3em;

.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

@@ -16,6 +16,7 @@ import {
 import { AbstractDropdownView } from "./../dropdown/abstract-dropdown-view.class";
 import { ListItem } from "./../dropdown/list-item.interface";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { filter } from "rxjs/operators";
 
 /**
  * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.
@@ -262,6 +263,10 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 			setTimeout(() => {
 				this.updateSelected();
 			});
+
+			this.view.blurIntent.pipe(filter(v => v === "top")).subscribe(() => {
+				this.elementRef.nativeElement.querySelector(".bx--text-input").focus();
+			});
 		}
 	}
 
@@ -291,10 +296,6 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 			ev.stopPropagation();
 			this.openDropdown();
 			setTimeout(() => this.view.getCurrentElement().focus(), 0);
-		} else if ((ev.key === "ArrowUp" || ev.key === "Up") // `"Up"` is IE specific value
-			&& this.dropdownMenu.nativeElement.contains(ev.target)
-			&& !this.view.hasPrevElement()) {
-			this.elementRef.nativeElement.querySelector(".bx--text-input").focus();
 		}
 	}
 

src/combobox/combobox.component.ts

@@ -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

@@ -19,6 +19,17 @@ export class AbstractDropdownView {
 	 * Emits selection events to other class.
 	 */
 	@Output() select: EventEmitter<Object>;
+	/**
+	 * Event to suggest a blur on the view.
+	 * Emits _after_ the first/last item has been focused.
+	 * ex.
+	 * ArrowUp -> focus first item
+	 * ArrowUp -> emit event
+	 *
+	 * It's recommended that the implementing view include a specific type union of possible blurs
+	 * ex. `@Output() blurIntent = new EventEmitter<"top" | "bottom">();`
+	 */
+	@Output() blurIntent: EventEmitter<any>;
 	/**
 	 * Specifies whether or not the `DropdownList` supports selecting multiple items as opposed to single
 	 * item selection.

src/dropdown/abstract-dropdown-view.class.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 ]
 		});
 	});