Merge branch 'master' into dropdown-placeholder

Author: zvonimirfras

src/dialog/dialog.directive.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/overflow-menu/overflow-menu-option.component.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.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/number-input/number.component.ts

@@ -33,6 +33,7 @@ export class NumberChange {
 		<label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label>
 		<div
 			data-numberinput
+			[attr.data-invalid]="(invalid ? '' : null)"
 			class="bx--number"
 			[ngClass]="{
 				'bx--number--light': theme === 'light',
@@ -48,7 +49,8 @@ export class NumberChange {
 				[min]="min"
 				[max]="max"
 				[disabled]="disabled"
-				[required]="required"/>
+				[required]="required"
+				(input)="onNumberInputChange($event)"/>
 			<div *ngIf="!skeleton" class="bx--number__controls">
 				<button
 					class="bx--number__control-btn up-icon"
@@ -65,6 +67,9 @@ export class NumberChange {
 					</svg>
 				</button>
 			</div>
+			<div *ngIf="invalid" class="bx--form-requirement">
+				{{invalidText}}
+			</div>
 			<div *ngIf="helperText" class="bx--form__helper-text">{{helperText}}</div>
 		</div>
 	`,
@@ -96,6 +101,10 @@ export class Number implements ControlValueAccessor {
 	 * Set to `true` for a loading number component.
 	 */
 	@Input() skeleton = false;
+	/**
+	 * Set to `true` for an invalid number component.
+	 */
+	@Input() invalid = false;
 	/**
 	 * The unique id for the number component.
 	 */
@@ -124,6 +133,10 @@ export class Number implements ControlValueAccessor {
 	 * Sets the optional helper text.
 	 */
 	@Input() helperText;
+	/**
+	 * Sets the invalid text.
+	 */
+	@Input() invalidText;
 	/**
 	 * Emits event notifying other classes when a change in state occurs in the input.
 	 */
@@ -205,4 +218,8 @@ export class Number implements ControlValueAccessor {
 		this.propagateChange(this.value);
 	}
 
+	onNumberInputChange(event) {
+		this.value = event.target.value;
+		this.emitChangeEvent();
+	}
 }

src/number-input/number.stories.ts

@@ -17,15 +17,19 @@ storiesOf("Number", module).addDecorator(
 				[theme]="theme"
 				[min]="min"
 				[max]="max"
+				[invalid]="invalid"
+				[invalidText]="invalidText"
 				[disabled]="disabled">
 			</ibm-number>
 		`,
 		props: {
 			label: text("label", "Number Input Label"),
 			helperText: text("helper text", "Optional helper text here"),
+			invalidText: text("Form validation content", "Invalid number"),
 			theme: select("theme", ["dark", "light"], "dark"),
 			min: number("min", 0),
 			max: number("max", 100),
+			invalid: boolean("Show form validation", false),
 			disabled: boolean("disabled", false)
 		}
 	}))