From b2a3acea0d0f66028c9ce5fad02d4ecc64abf70c Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Tue, 7 Aug 2018 10:54:17 +0300 Subject: Initial commit. Adding files needed for Linux Foundation. Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730 Issue-ID: SDC-1608 Signed-off-by: Israel Lavi --- .../ng2-component-lab/accordion.component.exp.ts | 146 ------------- .../autocomplete.component.exp.ts | 77 ------- stories/ng2-component-lab/button.component.exp.ts | 164 --------------- .../ng2-component-lab/checkbox.component.exp.ts | 33 --- .../ng2-component-lab/checklist.component.exp.ts | 213 ------------------- stories/ng2-component-lab/colors.component.exp.ts | 42 ---- stories/ng2-component-lab/components.module.ts | 45 ---- .../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 ----------------- .../ng2-component-lab/dropdown.component.exp.ts | 195 ----------------- .../ng2-component-lab/filter-bar.component.exp.ts | 56 ----- .../infinite-scroll.component.exp.ts | 166 --------------- stories/ng2-component-lab/input.component.exp.ts | 79 ------- stories/ng2-component-lab/modals.component.exp.ts | 126 ----------- .../notification.component.exp.ts | 11 - .../ng2-component-lab/pipes/search-filter-pipe.ts | 15 -- .../ng2-component-lab/popup-menu.component.exp.ts | 104 ---------- stories/ng2-component-lab/radio.component.exp.ts | 179 ---------------- .../ng2-component-lab/search-bar.component.exp.ts | 19 -- .../ng2-component-lab/svg-icon.component.exp.ts | 14 -- stories/ng2-component-lab/tabs.component.exp.ts | 28 --- .../ng2-component-lab/tag-cloud.component.exp.ts | 61 ------ stories/ng2-component-lab/tiles.component.exp.ts | 194 ----------------- stories/ng2-component-lab/tooltip.directive.exp.ts | 231 --------------------- stories/ng2-component-lab/utils/mock.json | 6 - stories/ng2-component-lab/utils/pipes/keys.pipe.ts | 13 -- .../ng2-component-lab/validation.component.exp.ts | 162 --------------- 30 files changed, 2773 deletions(-) delete mode 100644 stories/ng2-component-lab/accordion.component.exp.ts delete mode 100644 stories/ng2-component-lab/autocomplete.component.exp.ts delete mode 100644 stories/ng2-component-lab/button.component.exp.ts delete mode 100644 stories/ng2-component-lab/checkbox.component.exp.ts delete mode 100644 stories/ng2-component-lab/checklist.component.exp.ts delete mode 100644 stories/ng2-component-lab/colors.component.exp.ts delete mode 100644 stories/ng2-component-lab/components.module.ts delete mode 100644 stories/ng2-component-lab/components/colors-table.component.ts delete mode 100644 stories/ng2-component-lab/components/modal-consumer.component.ts delete mode 100644 stories/ng2-component-lab/components/modal-inner-content-example.component.ts delete mode 100644 stories/ng2-component-lab/components/notifications-example.component.ts delete mode 100644 stories/ng2-component-lab/components/svg-icons-table.component.ts delete mode 100644 stories/ng2-component-lab/dropdown.component.exp.ts delete mode 100644 stories/ng2-component-lab/filter-bar.component.exp.ts delete mode 100644 stories/ng2-component-lab/infinite-scroll.component.exp.ts delete mode 100644 stories/ng2-component-lab/input.component.exp.ts delete mode 100644 stories/ng2-component-lab/modals.component.exp.ts delete mode 100644 stories/ng2-component-lab/notification.component.exp.ts delete mode 100644 stories/ng2-component-lab/pipes/search-filter-pipe.ts delete mode 100644 stories/ng2-component-lab/popup-menu.component.exp.ts delete mode 100644 stories/ng2-component-lab/radio.component.exp.ts delete mode 100644 stories/ng2-component-lab/search-bar.component.exp.ts delete mode 100644 stories/ng2-component-lab/svg-icon.component.exp.ts delete mode 100644 stories/ng2-component-lab/tabs.component.exp.ts delete mode 100644 stories/ng2-component-lab/tag-cloud.component.exp.ts delete mode 100644 stories/ng2-component-lab/tiles.component.exp.ts delete mode 100644 stories/ng2-component-lab/tooltip.directive.exp.ts delete mode 100644 stories/ng2-component-lab/utils/mock.json delete mode 100644 stories/ng2-component-lab/utils/pipes/keys.pipe.ts delete mode 100644 stories/ng2-component-lab/validation.component.exp.ts (limited to 'stories/ng2-component-lab') diff --git a/stories/ng2-component-lab/accordion.component.exp.ts b/stories/ng2-component-lab/accordion.component.exp.ts deleted file mode 100644 index 480a011..0000000 --- a/stories/ng2-component-lab/accordion.component.exp.ts +++ /dev/null @@ -1,146 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import {Placement} from "../../src/angular/common/enums"; - - -/************************************************** - * Adding custom styles for example - *************************************************/ -const style = document.createElement('style'); -style.innerHTML = ` -.sdc-accordion-custom-class .sdc-accordion-header, -.sdc-accordion-custom-class .sdc-accordion-body.open { - padding: 10px; - border-radius: 3px; -} -.sdc-accordion-custom-class .sdc-accordion-header { - background-color: #d2d2d2; -} -.sdc-accordion-custom-class .sdc-accordion-body.open { - border: 1px solid #d2d2d2; - margin-top: 1px; - } -`; -const head = document.getElementsByTagName('head'); -head[0].appendChild(style); - -export default experimentOn('Accordion').group('Accordion', - [ - { - id: 'simpleAccodion', - title: 'Simple accordion', - description: 'Example of accordion with default left arrow', - showSource: true, - template: ` - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. - Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. - Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. - Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. - Nam orci diam, mattis eget leo vel, tincidunt interdum dui. - Donec dapibus mauris non sapien ornare, non pharetra mi commodo. -

- - ` - }, - { - id: 'accordionRightArrow', - title: 'Accordion with right arrow', - description: 'Example of accordion with right arrow', - showSource: true, - context: { - arrowDirection: Placement.right, - }, - template: ` - - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. - Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. - Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. - Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. - Nam orci diam, mattis eget leo vel, tincidunt interdum dui. - Donec dapibus mauris non sapien ornare, non pharetra mi commodo. -

- - ` - }, - { - id: 'accordionRightArrowStyle', - title: 'Accordion with right arrow and custom style', - description: 'Example of accordion with right arrow and custom style', - showSource: true, - context: { - arrowDirection: Placement.right, - }, - template: ` - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. - Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. - Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. - Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. - Nam orci diam, mattis eget leo vel, tincidunt interdum dui. - Donec dapibus mauris non sapien ornare, non pharetra mi commodo. -

- - ` - } - , - { - id: 'accordionLeftArrowStyle', - title: 'Accordion with left arrow and custom style', - description: 'Example of accordion with left arrow and custom style', - showSource: true, - context: { - arrowDirection: Placement.left, - }, - template: ` - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. - Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. - Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. - Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. - Nam orci diam, mattis eget leo vel, tincidunt interdum dui. - Donec dapibus mauris non sapien ornare, non pharetra mi commodo. -

- - ` - }, - { - id: 'accordionLeftArrowStyleOpen', - title: 'Open accordion with left arrow and custom style', - description: 'Example of open accordion with left arrow and custom style', - showSource: true, - context: { - arrowDirection: Placement.left, - }, - template: ` - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. - Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. - Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. - Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. - Nam orci diam, mattis eget leo vel, tincidunt interdum dui. - Donec dapibus mauris non sapien ornare, non pharetra mi commodo. -

- - ` - } - ]); diff --git a/stories/ng2-component-lab/autocomplete.component.exp.ts b/stories/ng2-component-lab/autocomplete.component.exp.ts deleted file mode 100644 index a1fa3dd..0000000 --- a/stories/ng2-component-lab/autocomplete.component.exp.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Autocomplete').group('Autocomplete', -[ - { - id: 'simpleAutocomplete', - title: 'Simple autocomplete data', - description: 'Example of auto complete with simple data', - showSource: true, - context: { - data: ['red', 'yellow', 'orange', 'green', 'white', 'black'], - selectedOption: '', - showSelectedItem: ((value: string) => { - alert(value); - }) - }, - template: ` - - - ` - }, - { - id: 'complexAutocomplete', - title: 'Complex autocomplete data', - description: 'Example of auto complete with complex data', - showSource: true, - context: { - data: [ - {id: 'redId', color: 'red'}, - {id: 'yellowId', color: 'yellow'}, - {id: 'orangeId', color: 'orange'}, - {id: 'greenId', color: 'green'}, - {id: 'whiteId', color: 'white'}, - {id: 'blackId', color: 'black'} - ], - showSelectedItem: ((value: string) => { - alert(value); - }) - }, - template: ` - - - ` - }, - { - id: 'complexAutocompleteWithBeData', - title: 'Complex autocomplete data from server', - description: 'Example of auto complete with complex data from server. (In this example the data is not really filtered, because it is from mock data)', - showSource: true, - context: { - showSelectedItem: ((value: string) => { - alert(value); - }) - }, - template: ` - - - ` - } -]); diff --git a/stories/ng2-component-lab/button.component.exp.ts b/stories/ng2-component-lab/button.component.exp.ts deleted file mode 100644 index 6c5fb04..0000000 --- a/stories/ng2-component-lab/button.component.exp.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -const buttonTypes = ['primary', 'secondary', 'link', 'alert']; -const buttonSizes = ['large', 'medium', 'small', 'x-small', 'default']; -const experiment = experimentOn('Button'); - -experiment.group("Default button", [ - { - id: "defaultButton", - showSource: true, - description: `Default button, does not need to supply type or size. -
The size of the button set to 'default' so it will shrink or expand according to the content. - `, - context: { - buttonClicked: ():void => { - window.alert("OK"); - } - }, - title: "Default button", - template: ` - - - - - - - ` - } -]); - -buttonTypes.forEach((buttonType) => { - [false, true].forEach((buttonDisabled) => { - experiment.group(`Button ${buttonType} ${buttonDisabled ? ' disabled' : ''}`, [ { - id: `Button ${buttonType}${buttonDisabled ? ' disabled' : ''}`, - showSource: true, - context: { - buttonClicked: ():void => { - window.alert("OK"); - } - }, - title: `Button ${buttonType}${buttonDisabled ? ' disabled' : ''}`, - template: buttonSizes.map((buttonSize) => - ` - -
${buttonSize}

