Merge branch 'master' into position

Author: zvonimirfras

package-lock.json

@@ -146,6 +146,7 @@
     "zone.js": "0.9.0"
   },
   "dependencies": {
+    "@carbon/utils-position": "1.0.0",
     "flatpickr": "4.5.7",
     "ng2-flatpickr": "7.0.3"
   }

package.json

@@ -18,7 +18,7 @@ import {
 } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 // the AbsolutePosition is required to import the declaration correctly
-import position, { AbsolutePosition } from "./../utils/position";
+import { position, AbsolutePosition } from "@carbon/utils-position";
 import { cycleTabs, getFocusElementList } from "./../common/tab.service";
 import { DialogConfig } from "./dialog-config.interface";
 
@@ -40,63 +40,46 @@ import { DialogConfig } from "./dialog-config.interface";
 export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	/**
 	 * One static event observable to handle window resizing.
-	 * @protected
-	 * @static
-	 * @type {Observable<any>}
-	 * @memberof Dialog
 	 */
 	protected static resizeObservable: Observable<any> = fromEvent(window, "resize").pipe(throttleTime(100));
 	/**
 	 * Emits event that handles the closing of a `Dialog` object.
-	 * @type {EventEmitter<any>}
-	 * @memberof Dialog
 	 */
 	@Output() close: EventEmitter<any> = new EventEmitter();
 	/**
 	 * Receives `DialogConfig` interface object with properties of `Dialog`
-	 * explictly defined.
-	 * @type {DialogConfig}
-	 * @memberof Dialog
+	 * explicitly defined.
 	 */
 	@Input() dialogConfig: DialogConfig;
 	/**
 	 * Maintains a reference to the view DOM element of the `Dialog`.
-	 * @type {ElementRef}
-	 * @memberof Dialog
 	 */
 	@ViewChild("dialog") dialog: ElementRef;
 
 	/**
 	 * Stores the data received from `dialogConfig`.
-	 * @memberof Dialog
 	 */
 	public data = {};
 
 	/**
-	 * The placement of the `Dialog` is recieved from the `Position` service.
-	 * @type {Placement}
-	 * @memberof Dialog
+	 * The placement of the `Dialog` is received from the `Position` service.
 	 */
 	public placement: string;
 
 	/**
 	 * `Subscription` used to update placement in the event of a window resize.
-	 * @protected
-	 * @type {Subscription}
-	 * @memberof Dialog
 	 */
 	protected resizeSubscription: Subscription;
 	/**
 	 * Subscription to all the scrollable parents `scroll` event
 	 */
-	// add a new subscription temprarily so that contexts (such as tests)
+	// add a new subscription temporarily so that contexts (such as tests)
 	// that don't run ngAfterViewInit have something to unsubscribe in ngOnDestroy
 	protected scrollSubscription: Subscription = new Subscription();
 	/**
 	 * Handles offsetting the `Dialog` item based on the defined position
 	 * to not obscure the content beneath.
 	 * @protected
-	 * @memberof Dialog
 	 */
 	protected addGap = {
 		"left": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),
@@ -110,13 +93,11 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	/**
 	 * Creates an instance of `Dialog`.
 	 * @param {ElementRef} elementRef
-	 * @memberof Dialog
 	 */
-	constructor(protected elementRef: ElementRef) {}
+	constructor(protected elementRef: ElementRef) {	}
 
 	/**
-	 * Initilize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.
-	 * @memberof Dialog
+	 * Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.
 	 */
 	ngOnInit() {
 		this.placement = this.dialogConfig.placement.split(",")[0];
@@ -126,14 +107,13 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 			this.placeDialog();
 		});
 
