summaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/modals.component.exp.ts
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-05-21 20:19:48 +0000
committerGerrit Code Review <gerrit@onap.org>2018-05-21 20:19:48 +0000
commit05b37297177e8a342668c15e5d6f738b51f7aedd (patch)
treee236c96df52a13f935292db8aa73e84d0c41ad8a /stories/ng2-component-lab/modals.component.exp.ts
parent884dfb789593d2a3cc319047ab1f0215778aec9f (diff)
parent1994c98063c27a41797dec01f2ca9fcbe33ceab0 (diff)
Merge "init commit onap ui"2.0.0-ONAPbeijing2.0.0-ONAP
Diffstat (limited to 'stories/ng2-component-lab/modals.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/modals.component.exp.ts126
1 files changed, 126 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/modals.component.exp.ts b/stories/ng2-component-lab/modals.component.exp.ts
new file mode 100644
index 0000000..e7e38bc
--- /dev/null
+++ b/stories/ng2-component-lab/modals.component.exp.ts
@@ -0,0 +1,126 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+
+const sourceStyles:string =`
+ .example-source {
+ background: #eeeeee;
+ padding: 10px;
+ border: 1px solid #999999;
+ margin-top:30px;
+ }
+ .example-source pre {
+ overflow: hidden;
+ background: #dddddd;
+ margin-top: 5px;
+ padding: 5px;
+ user-select: text;
+ }
+ .example-source pre .comment{
+ color:#666;
+ opacity:0.4;
+ font-style:italic;
+ transition: opacity 400ms ease-in;
+ }
+ .example-source pre:hover .comment {
+ opacity:1;
+ }
+`;
+
+export default experimentOn('Modals')
+ .group("Modals", [
+ {
+ id: 'standardModal',
+ showSource: false,
+ title: 'Standard modal',
+ description: 'Opens a modal with a custom title, message, and confirm button with a callback.',
+ template: `
+ <modal-consumer [action]="'openActionModal'"></modal-consumer>
+ <div class="example-source">Source Code:
+ <pre>
+ const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
+ 'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
+
+ this.modalService.openActionModal('Standard Modal', MODAL_CONTENT, "OK", this.onConfirmAction, "sampleTestId");
+
+ private onConfirmAction = ():void => {{ '{' }}
+ alert("Action has been confirmed");
+ {{ '}' }};
+ </pre></div>`,
+ styles: [sourceStyles]
+ },
+ {
+ id: 'alertModal',
+ showSource: false,
+ title: 'Alert modal',
+ description: 'Opens a standard alert modal with a custom title and message.',
+ template: `
+
+
+ <modal-consumer [action]="'openAlertModal'"></modal-consumer>
+ <div class="example-source">Source Code:
+ <pre>
+ const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
+ 'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
+
+ this.modalService.openAlertModal("Alert Title", MODAL_CONTENT, "Continue", this.onConfirmAction, "sampleTestId");
+ </pre></div>`,
+ styles: [sourceStyles]
+ },
+ {
+ id: 'errorModal',
+ showSource: false,
+ title: 'Error modal',
+ description: `Opens a standard error modal with a custom message.`,
+ template: `<modal-consumer [action]="'openErrorModal'"></modal-consumer>
+ <div class="example-source">Source Code:
+ <pre>
+
+ this.modalService.openErrorModal("An error has occurred!", "sampleTestId");
+ </pre></div>`,
+ styles: [sourceStyles]
+ },
+ {
+ id: 'customModal1',
+ showSource: false,
+ title: 'Custom modal 1',
+ description: 'Opens a modal with dynamic inner content and customizable title, buttons, and callbacks.',
+ template: `
+ <modal-consumer [action]="'openCustomModal1'"></modal-consumer>
+ <div class="example-source">Source Code:
+ <pre>
+
+ <span class="comment">//create modal config object </span>
+ let modalConfig:IModalConfig = {{ '{' }}
+ size: ModalSize.small,
+ title: 'Title',
+ type: ModalType.standard,
+ buttons: [
+ {{ '{' }}text:"Save", size:"'x-small'", callback:this.customModalOnSave, closeModal:false{{ '}' }},
+ {{ '{' }}text:"Cancel", size:"'x-small'", closeModal:true{{ '}' }}]
+ {{ '}' }};
+
+ <span class="comment">//open modal with dynamically created 'modalInnerContent' example component. Send data object with input 'name'. </span>
+ this.modalService.openCustomModal(modalConfig, ModalInnerContent, {{ '{' }}name: "Sample Content"{{ '}' }});
+
+ private customModalOnDone = ():void => {{ '{' }}
+ let currentInstance:any = this.modalService.getCurrentInstance();
+ alert("Save with result: " + currentInstance.innerModalContent.instance.name);
+ {{ '}' }};
+
+ private customModalOnSave = ():void => {{ '{' }}
+ let currentInstance:any = this.modalService.getCurrentInstance();
+ alert("Save with result: " + currentInstance.innerModalContent.instance.name);
+ {{ '}' }};
+ </pre></div>`,
+ styles: [sourceStyles]
+ },
+ {
+ id: 'customModal2',
+ showSource: false,
+ title: 'Custom modal 2',
+ description: 'Opens a modal with, and change his buttons and title',
+ template: `
+ <modal-consumer [action]="'openCustomModal2'"></modal-consumer>
+ `,
+ styles: [sourceStyles]
+ }
+ ]);