Fixed demo aot build

Author: edcarroll

components/modal/modal.ts

@@ -9,11 +9,11 @@ import {ModalConfig, ModalSize} from './modal-config';
     selector: 'sui-modal',
     template: `
 <!-- Page dimmer for modal background. -->
-<sui-dimmer class="page" [(isDimmed)]="_dimBackground" [isClickable]="false" [transitionDuration]="transitionDuration" (click)="close()"></sui-dimmer>
+<sui-dimmer class="page" [(isDimmed)]="dimBackground" [isClickable]="false" [transitionDuration]="transitionDuration" (click)="close()"></sui-dimmer>
 <!-- Modal component, with transition component attached -->
 <div class="ui modal {{ size }}"
-     [suiTransition]="_transitionController"
-     [class.active]="_transitionController?.isVisible"
+     [suiTransition]="transitionController"
+     [class.active]="transitionController?.isVisible"
      [class.fullscreen]="isFullScreen"
      [class.basic]="isBasic"
      #modal>
@@ -83,7 +83,7 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     @Input()
     public isBasic:boolean;
 
-    private _transitionController:TransitionController;
+    public transitionController:TransitionController;
 
     // Transition to display modal with.
     @Input()
@@ -94,7 +94,7 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     public transitionDuration:number;
 
     // Whether or not the backround dimmer is active.
-    private _dimBackground:boolean;
+    public dimBackground:boolean;
     // True after `approve` or `deny` has been called.
     private _isClosing:boolean;
 
@@ -118,16 +118,16 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
             res => this.dismiss(() => this.onDeny.emit(res)));
 
         // Internal variable initialisation.
-        this._dimBackground = false;
+        this.dimBackground = false;
         this._isClosing = false;
-        this._transitionController = new TransitionController(false);
+        this.transitionController = new TransitionController(false);
     }
 
     public ngOnInit() {
         // Transition the modal to be visible.
-        this._transitionController.animate(new Transition(this.transition, this.transitionDuration, TransitionDirection.In));
+        this.transitionController.animate(new Transition(this.transition, this.transitionDuration, TransitionDirection.In));
         // Use a slight delay as the `<sui-dimmer>` cancels the initial transition.
-        setTimeout(() => this._dimBackground = true);
+        setTimeout(() => this.dimBackground = true);
     }
 
     public ngAfterViewInit() {
@@ -156,9 +156,9 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
             this._isClosing = true;
 
             // Transition the modal to be invisible.
-            this._dimBackground = false;
-            this._transitionController.stopAll();
-            this._transitionController.animate(
+            this.dimBackground = false;
+            this.transitionController.stopAll();
+            this.transitionController.animate(
                 new Transition(this.transition, this.transitionDuration, TransitionDirection.Out, () => {
                     // When done, emit a dismiss event, and fire the callback.
                     this.onDismiss.emit();

demo/src/app/pages/demo-pages.module.ts

@@ -5,7 +5,7 @@ import {SuiModule} from '../../../../components';
 import {DemoComponentsModule} from '../components/demo-components.module';
 
 import {GettingStartedPage} from './getting-started/getting-started.page';
-import {TestPage, AcceptRejectModalComponent} from './test/test.page';
+import {TestPage} from './test/test.page';
 
 import {AccordionPageComponents} from './accordion/accordion.page';
 import {CheckboxPageComponents} from './checkbox/checkbox.page';

demo/src/app/pages/modal/modal.page.ts

@@ -18,9 +18,7 @@ const exampleTemplateModalTemplate = `
 </ng-template>
 `;
 
-const exampleTemplateTemplate = `
-${exampleTemplateModalTemplate}
-
+export const exampleTemplateTemplate = exampleTemplateModalTemplate + `
 <div class="ui fluid action input">
     <input type="text" placeholder="Modal content..." [(ngModel)]="dynamicContent">
     <button class="ui primary button" (click)="open(dynamicContent)">Open</button>
@@ -33,8 +31,8 @@ const exampleComponentModalTemplate = `
     <p>{{ modal.context.question }}</p>
 </div>
 <div class="actions">
-    <button class="ui red button" (click)="modal.deny()">Cancel</button>
-    <button class="ui green button" (click)="modal.approve()">OK</button>
+    <button class="ui red button" (click)="modal.deny(null)">Cancel</button>
+    <button class="ui green button" (click)="modal.approve(null)">OK</button>
 </div>
 `;
 

demo/src/app/pages/test/test.page.ts

@@ -4,37 +4,6 @@ import {ModalConfig, ComponentModalConfig, TemplateModalConfig, ModalSize} from
 import {Modal} from '../../../../../components/modal/modal-controls';
 import {ModalTemplate} from '../../../../../components/modal/modal-template';
 
-interface IAcceptRejectModalContext {
-    title:string;
-    question:string;
-}
-
-@Component({
-    selector: 'modal-accept-reject',
-    template: `
-<div class="header">{{ modal.context.title }}</div>
-<div class="content">
-    <p>{{ modal.context.question }}</p>
-</div>
-<div class="actions">
-    <button class="ui red button" (click)="modal.deny('deny')">Cancel</button>
-    <button class="ui green button" (click)="modal.approve('approve')">OK</button>
-</div>
-`
-})
-export class AcceptRejectModalComponent {
-    constructor(public modal:Modal<IAcceptRejectModalContext, null>) {}
-}
-
-export class AcceptRejectModal extends ComponentModalConfig<IAcceptRejectModalContext> {
-    constructor(title:string, question:string) {
-        super(AcceptRejectModalComponent, { title, question }, false);
-
-        this.size = ModalSize.Small;
-        this.isBasic = true;
-    }
-}
-
 @Component({
     selector: 'demo-page-test',
     templateUrl: './test.page.html'
@@ -48,7 +17,7 @@ export class TestPage implements AfterViewInit {
 
     public ngAfterViewInit() {
         // const modal = new TemplateModalInstance<null, string, string>(this.modalTemplate, null, true);
-        const modal = new AcceptRejectModal("Are you sure?", "Are you sure you want to do this?");
+        // const modal = new AcceptRejectModal("Are you sure?", "Are you sure you want to do this?");
 
         // modal.closeResult = "default!";