-		// run any additional initlization code that consuming classes may have
+		// run any additional initialization code that consuming classes may have
 		this.onDialogInit();
 	}
 
 	/**
 	 * After the DOM is ready, focus is set and dialog is placed
 	 * in respect to the parent element.
-	 * @memberof Dialog
 	 */
 	ngAfterViewInit() {
 		const dialogElement = this.dialog.nativeElement;
@@ -236,30 +216,9 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 		// split always returns an array, so we can just use the auto position logic
 		// for single positions too
 		const placements = this.dialogConfig.placement.split(",");
-		const weightedPlacements = placements.map(placement => {
-			const pos = findPosition(parentEl, el, placement);
-			let box = position.getPlacementBox(el, pos);
-			let hiddenHeight = box.bottom - window.innerHeight - window.scrollY;
-			let hiddenWidth = box.right - window.innerWidth - window.scrollX;
-			// if the hiddenHeight or hiddenWidth is negative, reset to offsetHeight or offsetWidth
-			hiddenHeight = hiddenHeight < 0 ? el.offsetHeight : hiddenHeight;
-			hiddenWidth = hiddenWidth < 0 ? el.offsetWidth : hiddenWidth;
-			const area = el.offsetHeight * el.offsetWidth;
-			const hiddenArea = hiddenHeight * hiddenWidth;
-			let visibleArea = area - hiddenArea;
-			// if the visibleArea is 0 set it back to area (to calculate the percentage in a useful way)
-			visibleArea = visibleArea === 0 ? area : visibleArea;
-			const visiblePercent = visibleArea / area;
-			return {
-				placement,
-				weight: visiblePercent
-			};
-		});
 
-		// sort the placements from best to worst
-		weightedPlacements.sort((a, b) => b.weight - a.weight);
-		// pick the best!
-		dialogPlacement = weightedPlacements[0].placement;
+		// find the best placement
+		dialogPlacement = position.findBestPlacement(parentEl, el, placements);
 
 		// calculate the final position
 		const pos = findPosition(parentEl, el, dialogPlacement);
@@ -293,7 +252,6 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	 * Sets up a event Listener to close `Dialog` if click event occurs outside
 	 * `Dialog` object.
 	 * @param {any} event
-	 * @memberof Dialog
 	 */
 	@HostListener("document:click", ["$event"])
 	clickClose(event) {
@@ -305,15 +263,13 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 
 	/**
 	 * Closes `Dialog` object by emitting the close event upwards to parents.
-	 * @memberof Dialog
 	 */
 	public doClose() {
 		this.close.emit();
 	}
 
 	/**
 	 * At destruction of component, `Dialog` unsubscribes from handling window resizing changes.
-	 * @memberof Dialog
 	 */
 	ngOnDestroy() {
 		this.resizeSubscription.unsubscribe();

src/dialog/dialog.component.ts

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

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

@@ -48,7 +48,6 @@ storiesOf("Overflow Menu", module)
 	}))
 	.add("With links", () => ({
 		template: `
-			<app-experimental-component></app-experimental-component>
 			<ibm-overflow-menu [flip]="flip" >
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)" (click)="click($event)">
 					An example option that is really long to show what should be done to handle long text
@@ -57,7 +56,9 @@ storiesOf("Overflow Menu", module)
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 3</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 4</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option href="https://www.ibm.com" disabled="true" (selected)="selected($event)">Disabled</ibm-overflow-menu-option>
-				<ibm-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">Danger option</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">
+					Danger option
+				</ibm-overflow-menu-option>
 			</ibm-overflow-menu>
 			<ibm-placeholder></ibm-placeholder>
 		`,

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

@@ -17,7 +17,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { Observable, fromEvent, of, Subscription } from "rxjs";
 
 import { AbstractDropdownView } from "./abstract-dropdown-view.class";
-import { position } from "../utils/position";
+import { position } from "@carbon/utils-position";
 import { I18n } from "./../i18n/i18n.module";
 import { ListItem } from "./list-item.interface";
 import { DropdownService } from "./dropdown.service";

src/dropdown/dropdown.component.ts

@@ -2,7 +2,7 @@ import { Injectable, ElementRef } from "@angular/core";
 import { PlaceholderService } from "./../placeholder/placeholder.module";
 import { fromEvent, Subscription } from "rxjs";
 import { throttleTime } from "rxjs/operators";
-import position from "./../utils/position";
+import { position } from "@carbon/utils-position";
 
 const defaultOffset = { top: 0, left: 0 };
 

src/dropdown/dropdown.service.ts

@@ -1,4 +1,10 @@
-import { Component, Input, ChangeDetectorRef, Output, EventEmitter, HostBinding } from "@angular/core";
+import {
+	Component,
+	Input,
+	Output,
+	EventEmitter,
+	HostBinding
+} from "@angular/core";
 import { Select } from "../select/select.component";
 
 @Component({
@@ -20,15 +26,27 @@ export class TimePickerSelect extends Select {
 	@HostBinding("class.bx--select") timeSelect = true;
 	@HostBinding("class.bx--time-picker__select") timePickerSelect = true;
 
+	@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
+
+	/**
+	 * Set to true for a loading select.
+	 */
+	@Input() skeleton = false;
+
+	/**
+	 * `light` or `dark` select theme
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	@HostBinding("class.bx--skeleton") timePickerSelectSkeleton = this.skeleton;
-	@HostBinding("class.bx--select--light") timePickerSelectLight = (true ? this.theme === "light" : false);
 
-	@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
+	@HostBinding("class.bx--select--light") get timePickerSelectLight() {
+		return this.theme === "light";
+	}
 
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
 	onChange(event) {
 		this.valueChange.emit(event.target.value);
-		console.log(this.theme);
 	}
 }

src/timepicker-select/timepicker-select.component.ts

@@ -9,14 +9,13 @@ import {
 @Component({
 	selector: "ibm-timepicker",
 	template: `
-			<div
-				[ngClass]="{
-					'bx--select--light': theme === 'light',
-					'bx--skeleton': skeleton
-				}"
-				class="bx--time-picker__input">
+			<div class="bx--time-picker__input">
 				<label *ngIf="!skeleton" [attr.for]="id" class="bx--label">{{label}}</label>
 				<input
+					[ngClass]="{
+						'bx--text-input--light': theme === 'light',
+						'bx--skeleton': skeleton
+					}"
 					[value]="value"
 					[placeholder]="placeholder"
 					[pattern]="pattern"
@@ -45,6 +44,16 @@ export class TimePicker {
 	@Input() disabled = false;
 	@Input() value: string;
 
+	/**
+	 * Set to true for a loading select.
+	 */
+	@Input() skeleton = false;
+
+	/**
+	 * `light` or `dark` select theme
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
 	onChange(event) {

src/timepicker/timepicker.component.ts

@@ -2,7 +2,12 @@ import { action } from "@storybook/addon-actions";
 import { TimePickerSelectModule } from "../timepicker-select/timepicker-select.module";
 import { TimePickerModule } from "./timepicker.module";
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs/angular";
+import {
+	withKnobs,
+	boolean,
+	text,
+	select
+} from "@storybook/addon-knobs/angular";
 import { ExperimentalModule } from "..";
 
 storiesOf("Time Picker", module)
@@ -18,12 +23,12 @@ storiesOf("Time Picker", module)
 	.addDecorator(withKnobs)
 	.add("Simple", () => ({
 		template: `
-		<ibm-timepicker (valueChange)="timePickerChange($event)" [value]="value" [disabled]="disableTime" label="Select a time">
-			<ibm-timepicker-select (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+		<ibm-timepicker [theme]="theme" (valueChange)="timePickerChange($event)" [value]="value" [disabled]="disableTime" label="Select a time">
+			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
 				<option selected value="AM">AM</option>
 				<option value="PM">PM</option>
 			</ibm-timepicker-select>
-			<ibm-timepicker-select (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
 				<option selected value="Time Zone 1">Time Zone 1</option>
 				<option value="Time Zone 2">Time Zone 2</option>
 			</ibm-timepicker-select>
@@ -35,6 +40,7 @@ storiesOf("Time Picker", module)
 			timePickerSelectChange: action("Time picker select change fired"),
 			value: text("Time in 12hr format", "12:12"),
 			disableTime: boolean("disabled time", false),
-			disabledSelect: boolean("disabled selects", false)
+			disabledSelect: boolean("disabled selects", false),
+			theme: select("Theme", ["dark", "light"], "dark")
 		}
 	}));