Merge branch 'master' into toggle-label

Author: zvonimirfras

package-lock.json

@@ -85,7 +85,7 @@
     "@carbon/icons-angular": "10.1.0",
     "@commitlint/cli": "7.5.2",
     "@commitlint/config-conventional": "7.5.0",
-    "@compodoc/compodoc": "1.1.9",
+    "@compodoc/compodoc": "1.1.7",
     "@storybook/addon-actions": "5.0.6",
     "@storybook/addon-knobs": "5.0.6",
     "@storybook/addon-links": "5.0.6",
@@ -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

@@ -48,8 +48,8 @@ import { BaseModal } from "./base-modal.class";
 @Component({
 	selector: "ibm-alert-modal",
 	template: `
-		<ibm-modal [theme]="modalType" [modalLabel]="modalTitle">
-			<ibm-modal-header (closeSelect)="closeModal()">
+		<ibm-modal [theme]="modalType" [modalLabel]="modalTitle" (overlaySelected)="dismissModal()">
+			<ibm-modal-header (closeSelect)="dismissModal()">
 				<p class="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
       			<p class="bx--modal-header__heading bx--type-beta">{{modalTitle}}</p>
 			</ibm-modal-header>
@@ -59,7 +59,7 @@ import { BaseModal } from "./base-modal.class";
 			<ibm-modal-footer *ngIf="buttons.length > 0">
 				<ng-container *ngFor="let button of buttons; let i = index">
 					<button
-						ibmButton="{{button.type}}"
+						[ibmButton]="button.type"
 						(click)="buttonClicked(i)"
 						[id]="button.id"
 						[attr.modal-primary-focus]="(button.type.indexOf('primary') !== -1 ? '' : null)">
@@ -73,15 +73,14 @@ import { BaseModal } from "./base-modal.class";
 export class AlertModal extends BaseModal {
 	/**
 	 * Creates an instance of `AlertModal`.
-	 * @param {ModalService} modalService
-	 * @memberof AlertModal
 	 */
 	constructor(
 		@Inject("modalType") public modalType = "default",
 		@Inject("modalLabel") public modalLabel: string,
 		@Inject("modalTitle") public modalTitle: string,
 		@Inject("modalContent") public modalContent: string,
-		@Inject("buttons") public buttons = []
+		@Inject("buttons") public buttons = [],
+		@Inject("close") public onClose: Function
 	) {
 		super();
 		for (let i = 0; i < this.buttons.length; i++) {
@@ -103,4 +102,11 @@ export class AlertModal extends BaseModal {
 
 		this.closeModal();
 	}
+
+	dismissModal() {
+		if (this.onClose && this.onClose() === false) {
+			return;
+		}
+		this.closeModal();
+	}
 }

src/modal/alert-modal.component.ts

@@ -40,6 +40,10 @@ export interface AlertModalData {
 	 * Array of `ModalButton`s
 	 */
 	buttons?: Array<ModalButton>;
+	/**
+	 * Callback for non-specific close events. `return false;` to prevent the modal from closing
+	 */
+	close?: Function;
 }
 
 export enum ModalButtonType {

src/modal/alert-modal.interface.ts

@@ -1,7 +1,7 @@
 import { Output, EventEmitter } from "@angular/core";
 
 /**
- * Extend `BaseModal` in your custom modal implementations to ensure consistent close behaviour.
+ * Extend `BaseModal` in your custom modal implementations to ensure consistent close behavior.
  *
  * `ModalService` depends on the `close` event to correctly clean up the component.
  */