refactor(overlay): add inElement as a base context property (overla…

…y-context)

refactor(overlay): remove `inside` property from `OverlayConfig`
demo: apply inElement property change to demo pages.

BREAKING CHANGE: `OverlayConfig` no longer sets the bounds area of the overlay, instead the context is used which means it is now user configurable

src/components/angular2-modal/models/overlay-context.ts

@@ -6,46 +6,55 @@ import { DialogRef } from './dialog-ref';
 import { WideVCRef } from './tokens';
 
 export const DEFAULT_VALUES = {
-    isBlocking: true,
-    keyboard: [27],
-    supportsKey: function supportsKey(keyCode: number): boolean {
-        return (<Array<number>>this.keyboard).indexOf(keyCode) > -1;
-    }
+  inElement: false,
+  isBlocking: true,
+  keyboard: [27],
+  supportsKey: function supportsKey(keyCode: number): boolean {
+    return (<Array<number>>this.keyboard).indexOf(keyCode) > -1;
+  }
 };
 
 const DEFAULT_SETTERS = [
-    'isBlocking',
-    'keyboard'
+  'inElement',
+  'isBlocking',
+  'keyboard'
 ];
 
 export class OverlayContext {
-    /**
-     * Describes if the modal is blocking modal.
-     * A Blocking modal is not closable by clicking outside of the modal window.
-     * Defaults to false.
-     */
-    isBlocking: boolean;
+  /**
+   * Describes if the modal is rendered within the container element.
+   * The container element is the ViewContainerRef supplied.
+   * Defaults to false.
+   */
+  inElement: boolean;
+
+  /**
+   * Describes if the modal is blocking modal.
+   * A Blocking modal is not closable by clicking outside of the modal window.
+   * Defaults to false.
+   */
+  isBlocking: boolean;
 
-    /**
-     * Keyboard value/s that close the modal.
-     * Accepts either a single numeric value or an array of numeric values.
-     * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise.
-     * Defaults to 27, set `null` implicitly to disable.
-     */
-    keyboard: Array<number> | number;
+  /**
+   * Keyboard value/s that close the modal.
+   * Accepts either a single numeric value or an array of numeric values.
+   * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise.
+   * Defaults to 27, set `null` implicitly to disable.
+   */
+  keyboard: Array<number> | number;
 
-    normalize(): void {
-        if (this.isBlocking !== false)
-            this.isBlocking = true;
+  normalize(): void {
+    if (this.isBlocking !== false)
+      this.isBlocking = true;
 
-        if (this.keyboard === null) {
-            this.keyboard = [];
-        } else if (typeof this.keyboard === 'number') {
-            this.keyboard = [<number>this.keyboard];
-        } else if (!Array.isArray(<Array<number>>this.keyboard)) {
-            this.keyboard = DEFAULT_VALUES.keyboard;
-        }
+    if (this.keyboard === null) {
+      this.keyboard = [];
+    } else if (typeof this.keyboard === 'number') {
+      this.keyboard = [<number>this.keyboard];
+    } else if (!Array.isArray(<Array<number>>this.keyboard)) {
+      this.keyboard = DEFAULT_VALUES.keyboard;
     }
+  }
 }
 
 /**
@@ -54,35 +63,40 @@ export class OverlayContext {
  */
 @Injectable()
 export class OverlayContextBuilder<T extends OverlayContext> extends FluentAssign<T> {
-    /**
-     * Describes if the modal is blocking modal.
-     * A Blocking modal is not closable by clicking outside of the modal window.
-     * Defaults to false.
-     */
-    isBlocking: FluentAssignMethod<boolean, this>;
+  /**
+   * Describes if the modal is rendered within the container element.
+   * The container element is the ViewContainerRef supplied.
+   * Defaults to false.
+   */
+  inElement: FluentAssignMethod<boolean, this>;
 
-    /**
-     * Keyboard value/s that close the modal.
-     * Accepts either a single numeric value or an array of numeric values.
-     * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise.
-     * Defaults to 27, set `null` implicitly to disable.
-     */
-    keyboard: FluentAssignMethod<Array<number> | number, this>;
+  /**
+   * Describes if the modal is blocking modal.
+   * A Blocking modal is not closable by clicking outside of the modal window.
+   * Defaults to false.
+   */
+  isBlocking: FluentAssignMethod<boolean, this>;
 
+  /**
+   * Keyboard value/s that close the modal.
+   * Accepts either a single numeric value or an array of numeric values.
+   * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise.
+   * Defaults to 27, set `null` implicitly to disable.
+   */
+  keyboard: FluentAssignMethod<Array<number> | number, this>;
 
-    constructor(
-        defaultValues: T | T[] = undefined,
-        initialSetters: string[] = undefined,
-        baseType: new () => T = undefined
-    ) {
-        super(
-            extend<any>(DEFAULT_VALUES, defaultValues || {}),
-            arrayUnion<string>(DEFAULT_SETTERS, initialSetters || []),
-            baseType
-        );
-    }
+
+  constructor(defaultValues: T | T[] = undefined,
+              initialSetters: string[] = undefined,
+              baseType: new () => T = undefined) {
+    super(
+      extend<any>(DEFAULT_VALUES, defaultValues || {}),
+      arrayUnion<string>(DEFAULT_SETTERS, initialSetters || []),
+      baseType
+    );
+  }
 }
 
 export interface ModalControllingContextBuilder<T> {
-    open(viewContainer?: WideVCRef): Promise<DialogRef<T>>;
+  open(viewContainer?: WideVCRef): Promise<DialogRef<T>>;
 }

src/components/angular2-modal/models/tokens.ts

@@ -39,13 +39,6 @@ export interface OverlayConfig {
    */
   viewContainer?: WideVCRef;
 
-  /**
-   * If true, render's the component inside the ViewContainerRef,
-   * otherwise render's the component in the root element (body in DOM)
-   * Default: true if ViewContainer supplied, false if not supplied.
-   */
-  inside?: boolean;
-
   renderer?: OverlayRenderer;
 
   /**

src/components/angular2-modal/overlay/overlay.service.ts

@@ -73,7 +73,7 @@ export class Overlay {
     }
 
     let dialog = new DialogRef<any>(this, config.context || {});
-    dialog.inElement = !!config.inside;
+    dialog.inElement = !!config.context.inElement;
 
     let cmpRef = renderer.render(dialog, vcRef);
 

src/demo/app/bootstrap-demo/presets.ts

@@ -1,15 +1,15 @@
 import {
-    Modal,
-    OneButtonPresetBuilder,
-    TwoButtonPresetBuilder
+  Modal,
+  OneButtonPresetBuilder,
+  TwoButtonPresetBuilder
 } from '../../../components/angular2-modal/plugins/bootstrap/index';
 
 export function alert(modal: Modal): OneButtonPresetBuilder {
-    return modal.alert()
-        .size('lg')
-        .showClose(true)
-        .title('A simple Alert style modal window')
-        .body(`
+  return modal.alert()
+    .size('lg')
+    .showClose(true)
+    .title('A simple Alert style modal window')
+    .body(`
         <h4>Alert is a classic (title/body/footer) 1 button modal window that 
         does not block.</h4>
         <b>Configuration:</b>
@@ -23,10 +23,10 @@ export function alert(modal: Modal): OneButtonPresetBuilder {
 }
 
 export function prompt(modal: Modal): OneButtonPresetBuilder {
-    return modal.prompt()
-        .size('lg')
-        .title('A simple Prompt style modal window')
-        .body(`
+  return modal.prompt()
+    .size('lg')
+    .title('A simple Prompt style modal window')
+    .body(`
             <h4>Prompt is a classic (title/body/footer) 1 button modal window that 
             blocks.</h4>
             <b>Configuration:</b>
@@ -39,13 +39,13 @@ export function prompt(modal: Modal): OneButtonPresetBuilder {
 }
 
 export function confirm(modal: Modal): TwoButtonPresetBuilder {
-    return modal.confirm()
-        .size('lg')
-        .titleHtml(`
+  return modal.confirm()
+    .size('lg')
+    .titleHtml(`
             <div class="modal-title" 
                  style="font-size: 22px; color: grey; text-decoration: underline;">
                  A simple Confirm style modal window</div>`)
-        .body(`
+    .body(`
             <h4>Confirm is a classic (title/body/footer) 2 button modal window that blocks.</h4>
             <b>Configuration:</b>
             <ul>
@@ -58,30 +58,31 @@ export function confirm(modal: Modal): TwoButtonPresetBuilder {
 }
 
 export function cascading(modal: Modal) {
-    let presets = [];
+  let presets = [];
 
-    presets.push(alert(modal));
-    presets.push(prompt(modal));
-    presets.push(confirm(modal));
-    presets.push(
-        modal.prompt()
-            .size('sm')
-            .title('Cascading modals!')
-            .body('Find your way out...')
-    );
+  presets.push(alert(modal));
+  presets.push(prompt(modal));
+  presets.push(confirm(modal));
+  presets.push(
+    modal.prompt()
+      .size('sm')
+      .title('Cascading modals!')
+      .body('Find your way out...')
+  );
 
-    return {
-        open: () => {
-            let ret = presets.shift().open();
-            while (presets.length > 0) presets.shift().open();
-            return ret;
-        }
-    };
+  return {
+    open: () => {
+      let ret = presets.shift().open();
+      while (presets.length > 0) presets.shift().open();
+      return ret;
+    }
+  };
 }
 
 export function inElement(modal: Modal) {
-    return modal.prompt()
-        .size('sm')
-        .title('A modal contained by an element')
-        .body('Try stacking up more modals!');
+  return modal.prompt()
+    .size('sm')
+    .title('A modal contained by an element')
+    .inElement(true)
+    .body('Try stacking up more modals!');
 }

src/demo/app/home/home.ts

@@ -18,6 +18,7 @@ export class Home {
     this.modal.alert()
       .title('Angular 2 Modal')
       .templateRef(this.myTemplate)
+      .inElement(true)
       .open('home-overlay-container')
       .then(d => d.result)
       .catch((e) => {

src/demo/app/vex-demo/vex-demo.ts

@@ -58,7 +58,7 @@ export class VexDemo {
       },
       {
         text: 'In Element example',
-        factory: () => presets.alert.call(this, this.modal).open('demo-head')
+        factory: () => presets.alert.call(this, this.modal).inElement(true).open('demo-head')
       },
       {
         text: 'Custom Modal example',