- - - - `).join('\n') - } - ]); - }); -}); - -experiment.group("Buttons with icons", [ - { - id: "buttonsWithIcons", - showSource: true, - description: `Buttons with icons forward`, - context: { - buttonClicked: (): void => { - window.alert("OK"); - } - }, - title: "Button with icons", - template: ` - - - - - - - - - - - - - ` - } -]); - -experiment.group("Buttons with spinners", [ - { - id: "buttonsWithSpinnersRight", - showSource: true, - description: `Click the button to see the spinner shows for 2 seconds`, - context: { - buttonClicked: (button): void => { - button.show_spinner = true; - setTimeout(() => {button.show_spinner = false},2000); - }, - }, - title: "Button with spinner on the right", - template: ` - - - - ` - }, - { - id: "buttonsWithSpinnersLeft", - showSource: true, - description: `Click the button to see the spinner shows for 2 seconds`, - context: { - buttonClicked: (button): void => { - button.show_spinner = true; - setTimeout(() => {button.show_spinner = false},2000); - }, - }, - title: "Button with spinner on the left", - template: ` - - - - ` - } -]); -export default experiment; diff --git a/stories/ng2-component-lab/checkbox.component.exp.ts b/stories/ng2-component-lab/checkbox.component.exp.ts deleted file mode 100644 index 7ac53c9..0000000 --- a/stories/ng2-component-lab/checkbox.component.exp.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Checkbox') - .group("Checkbox",[ - { - id: 'checkbox', - showSource: true, - title: 'Regular Checkbox', - description: 'Simple checkbox', - template: ``, - }, - { - id: 'checkboxChecked', - showSource: true, - title: 'Regular Checked Checkbox', - description: 'Simple checked checkbox', - template: ``, - }, - { - id: 'disabledCheckbox', - showSource: true, - title: 'Disabled checkbox', - description: 'Simple disabled checkbox', - template: ``, - }, - { - id: 'disabledCheckboxChecked', - showSource: true, - title: 'Disabled checked checkbox', - description: 'Simple disabled checked checkbox', - template: ``, - } - ]); diff --git a/stories/ng2-component-lab/checklist.component.exp.ts b/stories/ng2-component-lab/checklist.component.exp.ts deleted file mode 100644 index 4700a74..0000000 --- a/stories/ng2-component-lab/checklist.component.exp.ts +++ /dev/null @@ -1,213 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import { ChecklistItemModel } from "../../src/angular/checklist/models/ChecklistItem"; -import { ChecklistModel } from "../../src/angular/checklist/models/Checklist"; - -const styleCode = 'h5{color:red;} pre{background-color: #d1d1d1; padding: 10px;}'; -const checklistValuesExample1 = []; - -const checkListExample1: ChecklistModel = new ChecklistModel(checklistValuesExample1, - [new ChecklistItemModel('apple'), - new ChecklistItemModel('banana'), - new ChecklistItemModel('orange')]); - -const checklistValuesExample2 = []; -const checkListExample2: ChecklistModel = new ChecklistModel(checklistValuesExample2, - [new ChecklistItemModel('apple', false, false, null, 0), - new ChecklistItemModel('banana', false, false, null, 1), - new ChecklistItemModel('orange', false, false, null, 2)]); - -const checklistValuesExample3 = []; -const checkListExample3: ChecklistModel = new ChecklistModel(checklistValuesExample3, - [new ChecklistItemModel('apple', false, true), - new ChecklistItemModel('banana'), - new ChecklistItemModel('orange', false, true)]); - -const checklistValuesExample4 = []; -const checkListExample4: ChecklistModel = new ChecklistModel(checklistValuesExample4, - [new ChecklistItemModel('apple', true, true), - new ChecklistItemModel('banana', true), - new ChecklistItemModel('orange')]); - -const checklistValuesExample5 = []; -const innerChecklistValues = []; -const checkListExample5: ChecklistModel = new ChecklistModel(checklistValuesExample5, - [new ChecklistItemModel('apple', false, false, - new ChecklistModel(innerChecklistValues, - [new ChecklistItemModel('red'), new ChecklistItemModel('green'), new ChecklistItemModel('yellow')])), - new ChecklistItemModel('banana'), - new ChecklistItemModel('orange')]); - -const checklistFirstLevelValuesExample6 = []; -const checklistSecondLevelValuesExample6 = []; -const checklistThirdLevelValuesExample6 = []; -const checkListExample6: ChecklistModel = new ChecklistModel(checklistFirstLevelValuesExample6, - [new ChecklistItemModel('1', false, false, - new ChecklistModel(checklistSecondLevelValuesExample6, [new ChecklistItemModel('1.1'), - new ChecklistItemModel('1.2', false, false, new ChecklistModel(checklistThirdLevelValuesExample6, [new ChecklistItemModel('1.2.1'), - new ChecklistItemModel('1.2.2'), - new ChecklistItemModel('1.2.3')])), - new ChecklistItemModel('1.3')])), - new ChecklistItemModel('2'), - new ChecklistItemModel('3')]); - -export default experimentOn('Checklist') - .group("Checklist",[ - { - id: 'checklist', - showSource: true, - context: { - checklistModel: checkListExample1, - checklistValues: checklistValuesExample1 - }, - styles: [styleCode], - title: 'Checklist', - description: ` - 
-            
The checklistModel parameter:

