diff --git a/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts b/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts
index 94de9cca..ea483571 100644
--- a/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts
+++ b/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts
@@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
import { ModalModule, Modal as BaseModal } from '../../../../components/angular2-modal';
@@ -20,7 +21,7 @@ function getProviders(): any[] {
}
@NgModule({
- imports: [ ModalModule, CommonModule ],
+ imports: [ ModalModule, CommonModule, FormsModule ],
declarations: [
BSModalFooter,
BSMessageModalTitle,
diff --git a/src/components/angular2-modal/plugins/bootstrap/index.ts b/src/components/angular2-modal/plugins/bootstrap/index.ts
index dbc7e790..111f6af0 100644
--- a/src/components/angular2-modal/plugins/bootstrap/index.ts
+++ b/src/components/angular2-modal/plugins/bootstrap/index.ts
@@ -16,7 +16,12 @@ export {
export { ModalOpenContext, ModalOpenContextBuilder } from '../../../../components/angular2-modal';
export { OneButtonPreset, OneButtonPresetBuilder } from './presets/one-button-preset';
-export { TwoButtonPreset, TwoButtonPresetBuilder } from './presets/two-button-preset';
+export {
+ TwoButtonPreset,
+ TwoButtonPresetBuilder,
+ PromptPreset,
+ PromptPresetBuilder
+} from './presets/two-button-preset';
export { Modal } from './modal';
export { BootstrapModalModule } from './bootstrap.module';
diff --git a/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts b/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts
index e9324389..dcbc91d2 100644
--- a/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts
+++ b/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts
@@ -44,10 +44,26 @@ export class BSMessageModalTitle {
@Component({
selector: 'modal-body',
encapsulation: ViewEncapsulation.None,
- template: `
`
+ styles: [`.form-group {
+ margin-top: 10px;
+ }`],
+ template: `
+`
})
export class BSMessageModalBody {
+ private context: MessageModalPreset;
constructor(public dialog: DialogRef) {
+ this.context = dialog.context;
}
}
diff --git a/src/components/angular2-modal/plugins/bootstrap/modal.ts b/src/components/angular2-modal/plugins/bootstrap/modal.ts
index 4199d1ff..4ce7fa44 100644
--- a/src/components/angular2-modal/plugins/bootstrap/modal.ts
+++ b/src/components/angular2-modal/plugins/bootstrap/modal.ts
@@ -19,7 +19,7 @@ import {
import { BSModalContainer } from './modal-container.component';
import { OneButtonPresetBuilder } from './../bootstrap/presets/one-button-preset';
-import { TwoButtonPresetBuilder } from './../bootstrap/presets/two-button-preset';
+import { TwoButtonPresetBuilder, PromptPresetBuilder } from './../bootstrap/presets/two-button-preset';
@Injectable()
@@ -32,8 +32,8 @@ export class Modal extends Modal_ {
return new OneButtonPresetBuilder(this, {isBlocking: false});
}
- prompt(): OneButtonPresetBuilder {
- return new OneButtonPresetBuilder(this, {isBlocking: true, keyboard: null});
+ prompt(): PromptPresetBuilder {
+ return new PromptPresetBuilder(this, {isBlocking: true, keyboard: null});
}
confirm(): TwoButtonPresetBuilder {
diff --git a/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts b/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts
index 5053d7d6..63e601e4 100644
--- a/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts
+++ b/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts
@@ -1,5 +1,5 @@
import { ResolvedReflectiveProvider } from '@angular/core';
-import { Modal, FluentAssignMethod, extend } from '../../../../../components/angular2-modal';
+import { Modal, FluentAssignMethod, extend, arrayUnion } from '../../../../../components/angular2-modal';
import { BSMessageModal } from '../message-modal.component';
import { MessageModalPresetBuilder } from './message-modal-preset';
import { OneButtonPreset } from './one-button-preset';
@@ -19,43 +19,87 @@ export interface TwoButtonPreset extends OneButtonPreset {
cancelBtnClass: string;
}
+/** Common two button preset */
+export abstract class AbstractTwoButtonPresetBuilder extends MessageModalPresetBuilder {
+ okBtn: FluentAssignMethod;
+ okBtnClass: FluentAssignMethod;
+ cancelBtn: FluentAssignMethod;
+ cancelBtnClass: FluentAssignMethod;
+
+ constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined,
+ initialSetters: string[] = []) {
+ super(extend({
+ modal: modal,
+ okBtn: 'OK',
+ okBtnClass: 'btn btn-primary',
+ cancelBtn: 'Cancel',
+ cancelBtnClass: 'btn btn-default'
+ }, defaultValues || {}), arrayUnion([
+ 'okBtn',
+ 'okBtnClass',
+ 'cancelBtn',
+ 'cancelBtnClass',
+ ], initialSetters));
+ }
+
+ $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
+ this.addButton(
+ config.cancelBtnClass,
+ config.cancelBtn,
+ (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.dismiss()
+ );
+
+ return super.$$beforeOpen(config);
+ }
+}
+
/**
* A Preset for a classic 2 button modal window.
*/
-export class TwoButtonPresetBuilder extends MessageModalPresetBuilder {
- okBtn: FluentAssignMethod;
- okBtnClass: FluentAssignMethod;
- cancelBtn: FluentAssignMethod;
- cancelBtnClass: FluentAssignMethod;
-
- constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined) {
- super(extend({
- modal: modal,
- okBtn: 'OK',
- okBtnClass: 'btn btn-primary',
- cancelBtn: 'Cancel',
- cancelBtnClass: 'btn btn-default'
- }, defaultValues || {}), [
- 'okBtn',
- 'okBtnClass',
- 'cancelBtn',
- 'cancelBtnClass'
- ]);
- }
-
- $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
- this.addButton(
- config.okBtnClass,
- config.okBtn,
- (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.close(true)
- )
- .addButton(
- config.cancelBtnClass,
- config.cancelBtn,
- (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.dismiss()
- );
-
- return super.$$beforeOpen(config);
- }
+export class TwoButtonPresetBuilder extends AbstractTwoButtonPresetBuilder {
+
+ constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined) {
+ super(modal, defaultValues);
+ }
+
+ $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
+ this.addButton(
+ config.okBtnClass,
+ config.okBtn,
+ (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.close(true)
+ );
+
+ return super.$$beforeOpen(config);
+ }
+}
+
+export interface PromptPreset extends TwoButtonPreset {
+ showInput: boolean;
+ /** Default value shown in the prompt. */
+ defaultValue: string;
+ /** A placeholder for the input element. */
+ placeholder: string;
+
+}
+
+export class PromptPresetBuilder extends AbstractTwoButtonPresetBuilder {
+ placeholder: FluentAssignMethod;
+ defaultValue: FluentAssignMethod;
+
+ constructor(modal: Modal, defaultValues: PromptPreset = undefined) {
+ super(modal, extend({ showInput: true }, defaultValues || {}),
+ ['placeholder', 'defaultValue']);
+ }
+
+ $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] {
+ this.addButton(
+ config.okBtnClass,
+ config.okBtn,
+ (cmp: BSMessageModal, $event: MouseEvent) =>
+ cmp.dialog.close((cmp.dialog.context as PromptPreset).defaultValue)
+ );
+
+ return super.$$beforeOpen(config);
+ }
}
diff --git a/src/demo/app/bootstrap-demo/presets.ts b/src/demo/app/bootstrap-demo/presets.ts
index ae112420..40234f08 100644
--- a/src/demo/app/bootstrap-demo/presets.ts
+++ b/src/demo/app/bootstrap-demo/presets.ts
@@ -1,7 +1,8 @@
import {
Modal,
OneButtonPresetBuilder,
- TwoButtonPresetBuilder
+ TwoButtonPresetBuilder,
+ PromptPresetBuilder
} from '../../../components/angular2-modal/plugins/bootstrap/index';
export function alert(modal: Modal): OneButtonPresetBuilder {
@@ -22,20 +23,12 @@ export function alert(modal: Modal): OneButtonPresetBuilder {
`);
}
-export function prompt(modal: Modal): OneButtonPresetBuilder {
+export function prompt(modal: Modal): PromptPresetBuilder {
return modal.prompt()
.size('lg')
.title('A simple Prompt style modal window')
- .body(`
- Prompt is a classic (title/body/footer) 1 button modal window that
- blocks.
- Configuration:
-
- - Blocks (only button click can dismiss)
- - Size large
- - Keyboard can not dismiss
- - HTML content
-
`);
+ .placeholder('This is a placeholder')
+ .body('Please type a value!');
}
export function confirm(modal: Modal): TwoButtonPresetBuilder {