@syncfusion/ej2-angular-dropdowns 34.2.8 → 35.1.39

package/schematics/generators/multiselect-delimiter-mode/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "multiselect-delimiter-mode",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "multiselect-delimiter-mode"
+}

package/schematics/generators/multiselect-delimiter-mode/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

package/schematics/generators/multiselect-filtering/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/multiselect-filtering/index.js

@@ -0,0 +1,5 @@
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import * as sampleDetails from './sample-details';
+export default function (options) {
+    return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/multiselect-filtering/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/multiselect-filtering/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string | null;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/multiselect-filtering/sample-details.js

@@ -0,0 +1,5 @@
+export const componentName = 'multiselect';
+export const sampleName = 'filtering';
+export const diModules = null;
+export const packageName = '@syncfusion/ej2-angular-dropdowns';
+export const libModules = 'MultiSelectModule';

package/schematics/generators/multiselect-filtering/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'multiselect';
+export const sampleName: string = 'filtering';
+export const diModules: string | null =  null;
+export const packageName: string = '@syncfusion/ej2-angular-dropdowns';
+export const libModules: string = 'MultiSelectModule';

package/schematics/generators/multiselect-filtering/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,5 @@
+
+        <ejs-multiselect id='multiselect-filtering' [dataSource]='data' [fields]='fields' (filtering)='onFiltering($event)' [allowFiltering]='true'
+            [placeholder]='watermarks'></ejs-multiselect>
+
+

package/schematics/generators/multiselect-filtering/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,48 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { Query } from '@syncfusion/ej2-data';
+import { EmitType } from '@syncfusion/ej2-base';
+import { FilteringEventArgs } from '@syncfusion/ej2-dropdowns';
+
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class <%= classify(name) %>Component {
+    // define the JSON of filtering data
+    public data: { [key: string]: Object; }[] = [
+        { Name: 'Australia', Code: 'AU' },
+        { Name: 'Bermuda', Code: 'BM' },
+        { Name: 'Canada', Code: 'CA' },
+        { Name: 'Cameroon', Code: 'CM' },
+        { Name: 'Denmark', Code: 'DK' },
+        { Name: 'France', Code: 'FR' },
+        { Name: 'Finland', Code: 'FI' },
+        { Name: 'Germany', Code: 'DE' },
+        { Name: 'Greenland', Code: 'GL' },
+        { Name: 'Hong Kong', Code: 'HK' },
+        { Name: 'India', Code: 'IN' },
+        { Name: 'Italy', Code: 'IT' },
+        { Name: 'Japan', Code: 'JP' },
+        { Name: 'Mexico', Code: 'MX' },
+        { Name: 'Norway', Code: 'NO' },
+        { Name: 'Poland', Code: 'PL' },
+        { Name: 'Switzerland', Code: 'CH' },
+        { Name: 'United Kingdom', Code: 'GB' },
+        { Name: 'United States', Code: 'US' }
+    ];
+
+    public query: Query = new Query();
+    // maps the appropriate column to fields property
+    public fields: Object = { text: 'Name', value: 'Code' };
+    public watermarks: string = 'Select countries';
+    // filtering event handler to filter a country
+    public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
+        let query: Query = new Query();
+        //frame the query based on search string with filter type.
+        query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;
+        //pass the filter data source, filter query to updateData method.
+        e.updateData(this.data, query);
+    };
+}

package/schematics/generators/multiselect-filtering/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/multiselect-filtering/schema.js

@@ -0,0 +1 @@
+export {};

package/schematics/generators/multiselect-filtering/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "multiselect-filtering",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "multiselect-filtering"
+}

package/schematics/generators/multiselect-filtering/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

package/schematics/generators/multiselect-reactive-form/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/multiselect-reactive-form/index.js

