aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/components
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/components')
-rw-r--r--stories/ng2-component-lab/components/colors-table.component.ts26
-rw-r--r--stories/ng2-component-lab/components/modal-consumer.component.ts106
-rw-r--r--stories/ng2-component-lab/components/modal-inner-content-example.component.ts16
-rw-r--r--stories/ng2-component-lab/components/notifications-example.component.ts57
-rw-r--r--stories/ng2-component-lab/components/svg-icons-table.component.ts189
5 files changed, 0 insertions, 394 deletions
diff --git a/stories/ng2-component-lab/components/colors-table.component.ts b/stories/ng2-component-lab/components/colors-table.component.ts
deleted file mode 100644
index fc7bd2f..0000000
--- a/stories/ng2-component-lab/components/colors-table.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
- selector: "colors-table",
- template: `
-
- <h1>{{tableTitle}}</h1>
- <div class="colors-table">
- <div class="color-section" *ngFor="let color of tableMapColors | keys">
- <div class='sdc-bc-{{color}} color-circle'></div>
- <div>{{color}}</div>
- <div>{{tableMapColors[color]}}</div>
- </div>
- </div>
-`
-})
-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
deleted file mode 100644
index e4a3977..0000000
--- a/stories/ng2-component-lab/components/modal-consumer.component.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-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: `<sdc-button [text]="'View Modal'" (click)="openModal()"></sdc-button>`
-})
-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
deleted file mode 100644
index 1b6bed0..0000000
--- a/stories/ng2-component-lab/components/modal-inner-content-example.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-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;
-}
diff --git a/stories/ng2-component-lab/components/notifications-example.component.ts b/stories/ng2-component-lab/components/notifications-example.component.ts
deleted file mode 100644
index 91dd95e..0000000
--- a/stories/ng2-component-lab/components/notifications-example.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-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: `
- <div>
- <span>Send Success Notification</span>
- <sdc-button (click)="sendSuccessNotif()" text="Click Me!"></sdc-button>
- </div>
- <div>
- <span>Send Warning Notification</span>
- <sdc-button (click)="sendWarnNotif()" text="Click Me!"></sdc-button>
- </div>
- <div>
- <span>Send Info Notification</span>
- <sdc-button (click)="sendInfoNotif()" text="Click Me!"></sdc-button>
- </div>
- <div>
- <span>Send Success MultipleLine Notification</span>
- <sdc-button (click)="sendMultipleLinesSuceessNotif()" text="Click Me!"></sdc-button>
- </div>
- <div>
- <span>Send Success Custom Notification</span>
- <sdc-button (click)="sendSuccessCustomNotif()" text="Click Me!"></sdc-button>
- </div>
- <sdc-notification-container>
- </sdc-notification-container>
-`
-})
-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
deleted file mode 100644
index 732650d..0000000
--- a/stories/ng2-component-lab/components/svg-icons-table.component.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-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: `
- <div class="icon-showcase">
- <div>
- <svg-icon [name]="selectedIcon" [mode]="defaultIconSettings.mode" [size]="defaultIconSettings.size"></svg-icon>
- Selected icon: <b *ngIf="selectedIcon">{{selectedIcon}}</b><i *ngIf="!selectedIcon">None</i>
- </div>
-
- <div class="icon-options-wrapper">
-
- <div class="icon-options">
- <div class="icon-options-dropdowns">
- <sdc-dropdown label="Mode" [selectedOption]="{'value': mode, 'label': mode}" [options]="modeOptions" (changed)="mode = $event.value"></sdc-dropdown>
- <sdc-dropdown label="Label Placement" [selectedOption]="{'value': labelPlacement, 'label': labelPlacement}" [options]="labelPlacementOptions" [selectedOption]="labelPlacement" (changed)="labelPlacement = $event.value"></sdc-dropdown>
- <sdc-dropdown label="Size" [selectedOption]="{'value': size, 'label': size}" [options]="sizeOptions" [selectedOption]="size" (changed)="size = $event.value"></sdc-dropdown>
- </div>
- <div class="icon-options-checkboxes-wrapper">
- <div class="icon-options-checkboxes">
- <sdc-checkbox label="Clickable" [checked]="clickable" (checkedChange)="clickable = $event"></sdc-checkbox>
- <sdc-checkbox label="Disabled" [checked]="disabled" (checkedChange)="disabled = $event"></sdc-checkbox>
- </div>
- <div class="icon-options-label">
- <sdc-input label="Label" [(value)]="label"></sdc-input>
- </div>
- <svg-icon-label [name]="selectedIcon" [mode]="mode" [size]="size" [clickable]="clickable" [disabled]="disabled" [label]="label" [labelPlacement]="labelPlacement"></svg-icon-label>
- </div>
- </div>
-
- <div class="icon-code">
- <pre>
- &lt;svg-icon-label
- [name]="{{selectedIcon}}"
- [mode]="{{mode}}"
- [size]="{{size}}"
- [clickable]="{{clickable}}"
- [disabled]="{{disabled}}"
- [label]="{{label}}"
- [labelPlacement]="{{labelPlacement}}"&gt;
- &lt;/svg-icon-label&gt;
- </pre>
- </div>
- </div>
-
- </div>
- <div class="svg-icons-table">
- <div *ngFor="let iconName of iconsNames" class="svg-icon-cell" [ngClass]="{'selected': selectedIcon === iconName}" (click)="selectIcon(iconName)">
- <svg-icon-label [name]="iconName" [label]="iconName" labelPlacement="right"></svg-icon-label>
- </div>
- </div>
-`,
- 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;
- }
-}