-            const checklistValues = [];
-            const checklistModel: ChecklistModel =
-                new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple'),
-                new ChecklistItemModel('banana'),
-                new ChecklistItemModel('orange')]);
-
- `, - template: ` - Selected values: {{checklistValues.toString()}} - - `, - }, - { - id: 'checklistWithValues', - showSource: true, - context: { - checklistModel: checkListExample2, - checklistValues: checklistValuesExample2 - }, - styles: [styleCode], - title: 'Checklist with values', - description: ` - 
-                
The checklistModel parameter:

-                const checklistValues = [];
-                const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                    [new ChecklistItemModel('apple', false, false, null, 0),
-                    new ChecklistItemModel('banana', false, false, null, 1),
-                    new ChecklistItemModel('orange', false, false, null, 2)]);
-
- `, - template: ` - Selected values: {{checklistValues.toString()}} - - ` - }, - { - id: 'checklistWithSomeCheckedItems', - title: 'Checklist with some checked items', - showSource: true, - context: { - checklistModel: checkListExample3, - checklistValues: checklistValuesExample3 - }, - styles: [styleCode], - description: ` - 
The checklistModel parameter:

-            const checklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple', false, true),
-                new ChecklistItemModel('banana'),
-                new ChecklistItemModel('orange', false, true)]);
-
- `, - template: ` - Selected values: {{checklistValues.toString()}} - - ` - }, - { - id: 'checklistWithSomeDisabledItems', - title: 'Checklist with some disabled items', - showSource: true, - context: { - checklistModel: checkListExample4, - checklistValues: checklistValuesExample4 - }, - styles: [styleCode], - description: ` - 
The checklistModel parameter:

-            const checklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple', true, true),
-                new ChecklistItemModel('banana', true),
-                new ChecklistItemModel('orange')]);
-
- `, - template: ` - Selected values: {{checklistValues.toString()}} - - ` - }, - { - id: 'twoLevelsChecklist', - title: 'Multi-levels checklist', - showSource: true, - context: { - checklistModel: checkListExample5, - checklistValues: checklistValuesExample5, - innerChecklistValues: innerChecklistValues - }, - styles: [styleCode], - description: ` - 
-            
The checklistModel parameter:

-            const checklistValues = [];
-            const innerChecklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                        [new ChecklistItemModel('apple', false, false,new ChecklistModel(innerChecklistValues,[new ChecklistItemModel('red'),
-                                                                                                                        new ChecklistItemModel('green'),
-                                                                                                                        new ChecklistItemModel('yellow')])),
-                        new ChecklistItemModel('banana'),
-                        new ChecklistItemModel('orange')]);
- `, - template: ` -
Selected values: {{checklistValues.toString()}}
-
Inner checklist selected values: {{innerChecklistValues.toString()}}
- - ` - }, - { - id: 'multiLevelsChecklist', - title: 'Multi-levels checklist', - showSource: true, - context: { - checklistModel: checkListExample6, - checklistFirstLevelValues: checklistFirstLevelValuesExample6, - checklistSecondLevelValues: checklistSecondLevelValuesExample6, - checklistThirdLevelValues: checklistThirdLevelValuesExample6 - }, - styles: [styleCode], - description: ` - 
The checklistModel parameter:

-            const checklistFirstLevelValues = [];
-            const checklistSecondLevelValues = [];
-            const checklistThirdLevelValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistFirstLevelValues,
-                [new ChecklistItemModel('1', false, false,
-                new ChecklistModel(checklistSecondLevelValues, [new ChecklistItemModel('1.1'),
-                new ChecklistItemModel('1.2', false, false,
-                new ChecklistModel(checklistThirdLevelValues, [new ChecklistItemModel('1.2.1'),
-                    new ChecklistItemModel('1.2.2'),
-                    new ChecklistItemModel('1.2.3')])),
-                    new ChecklistItemModel('1.3')])),
-            new ChecklistItemModel('2'),
-            new ChecklistItemModel('3')]);
-
- `, - template: ` -
Selected values: {{checklistFirstLevelValues.toString()}}
-
Second level checklist selected values: {{checklistSecondLevelValues.toString()}}
-
Third level checklist selected values: {{checklistThirdLevelValues.toString()}}
- - ` - } - ]); diff --git a/stories/ng2-component-lab/colors.component.exp.ts b/stories/ng2-component-lab/colors.component.exp.ts deleted file mode 100644 index f082d90..0000000 --- a/stories/ng2-component-lab/colors.component.exp.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -const colorMap = { - 'white': '#ffffff', - 'dark-blue': '#0568ae', - 'blue': '#009fdb', - 'light-blue': '#1eb9f3', - 'blue-disabled': '#9dd9ef', - 'lighter-blue': '#e6f6fb', - 'black': '#000000', - 'text-black': '#191919', - 'rich-black': '#323943', - 'dark-gray': '#5a5a5a', - 'gray': '#959595', - 'light-gray': '#d2d2d2', - 'silver': '#eaeaea', - 'light-silver': '#f2f2f2', - 'lighter-silver':'#f8f8f8', - 'green': '#4ca90c', - 'red': '#cf2a2a', - 'light-red':'#ed4141', - 'disabled-red':'#f4adad', - 'yellow': '#ffb81c', - 'dark-purple': '#702f8a', - 'purple': '#9063cd', - 'light-purple': '#caa2dd' -}; - -export default experimentOn('Colors', 1) - .group("Color palette", [ - { - id: 'colorPalette', - showSource: true, - context: { - colorMap - }, - title: 'Color palette', - description: 'Supported design colors', - template: ``, - } - ] - ); diff --git a/stories/ng2-component-lab/components.module.ts b/stories/ng2-component-lab/components.module.ts deleted file mode 100644 index 266f047..0000000 --- a/stories/ng2-component-lab/components.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { NgModule } from "@angular/core"; -import { CommonModule } from "@angular/common"; -import { FormsModule } from "@angular/forms"; -import { SdcUiComponentsModule } from "../../src/angular"; -import { KeysPipe } from "./utils/pipes/keys.pipe"; -import { SearchFilterPipe } from "./pipes/search-filter-pipe"; -import { ColorsTable } from "./components/colors-table.component"; -import { ModalInnerContent } from "./components/modal-inner-content-example.component"; -import { ModalConsumer } from "./components/modal-consumer.component"; -import { SvgIconsTableComponent } from "./components/svg-icons-table.component"; -import { NotificationsExample } from "./components/notifications-example.component"; -import { Mode, Placement, Size } from "./../../src/angular/common/enums"; - -@NgModule({ - declarations: [ - ColorsTable, - KeysPipe, - ModalInnerContent, - ModalConsumer, - SearchFilterPipe, - SvgIconsTableComponent, - NotificationsExample - ], - imports: [ - CommonModule, - FormsModule, - SdcUiComponentsModule - ], - exports: [ - CommonModule, - SdcUiComponentsModule, - ModalInnerContent, - NotificationsExample, - ColorsTable, - SvgIconsTableComponent, - ModalConsumer, - SearchFilterPipe - ], - entryComponents: [ - ModalInnerContent - ], - providers: [KeysPipe] -}) -export class ComponentsModule { -} 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: ` - -