@@ -0,0 +1,5 @@
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import * as sampleDetails from './sample-details';
+export default function (options) {
+    return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/multiselect-reactive-form/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/multiselect-reactive-form/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string | null;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/multiselect-reactive-form/sample-details.js

@@ -0,0 +1,5 @@
+export const componentName = 'multiselect';
+export const sampleName = 'reactive-form';
+export const diModules = null;
+export const packageName = '@syncfusion/ej2-angular-dropdowns';
+export const libModules = 'MultiSelectModule';

package/schematics/generators/multiselect-reactive-form/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'multiselect';
+export const sampleName: string = 'reactive-form';
+export const diModules: string | null =  null;
+export const packageName: string = '@syncfusion/ej2-angular-dropdowns';
+export const libModules: string = 'MultiSelectModule';

package/schematics/generators/multiselect-reactive-form/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,18 @@
+.box-form {
+    webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+}
+table.box-table td {
+    padding-top: 10px;
+}
+.highcontrast .box-form {
+    webkit-box-shadow: 0 2px 2px 0 rgb(255, 217, 57), 0 3px 1px -2px rgb(255, 217, 57), 0 1px 5px 0 rgb(255, 217, 57);
+    box-shadow: 0 2px 2px 0 rgb(255, 217, 57), 0 3px 1px -2px rgb(255, 217, 57), 0 1px 5px 0 rgb(255, 217, 57);
+}
+table.box-table td.formtext {
+    color:#8a2be2;
+    word-break: break-all;
+}
+.highcontrast table.box-table td.formtext {
+    color:#f8fc08;
+}

package/schematics/generators/multiselect-reactive-form/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,24 @@
+
+                <form [formGroup]="skillForm" class='box-form'  novalidate id="formId">
+                        <div class="form-group">
+                            <ejs-multiselect formControlName="skillname" name="skillname" allowCustom=false
+                             [dataSource]='autoreactiveskillset' [placeholder]='autoreactiveplaceholder'>
+                            </ejs-multiselect>
+                            <div *ngIf="skillForm.controls.skillname.invalid && (skillForm.controls.skillname.dirty || skillForm.controls.skillname.touched)"
+                             class="alert alert-danger">
+                                <div *ngIf="skillForm.controls.skillname.errors.required">
+                                BookName is required.
+                                </div>
+                            </div>
+                        </div>
+             
+                        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                          <button ejs-button [disabled]="!skillForm.valid" >Submit</button>
+                          </div>
+                          <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                            <button ejs-button (click)="onreset($event)" type="reset" [disabled]="!skillForm.valid">Reset</button>
+                          </div>
+                  
+                      </form>
+   
+  

package/schematics/generators/multiselect-reactive-form/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,38 @@
+/**
+ * MultiSelect Reactive Form Sample
+ */
+import { Component, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class <%= classify(name) %>Component {
+    public autoreactiveskillset: string[] = [
+        'ASP.NET', 'ActionScript', 'Basic',
+        'C++' , 'C#' , 'dBase' , 'Delphi' ,
+        'ESPOL' , 'F#' , 'FoxPro' , 'Java',
+        'J#' , 'Lisp' , 'Logo' , 'PHP'
+    ];
+    public autoreactiveplaceholder: String = 'Select book';
+    skillForm: FormGroup;
+
+    constructor(private fb: FormBuilder) {
+        this.createForm();
+    }
+    createForm() : void {
+        this.skillForm = this.fb.group({
+            skillname: ['', Validators.required]
+        });
+    }
+    onreset(element: MouseEvent) : void {
+        let parentNode: NodeListOf<HTMLElement> = document.getElementsByClassName('box-form')[0].querySelectorAll('.e-float-text');
+        for (let i: number = 0; i < parentNode.length; i++) {
+            parentNode[i].classList.remove('e-label-top');
+            parentNode[i].classList.add('e-label-bottom');
+        }
+    }
+}

package/schematics/generators/multiselect-reactive-form/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/multiselect-reactive-form/schema.js

@@ -0,0 +1 @@
+export {};

package/schematics/generators/multiselect-reactive-form/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "multiselect-reactive-form",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "multiselect-reactive-form"
+}

package/schematics/generators/multiselect-reactive-form/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }