From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- .../components/colors-table.component.ts | 26 +++ .../components/modal-consumer.component.ts | 106 ++++++++++++ .../modal-inner-content-example.component.ts | 16 ++ .../components/notifications-example.component.ts | 57 +++++++ .../components/svg-icons-table.component.ts | 189 +++++++++++++++++++++ 5 files changed, 394 insertions(+) create mode 100644 stories/ng2-component-lab/components/colors-table.component.ts create mode 100644 stories/ng2-component-lab/components/modal-consumer.component.ts create mode 100644 stories/ng2-component-lab/components/modal-inner-content-example.component.ts create mode 100644 stories/ng2-component-lab/components/notifications-example.component.ts create mode 100644 stories/ng2-component-lab/components/svg-icons-table.component.ts (limited to 'stories/ng2-component-lab/components') diff --git a/stories/ng2-component-lab/components/colors-table.component.ts b/stories/ng2-component-lab/components/colors-table.component.ts new file mode 100644 index 0000000..fc7bd2f --- /dev/null +++ b/stories/ng2-component-lab/components/colors-table.component.ts @@ -0,0 +1,26 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "colors-table", + template: ` + +

{{tableTitle}}

+
+
+
+
{{color}}
+
{{tableMapColors[color]}}
+
+
+` +}) +export class ColorsTable { + + @Input() tableTitle:string; + @Input() tableMapColors: Object; + + constructor() { + + } + +} diff --git a/stories/ng2-component-lab/components/modal-consumer.component.ts b/stories/ng2-component-lab/components/modal-consumer.component.ts new file mode 100644 index 0000000..e4a3977 --- /dev/null +++ b/stories/ng2-component-lab/components/modal-consumer.component.ts @@ -0,0 +1,106 @@ +import { Component, Input, Output, EventEmitter } from "@angular/core"; +import { ModalService } from "../../../src/angular/modals/modal.service"; +import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config"; +import { ModalInnerContent } from "./modal-inner-content-example.component"; +import { ButtonComponent } from "../../../src/angular/buttons/button.component"; +import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component'; +import { Placement } from "../../../src/angular/common/enums"; +import { ModalComponent } from "../../../src/angular/components"; + +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'; + +@Component({ + selector: 'modal-consumer', + template: `` +}) +export class ModalConsumer { + @Input() action: string; + + constructor(private modalService: ModalService) { + } + + private openModal = (): void => { + if (this[this.action]) { + this[this.action](); + } + } + + private openErrorModal = (): void => { + this.modalService.openErrorModal(MODAL_CONTENT, "sampleTestId"); + } + + private openAlertModal = (): void => { + this.modalService.openAlertModal("Alert Title", MODAL_CONTENT, 'Continue', this.onConfirmAction, 'sampleTestId'); + } + + private openActionModal = (): void => { + this.modalService.openActionModal('Standard Modal', MODAL_CONTENT, "OK", this.onConfirmAction, "sampleTestId"); + } + + private onConfirmAction = (): void => { + alert("Action has been confirmed"); + } + + private openCustomModal1 = (): void => { + const modalConfig = { + size: ModalSize.medium, + title: 'Title', + type: ModalType.custom, + testId: 'sampleTestIdModal1', + buttons: [ + {id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false}, + {id: "cancelButton", text: "Cancel", size: 'x-small', type: 'secondary', closeModal: true} + ] as ModalButtonComponent[] + } as IModalConfig; + this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"}); + } + + private customModalOnSave1 = (): void => { + const currentInstance: ModalComponent = this.modalService.getCurrentInstance(); + const saveButton: ModalButtonComponent = currentInstance.getButtonById("saveButton"); + saveButton.show_spinner = true; + saveButton.spinner_position = Placement.right; + + // Show spinner for 2 seconds + console.log('Saving example, please wait ...'); + window.setTimeout((button: ModalButtonComponent) => { + button.show_spinner = false; + console.log('Finish saving'); + }, 2000, saveButton); + } + + private openCustomModal2 = (): void => { + const modalConfig = { + size: ModalSize.medium, + title: 'Title', + type: ModalType.custom, + testId: 'sampleTestIdModal2', + buttons: [ + {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false}, + {text: "Change buttons", callback: this.customModalUpdateButtons2, closeModal: false}, + {text: "Disable close", callback: this.customModalUDisableClose2, closeModal: false} + ] + } as IModalConfig; + this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"}); + } + + private customModalUDisableClose2 = (): void => { + const currentInstance: ModalComponent = this.modalService.getCurrentInstance(); + currentInstance.getCloseButton().disabled = true; + } + + private customModalChangeTitle2 = (): void => { + const currentInstance: ModalComponent = this.modalService.getCurrentInstance(); + currentInstance.setTitle('New title'); + } + + private customModalUpdateButtons2 = (): void => { + const currentInstance: ModalComponent = this.modalService.getCurrentInstance(); + const newButtons = [ + {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false}, + {text: "Do nothing", closeModal: false} + ] as ModalButtonComponent[]; + currentInstance.setButtons(newButtons); + } +} diff --git a/stories/ng2-component-lab/components/modal-inner-content-example.component.ts b/stories/ng2-component-lab/components/modal-inner-content-example.component.ts new file mode 100644 index 0000000..1b6bed0 --- /dev/null +++ b/stories/ng2-component-lab/components/modal-inner-content-example.component.ts @@ -0,0 +1,16 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "inner-content", + template: ` +
+ + + +
+` +}) +export class ModalInnerContent { + + @Input() name:string; +} diff --git a/stories/ng2-component-lab/components/notifications-example.component.ts b/stories/ng2-component-lab/components/notifications-example.component.ts new file mode 100644 index 0000000..91dd95e --- /dev/null +++ b/stories/ng2-component-lab/components/notifications-example.component.ts @@ -0,0 +1,57 @@ +import { Component, Input, ViewChild } from "@angular/core"; +import { NotificationsService } from "../../../src/angular/notifications/services/notifications.service"; +import { NotificationSettings } from "../../../src/angular/notifications/utilities/notification.config"; +import { InnerNotifContent } from "../../../src/angular/notifications/notification-inner-content-example.component"; + +@Component({ + selector: "notifications-example", + template: ` +
+ Send Success Notification + +
+
+ Send Warning Notification + +
+
+ Send Info Notification + +
+
+ Send Success MultipleLine Notification + +
+
+ Send Success Custom Notification + +
+ + +` +}) +export class NotificationsExample { + + constructor(private notifsService : NotificationsService) { + } + + sendSuccessNotif() { + this.notifsService.push(new NotificationSettings("success", 'notif success message test', 'Notif Title Success')); + } + + sendMultipleLinesSuceessNotif() { + this.notifsService.push(new NotificationSettings("success", 'notif success message test with a lot of test so we can test multiple line case lets just add blabla bcdesfg hijklmnop qrstuvw xyz abcdesfg hijklmnop qrstuvw xyz', 'Notif Title Success')); + } + + sendWarnNotif() { + this.notifsService.push(new NotificationSettings("warn", 'notif warn message test', 'Notif Title Warn')); + } + + sendInfoNotif() { + this.notifsService.push(new NotificationSettings("info", 'notif info message test', 'Notif Title Info')); + } + + sendSuccessCustomNotif() { + this.notifsService.push(new NotificationSettings( "info", 'notif XYZ', 'Notif Custom XYZ', 10000, false, true, InnerNotifContent, { notifyText : "notif info custom inner message test", notifyTitle : "Notif Custom Inner Title Info"})); + } +} diff --git a/stories/ng2-component-lab/components/svg-icons-table.component.ts b/stories/ng2-component-lab/components/svg-icons-table.component.ts new file mode 100644 index 0000000..732650d --- /dev/null +++ b/stories/ng2-component-lab/components/svg-icons-table.component.ts @@ -0,0 +1,189 @@ +import { Component } from "@angular/core"; +import { Mode, Placement, Size } from "../../../src/angular/common/enums"; +import { SvgIconComponent } from "../../../src/angular/svg-icon/svg-icon.component"; +import { IDropDownOption, DropDownOptionType, DropDownTypes } from "../../../src/angular/form-elements/dropdown/dropdown-models"; + +const options1: IDropDownOption[] = [ + { + label: 'First Option', + value: 'First Option', + }, + { + label: 'Second Option', + value: 'Second Option', + }, + { + label: 'Third Option', + value: 'Third Option', + type: DropDownOptionType.Simple + } +]; + +@Component({ + selector: "svg-icons-table", + template: ` +
+
+ + Selected icon: {{selectedIcon}}None +
+ +
+ +
+
+ + + +
+
+
+ + +
+
+ +
+ +
+
+ +
+ 
+                        <svg-icon-label
+                            [name]="{{selectedIcon}}"
+                            [mode]="{{mode}}"
+                            [size]="{{size}}"
+                            [clickable]="{{clickable}}"
+                            [disabled]="{{disabled}}"
+                            [label]="{{label}}"
+                            [labelPlacement]="{{labelPlacement}}">
+                        </svg-icon-label>
+
+
+
+ +
+
+
+ +
+
+`, + styles: [` + .svg-icons-table { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + align-items: stretch; + overflow-y: auto; + } + .svg-icons-table .svg-icon-cell { + border: 1px solid #999; + padding: 5px; + margin: 5px; + width: 250px; + overflow: hidden; + display: flex; + align-items: center; + cursor: pointer; + } + .svg-icons-table .svg-icon-cell.selected { + border-color: #1eb9f3; + background-color: #1eb9f3; + } + .icon-showcase { + margin: 20px 10px; + padding: 10px; + border: 1px solid #999; + background: #eee; + } + .icon-options-wrapper { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + margin-top: 10px; + } + + .icon-options-checkboxes-wrapper { + display: flex; + flex-flow: row; + margin-top: 10px; + } + + .icon-options-checkboxes { + margin-top: 27px; + margin-right: 30px; + } + + .icon-options-label { + margin-right: 30px; + } + + .icon-code pre { + user-select: text; + } + + sdc-dropdown { + display: inline-block; + min-width: 160px; + } + + sdc-dropdown .sdc-dropdown { + } +`] +}) +export class SvgIconsTableComponent { + public iconsNames: string[]; + public selectedIcon: string; + + public modeOptions; + public sizeOptions; + public labelPlacementOptions; + + private mode: Mode; + private size: Size; + private labelPlacement: Placement; + private clickable: boolean; + private disabled: boolean; + private label: string; + + private defaultIconSettings: {mode: Mode, size: Size}; + + constructor() { + this.iconsNames = Object.keys(SvgIconComponent.Icons); + this.mode = null; + this.size = Size.medium; + this.clickable = false; + this.disabled = false; + this.defaultIconSettings = { mode: Mode.info, size: Size.small }; + + this.modeOptions = [{value: null, label: 'NONE'}].concat(Object.keys(Mode).map((modeKey) => ({ + value: modeKey, + label: Mode[modeKey] + }))); + + this.sizeOptions = Object.keys(Size).map((sizeKey) => ({ + value: sizeKey, + label: Size[sizeKey] + })); + + this.labelPlacementOptions = Object.keys(Placement).map((placementKey) => ({ + value: placementKey, + label: Placement[placementKey] + })); + + this.setDefaults(); + } + + private setDefaults = (): void => { + this.label = 'Some label'; + this.selectedIcon = "attachment"; + this.mode = Mode.primary; + this.labelPlacement = Placement.right; + } + + public selectIcon(iconName) { + this.selectedIcon = iconName; + } +} -- cgit