aboutsummaryrefslogtreecommitdiffstats
path: root/stories/angular/helpers
diff options
context:
space:
mode:
Diffstat (limited to 'stories/angular/helpers')
-rw-r--r--stories/angular/helpers/autocomplete-server-mock.json8
-rw-r--r--stories/angular/helpers/colors-table.component.ts28
-rw-r--r--stories/angular/helpers/index.ts21
-rw-r--r--stories/angular/helpers/keys.pipe.ts13
-rw-r--r--stories/angular/helpers/modal-consumer.component.ts151
-rw-r--r--stories/angular/helpers/modal-inner-content-example.component.ts16
6 files changed, 237 insertions, 0 deletions
diff --git a/stories/angular/helpers/autocomplete-server-mock.json b/stories/angular/helpers/autocomplete-server-mock.json
new file mode 100644
index 0000000..2521108
--- /dev/null
+++ b/stories/angular/helpers/autocomplete-server-mock.json
@@ -0,0 +1,8 @@
+[
+ {"id": "redId", "color": "red"},
+ {"id": "yellowId", "color": "yellow"},
+ {"id": "orangeId", "color": "orange"},
+ {"id": "greenId", "color": "green"},
+ {"id": "whiteId", "color": "white"},
+ {"id": "blackId", "color": "black"}
+]
diff --git a/stories/angular/helpers/colors-table.component.ts b/stories/angular/helpers/colors-table.component.ts
new file mode 100644
index 0000000..4c8f83f
--- /dev/null
+++ b/stories/angular/helpers/colors-table.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+ selector: "colors-table",
+ template: `
+
+ <h1>{{tableTitle}}</h1>
+ <div class="colors-table">
+ <div class="color-group" *ngFor="let colorGroup of tableMapColors">
+ <div class="color-section" *ngFor="let color of colorGroup | keys">
+ <div class='sdc-bc-{{color}} color-circle'></div>
+ <div>{{color}}</div>
+ <div>{{colorGroup[color]}}</div>
+ </div>
+ </div>
+ </div>
+`
+})
+export class ColorsTable {
+
+ @Input() tableTitle: string;
+ @Input() tableMapColors: Object;
+
+ constructor() {
+
+ }
+
+}
diff --git a/stories/angular/helpers/index.ts b/stories/angular/helpers/index.ts
new file mode 100644
index 0000000..00c35de
--- /dev/null
+++ b/stories/angular/helpers/index.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { KeysPipe } from "./keys.pipe";
+import { ColorsTable } from "./colors-table.component";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { ButtonComponent } from "../../../src/angular/components";
+
+@NgModule({
+ declarations: [
+ ColorsTable,
+ KeysPipe,
+ ButtonComponent
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ ],
+ exports: []
+})
+export class SdcStoriesHelperModule {
+}
diff --git a/stories/angular/helpers/keys.pipe.ts b/stories/angular/helpers/keys.pipe.ts
new file mode 100644
index 0000000..2a58cd8
--- /dev/null
+++ b/stories/angular/helpers/keys.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({name: 'keys'})
+export class KeysPipe implements PipeTransform {
+ transform(value, args:string[]) : any {
+ let keys = [];
+ for (let key in value) {
+ keys.push(key);
+ }
+ return keys;
+ }
+}
+
diff --git a/stories/angular/helpers/modal-consumer.component.ts b/stories/angular/helpers/modal-consumer.component.ts
new file mode 100644
index 0000000..87450e0
--- /dev/null
+++ b/stories/angular/helpers/modal-consumer.component.ts
@@ -0,0 +1,151 @@
+import {Component, Input, Output, EventEmitter, ComponentRef} from "@angular/core";
+import { ModalService } from "../../../src/angular/modals/modal.service";
+import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config";
+import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component';
+import { Placement, ButtonType } from "../../../src/angular/common/enums";
+import { ModalComponent } from "../../../src/angular/components";
+import { ModalInnerContent } from "./modal-inner-content-example.component";
+import {ButtonComponent} from "../../../src/angular/buttons/button.component"
+
+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: `<sdc-button [text]="'View Modal'" (click)="openModal()"></sdc-button>`
+})
+export class ModalConsumerComponent {
+ @Input() action: string;
+ private customModal1: ModalComponent;
+ private customModal2: ModalComponent;
+
+ constructor(private modalService: ModalService) {
+ }
+
+ private openModal = (): void => {
+ if (this[this.action]) {
+ this[this.action]();
+ }
+ }
+
+ private openInfoModal = (): void => {
+ this.modalService.openInfoModal("Info modal title", MODAL_CONTENT, 'infoModalTestId');
+ }
+
+ private openWarningModal = (): void => {
+ this.modalService.openWarningModal("Warning modal title", MODAL_CONTENT, 'warningModalTestId');
+ }
+
+ private openErrorModal = (): void => {
+ this.modalService.openErrorModal("Error modal title", MODAL_CONTENT, 'errorModalTestId');
+ }
+
+ private openSuccessModal = (): void => {
+ this.modalService.openSuccessModal("Success modal title", MODAL_CONTENT, 'successModalTestId');
+ }
+
+ private openInfoModalWithCustomButtons = (): void => {
+ const buttons = [
+ { text: 'CONFIRM', type: ButtonType.info, callback: this.onConfirmAction, closeModal: true },
+ { text: 'CANCEL', type: ButtonType.info, closeModal: true }
+ ] as ModalButtonComponent[];
+ this.modalService.openInfoModal('Info modal title', MODAL_CONTENT, "infoModalCustomTestId", buttons);
+ }
+
+ private openWarningModalWithCustomButtons = (): void => {
+ const buttons = [
+ { text: 'SAVE', type: ButtonType.warning, callback: this.onSaveAction, closeModal: true },
+ { text: 'APPLY', type: ButtonType.warning, callback: this.onApplyAction },
+ { text: 'CANCEL', type: ButtonType.warning, closeModal: true }
+ ] as ModalButtonComponent[];
+ this.modalService.openWarningModal('Warning modal title', MODAL_CONTENT, "warningModalCustomTestId", buttons);
+ }
+
+ private onConfirmAction = (): void => {
+ alert("Action has been confirmed, modal will be closed");
+ }
+
+ private onSaveAction = (): void => {
+ alert("Action has been saved, modal will be close");
+ }
+
+ private onApplyAction = (): void => {
+ alert("Action has been applied, modal will not be close");
+ }
+
+ private openCustomModal1 = (): void => {
+ const modalConfig = {
+ size: ModalSize.medium,
+ title: 'Modal title',
+ type: ModalType.custom,
+ testId: 'sampleTestIdModal1',
+ buttons: [
+ {id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false},
+ {id: "cancelButton", text: "Cancel", size: 'x-small', type: ButtonType.secondary , closeModal: true}
+ ]
+ } as IModalConfig;
+ this.customModal1 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+ }
+
+ private customModalOnSave1 = (): void => {
+ const saveButton: ModalButtonComponent = this.customModal1.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.customModal2 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+ }
+
+ private customModalUDisableClose2 = (): void => {
+ this.customModal2.getCloseButton().disabled = true;
+ }
+
+ private customModalChangeTitle2 = (): void => {
+ this.customModal2.setTitle('New title');
+ }
+
+ private customModalUpdateButtons2 = (): void => {
+ const newButtons = [
+ {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
+ {text: "Do nothing", closeModal: false}
+ ] as ModalButtonComponent[];
+ this.customModal2.setButtons(newButtons);
+ }
+
+ private openErrorModalFromModal = ():void => {
+ this.modalService.openErrorModal("Error", "Error example!!", "second-modal");
+ }
+
+ private openCustomModal3 = (): void => {
+ const modalConfig = {
+ size: ModalSize.medium,
+ title: 'Title',
+ type: ModalType.custom,
+ testId: 'sampleTestIdModal3',
+ buttons: [
+ {text: "Open Error", callback: this.openErrorModalFromModal, closeModal: false}
+ ]
+ } as IModalConfig;
+ this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+ }
+
+}
diff --git a/stories/angular/helpers/modal-inner-content-example.component.ts b/stories/angular/helpers/modal-inner-content-example.component.ts
new file mode 100644
index 0000000..7e59ab1
--- /dev/null
+++ b/stories/angular/helpers/modal-inner-content-example.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+ selector: "inner-content",
+ template: `
+ <div>
+ <sdc-input label="Enter value" [(value)]="name"> </sdc-input>
+ <sdc-input label="Enter value" [(value)]="name"> </sdc-input>
+ <sdc-input label="Enter value" [(value)]="name"> </sdc-input>
+ </div>
+`
+})
+export class ModalInnerContent {
+
+ @Input() name:string;
+}