{{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 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: `` -}) -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: ` -
- - - -
-` -}) -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: ` -
- 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 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: ` -
-
- - 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; - } -} diff --git a/stories/ng2-component-lab/dropdown.component.exp.ts b/stories/ng2-component-lab/dropdown.component.exp.ts deleted file mode 100644 index 025409e..0000000 --- a/stories/ng2-component-lab/dropdown.component.exp.ts +++ /dev/null @@ -1,195 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import { IDropDownOption, DropDownOptionType, DropDownTypes } from "../../src/angular/form-elements/dropdown/dropdown-models"; - -const options1: IDropDownOption[] = [ - { - label: 'First Option Label', - value: 'firstOptionValue', - }, - { - label: 'Second Option Label', - value: 'secondOptionValue', - }, - { - label: 'Third Option Label', - value: 'thirdOptionValue', - type: DropDownOptionType.Simple - } -]; - -const options2: IDropDownOption[] = [ - { - label: 'Header Label', - value: 'headerValue', - type: DropDownOptionType.Header - }, - { - label: 'First Option Label', - value: 'firstOptionValue', - type: DropDownOptionType.Simple - }, - { - label: 'Disabled Option Label', - value: 'headerValue', - type: DropDownOptionType.Disable - }, - { - label: 'Second Option Label', - value: 'secondOptionValue', - type: DropDownOptionType.Simple - }, - { - label: 'Ruler Label', - value: 'rulerValue', - type: DropDownOptionType.HorizontalLine - }, - { - label: 'Third Option Label', - value: 'thirdOptionValue', - type: DropDownOptionType.Simple - }, - { - label: 'Fourth Option Label', - value: 'FourthOptionValue', - type: DropDownOptionType.Simple - }, - { - label: 'Fifth Option Label', - value: 'fifthOptionValue', - type: DropDownOptionType.Simple - }, - { - label: 'Ruler Label', - value: 'rulerValue', - type: DropDownOptionType.HorizontalLine - }, - { - label: 'Third Option Label', - value: 'thirdOptionValue', - type: DropDownOptionType.Simple - }, - { - label: 'Fourth Option Label', - value: 'FourthOptionValue', - type: DropDownOptionType.Simple - }, - { - label: 'Fifth Option Label', - value: 'fifthOptionValue', - type: DropDownOptionType.Simple - } -]; - -export default experimentOn('DropDown') - .group("DropDown", [ - { - id: 'normalDropDown', - showSource: true, - context: { - options: options1, - onChange: function(option) { - this.valueSelected = option.value; - } - }, - title: 'Normal DropDown', - description: 'Normal DropDown', - template: ` - -
Selected value:{{valueSelected}}
- ` - }, { - id: 'groupDropDown', - showSource: true, - context: { - options: options2, - onChange: function(option) { - this.valueSelected = option.value; - } - }, - title: 'DropDown with groups', - description: 'DropDown with groups', - template: ` - -
Selected value:{{valueSelected}}
- ` - }, - { - id: 'groupDropDownPreSelect', - showSource: true, - context: { - options: options2, - onChange: function(option) { - this.valueSelected = option.value; - } - }, - title: 'DropDown with groups and pre-selected value', - description: 'DropDown with groups and pre-selected value', - template: ` - -
Selected value:{{valueSelected}}
- ` - }, - { - id: 'headlesspDropDown', - showSource: true, - context: { - options: options2, - dropDownHedlessType: DropDownTypes.Headless, - onChange: function(option) { - this.valueSelected = option.value; - } - }, - title: 'Headless and Labeless DropDown', - description: 'Headless and labeless DropDown', - template: ` - - -
Selected value:{{valueSelected}}
- ` - }, - { - id: 'disabledDropDown', - showSource: true, - context: { - options: options2, - onChange: function(option) { - this.valueSelected = option.value; - } - }, - title: 'Disabled DropDown', - description: 'Disabled DropDown', - template: ` - -
Selected value:{{valueSelected}}
- ` - }, - { - id: 'normalAutoDropDown', - showSource: true, - context: { - options: options1, - dropDownAutoType: DropDownTypes.Auto, - onChange: function(option) { - this.valueSelected = option.value; - } - }, - title: 'Normal Auto DropDown', - description: 'Normal Auto DropDown', - template: ` - -
Selected value:{{valueSelected}}
- ` - } - ]); diff --git a/stories/ng2-component-lab/filter-bar.component.exp.ts b/stories/ng2-component-lab/filter-bar.component.exp.ts deleted file mode 100644 index 12a287d..0000000 --- a/stories/ng2-component-lab/filter-bar.component.exp.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import { SearchFilterPipe } from './pipes/search-filter-pipe'; - -const action = (e): void => { - console.log("The search query was changed to: ", e); -}; - -export default experimentOn('Filter Bar').group('FilterBar', [ - { - id: 'filterBar', - title: 'Filter bar', - description: ` - The filter bar component text is updated (after debounce time, - default 200 miliseconds) while user write something. - In this example the event on search query changed: - const action = (e): void => { - console.log("The search query was changed to: ", e); - }; - `, - context: { - onChange: action - }, - showSource: true, - template: ` - - -
- Text to search: {{searchText}} - ` - }, - { - id: 'filterBarWithData', - title: 'Filter bar with data', - description: ` - Example of filter bar component with debounce 100 miliseconds, - and with example pipe for filterring. - `, - context: { - data: ['apple', 'banana', 'orange', 'peach'] - }, - showSource: true, - template: ` - - - - ` - } -]); diff --git a/stories/ng2-component-lab/infinite-scroll.component.exp.ts b/stories/ng2-component-lab/infinite-scroll.component.exp.ts deleted file mode 100644 index bd20be5..0000000 --- a/stories/ng2-component-lab/infinite-scroll.component.exp.ts +++ /dev/null @@ -1,166 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -const basicContext = { - scrollContainerId: 'scrollContainer', - numLines: Array(20).fill(null), - hitBottomCount: 0, - pageCount: 0, - isPageLoading: false, - insertPageImmediately: function(pageNum) { - const scrollContainerElem: HTMLElement = document.getElementById(this.scrollContainerId); - scrollContainerElem.appendChild(document.createElement('hr')); - Array(10).fill(null).forEach((_, i) => { - const lineElem = document.createElement('div'); - lineElem.innerHTML = `Page ${pageNum} - line ${i + 1}`; - scrollContainerElem.appendChild(lineElem); - }); - }, - loadPageAsync: function(pageNum, timeout) { - return new Promise((resolve) => { - setTimeout(() => { - this.insertPageImmediately(pageNum); - resolve(); - }, timeout); - }); - }, - onScrollHitBottom: function() { - this.hitBottomCount++; - } -}; - -const basicStyle = ` - .scroll-container { - margin: 12px; - border: none; - padding: 5px; - width: 200px; - height: 100px; - overflow: auto; - font-size: 20px !important; - box-shadow: #666 1px 1px 10px; - } - - .example-source { - background: #eeeeee; - padding: 10px; - border: 1px solid #999999; - } - .example-source pre { - overflow: hidden; - background: #dddddd; - margin-top: 5px; - padding: 5px; - user-select: text; - } -`; -const makeBasicStyleDistance = (distance: number) => ` - .scroll-container::after { - display: block; - content: ''; - height: ${distance}px; - background: red; - } -`; - -export default experimentOn('Infinite-Scroll') - .group("Infinite Scroll",[ - { - id: 'infiniteScrollUsage', - showSource: true, - context: Object.assign({}, basicContext), - title: 'Infinite scroll usage', - description: 'Infinite scroll usage', - styles: [basicStyle], - template: ` -
-
- Line {{i + 1}} -
-
- Hit bottom for {{hitBottomCount}} times! -
- onScrollHitBottom declaration: - 
{{onScrollHitBottom}}
-
- ` - }, - { - id: 'infiniteScrollUsageWithDistance', - showSource: true, - title: 'Infinite scroll usage with distance', - context: Object.assign({}, basicContext), - styles: [basicStyle, makeBasicStyleDistance(50)], - description: '', - template: ` -
-
- Line {{i + 1}} -
-
- Hit bottom for {{hitBottomCount}} times! -
- onScrollHitBottom declaration: - 
{{onScrollHitBottom}}
-
- ` - }, - { - id: 'infiniteScrollUsageWithExpandingContent', - title: 'Infinite scroll usage with expanding content', - showSource: true, - context: Object.assign({}, basicContext, { - scrollContainerId: 'scrollContainer1', - onScrollHitBottom: function() { - this.hitBottomCount++; - this.insertPageImmediately(this.pageCount + 1); - this.pageCount++; - } - }), - styles: [basicStyle, makeBasicStyleDistance(20)], - template: ` -
-
- Line {{i + 1}} -
-
- Hit bottom for {{hitBottomCount}} times!
- Loaded {{pageCount}} pages! -
- onScrollHitBottom declaration: - 
{{onScrollHitBottom}}
-
- ` - }, - { - id: 'infiniteScrollUsageWithExpandingContentAsynchronous', - title: 'Infinite scroll usage with expanding content asynchronous', - showSource: true, - context: Object.assign({}, basicContext, { - scrollContainerId: 'scrollContainer2', - onScrollHitBottom: function() { - this.hitBottomCount++; - if (!this.isPageLoading) { - this.isPageLoading = true; - this.loadPageAsync(this.pageCount + 1, 5000).then(() => { - this.pageCount++; - this.isPageLoading = false; - }); - } - } - }), - styles: [basicStyle, makeBasicStyleDistance(20)], - template: ` -
-
- Line {{i + 1}} -
-
- Hit bottom for {{hitBottomCount}} times!
- Loaded {{pageCount}} pages! LOADING page #{{this.pageCount + 1}} ... -
- onScrollHitBottom declaration: - 
{{onScrollHitBottom}}
-
- ` - } - ]); diff --git a/stories/ng2-component-lab/input.component.exp.ts b/stories/ng2-component-lab/input.component.exp.ts deleted file mode 100644 index 7e931d6..0000000 --- a/stories/ng2-component-lab/input.component.exp.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -const valueChange = (value: any): void => { - console.log('The value was changed! >>>>', value); -}; - -export default experimentOn('Input') - .group("Input",[ - { - id: 'normalInput', - showSource: true, - title: 'Normal input', - description: 'Normal input', - template: ` - - ` - }, - { - id: 'disabledInput', - showSource: true, - title: 'Disabled input', - description: 'Disabled input', - template: ` - - ` - }, - { - id: 'InputTypeNumber', - showSource: true, - title: 'Input type number', - description: 'Input type number', - template: ` - - ` - }, - { - id: 'Input required', - title: 'Input required', - description: 'Input required (this add red * to the label, but does not perform validation, use sdc-validation for validation)', - showSource: true, - template: ` - - ` - }, - { - id: 'inputWithMaxLength', - title: 'Input with max length', - description: 'Input with max length', - showSource: true, - template: ` - - ` - }, - { - id: 'inputWithPlaceholder', - title: 'Input with placeholder, custom class, and tests ID', - description: 'Input with placeholder', - showSource: true, - template: ` - - ` - }, - { - id: 'inputWithDebounce', - title: 'Input with debounce time', - description: `
On value change event code:
-        const valueChange = (value: any): void => {
-            console.log('The value was changed! >>>>', value);
-        };
-        This event will happen 5 sec after the change
-
`, - showSource: true, - context: { - changeEvent: valueChange - }, - template: ` - - ` - }]); diff --git a/stories/ng2-component-lab/modals.component.exp.ts b/stories/ng2-component-lab/modals.component.exp.ts deleted file mode 100644 index e7e38bc..0000000 --- a/stories/ng2-component-lab/modals.component.exp.ts +++ /dev/null @@ -1,126 +0,0 @@ -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: ` - -
Source Code: - 
-          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");
-          {{ '}' }};
-
`, - styles: [sourceStyles] - }, - { - id: 'alertModal', - showSource: false, - title: 'Alert modal', - description: 'Opens a standard alert modal with a custom title and message.', - template: ` - - - -
Source Code: - 
-          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");
-
`, - styles: [sourceStyles] - }, - { - id: 'errorModal', - showSource: false, - title: 'Error modal', - description: `Opens a standard error modal with a custom message.`, - template: ` -
Source Code: - 
-
-          this.modalService.openErrorModal("An error has occurred!", "sampleTestId");
-
`, - 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: ` - -
Source Code: - 
-
-          //create modal config object 
-          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{{ '}' }}]
-            {{ '}' }};
-
-          //open modal with dynamically created 'modalInnerContent' example component. Send data object with input 'name'. 
-          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);
-          {{ '}' }};
-
`, - styles: [sourceStyles] - }, - { - id: 'customModal2', - showSource: false, - title: 'Custom modal 2', - description: 'Opens a modal with, and change his buttons and title', - template: ` - - `, - styles: [sourceStyles] - } - ]); diff --git a/stories/ng2-component-lab/notification.component.exp.ts b/stories/ng2-component-lab/notification.component.exp.ts deleted file mode 100644 index ba2ba24..0000000 --- a/stories/ng2-component-lab/notification.component.exp.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Notification') - .group("Default Notification",[ - { - id: 'notificationContainer', - showSource: true, - title: 'Notification Container', - description: 'container example ...', - template: ``, - }]); diff --git a/stories/ng2-component-lab/pipes/search-filter-pipe.ts b/stories/ng2-component-lab/pipes/search-filter-pipe.ts deleted file mode 100644 index 5469eb4..0000000 --- a/stories/ng2-component-lab/pipes/search-filter-pipe.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe ({ - name: 'PipeSearchFilter', -}) -export class SearchFilterPipe implements PipeTransform { - public transform(value, text: string) { - if (!text || !text.length) { - return value; - } - return value.filter((item) => { - return item.toLowerCase().indexOf(text.toLowerCase()) > -1; - }); - } -} diff --git a/stories/ng2-component-lab/popup-menu.component.exp.ts b/stories/ng2-component-lab/popup-menu.component.exp.ts deleted file mode 100644 index 12da361..0000000 --- a/stories/ng2-component-lab/popup-menu.component.exp.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Menu') - .group("Popups",[ - { - id: 'basicPopupMenuStatic', - showSource: true, - title: 'Basic popup menu (static)', - description: 'Basic popup menu (static)', - template: ` - - - - - - - - - - - First - - - - - - - - - - - Selected - - - - - - - - - - - Disabled - - - - - - - - - - - - Second - - - ` - }, - { - id: 'basicMenuRelative', - title: 'Basic menu (relative)', - description: 'Basic menu (relative)', - showSource: true, - context: { - showSelectedItem: (msg, color) => { - const elm = document.getElementById('selectedItem'); - elm.style.color = color; - elm.innerHTML = msg; - } - }, - styles: [` - .message { - position: absolute; - top: 0; left: 0; - color: white; - } - .click-area { - position: absolute; - width: 100%; - height: 100%; - } - `], - template: - ` -
- Click in the box...
- (popup menu is {{menuStatus === undefined ? 'never opened' : (menuStatus ? 'open at '+menuPos.x+' , '+menuPos.y : 'closed')}})
- selected: - -
- - First - Disabled - - Second - Third (none) - -
-
- ` - } - ]); diff --git a/stories/ng2-component-lab/radio.component.exp.ts b/stories/ng2-component-lab/radio.component.exp.ts deleted file mode 100644 index aa3959b..0000000 --- a/stories/ng2-component-lab/radio.component.exp.ts +++ /dev/null @@ -1,179 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Radios') - .group("Radios",[ - { - id: 'radioButtonsGroupTwoWaysBinding', - showSource: true, - context: { - selectedValue: "val2" - }, - title: 'Radio buttons group (two ways binding)', - description: 'Radio buttons group (two ways binding)', - template: - ` - -
Selected Radio: {{selectedValue}}
- ` - }, - { - id: 'radioButtonsGroupDisabled', - title: 'Radio buttons group disabled', - description: 'Radio buttons group disabled', - showSource: true, - context: { - selectedValue: "val1" - }, - template: ` - -
Selected Radio: {{selectedValue}}
- ` - }, - { - id: 'radioButtonsGroupPartiallyDisabled', - title: 'Radio buttons group partially disabled', - description: 'Radio buttons group partially disabled', - showSource: true, - context: { - selectedValue: "val2" - }, - template: ` - -
Selected Radio: {{selectedValue}}
- ` - }, - { - id: 'radioButtonsGroupVertical', - title: 'Radio buttons group vertical', - description: 'Radio buttons group vertical', - showSource: true, - context: { - selectedValue: "val1" - }, - template: ` - -
Selected Radio: {{selectedValue}}
- ` - }, - { - id: 'radioButtonsGroupGetValue', - title: 'Radio buttons group get value', - description: 'Radio buttons group get value', - showSource: true, - context: { - selectedValue: "val1", - getSelectedValue: (val)=>{ - alert(val); - } - }, - template: ` - -
Selected Radio: {{selectedValue}}
-
- ` - }, - { - id: 'radioButtonsGroupSelectValue', - title: 'Radio buttons group select value', - description: 'Radio buttons group select value', - showSource: true, - context: { - selectedValue: "val1" - }, - template: ` - -
Selected Radio: {{selectedValue}}
-
- ` - } - ]); diff --git a/stories/ng2-component-lab/search-bar.component.exp.ts b/stories/ng2-component-lab/search-bar.component.exp.ts deleted file mode 100644 index 4a7e1fd..0000000 --- a/stories/ng2-component-lab/search-bar.component.exp.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Search Bar').group('SearchBar', [ - { - id: 'search-bar', - title: 'Search Bar', - description: "The search text is updated on click on the magnify", - showSource: true, - template: ` - The text to search: {{searchText}} - - - ` - } -]); diff --git a/stories/ng2-component-lab/svg-icon.component.exp.ts b/stories/ng2-component-lab/svg-icon.component.exp.ts deleted file mode 100644 index c87727d..0000000 --- a/stories/ng2-component-lab/svg-icon.component.exp.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import { Mode, Size } from "../../src/angular/common/enums"; - -export default experimentOn('Icons') - .group('SvgIcons', [ - { - id: 'SvgIcons', - showSource: false, - title: 'SVG Icons', - template: ` - - ` - } - ]); diff --git a/stories/ng2-component-lab/tabs.component.exp.ts b/stories/ng2-component-lab/tabs.component.exp.ts deleted file mode 100644 index ff4c0c5..0000000 --- a/stories/ng2-component-lab/tabs.component.exp.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Tabs').group('Tabs', [ - { - id: 'simpleTabs', - title: 'Simple tabs with text title', - description: "Simple tabs with text title", - showSource: true, - template: ` - - This is tab 1 - This is tab 2 - - ` - }, - { - id: 'simpleTabsWithIcons', - title: 'Simple tabs with icon title', - description: "Simple tabs with icon title", - showSource: true, - template: ` - - This is tab 1 - This is tab 2 - - ` - } -]); diff --git a/stories/ng2-component-lab/tag-cloud.component.exp.ts b/stories/ng2-component-lab/tag-cloud.component.exp.ts deleted file mode 100644 index 83ad03c..0000000 --- a/stories/ng2-component-lab/tag-cloud.component.exp.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -export default experimentOn('Tag Cloud').group('Tag Cloud', [ - { - id: 'list', - title: 'Simple tag-cloud', - description: 'Simple tag-cloud', - showSource: true, - template: ` - - - - ` - }, - { - id: 'unique-tag-cloud', - title: 'List with unique validation', - description: 'List with unique validation', - showSource: true, - template: ` - - - - ` - }, - { - id: 'disabled-tag-cloud', - title: 'Disabled tag-cloud', - description: 'When the parameter isViewOnly = true, the tag-cloud control is disabled', - showSource: true, - template: ` - - - - ` - }, - { - id: 'tag-cloud-with-disabled-items', - title: 'List with some readonly items', - description: 'The parameter isViewOnly can get an array of indexes of tag-cloud items.', - showSource: true, - template: ` - - - - ` - } -]); - diff --git a/stories/ng2-component-lab/tiles.component.exp.ts b/stories/ng2-component-lab/tiles.component.exp.ts deleted file mode 100644 index 572b6ca..0000000 --- a/stories/ng2-component-lab/tiles.component.exp.ts +++ /dev/null @@ -1,194 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -const alert1 = window.alert; -const console1 = console.log; - -export default experimentOn('Tiles') - .group("Tiles",[ - { - id: 'tileSampleBlue', - showSource: true, - context: { - alert: alert1, - console: console1 - }, - title: 'Tile sample blue', - description: 'Tile sample blue', - template: ` - - -
P
- - -
-
- - - vsp_new_icon - - - - - - - - - - -
-
-
-
Router
-
test
-
- - - Footer - - - ` - }, - { - id: 'tileSamplePurple', - title: 'Tile sample purple', - description: 'Tile sample purple', - showSource: true, - template: ` - - -
P
- - -
-
- - - vsp_new_icon - - - - - - - - - - -
-
-
- Router -
test
-
- - - Footer - - - ` - }, - { - id: 'tileSampleWithoutFooter', - title: 'Tile sample without footer', - description: 'Tile sample without footer', - showSource: true, - template: ` - - -
P
- - -
-
- - - vsp_new_icon - - - - - - - - - - -
-
-
- Router -
test
-
- - - ` - }, - { - id: 'tileSampleWithoutHeader', - title: 'Tile sample without header', - description: 'Tile sample without header', - showSource: true, - template: ` - - -
-
- - - vsp_new_icon - - - - - - - - - - -
-
-
- Router -
test
-
- - - Footer - - - ` - }, - { - id: 'tileJustWithInfo', - title: 'Tile just with info', - description: 'Tile just with info', - showSource: true, - template: ` - - -
-
- - - vsp_new_icon - - - - - - - - - - -
-
-
- Router -
test
-
- - ` - } - ]); diff --git a/stories/ng2-component-lab/tooltip.directive.exp.ts b/stories/ng2-component-lab/tooltip.directive.exp.ts deleted file mode 100644 index 9e1dd0b..0000000 --- a/stories/ng2-component-lab/tooltip.directive.exp.ts +++ /dev/null @@ -1,231 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import { ArrowPlacement, TooltipPlacement } from '../../src/angular/tooltip/tooltip.directive'; - -const customTemplate = ` - .sdc-custom-tooltip-template-title { - font-size: 20px; - font-weight: bold; - background-color: $black; - color: $white; - text-align: center; - } - - .sdc-custom-tooltip-template-content { - background-color: $black; - color: $white; - display: inline-block; - text-align: center; - } - - .sdc-custom-tooltip-template-image { - width: 100%; - height:100%; - display: inline-block; - text-align: center; - background-color: #ffffff; - } -`; - -export default experimentOn('Tooltip') - .group("Tooltip",[ - { - id: 'leftAlignmentTextTooltip', - showSource: true, - title: 'Tooltip with short text (left placement)', - description: 'left placement', - context: { - placement: TooltipPlacement.Left, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` -
Lorem ipsum dolor sit amet, - show tooltip - - ,consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. - Integer pulvinar pellentesque accumsan. - show tooltip - - Sed hendrerit lacus eu tempus pharetra -
- ` - }, - { - id: 'leftAlignmentMultiLineTextTooltip', - showSource: true, - title: 'Tooltip with multi line text (left placement)', - description: 'left placement', - context: { - placement: TooltipPlacement.Left, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` -
- The is text example, - show tooltip - - , more text -
- ` - }, - { - id: 'customStyleTooltip', - showSource: true, - title: 'Tooltip with custom style', - description: 'Tooltip with custom style, define your class and style it via css.', - context: { - text: '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' - }, - template: ` - -
- Some text example, - show tooltip, more text -
- ` - }, - { - id: 'rightAlignmentHtmlTooltip', - showSource: true, - title: 'Tooltip with HTML template (right placement)', - description: 'right placement', - context: { - placement: TooltipPlacement.Right, - arrowPlacement: ArrowPlacement.LeftTop - }, - styles: [customTemplate], - template: ` - Template Input: - 

-                    
A long text name, very long, long text ...

-                ]]>
- -
- The is text example, - show tooltip - - , more text -
- - - ` - }, - { - id: 'rightAlignmentHtmlCustomStyleTooltip', - showSource: true, - title: 'Tooltip with HTML template and custom style (right placement)', - description: 'right placement', - context: { - placement: TooltipPlacement.Right, - arrowPlacement: ArrowPlacement.LeftTop - }, - styles: [customTemplate], - template: ` - Template Input: - 
Title... Title... Title... Title... Title...

