config(EJ2-4485): changes for Multiselect sample merge.

Author: pipeline

src/common/samplelist.ts

@@ -18,6 +18,7 @@ import { textboxesAppRoutes } from '../textboxes/textboxes.module';
 import { tooltipAppRoutes } from '../tooltip/tooltip.module';
 import { maskedTextBoxAppRoutes } from '../maskedtextbox/maskedtextbox.module';
 import { timePickerAppRoutes } from '../timepicker/timepicker.module';
+import { multiselectAppRoutes } from '../multiselect/multiselect.module';
 export let samplesList: any = [
     {
         'name': 'Chart', 'category': 'Datavisualization', 'order': '01', 'path': 'chart', 'samples': chartAppRoutes, 'type': 'update'
@@ -55,6 +56,9 @@ export let samplesList: any = [
     {
         'name': 'AutoComplete', 'category': 'Editors', 'order': '03', 'path': 'autocomplete', 'samples': autoCompleteAppRoutes, 'type': 'new'
     },    
+    {
+        "name": "MultiSelect", "category": "Editors", 'order': '03', "path": "multiselect", "samples": multiselectAppRoutes, "type": "new"
+    },
     {
         "name": "TimePicker", "category": "Editors", 'order': '03', "path": "timepicker", "samples": timePickerAppRoutes, type: "new"
     },

src/common/sb.router.ts

@@ -20,6 +20,7 @@ import { TooltipSampleModule } from '../tooltip/tooltip.module';
 import { CircularGaugeSampleModule } from '../circulargauge/circulargauge.module';
 import { LinearGaugeSampleModule } from '../lineargauge/lineargauge.module';
 import { MaskedTextBoxSampleModule } from '../maskedtextbox/maskedtextbox.module';
+import { MultiSelectSampleModule } from '../multiselect/multiselect.module';
 
 const appRoutes: any = [
     { path: 'chart', loadChildren: ChartSampleModule },
@@ -42,6 +43,7 @@ const appRoutes: any = [
     { path: 'toolbar', loadChildren: ToolbarSampleModule },
     { path: 'tooltip', loadChildren: TooltipSampleModule },
     { path: 'maskedtextbox', loadChildren: MaskedTextBoxSampleModule },
+    { path: 'multiselect', loadChildren: MultiSelectSampleModule },
     { path: '', redirectTo: 'material/chart/line', pathMatch: 'full' }
 ];
 
@@ -67,6 +69,7 @@ const appRoutes: any = [
         ToolbarSampleModule,
         TooltipSampleModule,
         MaskedTextBoxSampleModule,
+        MultiSelectSampleModule,
         RouterModule.forRoot(appRoutes)
     ],
 

src/multiselect/customtag-plnkr.json

@@ -0,0 +1 @@
+{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { CustomTagMultiSelectComponent } from './customtag.component';\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\nimport { MultiSelectModule } from '@syncfusion/ej2-ng-dropdowns';\n\nimport { FormsModule }   from '@angular/forms';\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n    imports: [MultiSelectModule, SharedModule, FormsModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CustomTagMultiSelectComponent],\nbootstrap: [CustomTagMultiSelectComponent]\n})\nexport class AppModule { }","customtag.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MultiSelectComponent } from '@syncfusion/ej2-ng-dropdowns';\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'customtag.html',\n    styleUrls: ['style.css'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class CustomTagMultiSelectComponent {\npublic gameList: { [key: string]: Object }[] = [\n        { Id: 'Game1', Game: 'American Football' },\n        { Id: 'Game2', Game: 'Badminton' },\n        { Id: 'Game3', Game: 'Basketball' },\n        { Id: 'Game4', Game: 'Cricket' },\n        { Id: 'Game5', Game: 'Football' },\n        { Id: 'Game6', Game: 'Golf' },\n        { Id: 'Game7', Game: 'Hockey' },\n        { Id: 'Game8', Game: 'Rugby' },\n        { Id: 'Game9', Game: 'Snooker' },\n        { Id: 'Game10', Game: 'Tennis' },\n    ];\npublic fields: object = {text: 'Game', value: 'Id'};\npublic waterMark: string = 'Favorite sports';\npublic box : string = 'box';\n\n}","customtag.html":"<div class=\"control-section\">\n    <div class=\"control-styles\">\n        <h4> Custom Values</h4>\n         <ej-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields'></ej-multiselect>\n    </div>\n</div>\n","style.css":".control-styles {\n    margin: 0 auto; \n    width:400px; \n    padding-top: 30px\n}\n.e-bigger .control-styles {\n    width:300px;\n}\n.e-spinner-icon {\n    background-image: url(./styles/images/Medium-36px-spin.gif) !important;\n    background-size: 16px 16px !important;\n    background-repeat: no-repeat !important;\n    background-position: center center !important;\n    top: 2px;\n    position: relative;\n    left: 24px;\n}\n\n.e-bigger .e-spinner-icon {\n    top: 4px;\n}\n\n.e-spinner-icon {\n    border: none;\n}","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/[email protected]\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n        <script src=\"systemjs.config.js\"></script>\n    </head>\n    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.ts',\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

src/multiselect/customtag.component.ts

@@ -0,0 +1,27 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MultiSelectComponent } from '@syncfusion/ej2-ng-dropdowns';
+
+@Component({
+    selector: 'control-content',
+    templateUrl: 'customtag.html',
+    styleUrls: ['style.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CustomTagMultiSelectComponent {
+public gameList: { [key: string]: Object }[] = [
+        { Id: 'Game1', Game: 'American Football' },
+        { Id: 'Game2', Game: 'Badminton' },
+        { Id: 'Game3', Game: 'Basketball' },
+        { Id: 'Game4', Game: 'Cricket' },
+        { Id: 'Game5', Game: 'Football' },
+        { Id: 'Game6', Game: 'Golf' },
+        { Id: 'Game7', Game: 'Hockey' },
+        { Id: 'Game8', Game: 'Rugby' },
+        { Id: 'Game9', Game: 'Snooker' },
+        { Id: 'Game10', Game: 'Tennis' },
+    ];
+public fields: object = {text: 'Game', value: 'Id'};
+public waterMark: string = 'Favorite sports';
+public box : string = 'box';
+
+}

src/multiselect/customtag.html

@@ -0,0 +1,10 @@
+<div class="control-section">
+    <div class="control-styles">
+        <h4> Custom Values</h4>
+         <ej-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields'></ej-multiselect>
+    </div>
+</div>
+
+<div id="description">
+    <p>The MultiSelect allows user to add a non-present option to the component value when <code>allowCustomValue</code> is enabled. Typed custom value able to tag the selected item. </p>
+</div>