Initial commit.

Adding files needed for Linux Foundation. Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730 Issue-ID: SDC-1608 Signed-off-by: Israel Lavi <il0695@att.com>
author: Israel Lavi <il0695@att.com> 2018-08-07 10:54:17 +0300
committer: Israel Lavi <il0695@att.com> 2018-08-07 11:06:44 +0300
commit: b2a3acea0d0f66028c9ce5fad02d4ecc64abf70c (patch)
tree: 8d70110f34cb845965c42a5915e950bca967d2c3 /stories/ng2-component-lab
parent: 05b37297177e8a342668c15e5d6f738b51f7aedd (diff)
30 files changed, 0 insertions, 2773 deletions
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: `
-            <sdc-accordion title="Accordion header">
-                <p>
-                    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.
-                </p>
-            </sdc-accordion>
-        `
-        },
-        {
-            id: 'accordionRightArrow',
-            title: 'Accordion with right arrow',
-            description: 'Example of accordion with right arrow',
-            showSource: true,
-            context: {
-                arrowDirection: Placement.right,
-            },
-            template: `
-
-
-
-        <sdc-accordion 
-        title="Accordion header" 
-        [arrow-direction]="arrowDirection">
-            <p>
-                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.
-            </p>
-        </sdc-accordion>
-        `
-        },
-        {
-            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: `
-        <sdc-accordion 
-        title="Accordion header" 
-        css-class="sdc-accordion-custom-class"
-        [arrow-direction]="arrowDirection">
-            <p>
-                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.
-            </p>
-        </sdc-accordion>
-        `
-        }
-        ,
-        {
-            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: `
-        <sdc-accordion 
-        title="Accordion header" 
-        css-class="sdc-accordion-custom-class"
-        [arrow-direction]="arrowDirection">
-            <p>
-                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.
-            </p>
-        </sdc-accordion>
-        `
-        },
-        {
-            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: `
-        <sdc-accordion 
-        title="Accordion header" 
-        css-class="sdc-accordion-custom-class"
-        [open]="true"
-        [arrow-direction]="arrowDirection">
-            <p>
-                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.
-            </p>
-        </sdc-accordion>
-        `
-        }
-    ]);
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: `
-        <sdc-autocomplete
-            placeholder="search text"
-            label="search by color:"
-            [data]="data"
-            (itemSelected)="showSelectedItem($event)"
-            >
-        </sdc-autocomplete>
-        `
-    },
-    {
-        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: `
-        <sdc-autocomplete
-            placeholder="search text"
-            label="search by color:"
-            [data]="data"
-            [dataSchema]="{key: 'id', value: 'color'}"
-            (itemSelected)="showSelectedItem($event)"
-            >
-        </sdc-autocomplete>
-        `
-    },
-    {
-        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: `
-        <sdc-autocomplete
-            placeholder="search text"
-            label="search by color:"
-            dataUrl="../../../stories/ng2-component-lab/utils/mock.json"
-            [dataSchema]="{key: 'id', value: 'color'}"
-            (itemSelected)="showSelectedItem($event)"
-            >
-        </sdc-autocomplete>
-        `
-    }
-]);
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.
-        <br>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: `
-            <sdc-button
-                text="Default button long text"
-                testId="longButton"
-                (click)="buttonClicked()">
-            </sdc-button>
-            <sdc-button
-                text="Sample button"
-                (click)="buttonClicked()"
-                [testId]="'defaultButtonTestId'"
-               >
-            </sdc-button>
-
-
-            `
-    }
-]);
-
-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) =>
-                `
-                <span style="display: inline-block;">
-                <div>${buttonSize}</div><br>
-                <sdc-button
-                    text="Sample"
-                    type="${buttonType}"
-                    size="${buttonSize}"
-                    (click)="buttonClicked()"
-                    ${buttonDisabled ? ' [disabled]="true"' : ''}>
-                </sdc-button>
-                </span>
-                `).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: `
-            <sdc-button
-                text="Default button long text"
-                (click)="buttonClicked()"
-                icon_name="settings-o"
-                icon_position="left"
-               >
-            </sdc-button>
-
-            <sdc-button
-                text="Sample button"
-                (click)="buttonClicked()"
-                icon_name="plus-circle-o"
-                icon_position="left"
-                >
-            </sdc-button>
-
-            <sdc-button
-                text="Sample button"
-                 type="secondary"
-                (click)="buttonClicked()"
-                icon_name="plus-circle"
-                icon_position="right"
-                >
-            </sdc-button>
-
-            <sdc-button
-                text="Sample button"
-                type="secondary"
-                (click)="buttonClicked()"
-                icon_name="caret2-right-circle-o"
-                icon_position="right"
-              >
-            </sdc-button>
-
-           `
-    }
-]);
-
-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: `
-            <sdc-button
-                text="Click to show spinner"
-                (click)="buttonClicked(button)"
-                [show_spinner]="false"
-                spinner_position="right"
-                #button
-               >
-            </sdc-button>
-
-           `
-    },
-    {
-        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: `
-            <sdc-button
-                text="Click to show spinner"
-                (click)="buttonClicked(button)"
-                spinner_position="left"
-                #button
-               >
-            </sdc-button>
-
-           `
-    }
-]);
-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: `<sdc-checkbox label="Simple"></sdc-checkbox>`,
-      },
-      {
-        id: 'checkboxChecked',
-        showSource: true,
-        title: 'Regular Checked Checkbox',
-        description: 'Simple checked checkbox',
-        template: `<sdc-checkbox label="Checked" [checked]="true"></sdc-checkbox>`,
-      },
-      {
-        id: 'disabledCheckbox',
-        showSource: true,
-        title: 'Disabled checkbox',
-        description: 'Simple disabled checkbox',
-        template: `<sdc-checkbox label="Disabled"[disabled]="true"></sdc-checkbox>`,
-      },
-      {
-        id: 'disabledCheckboxChecked',
-        showSource: true,
-        title: 'Disabled checked checkbox',
-        description: 'Simple disabled checked checkbox',
-        template: `<sdc-checkbox label="Disabled" [checked]="true" [disabled]="true"></sdc-checkbox>`,
-      }
-    ]);
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: `
-            <pre>
-            <h5>The checklistModel parameter:</h5>
-            const checklistValues = [];
-            const checklistModel: ChecklistModel =
-                new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple'),
-                new ChecklistItemModel('banana'),
-                new ChecklistItemModel('orange')]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `,
-      },
-      {
-        id: 'checklistWithValues',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample2,
-            checklistValues: checklistValuesExample2
-        },
-        styles: [styleCode],
-        title: 'Checklist with values',
-        description: `
-            <pre>
-                <h5>The checklistModel parameter:</h5>
-                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)]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'checklistWithSomeCheckedItems',
-        title: 'Checklist with some checked items',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample3,
-            checklistValues: checklistValuesExample3
-        },
-        styles: [styleCode],
-        description: `
-            <pre><h5>The checklistModel parameter:</h5>
-            const checklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple', false, true),
-                new ChecklistItemModel('banana'),
-                new ChecklistItemModel('orange', false, true)]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'checklistWithSomeDisabledItems',
-        title: 'Checklist with some disabled items',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample4,
-            checklistValues: checklistValuesExample4
-        },
-        styles: [styleCode],
-        description: `
-            <pre><h5>The checklistModel parameter:</h5>
-            const checklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple', true, true),
-                new ChecklistItemModel('banana', true),
-                new ChecklistItemModel('orange')]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'twoLevelsChecklist',
-        title: 'Multi-levels checklist',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample5,
-            checklistValues: checklistValuesExample5,
-            innerChecklistValues: innerChecklistValues
-        },
-        styles: [styleCode],
-        description: `
-            <pre>
-            <h5>The checklistModel parameter:</h5>
-            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')]);</pre>
-        `,
-        template: `
-            <div>Selected values: {{checklistValues.toString()}}</div>
-            <div>Inner checklist selected values: {{innerChecklistValues.toString()}}</div>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'multiLevelsChecklist',
-        title: 'Multi-levels checklist',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample6,
-            checklistFirstLevelValues: checklistFirstLevelValuesExample6,
-            checklistSecondLevelValues: checklistSecondLevelValuesExample6,
-            checklistThirdLevelValues: checklistThirdLevelValuesExample6
-        },
-        styles: [styleCode],
-        description: `
-            <pre><h5>The checklistModel parameter:</h5>
-            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')]);
-            </pre>
-        `,
-        template: `
-            <div>Selected values: {{checklistFirstLevelValues.toString()}}</div>
-            <div>Second level checklist selected values: {{checklistSecondLevelValues.toString()}}</div>
-            <div>Third level checklist selected values: {{checklistThirdLevelValues.toString()}}</div>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    }
-    ]);
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: `<colors-table [tableTitle]="'Colors'" [tableMapColors]="colorMap"></colors-table>`,
-        }
-    ]
-    );
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: `
-
-        <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;
-    }
-}
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: `
-            <sdc-dropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 700">{{valueSelected}}</strong></div>
-            `
-        }, {
-            id: 'groupDropDown',
-            showSource: true,
-            context: {
-                options: options2,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'DropDown with groups',
-            description: 'DropDown with groups',
-            template: `
-            <sdc-dropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            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: `
-            <sdc-dropdown label="Hi I am a label"
-                            placeHolder="Please choose option"
-                            [options]="options"
-                            [selectedOption]="{label: 'does not matter', value: 'firstOptionValue'}"
-                            (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            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: `
-            <button style="margin-bottom: 10px;" SdcDropdownTrigger [dropDown]="dropDown1">Click to toggle!</button>
-            <sdc-dropdown #dropDown1 [options]="options" [type]="dropDownHedlessType" (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            id: 'disabledDropDown',
-            showSource: true,
-            context: {
-                options: options2,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'Disabled DropDown',
-            description: 'Disabled DropDown',
-            template: `
-            <sdc-dropdown   label="Hi I am a label"
-                            placeHolder="Please choose option"
-                            disabled="true"
-                            [options]="options"
-                            (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            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: `
-            <sdc-dropdown label="Hi I am a label"
-                            placeHolder="Please choose option"
-                            [type]="dropDownAutoType"
-                            [options]="options"
-                            (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        }
-    ]);
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: `
-            <sdc-filter-bar placeholder="filter text"
-                            label="filter example:"
-                            [(searchQuery)]="searchText"
-                            (searchQueryChange)="onChange($event)">
-            </sdc-filter-bar>
-            <br>
-            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: `
-            <sdc-filter-bar placeholder="filter text"
-                            label="filter example:"
-                            [debounceTime]="100"
-                            [(searchQuery)]="searchText">
-            </sdc-filter-bar>
-            <ul style="height: 100px; background-color: #eeeeee;">
-                <li *ngFor="let item of data | PipeSearchFilter:searchText">{{item}}</li>
-            </ul>
-    `
-    }
-]);
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: `
-        <div (infiniteScroll)="onScrollHitBottom()" class="scroll-container">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-      },
-      {
-        id: 'infiniteScrollUsageWithDistance',
-        showSource: true,
-        title: 'Infinite scroll usage with distance',
-        context: Object.assign({}, basicContext),
-        styles: [basicStyle, makeBasicStyleDistance(50)],
-        description: '',
-        template: `
-        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="50" class="scroll-container">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-    },
-    {
-        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: `
-        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="20" class="scroll-container" id="{{scrollContainerId}}">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!<br/>
-        Loaded {{pageCount}} pages!
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-    },
-    {
-        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: `
-        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="20" class="scroll-container" id="{{scrollContainerId}}">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!<br/>
-        Loaded {{pageCount}} pages! <span *ngIf="isPageLoading">LOADING page #{{this.pageCount + 1}} ...</span>
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-    }
-    ]);
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: `
-        <sdc-input label="Please Enter value" name="myValue" testId="myTestId"></sdc-input>
-        `
-      },
-      {
-        id: 'disabledInput',
-        showSource: true,
-        title: 'Disabled input',
-        description: 'Disabled input',
-        template: `
-        <sdc-input [disabled]="true"></sdc-input>
-        `
-      },
-      {
-        id: 'InputTypeNumber',
-        showSource: true,
-        title: 'Input type number',
-        description: 'Input type number',
-        template: `
-        <sdc-input type='number'></sdc-input>
-        `
-      },
-      {
-        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: `
-        <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
-      `
-      },
-      {
-        id: 'inputWithMaxLength',
-        title: 'Input with max length',
-        description: 'Input with max length',
-        showSource: true,
-        template: `
-        <sdc-input [maxLength]="5"></sdc-input>
-        `
-    },
-    {
-        id: 'inputWithPlaceholder',
-        title: 'Input with placeholder, custom class, and tests ID',
-        description: 'Input with placeholder',
-        showSource: true,
-        template: `
-      <sdc-input placeHolder="Text..." [classNames]="'my-custom-class another-class'" [testId]="'customTestId'"></sdc-input>
-    `
-    },
-    {
-        id: 'inputWithDebounce',
-        title: 'Input with debounce time',
-        description: `<pre>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
-        </pre>`,
-        showSource: true,
-        context: {
-            changeEvent: valueChange
-        },
-        template: `
-      <sdc-input [debounceTime]="5000" (valueChange)="changeEvent($event)"></sdc-input>
-      `
-    }]);
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: `
-        <modal-consumer [action]="'openActionModal'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-          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");
-          {{ '}' }};
-        </pre></div>`,
-        styles: [sourceStyles]
-      },
-      {
-        id: 'alertModal',
-        showSource: false,
-        title: 'Alert modal',
-        description: 'Opens a standard alert modal with a custom title and message.',
-        template: `
-
-
-        <modal-consumer [action]="'openAlertModal'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-          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");
-        </pre></div>`,
-        styles: [sourceStyles]
-      },
-      {
-        id: 'errorModal',
-        showSource: false,
-        title: 'Error modal',
-        description: `Opens a standard error modal with a custom message.`,
-        template: `<modal-consumer [action]="'openErrorModal'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-
-          this.modalService.openErrorModal("An error has occurred!", "sampleTestId");
-        </pre></div>`,
-        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: `
-        <modal-consumer [action]="'openCustomModal1'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-
-          <span class="comment">//create modal config object </span>
-          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{{ '}' }}]
-            {{ '}' }};
-
-          <span class="comment">//open modal with dynamically created 'modalInnerContent' example component. Send data object with input 'name'. </span>
-          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);
-          {{ '}' }};
-        </pre></div>`,
-        styles: [sourceStyles]
-      },
-      {
-        id: 'customModal2',
-        showSource: false,
-        title: 'Custom modal 2',
-        description: 'Opens a modal with, and change his buttons and title',
-        template: `
-        <modal-consumer [action]="'openCustomModal2'"></modal-consumer>
-        `,
-        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: `<notifications-example></notifications-example>`,
-        }]);
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: `
-        <popup-menu-list [open]="true">
-            <popup-menu-item>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a1" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a1"/>
-                  </g>
-                </svg>
-                First
-            </popup-menu-item>
-            <popup-menu-item type="selected">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a2" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a2"/>
-                  </g>
-                </svg>
-                Selected
-            </popup-menu-item>
-            <popup-menu-item type="disabled">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a3" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a3"/>
-                  </g>
-                </svg>
-                Disabled
-            </popup-menu-item>
-            <popup-menu-item type="separator"></popup-menu-item>
-            <popup-menu-item>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a4" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a4"/>
-                  </g>
-                </svg>
-                Second
-            </popup-menu-item>
-        </popup-menu-list>
-        `
-    },
-    {
-        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:
-        `
-        <div style="position: relative; width: 400px; height: 200px; background: blue;">
-            <span class="message">Click in the box...<br/>
-                (popup menu is {{menuStatus === undefined ? 'never opened' : (menuStatus ? 'open at '+menuPos.x+' , '+menuPos.y : 'closed')}})<br/>
-                selected: <span #selectedItem id="selectedItem"></span>
-            </span>
-            <div class="click-area"
-                (click)="menu.position = {x:$event.offsetX, y:$event.offsetY}; mopen=true;">
-                <popup-menu-list [(open)]="mopen" (openChange)="menuStatus=$event" (positionChange)="menuPos=$event" [relative]="true" #menu>
-                    <popup-menu-item (action)="showSelectedItem('First', 'red')">First</popup-menu-item>
-                    <popup-menu-item type="disabled">Disabled</popup-menu-item>
-                    <popup-menu-item type="separator"></popup-menu-item>
-                    <popup-menu-item (action)="showSelectedItem('Second', 'green')">Second</popup-menu-item>
-                    <popup-menu-item>Third (none)</popup-menu-item>
-                </popup-menu-list>
-            </div>
-        </div>
-        `
-    }
-    ]);
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:
-        `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group legend'"
-            [(value)]="selectedValue"
-            [options] = "{
-                items: [
-                    {
-                        value: 'val1',
-                        name: 'radio5',
-                        label: 'Label of Radio 1'
-                    },
-                    {
-                        value: 'val2',
-                        name: 'radio5',
-                        label: 'Label of Radio 2'
-                    }
-                ]}"
-            ></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupDisabled',
-        title: 'Radio buttons group disabled',
-        description: 'Radio buttons group disabled',
-        showSource: true,
-        context: {
-            selectedValue: "val1"
-        },
-        template: `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group Disabled legend'"
-            [disabled]="true"
-            [value]="selectedValue"
-            [options] = "{
-            items: [{
-                value: 'val1',
-                name: 'radio6',
-                label: 'Label of Radio 1'
-            }, {
-                value: 'val2',
-                name: 'radio6',
-                label: 'Label of Radio 2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupPartiallyDisabled',
-        title: 'Radio buttons group partially disabled',
-        description: 'Radio buttons group partially disabled',
-        showSource: true,
-        context: {
-            selectedValue: "val2"
-        },
-        template: `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group partially disabled'"
-            [(value)]="selectedValue"
-            [options] = "{
-            items: [{
-                value: 'val1',
-                name: 'radio7',
-                label: 'Label of Radio 1'
-            }, {
-                value: 'val2',
-                disabled: 'true',
-                name: 'radio7',
-                label: 'Label of Radio 2'
-            }, {
-                value: 'val3',
-                name: 'radio7',
-                label: 'Label of Radio 3'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupVertical',
-        title: 'Radio buttons group vertical',
-        description: 'Radio buttons group vertical',
-        showSource: true,
-        context: {
-            selectedValue: "val1"
-        },
-        template: `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group Vertical legend'"
-            [(value)]="selectedValue"
-            [direction]="'horizontal'"
-            [options]="{
-            items: [{
-                value:'val1',
-                name: 'radio8',
-                label: 'Label of Radio1'
-            }, {
-                value:'val2',
-                name: 'radio8',
-                label: 'Label of Radio2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupGetValue',
-        title: 'Radio buttons group get value',
-        description: 'Radio buttons group get value',
-        showSource: true,
-        context: {
-            selectedValue: "val1",
-            getSelectedValue: (val)=>{
-                alert(val);
-            }
-        },
-        template: `
-        <sdc-radio-group
-            #myRadioGroup
-            [legend]="'Radio Buttons Group Vertical legend'"
-            [(value)]="selectedValue"
-            [options]="{
-            items: [{
-                value:'val1',
-                name: 'radio8',
-                label: 'Label of Radio1'
-            }, {
-                value:'val2',
-                name: 'radio8',
-                label: 'Label of Radio2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        <br><button (click)="getSelectedValue(myRadioGroup.value)">Get selected value</button>
-        `
-    },
-    {
-        id: 'radioButtonsGroupSelectValue',
-        title: 'Radio buttons group select value',
-        description: 'Radio buttons group select value',
-        showSource: true,
-        context: {
-            selectedValue: "val1"
-        },
-        template: `
-        <sdc-radio-group
-            #myRadioGroup
-            [legend]="'Radio Buttons Group Vertical legend'"
-            [(value)]="selectedValue"
-            [options]="{
-            items: [{
-                value:'val1',
-                name: 'radio8',
-                label: 'Label of Radio1'
-            }, {
-                value:'val2',
-                name: 'radio8',
-                label: 'Label of Radio2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        <br><button (click)="myRadioGroup.value='val2'">Set value to val2</button>
-        `
-    }
-    ]);
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}}
-        <sdc-search-bar placeholder="search text"
-                        label="search example:"
-                        [searchQuery]="searchText"
-                        (searchQueryClick)="searchText = $event"
-                        >
-        </sdc-search-bar>
-    `
-    }
-]);
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: `
-            <svg-icons-table></svg-icons-table>
-            `
-        }
-    ]);
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: `
-        <sdc-tabs>
-            <sdc-tab title="tab1">This is tab 1</sdc-tab>
-            <sdc-tab title="tab2">This is tab 2</sdc-tab>
-        </sdc-tabs>
-    `
-    },
-    {
-        id: 'simpleTabsWithIcons',
-        title: 'Simple tabs with icon title',
-        description: "Simple tabs with icon title",
-        showSource: true,
-        template: `
-        <sdc-tabs>
-            <sdc-tab titleIcon="inputs-o">This is tab 1</sdc-tab>
-            <sdc-tab titleIcon="edit-file-o">This is tab 2</sdc-tab>
-        </sdc-tabs>
-    `
-    }
-]);
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: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb']">
-
-        </sdc-tag-cloud>
-    `
-    },
-    {
-        id: 'unique-tag-cloud',
-        title: 'List with unique validation',
-        description: 'List with unique validation',
-        showSource: true,
-        template: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb']"
-                [isUniqueList]="true"
-                [uniqueErrorMessage]="'This value is already in the list'">
-
-        </sdc-tag-cloud>
-    `
-    },
-    {
-        id: 'disabled-tag-cloud',
-        title: 'Disabled tag-cloud',
-        description: 'When the parameter isViewOnly = true, the tag-cloud control is disabled',
-        showSource: true,
-        template: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb']"
-                [isViewOnly]="true">
-
-        </sdc-tag-cloud>
-    `
-    },
-    {
-        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: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb', 'ccc', 'ddd']"
-                [isViewOnly]="[1,3]">
-
-        </sdc-tag-cloud>
-    `
-    }
-]);
-
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: `
-            <sdc-tile>
-                <sdc-tile-header>
-                    <div class="blue">P</div>
-                </sdc-tile-header>
-                <sdc-tile-content>
-                    <div class="sdc-tile-content-icon blue">
-                        <div class="svg-icon-wrapper"  >
-                            <svg class="svg-icon __vsp" viewBox="0 0 59.5 40" id="vsp_icon">
-                                <title>
-                                    vsp_new_icon
-                                </title>
-                                <g id="Layer_2" data-name="Layer 2">
-                                    <g id="vlm_icon" data-name="vlm icon">
-                                        <path d="M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z">
-                                        </path>
-                                        <path d="M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z">
-                                        </path>
-                                    </g>
-                                </g>
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="sdc-tile-content-info">
-                        <div class="sdc-tile-info-line title">Router</div>
-                        <div class="sdc-tile-info-line subtitle">test</div>
-                    </div>
-                </sdc-tile-content>
-                <sdc-tile-footer>
-                    <span class="sdc-tile-footer-cell">Footer</span>
-                </sdc-tile-footer>
-            </sdc-tile>
-            `
-    },
-    {
-        id: 'tileSamplePurple',
-        title: 'Tile sample purple',
-        description: 'Tile sample purple',
-        showSource: true,
-        template: `
-            <sdc-tile>
-                <sdc-tile-header>
-                    <div class="purple">P</div>
-                </sdc-tile-header>
-                <sdc-tile-content>
-                    <div class="sdc-tile-content-icon purple">
-                        <div class="svg-icon-wrapper"  >
-                            <svg class="svg-icon __vsp" viewBox="0 0 59.5 40" id="vsp_icon">
-                                <title>
-                                    vsp_new_icon
-                                </title>
-                                <g id="Layer_2" data-name="Layer 2">
-                                    <g id="vlm_icon" data-name="vlm icon">
-                                        <path d="M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z">
-                                        </path>
-                                        <path d="M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z">
-                                        </path>
-                                    </g>
-                                </g>
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="sdc-tile-content-info">
-                        <span class="sdc-tile-info-line title">Router</span>
-                        <div class="sdc-tile-info-line subtitle">test</div>
-                    </div>
-                </sdc-tile-content>
-                <sdc-tile-footer>
-                    <span class="sdc-tile-footer-cell"> Footer </span>
-                </sdc-tile-footer>
-            </sdc-tile>
-        `
-    },
-    {
-        id: 'tileSampleWithoutFooter',
-        title: 'Tile sample without footer',
-        description: 'Tile sample without footer',
-        showSource: true,
-        template: `
-            <sdc-tile>
-                <sdc-tile-header>
-                    <div class="purple">P</div>
-                </sdc-tile-header>
-                <sdc-tile-content>
-                    <div class="sdc-tile-content-icon purple">
-                        <div class="svg-icon-wrapper"  >
-                            <svg class="svg-icon __vsp" viewBox="0 0 59.5 40" id="vsp_icon">
-                                <title>
-                                    vsp_new_icon
-                                </title>
-                                <g id="Layer_2" data-name="Layer 2">
-                                    <g id="vlm_icon" data-name="vlm icon">
-                                        <path d="M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z">
-                                        </path>
-                                        <path d="M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z">
-                                        </path>
-                                    </g>
-                                </g>
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="sdc-tile-content-info">
-                        <span class="sdc-tile-info-line title">Router</span>
-                        <div class="sdc-tile-info-line subtitle">test</div>
-                    </div>
-                </sdc-tile-content>
-            </sdc-tile>
-        `
-    },
-    {
-        id: 'tileSampleWithoutHeader',
-        title: 'Tile sample without header',
-        description: 'Tile sample without header',
-        showSource: true,
-        template: `
-            <sdc-tile>
-                <sdc-tile-content>
-                    <div class="sdc-tile-content-icon purple">
-                        <div class="svg-icon-wrapper"  >
-                            <svg class="svg-icon __vsp" viewBox="0 0 59.5 40" id="vsp_icon">
-                                <title>
-                                    vsp_new_icon
-                                </title>
-                                <g id="Layer_2" data-name="Layer 2">
-                                    <g id="vlm_icon" data-name="vlm icon">
-                                        <path d="M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z">
-                                        </path>
-                                        <path d="M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z">
-                                        </path>
-                                    </g>
-                                </g>
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="sdc-tile-content-info">
-                        <span class="sdc-tile-info-line title">Router</span>
-                        <div class="sdc-tile-info-line subtitle">test</div>
-                    </div>
-                </sdc-tile-content>
-                <sdc-tile-footer>
-                    <span class="sdc-tile-footer-cell"> Footer </span>
-                </sdc-tile-footer>
-            </sdc-tile>
-        `
-    },
-    {
-        id: 'tileJustWithInfo',
-        title: 'Tile just with info',
-        description: 'Tile just with info',
-        showSource: true,
-        template: `
-            <sdc-tile>
-                <sdc-tile-content>
-                    <div class="sdc-tile-content-icon purple">
-                        <div class="svg-icon-wrapper"  >
-                            <svg class="svg-icon __vsp" viewBox="0 0 59.5 40" id="vsp_icon">
-                                <title>
-                                    vsp_new_icon
-                                </title>
-                                <g id="Layer_2" data-name="Layer 2">
-                                    <g id="vlm_icon" data-name="vlm icon">
-                                        <path d="M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z">
-                                        </path>
-                                        <path d="M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z">
-                                        </path>
-                                    </g>
-                                </g>
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="sdc-tile-content-info">
-                        <span class="sdc-tile-info-line title">Router</span>
-                        <div class="sdc-tile-info-line subtitle">test</div>
-                    </div>
-                </sdc-tile-content>
-            </sdc-tile>`
-    }
-    ]);
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: `
-                <div style="padding-bottom: 20px; width: 350px;">Lorem ipsum dolor sit amet,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'A short text name, short text'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    ,consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero.
-                    Integer pulvinar pellentesque accumsan.
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'A short text name, short text'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    Sed hendrerit lacus eu tempus pharetra
-                </div>
-                `
-        },
-        {
-            id: 'leftAlignmentMultiLineTextTooltip',
-            showSource: true,
-            title: 'Tooltip with multi line text (left placement)',
-            description: 'left placement',
-            context: {
-                placement: TooltipPlacement.Left,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            template: `
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-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'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    , more text
-                </div>
-                `
-        },
-        {
-            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: `
-                <![CDATA[
-                    .sdc-custom-tooltip {
-                        background-color: $dark-blue;
-                        border-color: $dark-blue;
-                        border-radius: 10px;
-                    }
-                ]]>
-                <div style="padding-bottom: 20px;">
-                    Some text example,
-                    <span style="color: #009fdb" sdc-tooltip [tooltip-text]=text tooltip-css-class='sdc-custom-tooltip'>show tooltip</span>, more text
-                </div>
-                `
-        },
-        {
-            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:
-                <pre><![CDATA[
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p>
-                ]]></pre>
-
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'This is the tooltip test'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'
-                            [tooltip-template]='template'>show tooltip
-                    </span>
-                    , more text
-                </div>
-
-                <template #template>
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p>
-                </template>
-                `
-        },
-        {
-            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:
-                <pre><![CDATA[
-                    <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p>
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-custom-tooltip-template-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</p>
-                ]]></pre>
-
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'This is the tooltip test'
-                            [tooltip-placement]= 'placement'
-                            tooltip-css-class = 'sdc-custom-tooltip'
-                            [tooltip-arrow-placement] = 'arrowPlacement'
-                            [tooltip-template]='template'>show tooltip
-                    </span>
-                    , more text
-                </div>
-
-                <template #template>
-                    <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p>
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-custom-tooltip-template-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</p>
-                </template>
-                `
-        },
-        {
-            id: 'topAlignmentTextTooltip',
-            showSource: true,
-            title: 'Tooltip with text (top placement)',
-            description: 'top placement',
-            context: {
-                placement: TooltipPlacement.Top,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            template: `
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'A long text name, very long, long text'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    , more text
-                </div>
-                `
-        },
-        {
-            id: 'bottomAlignmentHtmlTooltip',
-            showSource: true,
-            title: 'Tooltip with HTML template (bottom placement)',
-            description: 'bottom placement',
-            context: {
-                placement: TooltipPlacement.Bottom,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            template: `
-                Template Input:
-                <pre><![CDATA[
-                    <div class="sdc-tooltip-template-content">A long text name,</div>
-                    <div class="sdc-tooltip-template-content">very long, long text</div>
-                ]]></pre>
-
-                <div style="width:30%; height: 30px; text-align: center;">
-                    The is text example,
-                    <a style="color: #009fdb; font-size: small; cursor: pointer;"
-                        sdc-tooltip
-                            tooltip-text = 'This is the tooltip test'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'
-                            [tooltip-template]='template' >link example</a>
-                    , more text
-                </div>
-                <template #template>
-                    <div class="sdc-tooltip-template-content">A long text name,</div>
-                    <div class="sdc-tooltip-template-content">very long, long text</div>
-                </template>
-                `
-        },
-    ]);
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: `
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
-                <sdc-validation [validateElement]="email">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'validation2',
-            showSource: true,
-            title: 'Simple validation',
-            description: 'Simple validation',
-            context: {
-                numbersPattern: RegexPatterns.numbers,
-                isValueHundred: (value: any) => {
-                    return (Number(value) === 100) ? true : false;
-                }
-            },
-            template: `
-                <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
-                <sdc-validation [validateElement]="numberValidator">
-                    <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
-                    <sdc-custom-validator message="The number should be 100" [callback]="isValueHundred"></sdc-custom-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'validation3',
-            showSource: true,
-            title: 'Disabled validation',
-            description: 'Disabled validation',
-            context: {
-                emailPattern: RegexPatterns.email
-            },
-            template: `
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
-                <sdc-validation [validateElement]="email" disabled='true'>
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'validation4',
-            showSource: true,
-            title: 'Validation with value already entered',
-            description: 'Validation with value already entered',
-            context: {
-                emailPattern: RegexPatterns.email
-            },
-            template: `
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true" value="notvalidemail@"></sdc-input>
-                <sdc-validation [validateElement]="email">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            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: `
-                <sdc-input #validatorWithCallback label="Please enter a number" [maxLength]="10" required="true"></sdc-input>
-                <sdc-validation [validateElement]="validatorWithCallback" (validityChanged)="validityChanged($event)">
-                    <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'dropdownWithValidation',
-            showSource: true,
-            context: {
-                options: options1,
-                isThirdOption: (value: any) => {
-                    return value === 'Third Option';
-                }
-            },
-            title: 'DropDown with validation',
-            description: 'DropDown with validation',
-            template: `
-            <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
-            <sdc-validation [validateElement]="mydropdown">
-                <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
-            </sdc-validation>
-            `
-        },
-        {
-            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: `
-            <sdc-validation-group #validationGroup>
-
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
-                <sdc-validation [validateElement]="email">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-
-                <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
-                <sdc-validation [validateElement]="mydropdown">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
-                </sdc-validation>
-
-            </sdc-validation-group>
-            <sdc-button text="validate group" (click)="validateGroup(validationGroup)"></sdc-button>
-            `
-        }
-    ]);
author	Israel Lavi <il0695@att.com>	2018-08-07 10:54:17 +0300
committer	Israel Lavi <il0695@att.com>	2018-08-07 11:06:44 +0300
commit	b2a3acea0d0f66028c9ce5fad02d4ecc64abf70c (patch)
tree	8d70110f34cb845965c42a5915e950bca967d2c3 /stories/ng2-component-lab
parent	05b37297177e8a342668c15e5d6f738b51f7aedd (diff)