@syncfusion/ej2-angular-dropdowns 34.2.8-ngcc → 35.1.37

package/schematics/generators/combobox-grouping/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "combobox-grouping",
+  "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": "combobox-grouping"
+}

package/schematics/generators/combobox-grouping/schema.ts

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

package/schematics/generators/combobox-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/combobox-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/combobox-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/combobox-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/combobox-reactive-form/sample-details.js

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

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

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

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

@@ -0,0 +1,17 @@
+.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;
+}
+.highcontrast table.box-table td.formtext {
+    color:#f8fc08;
+}

package/schematics/generators/combobox-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-combobox formControlName="skillname" name="skillname" allowCustom=false
+                             [dataSource]='autoreactiveskillset' [placeholder]='autoreactiveplaceholder' floatLabelType='Auto'>
+                             </ejs-combobox>
+                             <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">
+                                    Value 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/combobox-reactive-form/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,38 @@
+/**
+ * AutoComplete 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/combobox-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/combobox-reactive-form/schema.js

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

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

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "combobox-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": "combobox-reactive-form"
+}

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

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

package/schematics/generators/combobox-template/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/combobox-template/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/combobox-template/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/combobox-template/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/combobox-template/sample-details.js

@@ -0,0 +1,5 @@
+export const componentName = 'combobox';
+export const sampleName = 'template';
+export const diModules = null;
+export const packageName = '@syncfusion/ej2-angular-dropdowns';
+export const libModules = 'ComboBoxModule';

package/schematics/generators/combobox-template/sample-details.ts

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

package/schematics/generators/combobox-template/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,65 @@
+.e-bigger #employees_popup .e-dropdownbase .e-list-item {
+    line-height: 40px;
+    height: 64px;
+}
+
+.e-bigger #employees_popup.e-popup .empImage {
+    margin: 10px 16px;
+}
+
+#employees_popup .head {
+    font-weight: 600;
+    height: 48px;
+    padding: 15px 0 0 20px;
+    color: rgba(0, 0, 0, .54);
+    font-size: 16px;
+    font-family: "Roboto";
+    background-color: #f5f5f5;
+}    
+
+.highcontrast #employees_popup .head {
+    color: #fff;
+    background-color: #000;
+}
+
+.fabric #employees_popup .head {
+    background-color: #fff;
+    border-bottom: 1px solid #ccc;
+    color: #0078d7;
+    font-weight: 400;
+}
+
+.e-bigger #employees_popup .e-dropdownbase .e-list-item {
+    line-height: 40px;
+    height: 80px;
+}
+
+#employees_popup .ename {
+    display: block !important;
+    opacity: .87;
+    font-size: 16px;
+    margin-top: 9px;
+}
+
+#employees_popup .job {
+    opacity: .54;
+    font-size: 14px;
+    margin-top: -10px;
+    margin-bottom: 11px;
+}
+
+.e-bigger #employees_popup .job {
+    margin-top: -16px;
+}
+
+#employees_popup .empImage {
+    margin: 6px 16px;
+    float: left;
+    width: 50px;
+    height: 50px;
+}
+
+#employees_popup .e-dropdownbase .e-list-item * {
+    display: block;
+    text-indent: 0;
+}

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

@@ -0,0 +1,14 @@
+
+        <ejs-combobox id='employees' [dataSource]='data' [fields]='fields' [popupHeight]='height' [placeholder]='watermark'>
+            <ng-template #headerTemplate>
+                <div class="head"> <span class="photo">Photo</span> <span style="margin-left:17px;">Employee Info</span></div>
+            </ng-template>
+            <ng-template #itemTemplate let-data>
+                <div><img class="empImage" src="assets/combobox/template/{{data.Eimg}}.png" alt="employee" />
+                    <div class="ename"> {{data.Name}} </div>
+                    <div class="job"> {{data.Designation}} </div>
+                </div>
+            </ng-template>
+        </ejs-combobox>
+
+

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

@@ -0,0 +1,31 @@
+/**
+ * ComboBox Template Sample
+ */
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@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 employees data
+    public data: { [key: string]: Object }[] = [
+        { Name: 'Andrew Fuller', Eimg: '7', Designation: 'Team Lead', Country: 'England' },
+        { Name: 'Anne Dodsworth', Eimg: '1', Designation: 'Developer', Country: 'USA' },
+        { Name: 'Janet Leverling', Eimg: '3', Designation: 'HR', Country: 'USA' },
+        { Name: 'Laura Callahan', Eimg: '2', Designation: 'Product Manager', Country: 'USA' },
+        { Name: 'Margaret Peacock', Eimg: '6', Designation: 'Developer', Country: 'USA' },
+        { Name: 'Michael Suyama', Eimg: '9', Designation: 'Team Lead', Country: 'USA' },
+        { Name: 'Nancy Davolio', Eimg: '4', Designation: 'Product Manager', Country: 'USA' },
+        { Name: 'Robert King', Eimg: '8', Designation: 'Developer ', Country: 'England' },
+        { Name: 'Steven Buchanan', Eimg: '10', Designation: 'CEO', Country: 'England' }
+    ];
+    // maps the appropriate column to fields property
+    public fields: Object = { text: 'Name', value: 'Eimg' };
+    // set the height of the popup element
+    public height: string = '250px';
+    // set the placeholder to ComboBox input element
+    public watermark: string = 'Select an employee';
+}

package/schematics/generators/combobox-template/schema.d.ts

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

package/schematics/generators/combobox-template/schema.js

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