-                    
-                    
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

-                ]]>
- -
- The is text example, - show tooltip - - , more text -
- - - ` - }, - { - id: 'topAlignmentTextTooltip', - showSource: true, - title: 'Tooltip with text (top placement)', - description: 'top placement', - context: { - placement: TooltipPlacement.Top, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` -
- The is text example, - show tooltip - - , more text -
- ` - }, - { - id: 'bottomAlignmentHtmlTooltip', - showSource: true, - title: 'Tooltip with HTML template (bottom placement)', - description: 'bottom placement', - context: { - placement: TooltipPlacement.Bottom, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` - Template Input: - 
A long text name,
-                    
very long, long text

-                ]]>
- -
- The is text example, - link example - , more text -
- - ` - }, - ]); diff --git a/stories/ng2-component-lab/utils/mock.json b/stories/ng2-component-lab/utils/mock.json deleted file mode 100644 index 6cdaf3b..0000000 --- a/stories/ng2-component-lab/utils/mock.json +++ /dev/null @@ -1,6 +0,0 @@ -[{"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/ng2-component-lab/utils/pipes/keys.pipe.ts b/stories/ng2-component-lab/utils/pipes/keys.pipe.ts deleted file mode 100644 index 2a58cd8..0000000 --- a/stories/ng2-component-lab/utils/pipes/keys.pipe.ts +++ /dev/null @@ -1,13 +0,0 @@ -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/ng2-component-lab/validation.component.exp.ts b/stories/ng2-component-lab/validation.component.exp.ts deleted file mode 100644 index 7f18c93..0000000 --- a/stories/ng2-component-lab/validation.component.exp.ts +++ /dev/null @@ -1,162 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import { RegexPatterns } from '../../src/angular/common/enums'; -import { DropDownOptionType, IDropDownOption } 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 - } -]; - -export default experimentOn('Validation') - .group("Validation", [ - { - id: 'validation1', - showSource: true, - title: 'Simple validation', - description: 'Simple validation (validating that email is valid and that user inserted something in the field). \ - By default the validation starts after first key press', - context: { - emailPattern: RegexPatterns.email - }, - template: ` - - - - - - ` - }, - { - id: 'validation2', - showSource: true, - title: 'Simple validation', - description: 'Simple validation', - context: { - numbersPattern: RegexPatterns.numbers, - isValueHundred: (value: any) => { - return (Number(value) === 100) ? true : false; - } - }, - template: ` - - - - - - ` - }, - { - id: 'validation3', - showSource: true, - title: 'Disabled validation', - description: 'Disabled validation', - context: { - emailPattern: RegexPatterns.email - }, - template: ` - - - - - - ` - }, - { - id: 'validation4', - showSource: true, - title: 'Validation with value already entered', - description: 'Validation with value already entered', - context: { - emailPattern: RegexPatterns.email - }, - template: ` - - - - - - ` - }, - { - id: 'validation5', - showSource: true, - title: 'Validation with validity changed callback', - description: 'Simple validation with alert when validity changes', - context: { - numbersPattern: RegexPatterns.numbers, - validityChanged: (newState: boolean) => { - alert("Validity has changed to " + newState); - } - }, - template: ` - - - - - ` - }, - { - id: 'dropdownWithValidation', - showSource: true, - context: { - options: options1, - isThirdOption: (value: any) => { - return value === 'Third Option'; - } - }, - title: 'DropDown with validation', - description: 'DropDown with validation', - template: ` - - - - - - ` - }, - { - id: 'validationGroup', - showSource: true, - context: { - options: options1, - emailPattern: RegexPatterns.email, - isThirdOption: (value: any) => { - return value === 'Third Option'; - }, - validateGroup: (validationGroup) => { - validationGroup.validate(); - } - }, - title: 'Validation group', - description: 'Validation group (activating validation from code)', - template: ` - - - - - - - - - - - - - - - - - ` - } - ]); -- cgit