@syncfusion/ej2-angular-dropdowns 34.2.8 → 35.1.39

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

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

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

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

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

@@ -0,0 +1,211 @@
+.e-bigger #multi-template_popup .e-dropdownbase .e-list-item {
+    line-height: 40px;
+    height: 64px;
+}
+
+.e-bigger #multi-template_popup.e-popup .multiempImage {
+    margin: 10px 16px;
+}
+
+#multi-template_popup .multihead {
+    font-weight: 600;
+    height: 48px;
+    padding: 15px 0 0 20px;
+    color: rgba(0, 0, 0, .54);
+    font-size: 16px;
+    background-color: #f5f5f5;
+}
+
+.fabric #multi-template_popup .multihead {
+    background-color: #fff;
+    border-bottom: 1px solid #ccc;
+    color: #0078d7;
+    font-weight: 400;
+}
+
+.bootstrap #multi-template_popup .multihead {
+    background-color: #fff;
+    border-bottom: 1px solid #ccc;
+    color: #777;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 30px;
+    height: 30px;
+    padding: 0 0 0 24px;
+}
+
+.highcontrast #multi-template_popup .multihead {
+    color: #fff;
+    background-color: #000;
+}
+
+.e-bigger.bootstrap #multi-template_popup .multihead {
+    line-height: 44px;
+    height: 44px;
+    font-size: 13px;
+}
+
+.e-bigger #multi-template_popup .e-dropdownbase .e-list-item {
+    line-height: 40px;
+    height: 80px;
+}
+
+#multi-template_popup .multiename {
+    display: block !important;
+    font-size: 16px;
+    margin-top: 9px;
+}
+
+#multi-template_popup .multijob {
+    font-size: 14px;
+    margin-top: -10px;
+    margin-bottom: 11px;
+}
+
+.e-bigger #multi-template_popup .multijob {
+    margin-top: -16px;
+}
+
+.bootstrap #multi-template_popup .multijob {
+    font-size: 14px;
+    margin-top: 0px;
+    margin-bottom: 7px;
+}
+.e-bigger.bootstrap #multiTemplate_popup .multijob {
+    margin-top: -16px;
+}
+
+
+#multi-template_popup .multiempImage {
+    margin: 6px 16px;
+    size: 50px;
+    float: left;
+}
+
+#multi-template_popup .e-dropdownbase .e-list-item * {
+    display: block;
+    text-indent: 0;
+}
+.nameTemp {
+    padding: 0 0 0 28px;
+    line-height: 1.2em;
+}
+.valueTemp {
+    border-radius: 50%;
+    float: left;
+    margin-top: -6px;
+    position: relative;
+    left: 0px;
+    height: 26px;
+    width: 26px;
+}
+.material .valueTemp {
+    margin-top: 15px;
+}
+.fabric .valueTemp {
+    margin-top: 20px;
+}
+.e-bigger .valueTemp { 
+    margin-top: 19px;  
+    height: 30px;
+    width: 30px;
+}
+.highcontrast .e-bigger .valueTemp {
+    margin-top: -1px;
+}
+.highcontrast .valueTemp {
+    margin-top: -1px;
+}
+
+.e-bigger.highcontrast .nameTemp {
+    padding: 5px 0 0 28px;
+}
+.highcontrast .nameTemp {
+    padding: 3px 0 0 28px;
+}
+.e-bigger.material .valueTemp {
+    height: 32px;
+    width: 32px;
+    margin-top: 15px;
+}
+.fabric .nameTemp {
+    width: 123px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 0 0 36px;
+    position: relative;
+    bottom: 24px;
+    margin-right: -24px;
+}
+
+.e-bigger.material .nameTemp {
+    bottom: 24px;
+}
+
+.material .nameTemp {
+    width: 114px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 0 0 36px;
+    position: relative;
+    bottom: 20px;
+    margin-right: -24px;
+}
+.e-bigger.material .nameTemp {
+    bottom: 24px;
+}
+.bootstrap .nameTemp {
+    width: 130px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 0 0 29px;
+    bottom: 23px;
+    position: relative;
+    margin-right: -24px;
+}
+
+.bootstrap .valueTemp {
+    height: 31px;
+    width: 30px;
+    left: -10px;
+    margin-top: 17px;
+}
+
+.e-bigger.bootstrap .valueTemp {
+    height: 31px;
+    width: 30px;
+    left: -10px;
+    margin-top: 0px;
+}
+
+.e-bigger.bootstrap .nameTemp {
+    bottom: 24px;
+    padding: 0 0 0 36px;
+}
+
+.control-section .control-wrapper {
+    width: 80%;
+    margin: 0 auto;
+    min-width: 185px;
+}
+
+.e-bigger .control-section .control-wrapper {
+    width: 100%;
+}
+
+#temp .e-multi-select-wrapper .e-chips {
+    padding: 0 4px 0 0px;
+}
+#temp .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
+    padding: 0 0 0 0px;
+    width: 75%;
+} 
+
+.bootstrap.e-bigger #temp .e-multi-select-wrapper .e-chips > .e-chipcontent {
+    height: 46px;
+}
+
+.bootstrap.e-bigger #temp .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .valueTemp{
+    left: 0px;
+}

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

@@ -0,0 +1,20 @@
+
+    <div id="temp" class="control-styles">
+        <ejs-multiselect id='multi-template' [dataSource]='multidata' [fields]='multifields' [mode]='box' [placeholder]='multiwatermark'>
+            <ng-template #headerTemplate>
+                <div class="multihead"> <span class="multiphoto">Photo</span> <span style="margin-left:17px;">Employee Info</span></div>
+            </ng-template>
+            <ng-template #itemTemplate let-data>
+                <div><img class="multiempImage" src="assets/multiselect/template/{{data.Eimg}}.png" alt="employee" />
+                    <div class="multiename"> {{data.Name}} </div>
+                    <div class="multijob"> {{data.Job}} </div>
+                </div>
+            </ng-template>
+            <ng-template #valueTemplate let-data>
+                <div><img class="valueTemp" src="assets/multiselect/template/{{data.Eimg}}.png" alt="employee" />
+                    <div class="nameTemp"> {{data.Name}} </div>
+                </div>
+            </ng-template>
+        </ejs-multiselect>
+    </div>
+

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

@@ -0,0 +1,33 @@
+import { Component, ViewEncapsulation, ChangeDetectorRef } 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 {
+    constructor(private changeDetect: ChangeDetectorRef) {
+    }
+    ngAfterViewInit() {
+        this.changeDetect.detectChanges();
+    }
+    // define the JSON of data
+    public multidata: { [key: string]: Object }[] = [
+        { Name: 'Andrew Fuller', Eimg: '7', Job: 'Team Lead', Country: 'England' },
+        { Name: 'Anne Dodsworth', Eimg: '1', Job: 'Developer', Country: 'USA' },
+        { Name: 'Janet Leverling', Eimg: '3', Job: 'HR', Country: 'USA' },
+        { Name: 'Laura Callahan', Eimg: '2', Job: 'Product Manager', Country: 'USA' },
+        { Name: 'Margaret Peacock', Eimg: '6', Job: 'Developer', Country: 'USA' },
+        { Name: 'Michael Suyama', Eimg: '9', Job: 'Team Lead', Country: 'USA' },
+        { Name: 'Nancy Davolio', Eimg: '4', Job: 'Product Manager', Country: 'USA' },
+        { Name: 'Robert King', Eimg: '8', Job: 'Developer ', Country: 'England' },
+        { Name: 'Steven Buchanan', Eimg: '10', Job: 'CEO', Country: 'England' }
+    ];
+    // maps the appropriate column to fields property
+    public multifields: Object = { text: 'Name', value: 'Eimg' };
+    //set the placeholder to MultiSelect input
+    public multiwatermark: string = 'Select employees';
+    // set the type of mode for how to visualized the selected items in input element.
+    public box: string = 'Box';
+}

package/schematics/generators/multiselect-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/multiselect-template/schema.js

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

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

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

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

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

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

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

package/schematics/generators/multiselect-template-driven/sample-details.ts

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

package/schematics/generators/multiselect-template-driven/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-template-driven/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,24 @@
+
+        
+            <form #form="ngForm" class='box-form'>
+                <div class="form-group">
+                    <ejs-multiselect required #book='ngModel' name="skillname" [(ngModel)]='autoskillname' allowCustom=false [dataSource]='autoSkillsetData' [placeholder]='autoDrivenPlaceholder'>
+                    </ejs-multiselect>
+                    <div *ngIf="book.invalid && (book.dirty || book.touched)"
+                     class="alert alert-danger">
+                        <div *ngIf="book.errors.required">
+                        BookName is required.
+                        </div>
+                    </div>
+                </div>
+            
+                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                        <button ej-button [disabled]="!form.valid">Submit</button>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
+                        <button ej-button (click)="onreset($event)" type="reset" [disabled]="!form.valid">Reset</button>
+                    </div>
+           
+            </form>
+      
+   

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

@@ -0,0 +1,30 @@
+/**
+ * MultiSelect Template Driven 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 {
+    public autoSkillsetData: string[] = [
+        'ASP.NET', 'ActionScript', 'Basic',
+        'C++' , 'C#' , 'dBase' , 'Delphi' ,
+        'ESPOL' , 'F#' , 'FoxPro' , 'Java',
+        'J#' , 'Lisp' , 'Logo' , 'PHP'
+    ];
+    public autoDrivenPlaceholder: String = 'Select book';
+
+    public autoskillname: string =  null;
+
+    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-template-driven/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-template-driven/schema.js

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