diff options
author | Michael Lando <ml636r@att.com> | 2018-05-21 20:19:48 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@onap.org> | 2018-05-21 20:19:48 +0000 |
commit | 05b37297177e8a342668c15e5d6f738b51f7aedd (patch) | |
tree | e236c96df52a13f935292db8aa73e84d0c41ad8a /stories/ng2-component-lab/modals.component.exp.ts | |
parent | 884dfb789593d2a3cc319047ab1f0215778aec9f (diff) | |
parent | 1994c98063c27a41797dec01f2ca9fcbe33ceab0 (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.ts | 126 |
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] + } + ]); |