diff options
Diffstat (limited to 'stories/ng2-component-lab/components')
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> - <svg-icon-label - [name]="{{selectedIcon}}" - [mode]="{{mode}}" - [size]="{{size}}" - [clickable]="{{clickable}}" - [disabled]="{{disabled}}" - [label]="{{label}}" - [labelPlacement]="{{labelPlacement}}"> - </svg-icon-label> - </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; - } -} |